Translation followup (#9735)

Address PR comments and more progress on translation

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

@@ -11,6 +11,7 @@ import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/uti
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
 import {
   AppTooltip,
   Card,
@@ -91,6 +92,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
 
   const theme = useTheme();
 
+  const { t } = useLingui();
+
   const isLabelSyncedWithName =
     watch('isLabelSyncedWithName') ??
     (isDefined(fieldMetadataItem)
@@ -99,8 +102,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
   const label = watch('label');
 
   const apiNameTooltipText = isLabelSyncedWithName
-    ? 'Deactivate "Synchronize Objects Labels and API Names" to set a custom API name'
-    : 'Input must be in camel case and cannot start with a number';
+    ? t`Deactivate "Synchronize Objects Labels and API Names" to set a custom API name`
+    : t`Input must be in camel case and cannot start with a number`;
 
   const fillNameFromLabel = (label: string) => {
     isDefined(label) &&
@@ -131,7 +134,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
           defaultValue={fieldMetadataItem?.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
-              placeholder="Employees"
+              placeholder={t`Employees`}
               value={value}
               onChange={(value) => {
                 onChange(value);
@@ -160,8 +163,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
                     render={({ field: { onChange, value } }) => (
                       <>
                         <TextInput
-                          label="API Name"
-                          placeholder="employees"
+                          label={t`API Name`}
+                          placeholder={t`employees`}
                           value={value}
                           onChange={onChange}
                           disabled={
@@ -205,8 +208,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
                     <Card rounded>
                       <SettingsOptionCardContentToggle
                         Icon={IconRefresh}
-                        title="Synchronize Field Label and API Name"
-                        description="Should changing a field's label also change the API name?"
+                        title={t`Synchronize Field Label and API Name`}
+                        description={t`Should changing a field's label also change the API name?`}
                         checked={value ?? true}
                         disabled={
                           isDefined(fieldMetadataItem) &&

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

@@ -132,12 +132,8 @@ export const SettingsObjectNewFieldSelector = ({
                         <UndecoratedLink
                           to={getSettingsPath(
                             SettingsPath.ObjectNewFieldConfigure,
-                            {
-                              objectNamePlural,
-                            },
-                            {
-                              fieldType: key,
-                            },
+                            { objectNamePlural },
+                            { fieldType: key },
                           )}
                           fullWidth
                           onClick={() => {

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldIconLabelForm.stories.tsx

@@ -5,6 +5,7 @@ import { ComponentDecorator } from 'twenty-ui';
 import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { SettingsDataModelFieldIconLabelForm } from '../SettingsDataModelFieldIconLabelForm';
 
@@ -24,6 +25,7 @@ const meta: Meta<typeof SettingsDataModelFieldIconLabelForm> = {
     FormProviderDecorator,
     IconsProviderDecorator,
     ComponentDecorator,
+    I18nFrontDecorator,
   ],
 };
 

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx

@@ -8,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { SettingsDataModelFieldSettingsFormCard } from '../SettingsDataModelFieldSettingsFormCard';
 
@@ -33,6 +34,7 @@ const meta: Meta<typeof SettingsDataModelFieldSettingsFormCard> = {
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
     FormProviderDecorator,
+    I18nFrontDecorator,
   ],
   args: {
     fieldMetadataItem,

packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx

@@ -4,6 +4,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
+import { useLingui } from '@lingui/react/macro';
 import { IconSlash } from 'twenty-ui';
 
 export const settingsDataModelFieldDateFormSchema = z.object({
@@ -27,6 +28,8 @@ export const SettingsDataModelFieldDateForm = ({
   disabled,
   fieldMetadataItem,
 }: SettingsDataModelFieldDateFormProps) => {
+  const { t } = useLingui();
+
   const { control } = useFormContext<SettingsDataModelFieldDateFormValues>();
 
   const { initialDisplayAsRelativeDateValue } =
@@ -42,7 +45,7 @@ export const SettingsDataModelFieldDateForm = ({
       render={({ field: { onChange, value } }) => (
         <SettingsOptionCardContentToggle
           Icon={IconSlash}
-          title="Display as relative date"
+          title={t`Display as relative date`}
           checked={value ?? false}
           disabled={disabled}
           onChange={onChange}

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -117,9 +117,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
       <Dropdown
         dropdownId={SELECT_COLOR_DROPDOWN_ID}
         dropdownPlacement="bottom-start"
-        dropdownHotkeyScope={{
-          scope: SELECT_COLOR_DROPDOWN_ID,
-        }}
+        dropdownHotkeyScope={{ scope: SELECT_COLOR_DROPDOWN_ID }}
         clickableComponent={<StyledColorSample colorName={option.color} />}
         dropdownComponents={
           <DropdownMenuItemsContainer>
@@ -160,9 +158,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
       <Dropdown
         dropdownId={SELECT_ACTIONS_DROPDOWN_ID}
         dropdownPlacement="right-start"
-        dropdownHotkeyScope={{
-          scope: SELECT_ACTIONS_DROPDOWN_ID,
-        }}
+        dropdownHotkeyScope={{ scope: SELECT_ACTIONS_DROPDOWN_ID }}
         clickableComponent={
           <StyledLightIconButton accent="tertiary" Icon={IconDotsVertical} />
         }