Fix stories

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx

@@ -1,6 +1,6 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { FieldMetadataType } from '~/generated/graphql';
@@ -41,9 +41,14 @@ const NumberFieldInputWithContext = ({
 }: NumberFieldInputWithContextProps) => {
   const setHotKeyScope = useSetHotkeyScope();
 
+  const [isReady, setIsReady] = useState(false);
+
   useEffect(() => {
-    setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotKeyScope]);
+    if (!isReady) {
+      setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+      setIsReady(true);
+    }
+  }, [isReady, setHotKeyScope]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
@@ -73,7 +78,7 @@ const NumberFieldInputWithContext = ({
           isReadOnly: false,
         }}
       >
-        <StorybookFieldInputDropdownFocusIdSetterEffect />
+        {isReady && <StorybookFieldInputDropdownFocusIdSetterEffect />}
         <NumberFieldValueSetterEffect value={value} />
         <NumberFieldInput
           onEnter={onEnter}
@@ -83,6 +88,7 @@ const NumberFieldInputWithContext = ({
           onShiftTab={onShiftTab}
         />
       </FieldContext.Provider>
+      {isReady && <div data-testid="is-ready-marker" />}
       <div data-testid="data-field-input-click-outside-div" />
     </RecordFieldComponentInstanceContext.Provider>
   );
@@ -142,7 +148,7 @@ export const Enter: Story = {
 
     expect(enterJestFn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter number');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{enter}');
 
     await waitFor(() => {
@@ -157,7 +163,7 @@ export const Escape: Story = {
 
     expect(escapeJestfn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter number');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{esc}');
 
     await waitFor(() => {
@@ -174,7 +180,7 @@ export const ClickOutside: Story = {
 
     const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
 
-    await canvas.findByPlaceholderText('Enter number');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.click(emptyDiv);
 
     await waitFor(() => {
@@ -189,7 +195,7 @@ export const Tab: Story = {
 
     expect(tabJestFn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter number');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{tab}');
 
     await waitFor(() => {
@@ -204,7 +210,7 @@ export const ShiftTab: Story = {
 
     expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter number');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{shift>}{tab}');
 
     await waitFor(() => {

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx

@@ -1,5 +1,5 @@
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -8,12 +8,11 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { FieldMetadataType } from '~/generated/graphql';
-import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { useTextField } from '../../../hooks/useTextField';
 import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
-import { sleep } from '~/utils/sleep';
+
 const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
   const { setFieldValue } = useTextField();
 
@@ -40,9 +39,14 @@ const TextFieldInputWithContext = ({
 }: TextFieldInputWithContextProps) => {
   const setHotKeyScope = useSetHotkeyScope();
 
+  const [isReady, setIsReady] = useState(false);
+
   useEffect(() => {
-    setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotKeyScope]);
+    if (!isReady) {
+      setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+      setIsReady(true);
+    }
+  }, [isReady, setHotKeyScope]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
@@ -68,7 +72,6 @@ const TextFieldInputWithContext = ({
           isReadOnly: false,
         }}
       >
-        <StorybookFieldInputDropdownFocusIdSetterEffect />
         <TextFieldValueSetterEffect value={value} />
         <TextFieldInput
           onEnter={onEnter}
@@ -78,6 +81,7 @@ const TextFieldInputWithContext = ({
           onShiftTab={onShiftTab}
         />
       </FieldContext.Provider>
+      {isReady && <div data-testid="is-ready-marker" />}
       <div data-testid="data-field-input-click-outside-div" />
     </RecordFieldComponentInstanceContext.Provider>
   );
@@ -136,8 +140,7 @@ export const Enter: Story = {
 
     expect(enterJestFn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter text');
-    await sleep(50);
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{enter}');
 
     await waitFor(() => {
@@ -152,7 +155,7 @@ export const Escape: Story = {
 
     expect(escapeJestfn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByPlaceholderText('Enter text');
+    await canvas.findByTestId('is-ready-marker');
     await userEvent.keyboard('{esc}');
 
     await waitFor(() => {
@@ -164,11 +167,11 @@ export const Escape: Story = {
 export const ClickOutside: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByPlaceholderText('Enter text');
 
     expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
 
     const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
+    await canvas.findByTestId('is-ready-marker');
 
     await userEvent.click(emptyDiv);
 
@@ -182,7 +185,7 @@ export const Tab: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByPlaceholderText('Enter text');
+    await canvas.findByTestId('is-ready-marker');
 
     expect(tabJestFn).toHaveBeenCalledTimes(0);
 
@@ -198,7 +201,7 @@ export const ShiftTab: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByPlaceholderText('Enter text');
+    await canvas.findByTestId('is-ready-marker');
 
     expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
 

packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx

@@ -1,4 +1,4 @@
-import { PLAYGROUND_SETUP_SELECT_OPTIONS } from '@/settings/playground/constants/PlaygroundSetupSelectOptions';
+import { SETTINGS_PLAYGROUND_FORM_SCHEMA_SELECT_OPTIONS } from '@/settings/playground/constants/SettingsPlaygroundFormSchemaSelectOptions';
 import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
 import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
 import { PlaygroundTypes } from '@/settings/playground/types/PlaygroundTypes';
@@ -133,10 +133,12 @@ export const PlaygroundSetupForm = () => {
           <Select
             dropdownId="schema"
             label={t`Schema`}
-            options={PLAYGROUND_SETUP_SELECT_OPTIONS.map((option) => ({
-              ...option,
-              label: t(option.label),
-            }))}
+            options={SETTINGS_PLAYGROUND_FORM_SCHEMA_SELECT_OPTIONS.map(
+              (option) => ({
+                ...option,
+                label: t(option.label),
+              }),
+            )}
             value={value}
             onChange={onChange}
           />

packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts

@@ -1,16 +0,0 @@
-import { PlaygroundTypes } from '@/settings/playground/types/PlaygroundTypes';
-import { msg } from '@lingui/core/macro';
-import { IconApi, IconBrandGraphql } from 'twenty-ui/display';
-
-export const PLAYGROUND_SETUP_SELECT_OPTIONS = [
-  {
-    value: PlaygroundTypes.REST,
-    label: msg`REST`,
-    Icon: IconApi,
-  },
-  {
-    value: PlaygroundTypes.GRAPHQL,
-    label: msg`GraphQL`,
-    Icon: IconBrandGraphql,
-  },
-];

packages/twenty-front/src/modules/settings/playground/constants/SettingsPlaygroundFormSchemaSelectOptions.ts

@@ -0,0 +1,15 @@
+import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
+import { msg } from '@lingui/core/macro';
+import { IconBracketsAngle, IconFolderRoot } from 'twenty-ui/display';
+export const SETTINGS_PLAYGROUND_FORM_SCHEMA_SELECT_OPTIONS = [
+  {
+    value: PlaygroundSchemas.CORE,
+    label: msg`Core`,
+    Icon: IconFolderRoot,
+  },
+  {
+    value: PlaygroundSchemas.METADATA,
+    label: msg`Metadata`,
+    Icon: IconBracketsAngle,
+  },
+];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionDeleteRecord.stories.tsx

@@ -1,6 +1,7 @@
 import { WorkflowDeleteRecordAction } from '@/workflow/types/Workflow';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -11,7 +12,6 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
 import { allMockPersonRecords } from '~/testing/mock-data/people';
 import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
 import { WorkflowEditActionDeleteRecord } from '../WorkflowEditActionDeleteRecord';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const DEFAULT_ACTION = {
   id: getWorkflowNodeIdMock(),
@@ -158,6 +158,10 @@ export const DisabledWithDefaultStaticValues: Story = {
 
     const selectedRecordToDelete = await canvas.findByText(
       `${peopleMock.name.firstName} ${peopleMock.name.lastName}`,
+      undefined,
+      {
+        timeout: 3000,
+      },
     );
 
     expect(selectedRecordToDelete).toBeVisible();