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/object-record/record-field/components/FormFieldInput.tsx

@@ -48,6 +48,7 @@ type FormFieldInputProps = {
   onChange: (value: JsonValue) => void;
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
+  placeholder?: string;
 };
 
 export const FormFieldInput = ({
@@ -56,15 +57,16 @@ export const FormFieldInput = ({
   onChange,
   VariablePicker,
   readonly,
+  placeholder,
 }: FormFieldInputProps) => {
   return isFieldNumber(field) ? (
     <FormNumberFieldInput
       label={field.label}
       defaultValue={defaultValue as string | number | undefined}
       onChange={onChange}
-      placeholder={field.label}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   ) : isFieldBoolean(field) ? (
     <FormBooleanFieldInput
@@ -79,9 +81,9 @@ export const FormFieldInput = ({
       label={field.label}
       defaultValue={defaultValue as string | undefined}
       onChange={onChange}
-      placeholder={field.label}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   ) : isFieldSelect(field) ? (
     <FormSelectFieldInput
@@ -92,7 +94,7 @@ export const FormFieldInput = ({
       options={field.metadata.options}
       clearLabel={field.label}
       readonly={readonly}
-      placeholder={field.label}
+      placeholder={placeholder}
     />
   ) : isFieldFullName(field) ? (
     <FormFullNameFieldInput
@@ -141,6 +143,7 @@ export const FormFieldInput = ({
       onChange={onChange}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   ) : isFieldDateTime(field) ? (
     <FormDateTimeFieldInput
@@ -158,25 +161,25 @@ export const FormFieldInput = ({
       VariablePicker={VariablePicker}
       options={field.metadata.options}
       readonly={readonly}
-      placeholder={field.label}
+      placeholder={placeholder}
     />
   ) : isFieldRawJson(field) ? (
     <FormRawJsonFieldInput
       label={field.label}
       defaultValue={defaultValue as string | undefined}
       onChange={onChange}
-      placeholder={field.label}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   ) : isFieldUuid(field) ? (
     <FormUuidFieldInput
       label={field.label}
       defaultValue={defaultValue as string | null | undefined}
       onChange={onChange}
-      placeholder={field.label}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   ) : isFieldCurrency(field) ? (
     <FormCurrencyFieldInput

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx

@@ -7,6 +7,7 @@ type FormDateFieldInputProps = {
   onChange: (value: string | null) => void;
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
+  placeholder?: string;
 };
 
 export const FormDateFieldInput = ({
@@ -15,6 +16,7 @@ export const FormDateFieldInput = ({
   onChange,
   VariablePicker,
   readonly,
+  placeholder,
 }: FormDateFieldInputProps) => {
   return (
     <FormDateTimeFieldInput
@@ -24,6 +26,7 @@ export const FormDateFieldInput = ({
       onChange={onChange}
       VariablePicker={VariablePicker}
       readonly={readonly}
+      placeholder={placeholder}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx

@@ -29,8 +29,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 const StyledInputContainer = styled(FormFieldInputInputContainer)`
   display: grid;
@@ -77,9 +77,9 @@ type DraftValue =
 type FormDateTimeFieldInputProps = {
   dateOnly?: boolean;
   label?: string;
-  placeholder?: string;
   defaultValue: string | undefined;
   onChange: (value: string | null) => void;
+  placeholder?: string;
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
 };
@@ -91,6 +91,7 @@ export const FormDateTimeFieldInput = ({
   onChange,
   VariablePicker,
   readonly,
+  placeholder,
 }: FormDateTimeFieldInputProps) => {
   const { timeZone } = useContext(UserContext);
 
@@ -149,7 +150,8 @@ export const FormDateTimeFieldInput = ({
   const displayDatePicker =
     draftValue.type === 'static' && draftValue.mode === 'edit';
 
-  const placeholder = dateOnly ? 'mm/dd/yyyy' : 'mm/dd/yyyy hh:mm';
+  const placeholderToDisplay =
+    placeholder ?? (dateOnly ? 'mm/dd/yyyy' : 'mm/dd/yyyy hh:mm');
 
   useListenClickOutside({
     refs: [datePickerWrapperRef],
@@ -340,7 +342,7 @@ export const FormDateTimeFieldInput = ({
             <>
               <StyledDateInput
                 type="text"
-                placeholder={placeholder}
+                placeholder={placeholderToDisplay}
                 value={inputDateTime}
                 onFocus={handleInputFocus}
                 onChange={handleInputChange}

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormLinksFieldInput.tsx

@@ -12,6 +12,7 @@ type FormLinksFieldInputProps = {
   onChange: (value: FieldLinksValue) => void;
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
+  placeholder?: string;
 };
 
 export const FormLinksFieldInput = ({
@@ -20,6 +21,7 @@ export const FormLinksFieldInput = ({
   onChange,
   readonly,
   VariablePicker,
+  placeholder,
 }: FormLinksFieldInputProps) => {
   const handleChange =
     (field: keyof FieldLinksDraftValue) => (updatedLinksPart: string) => {
@@ -40,7 +42,7 @@ export const FormLinksFieldInput = ({
           label="Primary Link Label"
           defaultValue={defaultValue?.primaryLinkLabel}
           onChange={handleChange('primaryLinkLabel')}
-          placeholder={'Primary Link Label'}
+          placeholder={placeholder ?? 'Primary Link Label'}
           readonly={readonly}
           VariablePicker={VariablePicker}
         />
@@ -48,7 +50,7 @@ export const FormLinksFieldInput = ({
           label="Primary Link URL"
           defaultValue={defaultValue?.primaryLinkUrl}
           onChange={handleChange('primaryLinkUrl')}
-          placeholder={'Primary Link URL'}
+          placeholder={placeholder ?? 'Primary Link URL'}
           readonly={readonly}
           VariablePicker={VariablePicker}
         />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx

@@ -10,11 +10,11 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import styled from '@emotion/styled';
 import { useId, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import {
   canBeCastAsNumberOrNull,
   castAsNumberOrNull,
 } from '~/utils/cast-as-number-or-null';
-import { isDefined } from 'twenty-shared/utils';
 
 const StyledInput = styled(TextInput)`
   padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
@@ -23,13 +23,13 @@ const StyledInput = styled(TextInput)`
 type FormNumberFieldInputProps = {
   label?: string;
   error?: string;
-  placeholder: string;
   defaultValue: number | string | undefined;
   onChange: (value: number | null | string) => void;
   onBlur?: () => void;
   VariablePicker?: VariablePickerComponent;
   hint?: string;
   readonly?: boolean;
+  placeholder?: string;
 };
 
 export const FormNumberFieldInput = ({
@@ -115,7 +115,7 @@ export const FormNumberFieldInput = ({
           {draftValue.type === 'static' ? (
             <StyledInput
               inputId={inputId}
-              placeholder={placeholder}
+              placeholder={placeholder ?? 'Enter a number'}
               value={draftValue.value}
               copyButton={false}
               hotkeyScope="record-create"

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx

@@ -6,16 +6,16 @@ import { useTextVariableEditor } from '@/object-record/record-field/form-types/h
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { useId } from 'react';
-import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { isDefined } from 'twenty-shared/utils';
+import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 type FormRawJsonFieldInputProps = {
   label?: string;
   defaultValue: string | null | undefined;
-  placeholder: string;
   onChange: (value: string | null) => void;
   readonly?: boolean;
   VariablePicker?: VariablePickerComponent;
+  placeholder?: string;
 };
 
 export const FormRawJsonFieldInput = ({
@@ -29,7 +29,7 @@ export const FormRawJsonFieldInput = ({
   const inputId = useId();
 
   const editor = useTextVariableEditor({
-    placeholder,
+    placeholder: placeholder ?? 'Enter a JSON object',
     multiline: true,
     readonly,
     defaultValue: defaultValue ?? undefined,

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx

@@ -16,11 +16,11 @@ type FormTextFieldInputProps = {
   error?: string;
   hint?: string;
   defaultValue: string | undefined;
-  placeholder: string;
   onChange: (value: string) => void;
   onBlur?: () => void;
   multiline?: boolean;
   readonly?: boolean;
+  placeholder?: string;
   VariablePicker?: VariablePickerComponent;
 };
 
@@ -39,7 +39,7 @@ export const FormTextFieldInput = ({
   const inputId = useId();
 
   const editor = useTextVariableEditor({
-    placeholder,
+    placeholder: placeholder ?? 'Enter text',
     multiline,
     readonly,
     defaultValue,

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx

@@ -17,10 +17,10 @@ const StyledInput = styled(TextInput)`
 type FormUuidFieldInputProps = {
   label?: string;
   defaultValue: string | null | undefined;
-  placeholder: string;
   onChange: (value: string | null) => void;
   readonly?: boolean;
   VariablePicker?: VariablePickerComponent;
+  placeholder?: string;
 };
 
 export const FormUuidFieldInput = ({
@@ -100,7 +100,7 @@ export const FormUuidFieldInput = ({
           {draftValue.type === 'static' ? (
             <StyledInput
               inputId={inputId}
-              placeholder={placeholder}
+              placeholder={placeholder ?? 'Enter a UUID'}
               value={draftValue.value}
               copyButton={false}
               hotkeyScope="record-create"

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`}
+          defaultValue={label}
-          placeholder={t`Text`}
+          placeholder={
+            getDefaultFormFieldSettings(FieldMetadataType.NUMBER).label
+          }
         />
       </FormFieldInputContainer>
       <FormFieldInputContainer>
@@ -39,8 +42,10 @@ export const WorkflowFormFieldSettingsNumber = ({
           onChange={(newPlaceholder: string | null) => {
             onChange('placeholder', newPlaceholder);
           }}
-          defaultValue={placeholder ?? '1000'}
+          defaultValue={placeholder}
-          placeholder={'1000'}
+          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');

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -24,7 +24,7 @@ export const RecordShowPage = () => {
     objectRecordId: string;
   }>();
 
-  const { objectNameSingular, objectRecordId, headerIcon } = useRecordShowPage(
+  const { objectNameSingular, objectRecordId } = useRecordShowPage(
     parameters.objectNameSingular ?? '',
     parameters.objectRecordId ?? '',
   );
@@ -55,7 +55,6 @@ export const RecordShowPage = () => {
                   <RecordShowPageHeader
                     objectNameSingular={objectNameSingular}
                     objectRecordId={objectRecordId}
-                    headerIcon={headerIcon}
                   >
                     <RecordShowActionMenu />
                   </RecordShowPageHeader>

packages/twenty-front/src/pages/object-record/RecordShowPageHeader.tsx

@@ -13,7 +13,6 @@ export const RecordShowPageHeader = ({
 }: {
   objectNameSingular: string;
   objectRecordId: string;
-  headerIcon: React.ComponentType;
   children?: React.ReactNode;
 }) => {
   const { viewName, navigateToIndexView, objectMetadataItem } =

packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-object-icons.ts

@@ -36,7 +36,7 @@ export const STANDARD_OBJECT_ICONS = {
   webhook: 'IconRobot',
   workflow: 'IconSettingsAutomation',
   workflowEventListener: 'IconSettingsAutomation',
-  workflowRun: 'IconSettingsAutomation',
+  workflowRun: 'IconHistoryToggle',
-  workflowVersion: 'IconSettingsAutomation',
+  workflowVersion: 'IconVersions',
   workspaceMember: 'IconUserCircle',
 };