houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved Select Options to External Files (#11400)

Browse Source 
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 <bsmith26@iastate.edu>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
StormNinja17
2025-04-15 11:31:17 -05:00
committed by GitHub
parent 797bb0559a
commit 8bd7b78825
23 changed files with 190 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nx
Executable → Regular
View File
packages/twenty-docker/scripts/install.sh
Executable → Regular
View File
packages/twenty-docker/twenty/entrypoint.sh
Executable → Regular
View File
packages/twenty-front/scripts/inject-runtime-env.sh
Executable → Regular
View File
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
+5 -2
View File
@@ -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<typeof AddressInputWithContext>;
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(() => {
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
+18 -4
View File
@@ -137,8 +137,12 @@ type Story = StoryObj<typeof NumberFieldInputWithContext>;
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(() => {
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
+3 -1
View File
@@ -108,9 +108,11 @@ type Story = StoryObj<typeof RichTextFieldInputWithContext>;
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(() => {
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
+22 -12
View File
@@ -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<typeof TextFieldInputWithContext>;
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}');
packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerQueueMetricsSection.tsx
+7 -15
View File
@@ -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 = ({
<Select
dropdownId={`timerange-${queue.queueName}`}
value={timeRange}
options={[
{ value: QueueMetricsTimeRange.SevenDays, label: t`This week` },
{ value: QueueMetricsTimeRange.OneDay, label: t`Today` },
{
value: QueueMetricsTimeRange.TwelveHours,
label: t`Last 12 hours`,
},
{
value: QueueMetricsTimeRange.FourHours,
label: t`Last 4 hours`,
},
{ value: QueueMetricsTimeRange.OneHour, label: t`Last 1 hour` },
]}
options={WORKER_QUEUE_METRICS_SELECT_OPTIONS.map((option) => ({
...option,
label: t(option.label),
}))}
onChange={setTimeRange}
needIconCheck
selectSizeVariant="small"
packages/twenty-front/src/modules/settings/admin-panel/health-status/constants/WorkerQueueMetricsSelectOptions.ts
+16
View File
@@ -0,0 +1,16 @@
import { msg } from '@lingui/core/macro';
import { QueueMetricsTimeRange } from '~/generated/graphql';
export const WORKER_QUEUE_METRICS_SELECT_OPTIONS = [
{ value: QueueMetricsTimeRange.SevenDays, label: msg`This week` },
{ value: QueueMetricsTimeRange.OneDay, label: msg`Today` },
{
value: QueueMetricsTimeRange.TwelveHours,
label: msg`Last 12 hours`,
},
{
value: QueueMetricsTimeRange.FourHours,
label: msg`Last 4 hours`,
},
{ value: QueueMetricsTimeRange.OneHour, label: msg`Last 1 hour` },
];
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
+6 -13
View File
@@ -6,7 +6,8 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsO
import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import { IconCheck, IconX } from 'twenty-ui/display';
import { IconCheck } from 'twenty-ui/display';
import { BOOLEAN_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/boolean/constants/BooleanDataModelSelectOptions';
export const settingsDataModelFieldBooleanFormSchema = z.object({
defaultValue: z.boolean(),
@@ -47,18 +48,10 @@ export const SettingsDataModelFieldBooleanForm = ({
dropdownId="object-field-default-value-select-boolean"
dropdownWidth={120}
needIconCheck={false}
options={[
{
value: true,
label: t`True`,
Icon: IconCheck,
},
{
value: false,
label: t`False`,
Icon: IconX,
},
]}
options={BOOLEAN_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
...option,
label: t(option.label),
}))}
selectSizeVariant="small"
/>
</SettingsOptionCardContentSelect>
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/constants/BooleanDataModelSelectOptions.ts
+15
View File
@@ -0,0 +1,15 @@
import { msg } from '@lingui/core/macro';
import { IconCheck, IconX } from 'twenty-ui/display';
export const BOOLEAN_DATA_MODEL_SELECT_OPTIONS = [
{
value: true,
label: msg`True`,
Icon: IconCheck,
},
{
value: false,
label: msg`False`,
Icon: IconX,
},
];
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx
+9 -24
View File
@@ -2,10 +2,11 @@ import { Controller, useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { TEXT_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/components/text/constants/TextDataModelSelectOptions';
import { Select } from '@/ui/input/components/Select';
import { z } from 'zod';
import { t } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { IconTextWrap } from 'twenty-ui/display';
import { z } from 'zod';
type SettingsDataModelFieldTextFormProps = {
disabled?: boolean;
@@ -31,6 +32,8 @@ export const SettingsDataModelFieldTextForm = ({
disabled,
fieldMetadataItem,
}: SettingsDataModelFieldTextFormProps) => {
const { t } = useLingui();
const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
return (
<Controller
@@ -54,28 +57,10 @@ export const SettingsDataModelFieldTextForm = ({
value={displayedMaxRows}
onChange={(value) => onChange({ displayedMaxRows: value })}
disabled={disabled}
options={[
{
label: t`Deactivated`,
value: 0,
},
{
label: t`First 2 lines`,
value: 2,
},
{
label: t`First 5 lines`,
value: 5,
},
{
label: t`First 10 lines`,
value: 10,
},
{
label: t`All lines`,
value: 99,
},
]}
options={TEXT_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
...option,
label: t(option.label),
}))}
selectSizeVariant="small"
/>
</SettingsOptionCardContentSelect>
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/constants/TextDataModelSelectOptions.ts
+24
View File
@@ -0,0 +1,24 @@
import { msg } from '@lingui/core/macro';
export const TEXT_DATA_MODEL_SELECT_OPTIONS = [
{
label: msg`Deactivated`,
value: 0,
},
{
label: msg`First 2 lines`,
value: 2,
},
{
label: msg`First 5 lines`,
value: 5,
},
{
label: msg`First 10 lines`,
value: 10,
},
{
label: msg`All lines`,
value: 99,
},
];
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
+8 -19
View File
@@ -7,14 +7,10 @@ import { Separator } from '@/settings/components/Separator';
import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import { IconDecimal, IconEye } from 'twenty-ui/display';
import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
import { t } from '@lingui/core/macro';
import {
IconDecimal,
IconEye,
IconNumber9,
IconPercentage,
} from 'twenty-ui/display';
import { NUMBER_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions';
export const settingsDataModelFieldNumberFormSchema = z.object({
settings: numberFieldDefaultValueSchema,
@@ -36,6 +32,7 @@ export const SettingsDataModelFieldNumberForm = ({
disabled,
fieldMetadataItem,
}: SettingsDataModelFieldNumberFormProps) => {
const { t } = useLingui();
const { control } = useFormContext<SettingsDataModelFieldNumberFormValues>();
return (
@@ -66,18 +63,10 @@ export const SettingsDataModelFieldNumberForm = ({
onChange={(value) => onChange({ type: value, decimals: count })}
disabled={disabled}
needIconCheck={false}
options={[
{
Icon: IconNumber9,
label: t`Number`,
value: 'number',
},
{
Icon: IconPercentage,
label: t`Percentage`,
value: 'percentage',
},
]}
options={NUMBER_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
...option,
label: t(option.label),
}))}
/>
</SettingsOptionCardContentSelect>
<Separator />
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts
+15
View File
@@ -0,0 +1,15 @@
import { msg } from '@lingui/core/macro';
import { IconNumber9, IconPercentage } from 'twenty-ui/display';
export const NUMBER_DATA_MODEL_SELECT_OPTIONS = [
{
Icon: IconNumber9,
label: msg`Number`,
value: 'number',
},
{
Icon: IconPercentage,
label: msg`Percentage`,
value: 'percentage',
},
];
packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
+6 -18
View File
@@ -1,3 +1,4 @@
import { PLAYGROUND_SETUP_SELECT_OPTIONS } from '@/settings/playground/constants/PlaygroundSetupSelectOptions';
import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
import { PlaygroundTypes } from '@/settings/playground/types/PlaygroundTypes';
@@ -9,12 +10,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { useLingui } from '@lingui/react/macro';
import { Controller, useForm } from 'react-hook-form';
import { useRecoilState } from 'recoil';
import {
IconApi,
IconBracketsAngle,
IconBrandGraphql,
IconFolderRoot,
} from 'twenty-ui/display';
import { IconApi, IconBrandGraphql } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { z } from 'zod';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
@@ -137,18 +133,10 @@ export const PlaygroundSetupForm = () => {
<Select
dropdownId="schema"
label={t`Schema`}
options={[
{
value: PlaygroundSchemas.CORE,
label: t`Core`,
Icon: IconFolderRoot,
},
{
value: PlaygroundSchemas.METADATA,
label: t`Metadata`,
Icon: IconBracketsAngle,
},
]}
options={PLAYGROUND_SETUP_SELECT_OPTIONS.map((option) => ({
...option,
label: t(option.label),
}))}
value={value}
onChange={onChange}
/>
packages/twenty-front/src/modules/settings/playground/constants/PlaygroundSetupSelectOptions.ts
+16
View File
@@ -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,
},
];
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
+5 -12
View File
@@ -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}
/>
</ViewPickerSelectContainer>
packages/twenty-front/src/modules/views/view-picker/constants/ViewPickerTypeSelectOptions.ts
+15
View File
@@ -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),
},
];
packages/twenty-server/scripts/render-run.sh
Executable → Regular
View File
packages/twenty-server/scripts/render-worker.sh
Executable → Regular
View File
packages/twenty-server/scripts/ssl-generation/script.sh
Executable → Regular
View File