Progress on translations (#10142)

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx

@@ -10,6 +10,7 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import {
@@ -42,6 +43,8 @@ export const StyledPill = styled(Pill)`
 export const AdvancedFilterButton = () => {
   const advancedFilterQuerySubFilterCount = 0; // TODO
 
+  const { t } = useLingui();
+
   const { openDropdown: openAdvancedFilterDropdown } = useDropdown(
     ADVANCED_FILTER_DROPDOWN_ID,
   );
@@ -126,7 +129,7 @@ export const AdvancedFilterButton = () => {
   return (
     <StyledContainer>
       <StyledMenuItemSelect onClick={handleClick}>
-        <MenuItemLeftContent LeftIcon={IconFilter} text="Advanced filter" />
+        <MenuItemLeftContent LeftIcon={IconFilter} text={t`Advanced filter`} />
         {advancedFilterQuerySubFilterCount > 0 && (
           <StyledPill label={advancedFilterQuerySubFilterCount.toString()} />
         )}

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -184,7 +184,7 @@ export const SettingsNavigationDrawerItems = () => {
 
       <NavigationDrawerSection>
         <AdvancedSettingsWrapper hideIcon>
-          <NavigationDrawerSectionTitle label="Developers" />
+          <NavigationDrawerSectionTitle label={t`Developers`} />
         </AdvancedSettingsWrapper>
         <AdvancedSettingsWrapper navigationDrawerItem={true}>
           <SettingsNavigationDrawerItem
@@ -207,7 +207,7 @@ export const SettingsNavigationDrawerItems = () => {
         <NavigationDrawerSectionTitle label={t`Other`} />
         {isAdminPageEnabled && (
           <SettingsNavigationDrawerItem
-            label={t`Server Admin Panel`}
+            label={t`Server Admin`}
             path={SettingsPath.AdminPanel}
             Icon={IconServer}
           />

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,

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx

@@ -5,7 +5,7 @@ import { Button, IconCopy, IconLink } from 'twenty-ui';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
-
+import { useLingui } from '@lingui/react/macro';
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
@@ -24,6 +24,7 @@ type WorkspaceInviteLinkProps = {
 export const WorkspaceInviteLink = ({
   inviteLink,
 }: WorkspaceInviteLinkProps) => {
+  const { t } = useLingui();
   const theme = useTheme();
 
   const { enqueueSnackBar } = useSnackBar();
@@ -37,9 +38,9 @@ export const WorkspaceInviteLink = ({
         Icon={IconLink}
         variant="primary"
         accent="blue"
-        title="Copy link"
+        title={t`Copy link`}
         onClick={() => {
-          enqueueSnackBar('Link copied to clipboard', {
+          enqueueSnackBar(t`Link copied to clipboard`, {
             variant: SnackBarVariant.Success,
             icon: <IconCopy size={theme.icon.size.md} />,
             duration: 2000,

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx

@@ -9,6 +9,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { sanitizeEmailList } from '@/workspace/utils/sanitizeEmailList';
+import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared';
 import { useCreateWorkspaceInvitation } from '../../workspace-invitation/hooks/useCreateWorkspaceInvitation';
 
@@ -67,6 +68,8 @@ type FormInput = {
 };
 
 export const WorkspaceInviteTeam = () => {
+  const { t } = useLingui();
+
   const { enqueueSnackBar } = useSnackBar();
   const { sendInvitation } = useCreateWorkspaceInvitation();
 
@@ -136,7 +139,7 @@ export const WorkspaceInviteTeam = () => {
           Icon={IconSend}
           variant="primary"
           accent="blue"
-          title="Invite"
+          title={t`Invite`}
           type="submit"
           disabled={isEmailsEmpty || !!errors.emails}
         />