Remove react hook form in send email action (#9130)

- remove react hook form
- put back multiline for body

packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx

@@ -99,13 +99,6 @@ export const WorkflowEditActionFormCreateRecord = ({
     saveAction(newFormData);
   };
 
-  useEffect(() => {
-    setFormData({
-      objectName: action.settings.input.objectName,
-      ...action.settings.input.objectRecord,
-    });
-  }, [action.settings.input]);
-
   const saveAction = useDebouncedCallback(
     async (formData: CreateRecordFormData) => {
       if (actionOptions.readonly === true) {

packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx

@@ -1,7 +1,7 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
 import { WorkflowSingleRecordPicker } from '@/workflow/components/WorkflowSingleRecordPicker';
+import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
 import { WorkflowDeleteRecordAction } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
@@ -12,9 +12,9 @@ import {
   useIcons,
 } from 'twenty-ui';
 
+import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 
 type WorkflowEditActionFormDeleteRecordProps = {
   action: WorkflowDeleteRecordAction;
@@ -69,13 +69,6 @@ export const WorkflowEditActionFormDeleteRecord = ({
     saveAction(newFormData);
   };
 
-  useEffect(() => {
-    setFormData({
-      objectName: action.settings.input.objectName,
-      objectRecordId: action.settings.input.objectRecordId,
-    });
-  }, [action.settings.input]);
-
   const selectedObjectMetadataItemNameSingular = formData.objectName;
 
   const selectedObjectMetadataItem = activeObjectMetadataItems.find(

packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx

@@ -5,17 +5,17 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { Select, SelectOption } from '@/ui/input/components/Select';
+import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
 import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowSendEmailAction } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
 import { IconMail, IconPlus, isDefined } from 'twenty-ui';
+import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 
 type WorkflowEditActionFormSendEmailProps = {
   action: WorkflowSendEmailAction;
@@ -47,14 +47,11 @@ export const WorkflowEditActionFormSendEmail = ({
   const workflowId = useRecoilValue(workflowIdState);
   const redirectUrl = `/object/workflow/${workflowId}`;
 
-  const form = useForm<SendEmailFormData>({
+  const [formData, setFormData] = useState<SendEmailFormData>({
-    defaultValues: {
+    connectedAccountId: action.settings.input.connectedAccountId,
-      connectedAccountId: '',
+    email: action.settings.input.email,
-      email: '',
+    subject: action.settings.input.subject ?? '',
-      subject: '',
+    body: action.settings.input.body ?? '',
-      body: '',
-    },
-    disabled: actionOptions.readonly,
   });
 
   const checkConnectedAccountScopes = async (
@@ -78,16 +75,6 @@ export const WorkflowEditActionFormSendEmail = ({
     }
   };
 
-  useEffect(() => {
-    form.setValue(
-      'connectedAccountId',
-      action.settings.input.connectedAccountId ?? '',
-    );
-    form.setValue('email', action.settings.input.email ?? '');
-    form.setValue('subject', action.settings.input.subject ?? '');
-    form.setValue('body', action.settings.input.body ?? '');
-  }, [action.settings, form]);
-
   const saveAction = useDebouncedCallback(
     async (formData: SendEmailFormData, checkScopes = false) => {
       if (actionOptions.readonly === true) {
@@ -120,10 +107,19 @@ export const WorkflowEditActionFormSendEmail = ({
     };
   }, [saveAction]);
 
-  const handleSave = (checkScopes = false) =>
+  const handleFieldChange = (
-    form.handleSubmit((formData: SendEmailFormData) =>
+    fieldName: keyof SendEmailFormData,
-      saveAction(formData, checkScopes),
+    updatedValue: JsonValue,
-    )();
+  ) => {
+    const newFormData: SendEmailFormData = {
+      ...formData,
+      [fieldName]: updatedValue,
+    };
+
+    setFormData(newFormData);
+
+    saveAction(newFormData);
+  };
 
   const filter: { or: object[] } = {
     or: [
@@ -190,83 +186,56 @@ export const WorkflowEditActionFormSendEmail = ({
           headerType="Email"
         />
         <WorkflowStepBody>
-          <Controller
+          <Select
-            name="connectedAccountId"
+            dropdownId="select-connected-account-id"
-            control={form.control}
+            label="Account"
-            render={({ field }) => (
+            fullWidth
-              <Select
+            emptyOption={emptyOption}
-                dropdownId="select-connected-account-id"
+            value={formData.connectedAccountId}
-                label="Account"
+            options={connectedAccountOptions}
-                fullWidth
+            callToActionButton={{
-                emptyOption={emptyOption}
+              onClick: () =>
-                value={field.value}
+                triggerApisOAuth('google', {
-                options={connectedAccountOptions}
+                  redirectLocation: redirectUrl,
-                callToActionButton={{
+                }),
-                  onClick: () =>
+              Icon: IconPlus,
-                    triggerApisOAuth('google', {
+              text: 'Add account',
-                      redirectLocation: redirectUrl,
+            }}
-                    }),
+            onChange={(connectedAccountId) => {
-                  Icon: IconPlus,
+              handleFieldChange('connectedAccountId', connectedAccountId);
-                  text: 'Add account',
+            }}
-                }}
+            disabled={actionOptions.readonly}
-                onChange={(connectedAccountId) => {
-                  field.onChange(connectedAccountId);
-                  handleSave(true);
-                }}
-                disabled={actionOptions.readonly}
-              />
-            )}
           />
-          <Controller
+          <FormTextFieldInput
-            name="email"
+            label="Email"
-            control={form.control}
+            placeholder="Enter receiver email"
-            render={({ field }) => (
+            readonly={actionOptions.readonly}
-              <FormTextFieldInput
+            defaultValue={formData.email}
-                label="Email"
+            onPersist={(email) => {
-                placeholder="Enter receiver email"
+              handleFieldChange('email', email);
-                readonly={actionOptions.readonly}
+            }}
-                defaultValue={field.value}
+            VariablePicker={WorkflowVariablePicker}
-                onPersist={(value) => {
-                  field.onChange(value);
-                  handleSave();
-                }}
-                VariablePicker={WorkflowVariablePicker}
-              />
-            )}
           />
-          <Controller
+          <FormTextFieldInput
-            name="subject"
+            label="Subject"
-            control={form.control}
+            placeholder="Enter email subject"
-            render={({ field }) => (
+            readonly={actionOptions.readonly}
-              <FormTextFieldInput
+            defaultValue={formData.subject}
-                label="Subject"
+            onPersist={(subject) => {
-                placeholder="Enter email subject"
+              handleFieldChange('subject', subject);
-                readonly={actionOptions.readonly}
+            }}
-                defaultValue={field.value}
+            VariablePicker={WorkflowVariablePicker}
-                onPersist={(value) => {
-                  field.onChange(value);
-                  handleSave();
-                }}
-                VariablePicker={WorkflowVariablePicker}
-              />
-            )}
           />
-          <Controller
+          <FormTextFieldInput
-            name="body"
+            label="Body"
-            control={form.control}
+            placeholder="Enter email body"
-            render={({ field }) => (
+            readonly={actionOptions.readonly}
-              <FormTextFieldInput
+            defaultValue={formData.body}
-                label="Body"
+            onPersist={(body) => {
-                placeholder="Enter email body"
+              handleFieldChange('body', body);
-                readonly={actionOptions.readonly}
+            }}
-                defaultValue={field.value}
+            VariablePicker={WorkflowVariablePicker}
-                onPersist={(value) => {
+            multiline
-                  field.onChange(value);
-                  handleSave();
-                }}
-                VariablePicker={WorkflowVariablePicker}
-              />
-            )}
           />
         </WorkflowStepBody>
       </>

packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx

@@ -91,15 +91,6 @@ export const WorkflowEditActionFormUpdateRecord = ({
     saveAction(newFormData);
   };
 
-  useEffect(() => {
-    setFormData({
-      objectName: action.settings.input.objectName,
-      objectRecordId: action.settings.input.objectRecordId,
-      fieldsToUpdate: action.settings.input.fieldsToUpdate ?? [],
-      ...action.settings.input.objectRecord,
-    });
-  }, [action.settings.input]);
-
   const selectedObjectMetadataItemNameSingular = formData.objectName;
 
   const selectedObjectMetadataItem = activeObjectMetadataItems.find(