Translation followup (#9735)

Address PR comments and more progress on translation
2025-01-19 13:29:19 +01:00
parent 052331685f
commit 056cb7c66d
97 changed files with 3981 additions and 402 deletions
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@ -126,9 +126,7 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
            </DropdownMenuItemsContainer>
          </DropdownMenu>
        }
-        dropdownHotkeyScope={{
-          scope: dropdownId,
-        }}
+        dropdownHotkeyScope={{ scope: dropdownId }}
      />
    </StyledContainer>
  );
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';

 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
+import { Trans } from '@lingui/react/macro';
 import { Card, CardContent } from 'twenty-ui';

 type SettingsDataModelPreviewFormCardProps = {
@ -25,7 +26,9 @@ export const SettingsDataModelPreviewFormCard = ({
 }: SettingsDataModelPreviewFormCardProps) => (
  <Card className={className} fullWidth rounded>
    <StyledPreviewContainer divider={!!form}>
-      <StyledFormCardTitle>Preview</StyledFormCardTitle>
+      <StyledFormCardTitle>
+        <Trans>Preview</Trans>
+      </StyledFormCardTitle>
      {preview}
    </StyledPreviewContainer>
    {!!form && <StyledFormContainer>{form}</StyledFormContainer>}
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
@ -11,6 +11,7 @@ import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/uti
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
 import {
  AppTooltip,
  Card,
@ -91,6 +92,8 @@ export const SettingsDataModelFieldIconLabelForm = ({

  const theme = useTheme();

+  const { t } = useLingui();
+
  const isLabelSyncedWithName =
    watch('isLabelSyncedWithName') ??
    (isDefined(fieldMetadataItem)
@ -99,8 +102,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
  const label = watch('label');

  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 fillNameFromLabel = (label: string) => {
    isDefined(label) &&
@ -131,7 +134,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
          defaultValue={fieldMetadataItem?.label}
          render={({ field: { onChange, value } }) => (
            <TextInput
-              placeholder="Employees"
+              placeholder={t`Employees`}
              value={value}
              onChange={(value) => {
                onChange(value);
@ -160,8 +163,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
                    render={({ field: { onChange, value } }) => (
                      <>
                        <TextInput
-                          label="API Name"
-                          placeholder="employees"
+                          label={t`API Name`}
+                          placeholder={t`employees`}
                          value={value}
                          onChange={onChange}
                          disabled={
@ -205,8 +208,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
                    <Card rounded>
                      <SettingsOptionCardContentToggle
                        Icon={IconRefresh}
-                        title="Synchronize Field Label and API Name"
-                        description="Should changing a field's label also change the API name?"
+                        title={t`Synchronize Field Label and API Name`}
+                        description={t`Should changing a field's label also change the API name?`}
                        checked={value ?? true}
                        disabled={
                          isDefined(fieldMetadataItem) &&
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@ -132,12 +132,8 @@ export const SettingsObjectNewFieldSelector = ({
                        <UndecoratedLink
                          to={getSettingsPath(
                            SettingsPath.ObjectNewFieldConfigure,
-                            {
-                              objectNamePlural,
-                            },
-                            {
-                              fieldType: key,
-                            },
+                            { objectNamePlural },
+                            { fieldType: key },
                          )}
                          fullWidth
                          onClick={() => {
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldIconLabelForm.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldIconLabelForm.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 { SettingsDataModelFieldIconLabelForm } from '../SettingsDataModelFieldIconLabelForm';

@ -24,6 +25,7 @@ const meta: Meta<typeof SettingsDataModelFieldIconLabelForm> = {
    FormProviderDecorator,
    IconsProviderDecorator,
    ComponentDecorator,
+    I18nFrontDecorator,
  ],
 };

--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldSettingsFormCard.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldSettingsFormCard.stories.tsx
@ -8,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { SettingsDataModelFieldSettingsFormCard } from '../SettingsDataModelFieldSettingsFormCard';

@ -33,6 +34,7 @@ const meta: Meta<typeof SettingsDataModelFieldSettingsFormCard> = {
    ObjectMetadataItemsDecorator,
    SnackBarDecorator,
    FormProviderDecorator,
+    I18nFrontDecorator,
  ],
  args: {
    fieldMetadataItem,
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
@ -4,6 +4,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
+import { useLingui } from '@lingui/react/macro';
 import { IconSlash } from 'twenty-ui';

 export const settingsDataModelFieldDateFormSchema = z.object({
@ -27,6 +28,8 @@ export const SettingsDataModelFieldDateForm = ({
  disabled,
  fieldMetadataItem,
 }: SettingsDataModelFieldDateFormProps) => {
+  const { t } = useLingui();
+
  const { control } = useFormContext<SettingsDataModelFieldDateFormValues>();

  const { initialDisplayAsRelativeDateValue } =
@ -42,7 +45,7 @@ export const SettingsDataModelFieldDateForm = ({
      render={({ field: { onChange, value } }) => (
        <SettingsOptionCardContentToggle
          Icon={IconSlash}
-          title="Display as relative date"
+          title={t`Display as relative date`}
          checked={value ?? false}
          disabled={disabled}
          onChange={onChange}
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
@ -117,9 +117,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
      <Dropdown
        dropdownId={SELECT_COLOR_DROPDOWN_ID}
        dropdownPlacement="bottom-start"
-        dropdownHotkeyScope={{
-          scope: SELECT_COLOR_DROPDOWN_ID,
-        }}
+        dropdownHotkeyScope={{ scope: SELECT_COLOR_DROPDOWN_ID }}
        clickableComponent={<StyledColorSample colorName={option.color} />}
        dropdownComponents={
          <DropdownMenuItemsContainer>
@ -160,9 +158,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
      <Dropdown
        dropdownId={SELECT_ACTIONS_DROPDOWN_ID}
        dropdownPlacement="right-start"
-        dropdownHotkeyScope={{
-          scope: SELECT_ACTIONS_DROPDOWN_ID,
-        }}
+        dropdownHotkeyScope={{ scope: SELECT_ACTIONS_DROPDOWN_ID }}
        clickableComponent={
          <StyledLightIconButton accent="tertiary" Icon={IconDotsVertical} />
        }
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
@ -80,9 +80,7 @@ export const SettingsObjectFieldActiveActionDropdown = ({
          )}
        </DropdownMenuItemsContainer>
      }
-      dropdownHotkeyScope={{
-        scope: dropdownId,
-      }}
+      dropdownHotkeyScope={{ scope: dropdownId }}
    />
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Card, FloatingButton, IconEye } from 'twenty-ui';

 import { SettingsPath } from '@/types/SettingsPath';
+import { useLingui } from '@lingui/react/macro';
 import DarkCoverImage from '../../assets/cover-dark.png';
 import LightCoverImage from '../../assets/cover-light.png';

@ -25,12 +26,13 @@ const StyledButtonContainer = styled.div`
  padding-top: ${({ theme }) => theme.spacing(5)};
 `;
 export const SettingsObjectCoverImage = () => {
+  const { t } = useLingui();
  return (
    <StyledCoverImageContainer>
      <StyledButtonContainer>
        <FloatingButton
          Icon={IconEye}
-          title="Visualize"
+          title={t`Visualize`}
          size="small"
          to={'/settings/' + SettingsPath.ObjectOverview}
        />
--- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx
@ -65,9 +65,7 @@ export const SettingsObjectInactiveMenuDropDown = ({
          )}
        </DropdownMenuItemsContainer>
      }
-      dropdownHotkeyScope={{
-        scope: dropdownId,
-      }}
+      dropdownHotkeyScope={{ scope: dropdownId }}
    />
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
@ -11,6 +11,7 @@ import {
  SettingsDataModelObjectIdentifiersForm,
  SettingsDataModelObjectIdentifiersFormValues,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
+import { Trans } from '@lingui/react/macro';
 import { Card, CardContent } from 'twenty-ui';

 type SettingsDataModelObjectSettingsFormCardProps = {
@ -57,7 +58,9 @@ export const SettingsDataModelObjectSettingsFormCard = ({
  return (
    <Card fullWidth>
      <StyledTopCardContent divider>
-        <SettingsDataModelCardTitle>Preview</SettingsDataModelCardTitle>
+        <SettingsDataModelCardTitle>
+          <Trans>Preview</Trans>
+        </SettingsDataModelCardTitle>
        {labelIdentifierFieldMetadataItem ? (
          <StyledFieldPreviewCard
            objectMetadataItem={objectMetadataItem}