diff --git a/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts b/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts index 116034053..030de9463 100644 --- a/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts +++ b/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts @@ -92,6 +92,7 @@ export const workflowFormActionSettingsSchema = type: z.union([ z.literal(FieldMetadataType.TEXT), z.literal(FieldMetadataType.NUMBER), + z.literal(FieldMetadataType.DATE), z.literal('RECORD'), ]), placeholder: z.string().optional(), 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 6a505446c..742f811ed 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 @@ -2,6 +2,7 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput'; import { InputLabel } from '@/ui/input/components/InputLabel'; import { WorkflowFormFieldSettingsByType } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsByType'; +import { FORM_SELECT_FIELD_TYPE_OPTIONS } from '@/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions'; import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { WorkflowFormFieldType } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType'; import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; @@ -9,15 +10,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import camelCase from 'lodash.camelcase'; -import { FieldMetadataType } from 'twenty-shared/types'; -import { - IconSettingsAutomation, - IconX, - IllustrationIconNumbers, - IllustrationIconOneToMany, - IllustrationIconText, - LightIconButton, -} from 'twenty-ui'; +import { IconSettingsAutomation, IconX, LightIconButton } from 'twenty-ui'; type WorkflowEditActionFormFieldSettingsProps = { field: WorkflowFormActionField; @@ -109,31 +102,7 @@ export const WorkflowEditActionFormFieldSettings = ({ Type { if (newType === null) { return; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx index 37b8cc210..3efea748d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx @@ -158,7 +158,7 @@ export const WorkflowEditActionFormFiller = ({ value, }); }} - defaultValue={field.value ?? ''} + defaultValue={field.value} readonly={actionOptions.readonly} placeholder={ field.placeholder ?? 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 9c41406d3..dd76e3ff4 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 @@ -1,3 +1,4 @@ +import { WorkflowFormFieldSettingsDate } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsDate'; import { WorkflowFormFieldSettingsRecordPicker } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker'; import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField'; import { FieldMetadataType } from 'twenty-shared/types'; @@ -33,6 +34,15 @@ export const WorkflowFormFieldSettingsByType = ({ }} /> ); + case FieldMetadataType.DATE: + return ( + { + onChange(fieldName, value); + }} + /> + ); case 'RECORD': return ( void; +}; + +export const WorkflowFormFieldSettingsDate = ({ + label, + onChange, +}: WorkflowFormFieldSettingsDateProps) => { + return ( + + Label + { + onChange('label', newLabel); + }} + defaultValue={label} + placeholder={getDefaultFormFieldSettings(FieldMetadataType.DATE).label} + /> + + ); +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx index 698c96b3d..2a66b99bd 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx @@ -97,8 +97,8 @@ export const SingleRecordFieldSettings: Story = { args: { field: { id: 'field-3', - name: 'record', - label: 'Record', + name: 'company', + label: 'Company', type: 'RECORD', settings: { objectName: 'company', @@ -121,3 +121,27 @@ export const SingleRecordFieldSettings: Story = { expect(args.onClose).toHaveBeenCalled(); }, }; + +export const DateFieldSettings: Story = { + args: { + field: { + id: 'field-4', + name: 'date', + label: 'Date Field', + type: FieldMetadataType.DATE, + placeholder: 'Enter date', + settings: {}, + }, + onClose: fn(), + }, + play: async ({ canvasElement, args }) => { + const canvas = within(canvasElement); + + const typeSelect = await canvas.findByText('Date'); + expect(typeSelect).toBeVisible(); + + const closeButton = await canvas.findByTestId('close-button'); + await userEvent.click(closeButton); + expect(args.onClose).toHaveBeenCalled(); + }, +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx index cc2ba8ed3..79c9a07cc 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx @@ -64,6 +64,14 @@ const mockAction: WorkflowFormAction = { objectName: 'company', }, }, + { + id: 'field-4', + name: 'date', + label: 'Date', + type: FieldMetadataType.DATE, + placeholder: 'mm/dd/yyyy', + settings: {}, + }, ], outputSchema: {}, errorHandlingOptions: { @@ -91,6 +99,9 @@ export const Default: Story = { const recordField = await canvas.findByText('Record'); expect(recordField).toBeVisible(); + + const dateField = await canvas.findByText('Date'); + expect(dateField).toBeVisible(); }, }; @@ -110,6 +121,9 @@ export const ReadonlyMode: Story = { const numberInput = await canvas.findByPlaceholderText('Enter number'); expect(numberInput).toBeDisabled(); + const dateInput = await canvas.findByPlaceholderText('mm/dd/yyyy'); + expect(dateInput).toBeDisabled(); + const submitButton = await canvas.queryByText('Submit'); expect(submitButton).not.toBeInTheDocument(); }, diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions.ts new file mode 100644 index 000000000..c9f093ce1 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions.ts @@ -0,0 +1,34 @@ +import { WorkflowFormFieldType } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType'; +import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings'; +import { FieldMetadataType } from 'twenty-shared/types'; +import { + IllustrationIconCalendarEvent, + IllustrationIconNumbers, + IllustrationIconOneToMany, + IllustrationIconText, + SelectOption, +} from 'twenty-ui'; + +export const FORM_SELECT_FIELD_TYPE_OPTIONS: SelectOption[] = + [ + { + label: getDefaultFormFieldSettings(FieldMetadataType.TEXT).label, + value: FieldMetadataType.TEXT, + Icon: IllustrationIconText, + }, + { + label: getDefaultFormFieldSettings(FieldMetadataType.NUMBER).label, + value: FieldMetadataType.NUMBER, + Icon: IllustrationIconNumbers, + }, + { + label: getDefaultFormFieldSettings(FieldMetadataType.DATE).label, + value: FieldMetadataType.DATE, + Icon: IllustrationIconCalendarEvent, + }, + { + label: getDefaultFormFieldSettings('RECORD').label, + value: 'RECORD', + Icon: IllustrationIconOneToMany, + }, + ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType.ts index 61cc2c7a3..330f6d7b8 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormFieldType.ts @@ -3,4 +3,5 @@ import { FieldMetadataType } from 'twenty-shared/types'; export type WorkflowFormFieldType = | FieldMetadataType.TEXT | FieldMetadataType.NUMBER + | FieldMetadataType.DATE | 'RECORD'; 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 58f607f55..dc9fbe28e 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 @@ -19,6 +19,13 @@ export const getDefaultFormFieldSettings = (type: WorkflowFormFieldType) => { label: 'Number', placeholder: '1000', }; + case FieldMetadataType.DATE: + return { + id: v4(), + name: 'date', + label: 'Date', + placeholder: 'mm/dd/yyyy', + }; case 'RECORD': return { id: v4(), diff --git a/packages/twenty-server/src/modules/workflow/workflow-builder/workflow-schema/utils/__tests__/generate-fake-form-response.spec.ts b/packages/twenty-server/src/modules/workflow/workflow-builder/workflow-schema/utils/__tests__/generate-fake-form-response.spec.ts index c6f24cb03..c7209d92b 100644 --- a/packages/twenty-server/src/modules/workflow/workflow-builder/workflow-schema/utils/__tests__/generate-fake-form-response.spec.ts +++ b/packages/twenty-server/src/modules/workflow/workflow-builder/workflow-schema/utils/__tests__/generate-fake-form-response.spec.ts @@ -40,6 +40,13 @@ describe('generateFakeFormResponse', () => { objectName: 'company', }, }, + { + id: '96939213-49ac-4dee-949d-56e6c7be98e9', + name: 'date', + type: FieldMetadataType.DATE, + label: 'Date', + placeholder: 'mm/dd/yyyy', + }, ]; const result = await generateFakeFormResponse({ @@ -79,6 +86,13 @@ describe('generateFakeFormResponse', () => { }, }, }, + date: { + isLeaf: true, + label: 'Date', + type: FieldMetadataType.DATE, + value: '01/23/2025', + icon: undefined, + }, }); }); }); diff --git a/packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/form/types/workflow-form-field-type.type.ts b/packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/form/types/workflow-form-field-type.type.ts index 61cc2c7a3..330f6d7b8 100644 --- a/packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/form/types/workflow-form-field-type.type.ts +++ b/packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/form/types/workflow-form-field-type.type.ts @@ -3,4 +3,5 @@ import { FieldMetadataType } from 'twenty-shared/types'; export type WorkflowFormFieldType = | FieldMetadataType.TEXT | FieldMetadataType.NUMBER + | FieldMetadataType.DATE | 'RECORD';