Translation followup (#9735)

Address PR comments and more progress on translation

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx

@@ -13,6 +13,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useLingui } from '@lingui/react/macro';
 import { useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
@@ -21,6 +22,7 @@ import { isDefined } from '~/utils/isDefined';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsDevelopersApiKeysNew = () => {
+  const { t } = useLingui();
   const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
   const navigateSettings = useNavigateSettings();
   const setApiKeyToken = useSetRecoilState(apiKeyTokenState);
@@ -66,17 +68,17 @@ export const SettingsDevelopersApiKeysNew = () => {
   const canSave = !!formValues.name && createOneApiKey;
   return (
     <SubMenuTopBarContainer
-      title="New key"
+      title={t`New key`}
       links={[
         {
-          children: 'Workspace',
+          children: t`Workspace`,
           href: getSettingsPath(SettingsPath.Workspace),
         },
         {
-          children: 'Developers',
+          children: t`Developers`,
           href: getSettingsPath(SettingsPath.Developers),
         },
-        { children: 'New Key' },
+        { children: t`New Key` },
       ]}
       actionButton={
         <SaveAndCancelButtons
@@ -90,9 +92,9 @@ export const SettingsDevelopersApiKeysNew = () => {
     >
       <SettingsPageContainer>
         <Section>
-          <H2Title title="Name" description="Name of your API key" />
+          <H2Title title={t`Name`} description={t`Name of your API key`} />
           <TextInput
-            placeholder="E.g. backoffice integration"
+            placeholder={t`E.g. backoffice integration`}
             value={formValues.name}
             onKeyDown={(e) => {
               if (e.key === Key.Enter) {
@@ -110,8 +112,8 @@ export const SettingsDevelopersApiKeysNew = () => {
         </Section>
         <Section>
           <H2Title
-            title="Expiration Date"
-            description="When the API key will expire."
+            title={t`Expiration Date`}
+            description={t`When the API key will expire.`}
           />
           <Select
             dropdownId="object-field-type-select"