Continue Frontend localization (#9909)

Translation more content on the frontend
2025-01-29 17:36:28 +01:00
parent ce0a6c1b17
commit 9d32e63111
56 changed files with 3187 additions and 1366 deletions
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
@ -16,6 +16,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
  Button,
@ -91,19 +92,19 @@ export const SettingsObjectDetailPage = () => {
  const tabs = [
    {
      id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.FIELDS,
-      title: 'Fields',
+      title: t`Fields`,
      Icon: IconListDetails,
      hide: false,
    },
    {
      id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS,
-      title: 'Settings',
+      title: t`Settings`,
      Icon: IconSettings,
      hide: false,
    },
    {
      id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.INDEXES,
-      title: 'Indexes',
+      title: t`Indexes`,
      Icon: IconCodeCircle,
      hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled,
      pill: (
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
@ -12,6 +12,7 @@ import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
 import { TableMetadata } from '@/ui/layout/table/types/TableMetadata';
 import styled from '@emotion/styled';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
@ -20,65 +21,63 @@ import { IconSearch } from 'twenty-ui';
 import { useMapFieldMetadataItemToSettingsObjectDetailTableItem } from '~/pages/settings/data-model/hooks/useMapFieldMetadataItemToSettingsObjectDetailTableItem';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';

-const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD = (
-  t: (literals: TemplateStringsArray) => string,
-): TableMetadata<SettingsObjectDetailTableItem> => ({
-  tableId: 'settingsObjectDetail',
-  fields: [
-    {
-      fieldLabel: t`Name`,
+const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD: TableMetadata<SettingsObjectDetailTableItem> =
+  {
+    tableId: 'settingsObjectDetail',
+    fields: [
+      {
+        fieldLabel: msg`Name`,
+        fieldName: 'label',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Field type`,
+        fieldName: 'fieldType',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Data type`,
+        fieldName: 'dataType',
+        fieldType: 'string',
+        align: 'left',
+      },
+    ],
+    initialSort: {
      fieldName: 'label',
-      fieldType: 'string',
-      align: 'left',
+      orderBy: 'AscNullsLast',
    },
-    {
-      fieldLabel: t`Field type`,
-      fieldName: 'fieldType',
-      fieldType: 'string',
-      align: 'left',
-    },
-    {
-      fieldLabel: t`Data type`,
-      fieldName: 'dataType',
-      fieldType: 'string',
-      align: 'left',
-    },
-  ],
-  initialSort: {
-    fieldName: 'label',
-    orderBy: 'AscNullsLast',
-  },
-});
+  };

-const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM = (
-  t: (literals: TemplateStringsArray) => string,
-): TableMetadata<SettingsObjectDetailTableItem> => ({
-  tableId: 'settingsObjectDetail',
-  fields: [
-    {
-      fieldLabel: t`Name`,
+const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM: TableMetadata<SettingsObjectDetailTableItem> =
+  {
+    tableId: 'settingsObjectDetail',
+    fields: [
+      {
+        fieldLabel: msg`Name`,
+        fieldName: 'label',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Identifier`,
+        fieldName: 'identifierType',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Data type`,
+        fieldName: 'dataType',
+        fieldType: 'string',
+        align: 'left',
+      },
+    ],
+    initialSort: {
      fieldName: 'label',
-      fieldType: 'string',
-      align: 'left',
+      orderBy: 'AscNullsLast',
    },
-    {
-      fieldLabel: t`Identifier`,
-      fieldName: 'identifierType',
-      fieldType: 'string',
-      align: 'left',
-    },
-    {
-      fieldLabel: t`Data type`,
-      fieldName: 'dataType',
-      fieldType: 'string',
-      align: 'left',
-    },
-  ],
-  initialSort: {
-    fieldName: 'label',
-    orderBy: 'AscNullsLast',
-  },
-});
+  };

 const StyledSearchInput = styled(TextInput)`
  padding-bottom: ${({ theme }) => theme.spacing(2)};
@ -98,8 +97,8 @@ export const SettingsObjectFieldTable = ({
  const [searchTerm, setSearchTerm] = useState('');

  const tableMetadata = objectMetadataItem.isCustom
-    ? GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM(t)
-    : GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD(t);
+    ? GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM
+    : GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD;

  const { mapFieldMetadataItemToSettingsObjectDetailTableItem } =
    useMapFieldMetadataItemToSettingsObjectDetailTableItem(objectMetadataItem);
@ -190,7 +189,7 @@ export const SettingsObjectFieldTable = ({
            <SortableTableHeader
              key={item.fieldName}
              fieldName={item.fieldName}
-              label={item.fieldLabel}
+              label={t(item.fieldLabel)}
              tableId={tableMetadata.tableId}
              initialSort={tableMetadata.initialSort}
            />
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
@ -9,6 +9,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
 import { TableMetadata } from '@/ui/layout/table/types/TableMetadata';
 import styled from '@emotion/styled';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
@ -39,20 +40,20 @@ export const SettingsObjectIndexTable = ({
    tableId: 'settingsObjectIndexs',
    fields: [
      {
-        fieldLabel: t`Fields`,
+        fieldLabel: msg`Fields`,
        fieldName: 'indexFields',
        fieldType: 'string',
        align: 'left',
      },
      {
-        fieldLabel: '',
+        fieldLabel: msg`Unique`,
        FieldIcon: IconSquareKey,
        fieldName: 'isUnique',
        fieldType: 'string',
        align: 'left',
      },
      {
-        fieldLabel: t`Type`,
+        fieldLabel: msg`Type`,
        fieldName: 'indexType',
        fieldType: 'string',
        align: 'right',
@ -123,7 +124,7 @@ export const SettingsObjectIndexTable = ({
            <SortableTableHeader
              key={item.fieldName}
              fieldName={item.fieldName}
-              label={item.fieldLabel}
+              label={t(item.fieldLabel)}
              Icon={item.FieldIcon}
              tableId={tableMetadata.tableId}
              initialSort={tableMetadata.initialSort}
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@ -104,19 +104,14 @@ export const SettingsObjects = () => {
    [inactiveObjectMetadataItems, totalCountByObjectMetadataItemNamePlural],
  );

-  const tableMetadata = useMemo(
-    () => GET_SETTINGS_OBJECT_TABLE_METADATA(t),
-    [t],
-  );
-
  const sortedActiveObjectSettingsItems = useSortedArray(
    activeObjectSettingsArray,
-    tableMetadata,
+    GET_SETTINGS_OBJECT_TABLE_METADATA,
  );

  const sortedInactiveObjectSettingsItems = useSortedArray(
    inactiveObjectSettingsArray,
-    tableMetadata,
+    GET_SETTINGS_OBJECT_TABLE_METADATA,
  );

  const filteredActiveObjectSettingsItems = useMemo(
@ -175,15 +170,17 @@ export const SettingsObjects = () => {

            <Table>
              <StyledObjectTableRow>
-                {tableMetadata.fields.map(
+                {GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map(
                  (settingsObjectsTableMetadataField) => (
                    <SortableTableHeader
                      key={settingsObjectsTableMetadataField.fieldName}
                      fieldName={settingsObjectsTableMetadataField.fieldName}
-                      label={settingsObjectsTableMetadataField.fieldLabel}
-                      tableId={tableMetadata.tableId}
+                      label={t(settingsObjectsTableMetadataField.fieldLabel)}
+                      tableId={GET_SETTINGS_OBJECT_TABLE_METADATA.tableId}
                      align={settingsObjectsTableMetadataField.align}
-                      initialSort={tableMetadata.initialSort}
+                      initialSort={
+                        GET_SETTINGS_OBJECT_TABLE_METADATA.initialSort
+                      }
                    />
                  ),
                )}
--- a/packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectTableMetadata.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectTableMetadata.ts
@ -1,43 +1,38 @@
 import { TableMetadata } from '@/ui/layout/table/types/TableMetadata';
+import { msg } from '@lingui/core/macro';
 import { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem';

-type GET_SETTINGS_OBJECT_TABLE_METADATAProps = {
-  (descriptor: { id: string }): string;
-  (literals: TemplateStringsArray, ...placeholders: any[]): string;
-};
-
-export const GET_SETTINGS_OBJECT_TABLE_METADATA = (
-  t: GET_SETTINGS_OBJECT_TABLE_METADATAProps,
-): TableMetadata<SettingsObjectTableItem> => ({
-  tableId: 'settingsObject',
-  fields: [
-    {
-      fieldLabel: t({ id: 'Name' }),
+export const GET_SETTINGS_OBJECT_TABLE_METADATA: TableMetadata<SettingsObjectTableItem> =
+  {
+    tableId: 'settingsObject',
+    fields: [
+      {
+        fieldLabel: msg`Name`,
+        fieldName: 'labelPlural',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Type`,
+        fieldName: 'objectTypeLabel',
+        fieldType: 'string',
+        align: 'left',
+      },
+      {
+        fieldLabel: msg`Fields`,
+        fieldName: 'fieldsCount',
+        fieldType: 'number',
+        align: 'right',
+      },
+      {
+        fieldLabel: msg`Instances`,
+        fieldName: 'totalObjectCount',
+        fieldType: 'number',
+        align: 'right',
+      },
+    ],
+    initialSort: {
      fieldName: 'labelPlural',
-      fieldType: 'string',
-      align: 'left',
+      orderBy: 'AscNullsLast',
    },
-    {
-      fieldLabel: t({ id: 'Type' }),
-      fieldName: 'objectTypeLabel',
-      fieldType: 'string',
-      align: 'left',
-    },
-    {
-      fieldLabel: t({ id: 'Fields' }),
-      fieldName: 'fieldsCount',
-      fieldType: 'number',
-      align: 'right',
-    },
-    {
-      fieldLabel: t({ id: 'Instances' }),
-      fieldName: 'totalObjectCount',
-      fieldType: 'number',
-      align: 'right',
-    },
-  ],
-  initialSort: {
-    fieldName: 'labelPlural',
-    orderBy: 'AscNullsLast',
-  },
-});
+  };
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@ -1,4 +1,3 @@
-import { ApolloError } from '@apollo/client';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
@ -9,6 +8,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';