From 8bd7b7882515c856ef27e761a66257a7a9f76667 Mon Sep 17 00:00:00 2001 From: StormNinja17 <117243469+StormNinja17@users.noreply.github.com> Date: Tue, 15 Apr 2025 11:31:17 -0500 Subject: [PATCH] Moved Select Options to External Files (#11400) This is a minor rework of PR #10738. I noticed an inconsistency with how Select options are passed as props. Many files use constants stored in external files to pass options props to Select objects. This allows for code reusability. Some files are not passing options in this format. I modified more files so that they use this method of passing options props. I made changes to: - WorkerQueueMetricsSection.tsx - SettingsDataModelFieldBooleanForm.tsx - SettingsDataModelFieldTextForm.tsx - SettingsDataModelFieldNumberForm.tsx - PlaygroundSetupForm.tsx - ViewPickerContentCreateMode.tsx I also noticed that some of these files were incorrectly using useLingui(), so I fixed the import and usage where needed. --------- Co-authored-by: Beau Smith Co-authored-by: Charles Bochet --- nx | 0 packages/twenty-docker/scripts/install.sh | 0 packages/twenty-docker/twenty/entrypoint.sh | 0 .../scripts/inject-runtime-env.sh | 0 .../__stories__/AddressFieldInput.stories.tsx | 7 ++-- .../__stories__/NumberFieldInput.stories.tsx | 22 +++++++++--- .../RichTextFieldInput.stories.tsx | 4 ++- .../__stories__/TextFieldInput.stories.tsx | 34 ++++++++++++------- .../components/WorkerQueueMetricsSection.tsx | 22 ++++-------- .../WorkerQueueMetricsSelectOptions.ts | 16 +++++++++ .../SettingsDataModelFieldBooleanForm.tsx | 19 ++++------- .../BooleanDataModelSelectOptions.ts | 15 ++++++++ .../text/SettingsDataModelFieldTextForm.tsx | 33 +++++------------- .../constants/TextDataModelSelectOptions.ts | 24 +++++++++++++ .../SettingsDataModelFieldNumberForm.tsx | 27 +++++---------- .../constants/NumberDataModelSelectOptions.ts | 15 ++++++++ .../components/PlaygroundSetupForm.tsx | 24 ++++--------- .../constants/PlaygroundSetupSelectOptions.ts | 16 +++++++++ .../ViewPickerContentCreateMode.tsx | 17 +++------- .../constants/ViewPickerTypeSelectOptions.ts | 15 ++++++++ packages/twenty-server/scripts/render-run.sh | 0 .../twenty-server/scripts/render-worker.sh | 0 .../scripts/ssl-generation/script.sh | 0 23 files changed, 190 insertions(+), 120 deletions(-) mode change 100755 => 100644 nx mode change 100755 => 100644 packages/twenty-docker/scripts/install.sh mode change 100755 => 100644 packages/twenty-docker/twenty/entrypoint.sh mode change 100755 => 100644 packages/twenty-front/scripts/inject-runtime-env.sh create mode 100644 packages/twenty-front/src/modules/settings/admin-panel/health-status/constants/WorkerQueueMetricsSelectOptions.ts create mode 100644 packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/constants/BooleanDataModelSelectOptions.ts create mode 100644 packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/constants/TextDataModelSelectOptions.ts create mode 100644 packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts create mode 100644 packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts create mode 100644 packages/twenty-front/src/modules/views/view-picker/constants/ViewPickerTypeSelectOptions.ts mode change 100755 => 100644 packages/twenty-server/scripts/render-run.sh mode change 100755 => 100644 packages/twenty-server/scripts/render-worker.sh mode change 100755 => 100644 packages/twenty-server/scripts/ssl-generation/script.sh diff --git a/nx b/nx old mode 100755 new mode 100644 diff --git a/packages/twenty-docker/scripts/install.sh b/packages/twenty-docker/scripts/install.sh old mode 100755 new mode 100644 diff --git a/packages/twenty-docker/twenty/entrypoint.sh b/packages/twenty-docker/twenty/entrypoint.sh old mode 100755 new mode 100644 diff --git a/packages/twenty-front/scripts/inject-runtime-env.sh b/packages/twenty-front/scripts/inject-runtime-env.sh old mode 100755 new mode 100644 diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx index a5aadabf29..2e6c8cacc7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx @@ -1,5 +1,5 @@ import { Decorator, Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, waitFor } from '@storybook/test'; +import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; import { useEffect } from 'react'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; @@ -143,9 +143,12 @@ type Story = StoryObj; export const Default: Story = {}; export const Enter: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(enterJestFn).toHaveBeenCalledTimes(0); + await canvas.findByText('Address 1'); await userEvent.keyboard('{enter}'); await waitFor(() => { 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 d4304a944c..702254863e 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 @@ -137,8 +137,12 @@ type Story = StoryObj; export const Default: Story = {}; export const Enter: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(enterJestFn).toHaveBeenCalledTimes(0); + + await canvas.findByPlaceholderText('Enter number'); await userEvent.keyboard('{enter}'); await waitFor(() => { @@ -148,9 +152,12 @@ export const Enter: Story = { }; export const Escape: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(escapeJestfn).toHaveBeenCalledTimes(0); + await canvas.findByPlaceholderText('Enter number'); await userEvent.keyboard('{esc}'); await waitFor(() => { @@ -167,6 +174,7 @@ export const ClickOutside: Story = { const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div'); + await canvas.findByPlaceholderText('Enter number'); await userEvent.click(emptyDiv); await waitFor(() => { @@ -176,9 +184,12 @@ export const ClickOutside: Story = { }; export const Tab: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(tabJestFn).toHaveBeenCalledTimes(0); + await canvas.findByPlaceholderText('Enter number'); await userEvent.keyboard('{tab}'); await waitFor(() => { @@ -188,9 +199,12 @@ export const Tab: Story = { }; export const ShiftTab: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(shiftTabJestFn).toHaveBeenCalledTimes(0); + await canvas.findByPlaceholderText('Enter number'); await userEvent.keyboard('{shift>}{tab}'); await waitFor(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx index 219b1be799..16a7ddf03b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx @@ -108,9 +108,11 @@ type Story = StoryObj; export const Default: Story = {}; export const Escape: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); expect(escapeJestFn).toHaveBeenCalledTimes(0); + await canvas.findByTestId('click-outside-element'); await userEvent.keyboard('{esc}'); 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 6d1352fdec..7840cde0a4 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 @@ -11,7 +11,6 @@ import { FieldMetadataType } from '~/generated/graphql'; import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; -import { sleep } from '~/utils/sleep'; import { useTextField } from '../../../hooks/useTextField'; import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput'; const TextFieldValueSetterEffect = ({ value }: { value: string }) => { @@ -61,6 +60,7 @@ const TextFieldInputWithContext = ({ metadata: { fieldName: 'text', objectMetadataNameSingular: 'person', + placeHolder: 'Enter text', }, }, isLabelIdentifier: false, @@ -130,10 +130,12 @@ type Story = StoryObj; export const Default: Story = {}; export const Enter: Story = { - play: async () => { - expect(enterJestFn).toHaveBeenCalledTimes(0); - await sleep(100); + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(enterJestFn).toHaveBeenCalledTimes(0); + + await canvas.findByPlaceholderText('Enter text'); await userEvent.keyboard('{enter}'); await waitFor(() => { @@ -143,10 +145,12 @@ export const Enter: Story = { }; export const Escape: Story = { - play: async () => { - expect(escapeJestfn).toHaveBeenCalledTimes(0); - await sleep(100); + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(escapeJestfn).toHaveBeenCalledTimes(0); + + await canvas.findByPlaceholderText('Enter text'); await userEvent.keyboard('{esc}'); await waitFor(() => { @@ -158,7 +162,7 @@ export const Escape: Story = { export const ClickOutside: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - await sleep(100); + await canvas.findByPlaceholderText('Enter text'); expect(clickOutsideJestFn).toHaveBeenCalledTimes(0); @@ -173,9 +177,12 @@ export const ClickOutside: Story = { }; export const Tab: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await canvas.findByPlaceholderText('Enter text'); + expect(tabJestFn).toHaveBeenCalledTimes(0); - await sleep(100); await userEvent.keyboard('{tab}'); @@ -186,9 +193,12 @@ export const Tab: Story = { }; export const ShiftTab: Story = { - play: async () => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await canvas.findByPlaceholderText('Enter text'); + expect(shiftTabJestFn).toHaveBeenCalledTimes(0); - await sleep(100); await userEvent.keyboard('{shift>}{tab}'); diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx index e6f424b6a1..c1ce3a0681 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx @@ -1,14 +1,15 @@ +import { WORKER_QUEUE_METRICS_SELECT_OPTIONS } from '@/settings/admin-panel/health-status/constants/WorkerQueueMetricsSelectOptions'; import { Select } from '@/ui/input/components/Select'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import { useState } from 'react'; +import { H2Title } from 'twenty-ui/display'; +import { Section } from 'twenty-ui/layout'; import { AdminPanelWorkerQueueHealth, QueueMetricsTimeRange, } from '~/generated/graphql'; import { WorkerMetricsGraph } from './WorkerMetricsGraph'; -import { H2Title } from 'twenty-ui/display'; -import { Section } from 'twenty-ui/layout'; type WorkerQueueMetricsSectionProps = { queue: AdminPanelWorkerQueueHealth; @@ -39,19 +40,10 @@ export const WorkerQueueMetricsSection = ({ ({ + ...option, + label: t(option.label), + }))} value={value} onChange={onChange} /> diff --git a/packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts b/packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts new file mode 100644 index 0000000000..67b9f0940f --- /dev/null +++ b/packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts @@ -0,0 +1,16 @@ +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, + }, +]; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx index 5d78aa3fb5..3166ee5c92 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx @@ -35,6 +35,7 @@ import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPic import { useLingui } from '@lingui/react/macro'; import { useMemo, useState } from 'react'; import { IconX } from 'twenty-ui/display'; +import { VIEW_PICKER_TYPE_SELECT_OPTIONS } from '@/views/view-picker/constants/ViewPickerTypeSelectOptions'; const StyledNoKanbanFieldAvailableContainer = styled.div` color: ${({ theme }) => theme.font.color.light}; @@ -163,18 +164,10 @@ export const ViewPickerContentCreateMode = () => { setViewPickerIsDirty(true); setViewPickerType(value); }} - options={[ - { - value: ViewType.Table, - label: t`Table`, - Icon: viewTypeIconMapping(ViewType.Table), - }, - { - value: ViewType.Kanban, - label: t`Kanban`, - Icon: viewTypeIconMapping(ViewType.Kanban), - }, - ]} + options={VIEW_PICKER_TYPE_SELECT_OPTIONS.map((option) => ({ + ...option, + label: t(option.label), + }))} dropdownId={VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID} /> diff --git a/packages/twenty-front/src/modules/views/view-picker/constants/ViewPickerTypeSelectOptions.ts b/packages/twenty-front/src/modules/views/view-picker/constants/ViewPickerTypeSelectOptions.ts new file mode 100644 index 0000000000..3025a19ba1 --- /dev/null +++ b/packages/twenty-front/src/modules/views/view-picker/constants/ViewPickerTypeSelectOptions.ts @@ -0,0 +1,15 @@ +import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType'; +import { msg } from '@lingui/core/macro'; + +export const VIEW_PICKER_TYPE_SELECT_OPTIONS = [ + { + value: ViewType.Table, + label: msg`Table`, + Icon: viewTypeIconMapping(ViewType.Table), + }, + { + value: ViewType.Kanban, + label: msg`Kanban`, + Icon: viewTypeIconMapping(ViewType.Kanban), + }, +]; diff --git a/packages/twenty-server/scripts/render-run.sh b/packages/twenty-server/scripts/render-run.sh old mode 100755 new mode 100644 diff --git a/packages/twenty-server/scripts/render-worker.sh b/packages/twenty-server/scripts/render-worker.sh old mode 100755 new mode 100644 diff --git a/packages/twenty-server/scripts/ssl-generation/script.sh b/packages/twenty-server/scripts/ssl-generation/script.sh old mode 100755 new mode 100644