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
2025-03-27 17:01:33 +01:00
parent 4eefa45164
commit 439ccb0a52
16 changed files with 67 additions and 37 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
+++ b/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}
    />
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
+++ b/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}
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormLinksFieldInput.tsx
+++ b/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}
        />
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx
+++ b/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"
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx
+++ b/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,
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
+++ b/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,
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
+++ b/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"