Translation followup (#9735)

Address PR comments and more progress on translation

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react/macro';
 import { LightButton } from 'twenty-ui';
 
 type CancelButtonProps = {
@@ -9,9 +10,10 @@ export const CancelButton = ({
   onCancel,
   disabled = false,
 }: CancelButtonProps) => {
+  const { t } = useLingui();
   return (
     <LightButton
-      title="Cancel"
+      title={t`Cancel`}
       accent="tertiary"
       onClick={onCancel}
       disabled={disabled}

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

@@ -34,6 +34,7 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
@@ -49,6 +50,8 @@ type SettingsNavigationItem = {
 export const SettingsNavigationDrawerItems = () => {
   const { signOut } = useAuth();
 
+  const { t } = useLingui();
+
   const billing = useRecoilValue(billingState);
   const isFunctionSettingsEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsFunctionSettingsEnabled,
@@ -66,13 +69,13 @@ export const SettingsNavigationDrawerItems = () => {
 
   const accountSubSettings: SettingsNavigationItem[] = [
     {
-      label: 'Emails',
+      label: t`Emails`,
       path: SettingsPath.AccountsEmails,
       Icon: IconMail,
       indentationLevel: 2,
     },
     {
-      label: 'Calendars',
+      label: t`Calendars`,
       path: SettingsPath.AccountsCalendars,
       Icon: IconCalendarEvent,
       indentationLevel: 2,
@@ -95,20 +98,20 @@ export const SettingsNavigationDrawerItems = () => {
   return (
     <>
       <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label="User" />
+        <NavigationDrawerSectionTitle label={t`User`} />
         <SettingsNavigationDrawerItem
-          label="Profile"
+          label={t`Profile`}
           path={SettingsPath.ProfilePage}
           Icon={IconUserCircle}
         />
         <SettingsNavigationDrawerItem
-          label="Experience"
+          label={t`Experience`}
           path={SettingsPath.Experience}
           Icon={IconColorSwatch}
         />
         <NavigationDrawerItemGroup>
           <SettingsNavigationDrawerItem
-            label="Accounts"
+            label={t`Accounts`}
             path={SettingsPath.Accounts}
             Icon={IconAt}
             matchSubPages={false}
@@ -130,37 +133,37 @@ export const SettingsNavigationDrawerItems = () => {
         </NavigationDrawerItemGroup>
       </NavigationDrawerSection>
       <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label="Workspace" />
+        <NavigationDrawerSectionTitle label={t`Workspace`} />
         <SettingsNavigationDrawerItem
-          label="General"
+          label={t`General`}
           path={SettingsPath.Workspace}
           Icon={IconSettings}
         />
         <SettingsNavigationDrawerItem
-          label="Members"
+          label={t`Members`}
           path={SettingsPath.WorkspaceMembersPage}
           Icon={IconUsers}
         />
         {isBillingPageEnabled && (
           <SettingsNavigationDrawerItem
-            label="Billing"
+            label={t`Billing`}
             path={SettingsPath.Billing}
             Icon={IconCurrencyDollar}
           />
         )}
         <SettingsNavigationDrawerItem
-          label="Data model"
+          label={t`Data model`}
           path={SettingsPath.Objects}
           Icon={IconHierarchy2}
         />
         <SettingsNavigationDrawerItem
-          label="Integrations"
+          label={t`Integrations`}
           path={SettingsPath.Integrations}
           Icon={IconApps}
         />
         <AdvancedSettingsWrapper navigationDrawerItem={true}>
           <SettingsNavigationDrawerItem
-            label="Security"
+            label={t`Security`}
             path={SettingsPath.Security}
             Icon={IconKey}
           />
@@ -173,7 +176,7 @@ export const SettingsNavigationDrawerItems = () => {
         </AdvancedSettingsWrapper>
         <AdvancedSettingsWrapper navigationDrawerItem={true}>
           <SettingsNavigationDrawerItem
-            label="API & Webhooks"
+            label={t`API & Webhooks`}
             path={SettingsPath.Developers}
             Icon={IconCode}
           />
@@ -181,7 +184,7 @@ export const SettingsNavigationDrawerItems = () => {
         {isFunctionSettingsEnabled && (
           <AdvancedSettingsWrapper navigationDrawerItem={true}>
             <SettingsNavigationDrawerItem
-              label="Functions"
+              label={t`Functions`}
               path={SettingsPath.ServerlessFunctions}
               Icon={IconFunction}
             />
@@ -189,21 +192,21 @@ export const SettingsNavigationDrawerItems = () => {
         )}
       </NavigationDrawerSection>
       <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label="Other" />
+        <NavigationDrawerSectionTitle label={t`Other`} />
         {isAdminPageEnabled && (
           <SettingsNavigationDrawerItem
-            label="Server Admin Panel"
+            label={t`Server Admin Panel`}
             path={SettingsPath.AdminPanel}
             Icon={IconServer}
           />
         )}
         <SettingsNavigationDrawerItem
-          label="Releases"
+          label={t`Releases`}
           path={SettingsPath.Releases}
           Icon={IconRocket}
         />
         <NavigationDrawerItem
-          label="Logout"
+          label={t`Logout`}
           onClick={signOut}
           Icon={IconDoorEnter}
         />

packages/twenty-front/src/modules/settings/components/__stories__/CancelButton.stories.tsx

@@ -1,10 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { CancelButton } from '../SaveAndCancelButtons/CancelButton';
 
 const meta: Meta<typeof CancelButton> = {
   title: 'Modules/Settings/CancelButton',
   component: CancelButton,
+  decorators: [I18nFrontDecorator],
 };
 
 export default meta;