Wrap into input + use context + add email field

twentyhq · Oct 15, 2024 · 1330a1c · 1330a1c
1 parent 1492340
commit 1330a1c
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 126 deletions.
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx
@@ -1,21 +1,21 @@
+import { GMAIL_SEND_SCOPE } from '@/accounts/constants/GmailSendScope';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { Select, SelectOption } from '@/ui/input/components/Select';
 import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { WorkflowEditActionFormBase } from '@/workflow/components/WorkflowEditActionFormBase';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowSendEmailStep } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
 import { IconMail, IconPlus, isDefined } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
-import { Select, SelectOption } from '@/ui/input/components/Select';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { useRecoilValue } from 'recoil';
-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { workflowIdState } from '@/workflow/states/workflowIdState';
-import { GMAIL_SEND_SCOPE } from '@/accounts/constants/GmailSendScope';
 
 const StyledTriggerSettings = styled.div`
   padding: ${({ theme }) => theme.spacing(6)};
@@ -37,6 +37,7 @@ type WorkflowEditActionFormSendEmailProps =
 
 type SendEmailFormData = {
   connectedAccountId: string;
+  email: string;
   subject: string;
   body: string;
 };
@@ -53,6 +54,7 @@ export const WorkflowEditActionFormSendEmail = (
   const form = useForm<SendEmailFormData>({
     defaultValues: {
       connectedAccountId: '',
+      email: '',
       subject: '',
       body: '',
     },
@@ -83,10 +85,11 @@ export const WorkflowEditActionFormSendEmail = (
   useEffect(() => {
     form.setValue(
       'connectedAccountId',
-      props.action.settings.connectedAccountId ?? '',
+      props.action.settings.input.connectedAccountId ?? '',
     );
-    form.setValue('subject', props.action.settings.subject ?? '');
-    form.setValue('body', props.action.settings.body ?? '');
+    form.setValue('email', props.action.settings.input.email ?? '');
+    form.setValue('subject', props.action.settings.input.subject ?? '');
+    form.setValue('body', props.action.settings.input.body ?? '');
   }, [props.action.settings, form]);
 
   const saveAction = useDebouncedCallback(
@@ -99,9 +102,12 @@ export const WorkflowEditActionFormSendEmail = (
         ...props.action,
         settings: {
           ...props.action.settings,
-          connectedAccountId: formData.connectedAccountId,
-          subject: formData.subject,
-          body: formData.body,
+          input: {
+            connectedAccountId: formData.connectedAccountId,
+            email: formData.email,
+            subject: formData.subject,
+            body: formData.body,
+          },
         },
       });
 
@@ -134,12 +140,12 @@ export const WorkflowEditActionFormSendEmail = (
   };
 
   if (
-    isDefined(props.action.settings.connectedAccountId) &&
-    props.action.settings.connectedAccountId !== ''
+    isDefined(props.action.settings.input.connectedAccountId) &&
+    props.action.settings.input.connectedAccountId !== ''
   ) {
     filter.or.push({
       id: {
-        eq: props.action.settings.connectedAccountId,
+        eq: props.action.settings.input.connectedAccountId,
       },
     });
   }
@@ -198,6 +204,21 @@ export const WorkflowEditActionFormSendEmail = (
               />
             )}
           />
+          <Controller
+            name="email"
+            control={form.control}
+            render={({ field }) => (
+              <TextInput
+                label="Email"
+                placeholder="Enter receiver email (use {{variable}} for dynamic content)"
+                value={field.value}
+                onChange={(email) => {
+                  field.onChange(email);
+                  handleSave();
+                }}
+              />
+            )}
+          />
           <Controller
             name="subject"
             control={form.control}

diff --git a/...twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx b/...twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
@@ -54,7 +54,7 @@ export const WorkflowEditActionFormServerlessFunction = (
           dropdownId="workflow-edit-action-function"
           label="Function"
           fullWidth
-          value={props.action.settings.serverlessFunctionId}
+          value={props.action.settings.input.serverlessFunctionId}
           options={availableFunctions}
           disabled={props.readonly}
           onChange={(updatedFunction) => {
@@ -66,7 +66,9 @@ export const WorkflowEditActionFormServerlessFunction = (
               ...props.action,
               settings: {
                 ...props.action.settings,
-                serverlessFunctionId: updatedFunction,
+                input: {
+                  serverlessFunctionId: updatedFunction,
+                },
               },
             });
           }}

diff --git a/packages/twenty-front/src/modules/workflow/types/Workflow.ts b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
@@ -10,13 +10,18 @@ type BaseWorkflowStepSettings = {
 };
 
 export type WorkflowCodeStepSettings = BaseWorkflowStepSettings & {
-  serverlessFunctionId: string;
+  input: {
+    serverlessFunctionId: string;
+  };
 };
 
 export type WorkflowSendEmailStepSettings = BaseWorkflowStepSettings & {
-  connectedAccountId: string;
-  subject?: string;
-  body?: string;
+  input: {
+    connectedAccountId: string;
+    email: string;
+    subject?: string;
+    body?: string;
+  };
 };
 
 type BaseWorkflowStep = {

diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/addCreateStepNodes.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/addCreateStepNodes.test.ts
@@ -21,7 +21,9 @@ describe('addCreateStepNodes', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
       {
@@ -34,7 +36,9 @@ describe('addCreateStepNodes', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
     ];

diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts
@@ -42,7 +42,9 @@ describe('generateWorkflowDiagram', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
       {
@@ -55,7 +57,9 @@ describe('generateWorkflowDiagram', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
     ];
@@ -96,7 +100,9 @@ describe('generateWorkflowDiagram', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
       {
@@ -109,7 +115,9 @@ describe('generateWorkflowDiagram', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
       },
     ];

diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/getWorkflowVersionDiagram.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/getWorkflowVersionDiagram.test.ts
@@ -80,7 +80,9 @@ describe('getWorkflowVersionDiagram', () => {
               retryOnFailure: { value: true },
               continueOnFailure: { value: false },
             },
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            input: {
+              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            },
           },
           type: 'CODE',
           valid: true,

diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/insertStep.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/insertStep.test.ts
@@ -25,7 +25,9 @@ describe('insertStep', () => {
           retryOnFailure: { value: true },
           continueOnFailure: { value: false },
         },
-        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        input: {
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
       },
       type: 'CODE',
       valid: true,
@@ -63,7 +65,9 @@ describe('insertStep', () => {
           retryOnFailure: { value: true },
           continueOnFailure: { value: false },
         },
-        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        input: {
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
       },
       type: 'CODE',
       valid: true,
@@ -95,7 +99,9 @@ describe('insertStep', () => {
               retryOnFailure: { value: true },
               continueOnFailure: { value: false },
             },
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            input: {
+              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            },
           },
           type: 'CODE',
           valid: true,
@@ -108,7 +114,9 @@ describe('insertStep', () => {
               retryOnFailure: { value: true },
               continueOnFailure: { value: false },
             },
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            input: {
+              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            },
           },
           type: 'CODE',
           valid: true,
@@ -129,7 +137,9 @@ describe('insertStep', () => {
           retryOnFailure: { value: true },
           continueOnFailure: { value: false },
         },
-        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        input: {
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
       },
       type: 'CODE',
       valid: true,
@@ -165,7 +175,9 @@ describe('insertStep', () => {
               retryOnFailure: { value: true },
               continueOnFailure: { value: false },
             },
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            input: {
+              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            },
           },
           type: 'CODE',
           valid: true,
@@ -178,7 +190,9 @@ describe('insertStep', () => {
               retryOnFailure: { value: true },
               continueOnFailure: { value: false },
             },
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            input: {
+              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+            },
           },
           type: 'CODE',
           valid: true,
@@ -199,7 +213,9 @@ describe('insertStep', () => {
           retryOnFailure: { value: true },
           continueOnFailure: { value: false },
         },
-        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        input: {
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
       },
       type: 'CODE',
       valid: true,

diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/removeStep.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/removeStep.test.ts
@@ -10,7 +10,9 @@ it('returns a deep copy of the provided steps array instead of mutating it', ()
         retryOnFailure: { value: true },
         continueOnFailure: { value: false },
       },
-      serverlessFunctionId: 'first',
+      input: {
+        serverlessFunctionId: 'first',
+      },
     },
     type: 'CODE',
     valid: true,
@@ -47,7 +49,9 @@ it('removes a step in a non-empty steps array', () => {
         retryOnFailure: { value: true },
         continueOnFailure: { value: false },
       },
-      serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+      input: {
+        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+      },
     },
     type: 'CODE',
     valid: true,
@@ -67,7 +71,9 @@ it('removes a step in a non-empty steps array', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
         type: 'CODE',
         valid: true,
@@ -81,7 +87,9 @@ it('removes a step in a non-empty steps array', () => {
             retryOnFailure: { value: true },
             continueOnFailure: { value: false },
           },
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          input: {
+            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+          },
         },
         type: 'CODE',
         valid: true,