Fix workflow placeholders and icons (#11222)

- allow all form fields that may need a placeholder to set it
- update main icons on versions and runs

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

@@ -18,9 +18,10 @@ import { useEffect, useState } from 'react';
 import { IconChevronDown, IconPlus, IconTrash, useIcons } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { v4 } from 'uuid';
+import { isNonEmptyString } from '@sniptt/guards';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
+import { v4 } from 'uuid';
 
 export type WorkflowEditActionFormBuilderProps = {
   action: WorkflowFormAction;
@@ -185,7 +186,12 @@ export const WorkflowEditActionFormBuilder = ({
                   }}
                 >
                   <StyledFieldContainer>
-                    <StyledPlaceholder>{field.placeholder}</StyledPlaceholder>
+                    <StyledPlaceholder>
+                      {isDefined(field.placeholder) &&
+                      isNonEmptyString(field.placeholder)
+                        ? field.placeholder
+                        : getDefaultFormFieldSettings(field.type).placeholder}
+                    </StyledPlaceholder>
                     {!isFieldSelected(field.id) && (
                       <IconChevronDown
                         size={theme.icon.size.md}

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

@@ -10,6 +10,7 @@ import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/Workflo
 import { useUpdateWorkflowRunStep } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowRunStep';
 import { useSubmitFormStep } from '@/workflow/workflow-steps/workflow-actions/form-action/hooks/useSubmitFormStep';
 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 { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
@@ -129,6 +130,10 @@ export const WorkflowEditActionFormFiller = ({
             }}
             defaultValue={field.value ?? ''}
             readonly={actionOptions.readonly}
+            placeholder={
+              field.placeholder ??
+              getDefaultFormFieldSettings(field.type).placeholder
+            }
           />
         ))}
       </WorkflowStepBody>

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

@@ -1,8 +1,9 @@
 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 { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
 import styled from '@emotion/styled';
-import { t } from '@lingui/core/macro';
+import { FieldMetadataType } from 'twenty-shared/types';
 
 type WorkflowFormFieldSettingsNumberProps = {
   label?: string;
@@ -29,8 +30,10 @@ export const WorkflowFormFieldSettingsNumber = ({
           onChange={(newLabel: string | null) => {
             onChange('label', newLabel);
           }}
-          defaultValue={label ?? t`Number`}
-          placeholder={t`Text`}
+          defaultValue={label}
+          placeholder={
+            getDefaultFormFieldSettings(FieldMetadataType.NUMBER).label
+          }
         />
       </FormFieldInputContainer>
       <FormFieldInputContainer>
@@ -39,8 +42,10 @@ export const WorkflowFormFieldSettingsNumber = ({
           onChange={(newPlaceholder: string | null) => {
             onChange('placeholder', newPlaceholder);
           }}
-          defaultValue={placeholder ?? '1000'}
-          placeholder={'1000'}
+          defaultValue={placeholder}
+          placeholder={
+            getDefaultFormFieldSettings(FieldMetadataType.NUMBER).placeholder
+          }
         />
       </FormFieldInputContainer>
     </StyledContainer>

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

@@ -1,7 +1,9 @@
 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 { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
 import styled from '@emotion/styled';
+import { FieldMetadataType } from 'twenty-shared/types';
 
 type WorkflowFormFieldSettingsTextProps = {
   label?: string;
@@ -29,7 +31,9 @@ export const WorkflowFormFieldSettingsText = ({
             onChange('label', newLabel);
           }}
           defaultValue={label}
-          placeholder={'Text'}
+          placeholder={
+            getDefaultFormFieldSettings(FieldMetadataType.TEXT).label
+          }
         />
       </FormFieldInputContainer>
       <FormFieldInputContainer>
@@ -39,7 +43,9 @@ export const WorkflowFormFieldSettingsText = ({
             onChange('placeholder', newPlaceholder);
           }}
           defaultValue={placeholder}
-          placeholder={'Enter your text'}
+          placeholder={
+            getDefaultFormFieldSettings(FieldMetadataType.TEXT).placeholder
+          }
         />
       </FormFieldInputContainer>
     </StyledContainer>

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

@@ -94,7 +94,7 @@ export const ReadonlyMode: Story = {
     const textField = await canvas.findByText('Text Field');
     expect(textField).toBeVisible();
 
-    const numberInput = await canvas.findByPlaceholderText('Number Field');
+    const numberInput = await canvas.findByPlaceholderText('Enter number');
     expect(numberInput).toBeDisabled();
 
     const submitButton = await canvas.queryByText('Submit');