Progress on translations (#10142)

packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx

@@ -23,6 +23,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import pick from 'lodash.pick';
 import { useSetRecoilState } from 'recoil';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@@ -54,6 +55,7 @@ const StyledFormSection = styled(Section)`
 `;
 
 export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
+  const { t } = useLingui();
   const navigate = useNavigateSettings();
   const { enqueueSnackBar } = useSnackBar();
   const setUpdatedObjectNamePlural = useSetRecoilState(
@@ -184,8 +186,8 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
         <StyledContentContainer>
           <StyledFormSection>
             <H2Title
-              title="About"
-              description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
+              title={t`About`}
+              description={t`Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms.`}
             />
             <SettingsDataModelObjectAboutForm
               disableEdition={!objectMetadataItem.isCustom}
@@ -198,8 +200,8 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
           <StyledFormSection>
             <Section>
               <H2Title
-                title="Options"
-                description="Choose the fields that will identify your records"
+                title={t`Options`}
+                description={t`Choose the fields that will identify your records`}
               />
               <SettingsDataModelObjectSettingsFormCard
                 onBlur={() => formConfig.handleSubmit(handleSave)()}
@@ -209,10 +211,13 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
           </StyledFormSection>
           <StyledFormSection>
             <Section>
-              <H2Title title="Danger zone" description="Deactivate object" />
+              <H2Title
+                title={t`Danger zone`}
+                description={t`Deactivate object`}
+              />
               <Button
                 Icon={IconArchive}
-                title="Deactivate"
+                title={t`Deactivate`}
                 size="small"
                 onClick={handleDisable}
               />

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -8,6 +8,7 @@ import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { plural } from 'pluralize';
 import { Controller, useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared';
@@ -95,6 +96,8 @@ export const SettingsDataModelObjectAboutForm = ({
   objectMetadataItem,
   onBlur,
 }: SettingsDataModelObjectAboutFormProps) => {
+  const { t } = useLingui();
+
   const { control, watch, setValue } =
     useFormContext<SettingsDataModelObjectAboutFormValues>();
   const theme = useTheme();
@@ -111,8 +114,8 @@ export const SettingsDataModelObjectAboutForm = ({
   watch('description');
   watch('icon');
   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 fillLabelPlural = (labelSingular: string) => {
     const newLabelPluralValue = isDefined(labelSingular)
@@ -192,8 +195,8 @@ export const SettingsDataModelObjectAboutForm = ({
           defaultValue={objectMetadataItem?.labelPlural}
           render={({ field: { onChange, value } }) => (
             <TextInput
-              label={'Plural'}
-              placeholder={'Listings'}
+              label={t`Plural`}
+              placeholder={t`Listings`}
               value={value}
               onChange={(value) => {
                 onChange(value);
@@ -214,7 +217,7 @@ export const SettingsDataModelObjectAboutForm = ({
         defaultValue={objectMetadataItem?.description ?? null}
         render={({ field: { onChange, value } }) => (
           <TextArea
-            placeholder="Write a description"
+            placeholder={t`Write a description`}
             minRows={4}
             value={value ?? undefined}
             onChange={(nextValue) => onChange(nextValue ?? null)}
@@ -228,17 +231,17 @@ export const SettingsDataModelObjectAboutForm = ({
           <StyledAdvancedSettingsSectionInputWrapper>
             {[
               {
-                label: 'API Name (Singular)',
+                label: t`API Name (Singular)`,
                 fieldName: 'nameSingular' as const,
-                placeholder: 'listing',
+                placeholder: `listing`,
                 defaultValue: objectMetadataItem?.nameSingular,
                 disableEdition: disableEdition || isLabelSyncedWithName,
                 tooltip: apiNameTooltipText,
               },
               {
-                label: 'API Name (Plural)',
+                label: t`API Name (Plural)`,
                 fieldName: 'namePlural' as const,
-                placeholder: 'listings',
+                placeholder: `listings`,
                 defaultValue: objectMetadataItem?.namePlural,
                 disableEdition: disableEdition || isLabelSyncedWithName,
                 tooltip: apiNameTooltipText,
@@ -307,8 +310,8 @@ export const SettingsDataModelObjectAboutForm = ({
                   <Card rounded>
                     <SettingsOptionCardContentToggle
                       Icon={IconRefresh}
-                      title="Synchronize Objects Labels and API Names"
-                      description="Should changing an object's label also change the API?"
+                      title={t`Synchronize Objects Labels and API Names`}
+                      description={t`Should changing an object's label also change the API?`}
                       checked={value ?? true}
                       disabled={
                         isDefined(objectMetadataItem) &&

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/__stories__/SettingsDataModelObjectAboutForm.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 { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
 const mockedCompanyObjectMetadataItem = generatedMockObjectMetadataItems.find(
@@ -25,6 +26,7 @@ const meta: Meta<typeof SettingsDataModelObjectAboutForm> = {
         <Story />
       </StyledContainer>
     ),
+    I18nFrontDecorator,
     FormProviderDecorator,
     IconsProviderDecorator,
     ComponentDecorator,