Refacto form select input (#11426)

- small fixes on form design
- refacto form select input to use the existing select component

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx

@@ -9,7 +9,7 @@ const StyledWorkflowStepBody = styled.div`
   overflow-y: scroll;
   padding-block: ${({ theme }) => theme.spacing(4)};
   padding-inline: ${({ theme }) => theme.spacing(3)};
-  row-gap: ${({ theme }) => theme.spacing(6)};
+  row-gap: ${({ theme }) => theme.spacing(4)};
 `;
 
 export { StyledWorkflowStepBody as WorkflowStepBody };

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx

@@ -20,13 +20,13 @@ import { useDebouncedCallback } from 'use-debounce';
 import { isNonEmptyString } from '@sniptt/guards';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { v4 } from 'uuid';
 import {
   IconChevronDown,
   IconPlus,
   IconTrash,
   useIcons,
 } from 'twenty-ui/display';
+import { v4 } from 'uuid';
 
 export type WorkflowEditActionFormBuilderProps = {
   action: WorkflowFormAction;
@@ -207,7 +207,7 @@ export const WorkflowEditActionFormBuilder = ({
                         ? field.placeholder
                         : getDefaultFormFieldSettings(field.type).placeholder}
                     </StyledPlaceholder>
-                    {!isFieldSelected(field.id) && (
+                    {field.type === 'RECORD' && (
                       <IconChevronDown
                         size={theme.icon.size.md}
                         color={theme.font.color.tertiary}
@@ -260,15 +260,15 @@ export const WorkflowEditActionFormBuilder = ({
                   <FormFieldInputInputContainer
                     hasRightElement={false}
                     onClick={() => {
-                      const { label, placeholder, name } =
-                        getDefaultFormFieldSettings(FieldMetadataType.TEXT);
+                      const { label, name } = getDefaultFormFieldSettings(
+                        FieldMetadataType.TEXT,
+                      );
 
                       const newField: WorkflowFormActionField = {
                         id: v4(),
                         name,
                         type: FieldMetadataType.TEXT,
                         label,
-                        placeholder,
                       };
 
                       setFormData([...formData, newField]);
@@ -280,6 +280,8 @@ export const WorkflowEditActionFormBuilder = ({
                           input: [...action.settings.input, newField],
                         },
                       });
+
+                      setSelectedField(newField.id);
                     }}
                   >
                     <StyledFieldContainer>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx

@@ -43,7 +43,7 @@ const StyledSettingsHeader = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(3)};
   grid-template-columns: 1fr 24px;
-  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledTitleContainer = styled.div`
@@ -110,7 +110,7 @@ export const WorkflowEditActionFormFieldSettings = ({
               }
 
               const type = newType as WorkflowFormFieldType;
-              const { name, label, placeholder, settings } =
+              const { name, label, settings } =
                 getDefaultFormFieldSettings(type);
 
               onChange({
@@ -118,12 +118,10 @@ export const WorkflowEditActionFormFieldSettings = ({
                 type,
                 name,
                 label,
-                placeholder,
                 settings,
               });
             }}
             defaultValue={field.type}
-            preventDisplayPadding
           />
         </FormFieldInputContainer>
         <WorkflowFormFieldSettingsByType

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx

@@ -5,8 +5,8 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { Select } from '@/ui/input/components/Select';
 import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
 import styled from '@emotion/styled';
-import { SelectOption } from 'twenty-ui/input';
 import { useIcons } from 'twenty-ui/display';
+import { SelectOption } from 'twenty-ui/input';
 
 type WorkflowFormFieldSettingsRecordPickerProps = {
   label?: string;

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFieldSettings.stories.tsx

@@ -2,11 +2,11 @@ import { WorkflowFormAction } from '@/workflow/types/Workflow';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { FieldMetadataType } from 'twenty-shared/types';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
 import { WorkflowEditActionFormFieldSettings } from '../WorkflowEditActionFormFieldSettings';
-import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof WorkflowEditActionFormFieldSettings> = {
   title: 'Modules/Workflow/Actions/Form/WorkflowEditActionFormFieldSettings',
@@ -60,7 +60,7 @@ export const TextFieldSettings: Story = {
     const placeholderInput = await canvas.findByText('Enter text');
     expect(placeholderInput).toBeVisible();
 
-    const closeButton = await canvas.findByRole('button');
+    const closeButton = await canvas.findByTestId('close-button');
     await userEvent.click(closeButton);
     expect(args.onClose).toHaveBeenCalled();
   },
@@ -87,7 +87,7 @@ export const NumberFieldSettings: Story = {
     const placeholderInput = await canvas.findByText('Enter number');
     expect(placeholderInput).toBeInTheDocument();
 
-    const closeButton = await canvas.findByRole('button');
+    const closeButton = await canvas.findByTestId('close-button');
     await userEvent.click(closeButton);
     expect(args.onClose).toHaveBeenCalled();
   },

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 record`,
         settings: {
           objectName: 'company',
         },