From 355169aa536e68efa46caee07a9b9c9cd6ec5bcc Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Wed, 18 Dec 2024 17:35:49 +0100 Subject: [PATCH 1/2] Add multiline + remove react hook form --- .../WorkflowEditActionFormSendEmail.tsx | 172 ++++++++---------- 1 file changed, 75 insertions(+), 97 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx index 74e0bde41a13..9ef2a01ca5b6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx +++ b/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 { Controller, useForm } from 'react-hook-form'; +import { useEffect, useState } from 'react'; 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({ - defaultValues: { - connectedAccountId: '', - email: '', - subject: '', - body: '', - }, - disabled: actionOptions.readonly, + const [formData, setFormData] = useState({ + connectedAccountId: action.settings.input.connectedAccountId, + email: action.settings.input.email, + subject: action.settings.input.subject ?? '', + body: action.settings.input.body ?? '', }); const checkConnectedAccountScopes = async ( @@ -79,14 +76,13 @@ 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]); + setFormData({ + connectedAccountId: action.settings.input.connectedAccountId, + email: action.settings.input.email, + subject: action.settings.input.subject ?? '', + body: action.settings.input.body ?? '', + }); + }, [action.settings.input]); const saveAction = useDebouncedCallback( async (formData: SendEmailFormData, checkScopes = false) => { @@ -120,10 +116,19 @@ export const WorkflowEditActionFormSendEmail = ({ }; }, [saveAction]); - const handleSave = (checkScopes = false) => - form.handleSubmit((formData: SendEmailFormData) => - saveAction(formData, checkScopes), - )(); + const handleFieldChange = ( + fieldName: keyof SendEmailFormData, + updatedValue: JsonValue, + ) => { + const newFormData: SendEmailFormData = { + ...formData, + [fieldName]: updatedValue, + }; + + setFormData(newFormData); + + saveAction(newFormData); + }; const filter: { or: object[] } = { or: [ @@ -190,83 +195,56 @@ export const WorkflowEditActionFormSendEmail = ({ headerType="Email" /> - ( - + triggerApisOAuth('google', { + redirectLocation: redirectUrl, + }), + Icon: IconPlus, + text: 'Add account', + }} + onChange={(connectedAccountId) => { + handleFieldChange('connectedAccountId', connectedAccountId); + }} + disabled={actionOptions.readonly} /> - ( - { - field.onChange(value); - handleSave(); - }} - VariablePicker={WorkflowVariablePicker} - /> - )} + { + handleFieldChange('email', email); + }} + VariablePicker={WorkflowVariablePicker} /> - ( - { - field.onChange(value); - handleSave(); - }} - VariablePicker={WorkflowVariablePicker} - /> - )} + { + handleFieldChange('subject', subject); + }} + VariablePicker={WorkflowVariablePicker} /> - ( - { - field.onChange(value); - handleSave(); - }} - VariablePicker={WorkflowVariablePicker} - /> - )} + { + handleFieldChange('body', body); + }} + VariablePicker={WorkflowVariablePicker} + multiline /> From 12aacd18b21ea2eb1ef0ce21b6aa47e89a040fd9 Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Thu, 19 Dec 2024 10:32:57 +0100 Subject: [PATCH 2/2] Remove useEffects --- .../components/WorkflowEditActionFormCreateRecord.tsx | 7 ------- .../components/WorkflowEditActionFormDeleteRecord.tsx | 11 ++--------- .../components/WorkflowEditActionFormSendEmail.tsx | 9 --------- .../components/WorkflowEditActionFormUpdateRecord.tsx | 9 --------- 4 files changed, 2 insertions(+), 34 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx index 58a4ee1140b7..00eb79506162 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx +++ b/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) { diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx index a7bce5400516..19f8ee6cf3b7 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx +++ b/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( diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx index 9ef2a01ca5b6..3b8842f7c125 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx @@ -75,15 +75,6 @@ export const WorkflowEditActionFormSendEmail = ({ } }; - useEffect(() => { - setFormData({ - connectedAccountId: action.settings.input.connectedAccountId, - email: action.settings.input.email, - subject: action.settings.input.subject ?? '', - body: action.settings.input.body ?? '', - }); - }, [action.settings.input]); - const saveAction = useDebouncedCallback( async (formData: SendEmailFormData, checkScopes = false) => { if (actionOptions.readonly === true) { diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx index 6d3745e89370..2061a6900a1d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx +++ b/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(