diff --git a/packages/twenty-front/.eslintrc.cjs b/packages/twenty-front/.eslintrc.cjs index 35782f8a4..5f695e56e 100644 --- a/packages/twenty-front/.eslintrc.cjs +++ b/packages/twenty-front/.eslintrc.cjs @@ -22,15 +22,15 @@ module.exports = { parserOptions: { project: ['packages/twenty-front/tsconfig.*.json'], }, - plugins: ['project-structure'], + // plugins: ['project-structure'], settings: { - 'project-structure/folder-structure-config-path': path.join( - __dirname, - 'folderStructure.json', - ), + // 'project-structure/folder-structure-config-path': path.join( + // __dirname, + // 'folderStructure.json', + // ), }, rules: { - 'project-structure/folder-structure': 'error', + // 'project-structure/folder-structure': 'error', /* Uncomment this rule when we have a way to work on 'lingui/no-unlocalized-strings': [ diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx index 9e1798f83..cf43f4f5f 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx @@ -100,6 +100,10 @@ const StyledAddFieldButtonContentContainer = styled.div` width: 100%; `; +const StyledLabelContainer = styled.div` + min-height: 17px; +`; + export const WorkflowEditActionFormBuilder = ({ action, actionOptions, @@ -187,7 +191,9 @@ export const WorkflowEditActionFormBuilder = ({ {formData.map((field) => ( - {field.label ? {field.label} : null} + + {field.label || ''} + setHoveredField(field.id)} diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx index 07936ecdc..2607c967b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx @@ -9,7 +9,6 @@ import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow- import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; -import camelCase from 'lodash.camelcase'; import { IconSettingsAutomation, IconX } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; @@ -64,20 +63,6 @@ export const WorkflowEditActionFormFieldSettings = ({ onClose, }: WorkflowEditActionFormFieldSettingsProps) => { const theme = useTheme(); - const onSubFieldUpdate = (fieldName: string, value: any) => { - if (fieldName === 'label') { - onChange({ - ...field, - name: camelCase(value), - label: value, - }); - } else { - onChange({ - ...field, - [fieldName]: value, - }); - } - }; return ( @@ -119,15 +104,13 @@ export const WorkflowEditActionFormFieldSettings = ({ name, label, settings, + placeholder: '', }); }} defaultValue={field.type} /> - + ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsByType.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsByType.tsx index dd76e3ff4..c46b01f6e 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsByType.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsByType.tsx @@ -11,46 +11,26 @@ export const WorkflowFormFieldSettingsByType = ({ onChange, }: { field: WorkflowFormActionField; - onChange: (fieldName: string, value: unknown) => void; + onChange: (updatedField: WorkflowFormActionField) => void; }) => { switch (field.type) { case FieldMetadataType.TEXT: return ( - { - onChange(fieldName, value); - }} - /> + ); case FieldMetadataType.NUMBER: return ( - { - onChange(fieldName, value); - }} - /> + ); case FieldMetadataType.DATE: return ( - { - onChange(fieldName, value); - }} - /> + ); case 'RECORD': return ( { - onChange(fieldName, value); - }} + field={field} + onChange={onChange} /> ); default: diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsDate.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsDate.tsx index 268d64aee..f84a93aa3 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsDate.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsDate.tsx @@ -1,26 +1,32 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; +import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; +import camelCase from 'lodash.camelcase'; import { FieldMetadataType } from 'twenty-shared/types'; type WorkflowFormFieldSettingsDateProps = { - label?: string; - onChange: (fieldName: string, value: string | null) => void; + field: WorkflowFormActionField; + onChange: (updatedField: WorkflowFormActionField) => void; }; export const WorkflowFormFieldSettingsDate = ({ - label, + field, onChange, }: WorkflowFormFieldSettingsDateProps) => { return ( Label { - onChange('label', newLabel); + onChange={(newLabel: string) => { + onChange({ + ...field, + label: newLabel, + name: camelCase(newLabel), + }); }} - defaultValue={label} + defaultValue={field.label} placeholder={getDefaultFormFieldSettings(FieldMetadataType.DATE).label} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx index 2cc2b9375..ca7bd7b57 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx @@ -1,14 +1,15 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; +import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; import styled from '@emotion/styled'; +import camelCase from 'lodash.camelcase'; import { FieldMetadataType } from 'twenty-shared/types'; type WorkflowFormFieldSettingsNumberProps = { - label?: string; - placeholder?: string; - onChange: (fieldName: string, value: string | null) => void; + field: WorkflowFormActionField; + onChange: (updatedField: WorkflowFormActionField) => void; }; const StyledContainer = styled.div` @@ -18,8 +19,7 @@ const StyledContainer = styled.div` `; export const WorkflowFormFieldSettingsNumber = ({ - label, - placeholder, + field, onChange, }: WorkflowFormFieldSettingsNumberProps) => { return ( @@ -27,10 +27,14 @@ export const WorkflowFormFieldSettingsNumber = ({ Label { - onChange('label', newLabel); + onChange={(newLabel: string) => { + onChange({ + ...field, + label: newLabel, + name: camelCase(newLabel), + }); }} - defaultValue={label} + defaultValue={field.label} placeholder={ getDefaultFormFieldSettings(FieldMetadataType.NUMBER).label } @@ -39,10 +43,13 @@ export const WorkflowFormFieldSettingsNumber = ({ Placeholder { - onChange('placeholder', newPlaceholder); + onChange={(newPlaceholder: string) => { + onChange({ + ...field, + placeholder: newPlaceholder, + }); }} - defaultValue={placeholder} + defaultValue={field.placeholder} placeholder={ getDefaultFormFieldSettings(FieldMetadataType.NUMBER).placeholder } diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx index 26a345a96..cdb26700b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx @@ -3,15 +3,16 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; import { Select } from '@/ui/input/components/Select'; +import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; import styled from '@emotion/styled'; +import camelCase from 'lodash.camelcase'; import { useIcons } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; type WorkflowFormFieldSettingsRecordPickerProps = { - label?: string; - settings?: Record; - onChange: (fieldName: string, value: unknown) => void; + field: WorkflowFormActionField; + onChange: (updatedField: WorkflowFormActionField) => void; }; const StyledContainer = styled.div` @@ -21,8 +22,7 @@ const StyledContainer = styled.div` `; export const WorkflowFormFieldSettingsRecordPicker = ({ - label, - settings, + field, onChange, }: WorkflowFormFieldSettingsRecordPickerProps) => { const { getIcon } = useIcons(); @@ -43,13 +43,21 @@ export const WorkflowFormFieldSettingsRecordPicker = ({ dropdownId="workflow-form-field-settings-record-picker-object-name" label="Object" fullWidth - value={settings?.objectName} + value={field.settings?.objectName} emptyOption={{ label: 'Select an option', value: '' }} options={availableMetadata} onChange={(updatedObjectName) => { - onChange('settings', { - ...settings, - objectName: updatedObjectName, + onChange({ + ...field, + placeholder: `Select a ${ + activeObjectMetadataItems.find( + (item) => item.nameSingular === updatedObjectName, + )?.labelSingular || 'record' + }`, + settings: { + ...field.settings, + objectName: updatedObjectName, + }, }); }} withSearchInput @@ -58,10 +66,14 @@ export const WorkflowFormFieldSettingsRecordPicker = ({ Label { - onChange('label', newLabel); + onChange={(newLabel: string) => { + onChange({ + ...field, + label: newLabel, + name: camelCase(newLabel), + }); }} - defaultValue={label} + defaultValue={field.label} placeholder={getDefaultFormFieldSettings('RECORD').label} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx index 9962286f8..2483e02b4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx @@ -1,14 +1,15 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; +import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; import styled from '@emotion/styled'; +import camelCase from 'lodash.camelcase'; import { FieldMetadataType } from 'twenty-shared/types'; type WorkflowFormFieldSettingsTextProps = { - label?: string; - placeholder?: string; - onChange: (fieldName: string, value: string | null) => void; + field: WorkflowFormActionField; + onChange: (updatedField: WorkflowFormActionField) => void; }; const StyledContainer = styled.div` @@ -18,8 +19,7 @@ const StyledContainer = styled.div` `; export const WorkflowFormFieldSettingsText = ({ - label, - placeholder, + field, onChange, }: WorkflowFormFieldSettingsTextProps) => { return ( @@ -27,10 +27,14 @@ export const WorkflowFormFieldSettingsText = ({ Label { - onChange('label', newLabel); + onChange={(newLabel: string) => { + onChange({ + ...field, + label: newLabel, + name: camelCase(newLabel), + }); }} - defaultValue={label} + defaultValue={field.label} placeholder={ getDefaultFormFieldSettings(FieldMetadataType.TEXT).label } @@ -39,10 +43,13 @@ export const WorkflowFormFieldSettingsText = ({ Placeholder { - onChange('placeholder', newPlaceholder); + onChange={(newPlaceholder: string) => { + onChange({ + ...field, + placeholder: newPlaceholder, + }); }} - defaultValue={placeholder} + defaultValue={field.placeholder} placeholder={ getDefaultFormFieldSettings(FieldMetadataType.TEXT).placeholder } diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings.ts index 1a144517e..39b2502af 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings.ts @@ -31,7 +31,7 @@ export const getDefaultFormFieldSettings = (type: WorkflowFormFieldType) => { id: v4(), name: 'record', label: 'Record', - placeholder: `Select a record`, + placeholder: `Select a Company`, settings: { objectName: 'company', },