diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx index 702254863..b042f0fc0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx +++ b/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 ( - + {isReady && } + {isReady &&
}
); @@ -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(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx index a36b36556..ff2f1a734 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx +++ b/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 ( - + {isReady &&
}
); @@ -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); diff --git a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx index 38c91ea80..75eaf5d32 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx +++ b/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 = () => {