admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Localization of actions (#9934)

Browse Source 
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
This commit is contained in:
Félix Malfait
2025-01-30 17:00:35 +01:00
committed by GitHub
parent 385bf591cf
commit 9ec524213c
49 changed files with 3391 additions and 1311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx
View File

@ -1,6 +1,7 @@
import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { i18n } from '@lingui/core';
type RecordIndexActionMenuBarEntryProps = {
entry: ActionMenuEntry;
@ -33,7 +34,7 @@ export const RecordIndexActionMenuBarEntry = ({
return (
<StyledButton onClick={() => entry.onClick?.()}>
{entry.Icon && <entry.Icon size={theme.icon.size.md} />}
<StyledButtonLabel>{entry.label}</StyledButtonLabel>
<StyledButtonLabel>{i18n._(entry.label)}</StyledButtonLabel>
</StyledButton>
);
};

5
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx
View File

@ -1,5 +1,6 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { i18n } from '@lingui/core';
import { Button } from 'twenty-ui';
export const RecordIndexActionMenuButtons = () => {
@ -18,9 +19,9 @@ export const RecordIndexActionMenuButtons = () => {
size="small"
variant="secondary"
accent="default"
title={entry.shortLabel}
title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
onClick={entry.onClick}
ariaLabel={entry.label}
ariaLabel={i18n._(entry.label)}
/>
))}
</>

6
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
View File

@ -10,6 +10,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import styled from '@emotion/styled';
import { i18n } from '@lingui/core';
import { useRecoilValue } from 'recoil';
import { MenuItem } from 'twenty-ui';
@ -44,7 +45,8 @@ export const RecordIndexActionMenuDropdown = () => {
//TODO: remove this
const width = actionMenuEntries.some(
(actionMenuEntry) => actionMenuEntry.label === 'Remove from favorites',
(actionMenuEntry) =>
i18n._(actionMenuEntry.label) === 'Remove from favorites',
)
? 200
: undefined;
@ -75,7 +77,7 @@ export const RecordIndexActionMenuDropdown = () => {
closeDropdown();
}}
accent={item.accent}
text={item.label}
text={i18n._(item.label)}
/>
))}
</DropdownMenuItemsContainer>

7
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx
View File

@ -1,6 +1,7 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { i18n } from '@lingui/core';
import { Button, IconButton, useIsMobile } from 'twenty-ui';
export const RecordShowActionMenuButtons = () => {
@ -23,9 +24,9 @@ export const RecordShowActionMenuButtons = () => {
size="small"
variant="secondary"
accent="default"
title={entry.shortLabel}
title={i18n._(entry.shortLabel)}
onClick={() => entry.onClick?.()}
ariaLabel={entry.label}
ariaLabel={i18n._(entry.label)}
/>
) : (
<IconButton
@ -35,7 +36,7 @@ export const RecordShowActionMenuButtons = () => {
variant="secondary"
accent="default"
onClick={() => entry.onClick?.()}
ariaLabel={entry.label}
ariaLabel={i18n._(entry.label)}
/>
),
)}

3
packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx
View File

@ -13,6 +13,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useTheme } from '@emotion/react';
import { i18n } from '@lingui/core';
import { Key } from 'ts-key-enum';
import { Button, MenuItem, getOsControlSymbol } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
@ -92,7 +93,7 @@ export const RightDrawerActionMenuDropdown = () => {
);
actionMenuEntry.onClick?.();
}}
text={actionMenuEntry.label}
text={i18n._(actionMenuEntry.label)}
/>
))}
</DropdownMenuItemsContainer>

5
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx
View File

@ -12,11 +12,13 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
import { msg } from '@lingui/core/macro';
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, waitFor, within } from '@storybook/test';
import { RecoilRoot } from 'recoil';
import { IconTrash, RouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const deleteMock = jest.fn();
@ -25,6 +27,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
component: RecordIndexActionMenuBar,
decorators: [
RouterDecorator,
I18nFrontDecorator,
(Story) => (
<RecordFiltersComponentInstanceContext.Provider
value={{ instanceId: 'story-action-menu' }}
@ -55,7 +58,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
scope: ActionMenuEntryScope.RecordSelection,
type: ActionMenuEntryType.Standard,
key: 'delete',
label: 'Delete',
label: msg`Delete`,
position: 0,
Icon: IconTrash,
onClick: deleteMock,

10
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx
View File

@ -3,15 +3,17 @@ import {
ActionMenuEntryScope,
ActionMenuEntryType,
} from '@/action-menu/types/ActionMenuEntry';
import { msg } from '@lingui/core/macro';
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry',
component: RecordIndexActionMenuBarEntry,
decorators: [ComponentDecorator],
decorators: [ComponentDecorator, I18nFrontDecorator],
};
export default meta;
@ -26,7 +28,7 @@ export const Default: Story = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'delete',
label: 'Delete',
label: msg`Delete`,
position: 0,
Icon: IconTrash,
onClick: deleteMock,
@ -40,7 +42,7 @@ export const WithDangerAccent: Story = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'delete',
label: 'Delete',
label: msg`Delete`,
position: 0,
Icon: IconTrash,
onClick: deleteMock,
@ -55,7 +57,7 @@ export const WithInteraction: Story = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'markAsDone',
label: 'Mark as done',
label: msg`Mark as done`,
position: 0,
Icon: IconCheckbox,
onClick: markAsDoneMock,

9
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx
View File

@ -14,12 +14,14 @@ import {
} from '@/action-menu/types/ActionMenuEntry';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import { msg } from '@lingui/core/macro';
import {
IconCheckbox,
IconHeart,
IconTrash,
getCanvasElementForDropdownTesting,
} from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const deleteMock = jest.fn();
const markAsDoneMock = jest.fn();
@ -29,6 +31,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
title: 'Modules/ActionMenu/RecordIndexActionMenuDropdown',
component: RecordIndexActionMenuDropdown,
decorators: [
I18nFrontDecorator,
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
@ -53,7 +56,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'delete',
label: 'Delete',
label: msg`Delete`,
position: 0,
Icon: IconTrash,
onClick: deleteMock,
@ -63,7 +66,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'markAsDone',
label: 'Mark as done',
label: msg`Mark as done`,
position: 1,
Icon: IconCheckbox,
onClick: markAsDoneMock,
@ -73,7 +76,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'addToFavorites',
label: 'Add to favorites',
label: msg`Add to favorites`,
position: 2,
Icon: IconHeart,
onClick: addToFavoritesMock,

9
packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx
View File

@ -12,6 +12,7 @@ import {
} from '@/action-menu/types/ActionMenuEntry';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { msg } from '@lingui/core/macro';
import { userEvent, waitFor, within } from '@storybook/test';
import {
ComponentDecorator,
@ -21,6 +22,7 @@ import {
IconTrash,
MenuItemAccent,
} from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
const deleteMock = jest.fn();
const addToFavoritesMock = jest.fn();
@ -30,6 +32,7 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
title: 'Modules/ActionMenu/RightDrawerActionMenuDropdown',
component: RightDrawerActionMenuDropdown,
decorators: [
I18nFrontDecorator,
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
@ -62,7 +65,7 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'addToFavorites',
label: 'Add to favorites',
label: msg`Add to favorites`,
position: 0,
Icon: IconHeart,
onClick: addToFavoritesMock,
@ -72,7 +75,7 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'export',
label: 'Export',
label: msg`Export`,
position: 1,
Icon: IconFileExport,
onClick: exportMock,
@ -82,7 +85,7 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection,
key: 'delete',
label: 'Delete',
label: msg`Delete`,
position: 2,
Icon: IconTrash,
onClick: deleteMock,