From 18a89b515235a212104fec91738562ad3f1307c4 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 17 Apr 2025 18:39:18 +0200
Subject: [PATCH] Set error on number field and prevent form from being
 submitted (#11637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="943" alt="Capture d’écran 2025-04-17 à 18 14 46"
src="https://github.com/user-attachments/assets/1208075e-937f-4224-886c-be578264d448"
/>
---
 .../components/CmdEnterActionButton.tsx       |  2 +-
 .../components/FormFieldInput.tsx             |  6 +++++
 .../components/FormNumberFieldInput.tsx       | 23 +++++++++++++++----
 .../FormNumberFieldInput.stories.tsx          | 13 +++++++++++
 .../WorkflowEditActionFormFiller.tsx          |  9 ++++++--
 .../WorkflowEditActionFormFiller.stories.tsx  |  2 +-
 6 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx
index be748480f..0d3227416 100644
--- a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx
@@ -23,7 +23,7 @@ export const CmdEnterActionButton = ({
   return (
     <Button
       title={title}
-      variant="primary"
+      variant={disabled ? 'secondary' : 'primary'}
       accent="blue"
       size="medium"
       onClick={onClick}
diff --git 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
index 681fec498..f7e3893d8 100644
--- 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
@@ -52,6 +52,8 @@ type FormFieldInputProps = {
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
   placeholder?: string;
+  error?: string;
+  onError?: (error: string | undefined) => void;
 };
 
 export const FormFieldInput = ({
@@ -61,6 +63,8 @@ export const FormFieldInput = ({
   VariablePicker,
   readonly,
   placeholder,
+  error,
+  onError,
 }: FormFieldInputProps) => {
   return isFieldNumber(field) ? (
     <FormNumberFieldInput
@@ -70,6 +74,8 @@ export const FormFieldInput = ({
       VariablePicker={VariablePicker}
       readonly={readonly}
       placeholder={placeholder}
+      error={error}
+      onError={onError}
     />
   ) : isFieldBoolean(field) ? (
     <FormBooleanFieldInput
diff --git 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
index 9c69d77e7..38cc46839 100644
--- 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
@@ -9,6 +9,7 @@ import { InputHint } from '@/ui/input/components/InputHint';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import styled from '@emotion/styled';
+import isEmpty from 'lodash.isempty';
 import { useId, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -22,7 +23,6 @@ const StyledInput = styled(TextInput)`
 
 type FormNumberFieldInputProps = {
   label?: string;
-  error?: string;
   defaultValue: number | string | undefined;
   onChange: (value: number | null | string) => void;
   onBlur?: () => void;
@@ -30,20 +30,26 @@ type FormNumberFieldInputProps = {
   hint?: string;
   readonly?: boolean;
   placeholder?: string;
+  error?: string;
+  onError?: (error: string | undefined) => void;
 };
 
 export const FormNumberFieldInput = ({
   label,
-  error,
   placeholder,
   defaultValue,
   onChange,
+  onError,
   onBlur,
   VariablePicker,
   hint,
   readonly,
+  error: errorFromProps,
 }: FormNumberFieldInputProps) => {
   const inputId = useId();
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
 
   const [draftValue, setDraftValue] = useState<
     | {
@@ -68,9 +74,14 @@ export const FormNumberFieldInput = ({
 
   const persistNumber = (newValue: string) => {
     if (!canBeCastAsNumberOrNull(newValue)) {
+      setErrorMessage('Invalid number');
+      onError?.('Invalid number');
       return;
     }
 
+    setErrorMessage(undefined);
+    onError?.(undefined);
+
     const castedValue = castAsNumberOrNull(newValue);
 
     onChange(castedValue);
@@ -115,7 +126,11 @@ export const FormNumberFieldInput = ({
           {draftValue.type === 'static' ? (
             <StyledInput
               inputId={inputId}
-              placeholder={placeholder ?? 'Enter a number'}
+              placeholder={
+                isDefined(placeholder) && !isEmpty(placeholder)
+                  ? placeholder
+                  : 'Enter a number'
+              }
               value={draftValue.value}
               copyButton={false}
               hotkeyScope="record-create"
@@ -139,7 +154,7 @@ export const FormNumberFieldInput = ({
       </FormFieldInputRowContainer>
 
       {hint ? <InputHint>{hint}</InputHint> : null}
-      <InputErrorHelper>{error}</InputErrorHelper>
+      <InputErrorHelper>{errorMessage ?? errorFromProps}</InputErrorHelper>
     </FormFieldInputContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormNumberFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormNumberFieldInput.stories.tsx
index 268f901af..637796a2a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormNumberFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormNumberFieldInput.stories.tsx
@@ -70,3 +70,16 @@ export const Disabled: Story = {
     expect(variablePicker).not.toBeInTheDocument();
   },
 };
+
+export const WithError: Story = {
+  args: {
+    error: 'Invalid number',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const error = await canvas.findByText('Invalid number');
+
+    expect(error).toBeVisible();
+  },
+};
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 84468395c..f00630467 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
@@ -16,8 +16,8 @@ import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useDebouncedCallback } from 'use-debounce';
 import { useIcons } from 'twenty-ui/display';
+import { useDebouncedCallback } from 'use-debounce';
 
 export type WorkflowEditActionFormFillerProps = {
   action: WorkflowFormAction;
@@ -39,6 +39,8 @@ export const WorkflowEditActionFormFiller = ({
   const { workflowRunId } = useWorkflowStepContextOrThrow();
   const { closeCommandMenu } = useCommandMenu();
   const { updateWorkflowRunStep } = useUpdateWorkflowRunStep();
+  const [error, setError] = useState<string | undefined>(undefined);
+  const canSubmit = !actionOptions.readonly && !isDefined(error);
 
   if (!isDefined(workflowRunId)) {
     throw new Error('Form filler action must be used in a workflow run');
@@ -164,6 +166,9 @@ export const WorkflowEditActionFormFiller = ({
                 field.placeholder ??
                 getDefaultFormFieldSettings(field.type).placeholder
               }
+              onError={(error) => {
+                setError(error);
+              }}
             />
           );
         })}
@@ -174,7 +179,7 @@ export const WorkflowEditActionFormFiller = ({
             <CmdEnterActionButton
               title="Submit"
               onClick={onSubmit}
-              disabled={actionOptions.readonly}
+              disabled={!canSubmit}
             />,
           ]}
         />
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 67629012d..b2200d316 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
@@ -2,6 +2,7 @@ import { WorkflowFormAction } from '@/workflow/types/Workflow';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
 import { FieldMetadataType } from 'twenty-shared/types';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
@@ -9,7 +10,6 @@ import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorato
 import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { WorkflowEditActionFormFiller } from '../WorkflowEditActionFormFiller';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof WorkflowEditActionFormFiller> = {
   title: 'Modules/Workflow/Actions/Form/WorkflowEditActionFormFiller',