From d47048dcd6fe81eede090147f01adfaef2664583 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 22 Oct 2024 20:49:20 +0800
Subject: [PATCH] Update auth hooks to allow selection of fns that return void
 (#30022)

* Update auth hooks to allow selection of fns that return void

* Update for only send email hook
---
 .../interfaces/Auth/Hooks/CreateHookSheet.tsx | 34 ++++++++++++-------
 .../studio/components/ui/FunctionSelector.tsx |  6 ++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index ca32ae51599..cfc81587e92 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -123,6 +123,11 @@ export const CreateHookSheet = ({
     [title]
   )
 
+  const supportedReturnTypes =
+    definition.enabledKey === 'HOOK_SEND_EMAIL_ENABLED'
+      ? ['json', 'jsonb', 'void']
+      : ['json', 'jsonb']
+
   const hook: Hook = useMemo(() => {
     return {
       ...definition,
@@ -288,20 +293,21 @@ export const CreateHookSheet = ({
           </div>
         </SheetHeader>
         <Separator />
-        <SheetSection className="overflow-auto flex-grow">
+        <SheetSection className="overflow-auto flex-grow px-0">
           <Form_Shadcn_ {...form}>
             <form
               id={FORM_ID}
-              className="space-y-6 w-full py-8 flex-1"
+              className="space-y-6 w-full py-5 flex-1"
               onSubmit={form.handleSubmit(onSubmit)}
             >
               <FormField_Shadcn_
                 key="enabled"
-                control={form.control}
                 name="enabled"
+                control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
                     layout="flex"
+                    className="px-5"
                     label={`Enable ${values.hookType}`}
                     description={
                       values.hookType === 'Send SMS hook'
@@ -325,7 +331,7 @@ export const CreateHookSheet = ({
                   control={form.control}
                   name="selectedType"
                   render={({ field }) => (
-                    <FormItemLayout label="Hook type">
+                    <FormItemLayout label="Hook type" className="px-5">
                       <FormControl_Shadcn_>
                         <RadioGroupStacked
                           value={field.value}
@@ -353,7 +359,7 @@ export const CreateHookSheet = ({
               )}
               {values.selectedType === 'postgres' ? (
                 <>
-                  <div className="grid grid-cols-2 gap-8">
+                  <div className="grid grid-cols-2 gap-8 px-5">
                     <FormField_Shadcn_
                       key="postgresValues.schema"
                       control={form.control}
@@ -361,7 +367,7 @@ export const CreateHookSheet = ({
                       render={({ field }) => (
                         <FormItemLayout
                           label="Postgres Schema"
-                          description="Postgres schema where the function is defined."
+                          description="Postgres schema where the function is defined"
                         >
                           <FormControl_Shadcn_>
                             <SchemaSelector
@@ -381,8 +387,8 @@ export const CreateHookSheet = ({
                       name="postgresValues.functionName"
                       render={({ field }) => (
                         <FormItemLayout
-                          label="Function name"
-                          description="Postgres function which will be called by Supabase Auth each time the hook is triggered."
+                          label="Postgres function"
+                          description="This function will be called by Supabase Auth each time the hook is triggered"
                         >
                           <FormControl_Shadcn_>
                             <FunctionSelector
@@ -392,7 +398,7 @@ export const CreateHookSheet = ({
                               onChange={field.onChange}
                               disabled={field.disabled}
                               filterFunction={(func) => {
-                                if (func.return_type === 'json' || func.return_type === 'jsonb') {
+                                if (supportedReturnTypes.includes(func.return_type)) {
                                   const { value } = convertArgumentTypes(func.argument_types)
                                   if (value.length !== 1) return false
                                   return value[0].type === 'json' || value[0].type === 'jsonb'
@@ -403,7 +409,11 @@ export const CreateHookSheet = ({
                                 <span>
                                   No function with a single JSON/B argument
                                   <br />
-                                  and JSON/B return type found in this schema.
+                                  and JSON/B
+                                  {definition.enabledKey === 'HOOK_SEND_EMAIL_ENABLED'
+                                    ? ' or void'
+                                    : ''}{' '}
+                                  return type found in this schema.
                                 </span>
                               }
                             />
@@ -413,8 +423,8 @@ export const CreateHookSheet = ({
                     />
                   </div>
                   <div className="h-72 w-full gap-3 flex flex-col">
-                    <p className="text-sm text-foreground-light">
-                      The following statements will be executed on the function:
+                    <p className="text-sm text-foreground-light px-5">
+                      The following statements will be executed on the selected function:
                     </p>
                     <CodeEditor
                       id="postgres-hook-editor"
diff --git a/apps/studio/components/ui/FunctionSelector.tsx b/apps/studio/components/ui/FunctionSelector.tsx
index 136f2f3b42f..eb39782dc2b 100644
--- a/apps/studio/components/ui/FunctionSelector.tsx
+++ b/apps/studio/components/ui/FunctionSelector.tsx
@@ -112,7 +112,7 @@ const FunctionSelector = ({
                 </div>
               ) : (
                 <div className="w-full flex gap-1">
-                  <p className="text-foreground-lighter">Choose a function...</p>
+                  <p className="text-foreground-lighter">Select a function</p>
                 </div>
               )}
             </Button>
@@ -124,7 +124,7 @@ const FunctionSelector = ({
                 <CommandEmpty_Shadcn_>No functions found</CommandEmpty_Shadcn_>
                 <CommandGroup_Shadcn_>
                   <ScrollArea className={(functions || []).length > 7 ? 'h-[210px]' : ''}>
-                    {!(functions || []).length && (
+                    {!functions.length && (
                       <CommandItem_Shadcn_
                         key="no-function-found"
                         disabled={true}
@@ -133,7 +133,7 @@ const FunctionSelector = ({
                         {noResultsLabel}
                       </CommandItem_Shadcn_>
                     )}
-                    {functions?.map((func) => (
+                    {functions.map((func) => (
                       <CommandItem_Shadcn_
                         key={func.id}
                         value={func.name.replaceAll('"', '')}