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 <bsmith26@iastate.edu>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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',
+  },
+];