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

Email translation and snackbar translation (#10395)

Browse Source 
This pull request focuses on improving localization by replacing
hardcoded strings with translatable strings using the `Trans` component
from `@lingui/react/macro`. Additionally, it introduces locale support
to several email components. Here are the most important changes:

### Localization Improvements:

* Replaced hardcoded strings with `Trans` components in various email
templates to support localization.
(`packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx`,
`packages/twenty-emails/src/emails/password-reset-link.email.tsx`,
`packages/twenty-emails/src/emails/password-update-notify.email.tsx`,
`packages/twenty-emails/src/emails/send-email-verification-link.email.tsx`,
`packages/twenty-emails/src/emails/send-invite-link.email.tsx`,
`packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx`)
[[1]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbR6-R25)
[[2]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbL42-R45)
[[3]](diffhunk://#diff-523cd37f5680ce418450946f62b7804b6586158efb190ced73920ef0fdf96bc8L1)
[[4]](diffhunk://#diff-523cd37f5680ce418450946f62b7804b6586158efb190ced73920ef0fdf96bc8L23-R23)
[[5]](diffhunk://#diff-cf16aa55d3eeb6be606bbe93de4c83b6f146c49b60d6f512d4b87e49fe14338cL29-R29)
[[6]](diffhunk://#diff-cf16aa55d3eeb6be606bbe93de4c83b6f146c49b60d6f512d4b87e49fe14338cL46-R46)
[[7]](diffhunk://#diff-16b613160f937563ec108176f595d8f275a1d87a5b8245d84df60d775f3efebeL1)
[[8]](diffhunk://#diff-16b613160f937563ec108176f595d8f275a1d87a5b8245d84df60d775f3efebeL22-R22)
[[9]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L1)
[[10]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L42-R41)
[[11]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L57-R56)
[[12]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L1-R21)
[[13]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L28-R31)
[[14]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L53-R55)

### Locale Support:

* Added `locale` prop to email components to dynamically set the locale.
(`packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx`,
`packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx`)
[[1]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbR6-R25)
[[2]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L1-R21)

### SnackBar Messages:

* Replaced hardcoded SnackBar messages with translatable strings using
the `t` function from `@lingui/react/macro`.
(`packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx`,
`packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts`,
`packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken.ts`,
`packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts`,
`packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx`,
`packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx`)
[[1]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42R7)
[[2]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42L24-R29)
[[3]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42L43-R51)
[[4]](diffhunk://#diff-428199461992a01325159f5fbf826d845f05f3361279eccd3f1ce416e0114845R7-R15)
[[5]](diffhunk://#diff-428199461992a01325159f5fbf826d845f05f3361279eccd3f1ce416e0114845L24-R26)
[[6]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403R5)
[[7]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403L16-R17)
[[8]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403L28-R33)
[[9]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457R5-R17)
[[10]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457L27-R33)
[[11]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457L42-R44)
[[12]](diffhunk://#diff-8d64afa825b47ab71d18e3e284408e2097f5fd2365eae84d9d25d3568c48e49cR7)
[[13]](diffhunk://#diff-8d64afa825b47ab71d18e3e284408e2097f5fd2365eae84d9d25d3568c48e49cR20-R28)
[[14]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceR6)
[[15]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceR19-R20)
[[16]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceL29-R38)
This commit is contained in:
Félix Malfait
2025-02-23 21:15:41 +01:00
committed by GitHub
parent 2039986684
commit df0d23a365
33 changed files with 195 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx
View File

@ -4,6 +4,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
import { useLingui } from '@lingui/react/macro';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useNavigateApp } from '~/hooks/useNavigateApp';
@ -21,11 +22,11 @@ export const VerifyEmailEffect = () => {
const navigate = useNavigateApp();
const { readCaptchaToken } = useReadCaptchaToken();
const { t } = useLingui();
useEffect(() => {
const verifyEmailToken = async () => {
if (!email || !emailVerificationToken) {
enqueueSnackBar(`Invalid email verification link.`, {
enqueueSnackBar(t`Invalid email verification link.`, {
dedupeKey: 'email-verification-link-dedupe-key',
variant: SnackBarVariant.Error,
});
@ -40,14 +41,14 @@ export const VerifyEmailEffect = () => {
captchaToken,
);
enqueueSnackBar('Email verified.', {
enqueueSnackBar(t`Email verified.`, {
dedupeKey: 'email-verification-dedupe-key',
variant: SnackBarVariant.Success,
});
navigate(AppPath.Verify, undefined, { loginToken: loginToken.token });
} catch (error) {
enqueueSnackBar('Email verification failed.', {
enqueueSnackBar(t`Email verification failed.`, {
dedupeKey: 'email-verification-dedupe-key',
variant: SnackBarVariant.Error,
});

9
packages/twenty-front/src/modules/auth/hooks/__tests__/useVerifyLogin.test.ts
View File

@ -1,5 +1,8 @@
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { renderHook } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
import { SOURCE_LOCALE } from 'twenty-shared';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@ -8,6 +11,7 @@ import { useNavigateApp } from '~/hooks/useNavigateApp';
import { useAuth } from '../useAuth';
import { useVerifyLogin } from '../useVerifyLogin';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
jest.mock('../useAuth', () => ({
useAuth: jest.fn(),
}));
@ -20,9 +24,12 @@ jest.mock('~/hooks/useNavigateApp', () => ({
useNavigateApp: jest.fn(),
}));
dynamicActivate(SOURCE_LOCALE);
const renderHooks = () => {
const { result } = renderHook(() => useVerifyLogin(), {
wrapper: RecoilRoot,
wrapper: ({ children }) =>
RecoilRoot({ children: I18nProvider({ i18n, children }) }),
});
return { result };
};

4
packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts
View File

@ -4,6 +4,7 @@ import { useAuth } from '@/auth/hooks/useAuth';
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
import { AppPath } from '@/types/AppPath';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useLingui } from '@lingui/react/macro';
import { useSetRecoilState } from 'recoil';
import { useNavigateApp } from '~/hooks/useNavigateApp';
@ -11,6 +12,7 @@ export const useVerifyLogin = () => {
const { enqueueSnackBar } = useSnackBar();
const navigate = useNavigateApp();
const { getAuthTokensFromLoginToken } = useAuth();
const { t } = useLingui();
const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
isAppWaitingForFreshObjectMetadataState,
@ -21,7 +23,7 @@ export const useVerifyLogin = () => {
setIsAppWaitingForFreshObjectMetadata(true);
await getAuthTokensFromLoginToken(loginToken);
} catch (error) {
enqueueSnackBar('Authentication failed', {
enqueueSnackBar(t`Authentication failed`, {
variant: SnackBarVariant.Error,
});
navigate(AppPath.SignInUp);

33
packages/twenty-front/src/modules/auth/sign-in-up/hooks/__tests__/useHandleResetPassword.test.ts
View File

@ -1,29 +1,46 @@
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { act, renderHook } from '@testing-library/react';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
import { RecoilRoot } from 'recoil';
import { SOURCE_LOCALE } from 'twenty-shared';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
// Mocks
jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar');
jest.mock('~/generated/graphql');
dynamicActivate(SOURCE_LOCALE);
const renderHooks = () => {
const { result } = renderHook(() => useHandleResetPassword(), {
wrapper: ({ children }) =>
RecoilRoot({ children: I18nProvider({ i18n, children }) }),
});
return { result };
};
describe('useHandleResetPassword', () => {
const enqueueSnackBarMock = jest.fn();
const emailPasswordResetLinkMock = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
(useSnackBar as jest.Mock).mockReturnValue({
enqueueSnackBar: enqueueSnackBarMock,
});
(useEmailPasswordResetLinkMutation as jest.Mock).mockReturnValue([
emailPasswordResetLinkMock,
]);
jest.clearAllMocks();
});
it('should show error message if email is invalid', async () => {
const { result } = renderHook(() => useHandleResetPassword());
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith('Invalid email', {
@ -36,7 +53,7 @@ describe('useHandleResetPassword', () => {
data: { emailPasswordResetLink: { success: true } },
});
const { result } = renderHook(() => useHandleResetPassword());
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith(
@ -50,10 +67,10 @@ describe('useHandleResetPassword', () => {
data: { emailPasswordResetLink: { success: false } },
});
const { result } = renderHook(() => useHandleResetPassword());
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was some issue', {
expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was an issue', {
variant: SnackBarVariant.Error,
});
});
@ -62,7 +79,7 @@ describe('useHandleResetPassword', () => {
const errorMessage = 'Network Error';
emailPasswordResetLinkMock.mockRejectedValue(new Error(errorMessage));
const { result } = renderHook(() => useHandleResetPassword());
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith(errorMessage, {

7
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken.ts
View File

@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { t } from '@lingui/core/macro';
import { useResendEmailVerificationTokenMutation } from '~/generated/graphql';
export const useHandleResendEmailVerificationToken = () => {
@ -13,7 +14,7 @@ export const useHandleResendEmailVerificationToken = () => {
(email: string | null) => {
return async () => {
if (!email) {
enqueueSnackBar('Invalid email', {
enqueueSnackBar(t`Invalid email`, {
variant: SnackBarVariant.Error,
});
return;
@ -25,11 +26,11 @@ export const useHandleResendEmailVerificationToken = () => {
});
if (data?.resendEmailVerificationToken?.success === true) {
enqueueSnackBar('Email verification link resent!', {
enqueueSnackBar(t`Email verification link resent!`, {
variant: SnackBarVariant.Success,
});
} else {
enqueueSnackBar('There was some issue', {
enqueueSnackBar(t`There was an issue`, {
variant: SnackBarVariant.Error,
});
}

10
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts
View File

@ -2,17 +2,19 @@ import { useCallback } from 'react';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useLingui } from '@lingui/react/macro';
import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
export const useHandleResetPassword = () => {
const { enqueueSnackBar } = useSnackBar();
const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation();
const { t } = useLingui();
const handleResetPassword = useCallback(
(email: string) => {
return async () => {
if (!email) {
enqueueSnackBar('Invalid email', {
enqueueSnackBar(t`Invalid email`, {
variant: SnackBarVariant.Error,
});
return;
@ -24,11 +26,11 @@ export const useHandleResetPassword = () => {
});
if (data?.emailPasswordResetLink?.success === true) {
enqueueSnackBar('Password reset link has been sent to the email', {
enqueueSnackBar(t`Password reset link has been sent to the email`, {
variant: SnackBarVariant.Success,
});
} else {
enqueueSnackBar('There was some issue', {
enqueueSnackBar(t`There was an issue`, {
variant: SnackBarVariant.Error,
});
}
@ -39,7 +41,7 @@ export const useHandleResetPassword = () => {
}
};
},
[enqueueSnackBar, emailPasswordResetLink],
[enqueueSnackBar, emailPasswordResetLink, t],
);
return { handleResetPassword };

4
packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx
View File

@ -4,6 +4,7 @@ import { IconCopy, LightIconButton } from 'twenty-ui';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useLingui } from '@lingui/react/macro';
const StyledButtonContainer = styled.div`
padding: 0 ${({ theme }) => theme.spacing(1)};
@ -16,6 +17,7 @@ export type LightCopyIconButtonProps = {
export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
const { enqueueSnackBar } = useSnackBar();
const theme = useTheme();
const { t } = useLingui();
return (
<StyledButtonContainer>
@ -23,7 +25,7 @@ export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
className="copy-button"
Icon={IconCopy}
onClick={() => {
enqueueSnackBar('Text copied to clipboard', {
enqueueSnackBar(t`Text copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,

7
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx
View File

@ -3,6 +3,7 @@ import { usePhonesFieldDisplay } from '@/object-record/record-field/meta-types/h
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay';
import { useLingui } from '@lingui/react/macro';
import React from 'react';
import { useIcons } from 'twenty-ui';
@ -15,6 +16,8 @@ export const PhonesFieldDisplay = () => {
const { getIcon } = useIcons();
const { t } = useLingui();
const IconCircleCheck = getIcon('IconCircleCheck');
const IconExclamationCircle = getIcon('IconExclamationCircle');
@ -26,13 +29,13 @@ export const PhonesFieldDisplay = () => {
try {
await navigator.clipboard.writeText(phoneNumber);
enqueueSnackBar('Phone number copied to clipboard', {
enqueueSnackBar(t`Phone number copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCircleCheck size={16} color="green" />,
duration: 2000,
});
} catch (err) {
enqueueSnackBar('Error copying to clipboard', {
enqueueSnackBar(t`Error copying to clipboard`, {
variant: SnackBarVariant.Error,
icon: <IconExclamationCircle size={16} color="red" />,
duration: 2000,

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx
View File

@ -3,6 +3,7 @@ import { ComponentDecorator } from 'twenty-ui';
import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
@ -13,6 +14,7 @@ const meta: Meta = {
MemoryRouterDecorator,
getFieldDecorator('person', 'phones'),
ComponentDecorator,
I18nFrontDecorator,
SnackBarDecorator,
],
component: PhonesFieldDisplay,

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
View File

@ -8,6 +8,7 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { useNumberField } from '../../../hooks/useNumberField';
import { NumberFieldInput, NumberFieldInputProps } from '../NumberFieldInput';
@ -108,7 +109,7 @@ const meta: Meta = {
onTab: { control: false },
onShiftTab: { control: false },
},
decorators: [clearMocksDecorator, SnackBarDecorator],
decorators: [clearMocksDecorator, SnackBarDecorator, I18nFrontDecorator],
parameters: {
clearMocks: true,
},

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
View File

@ -7,6 +7,7 @@ import { FieldMetadataType } from '~/generated/graphql';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { FieldContextProvider } from '../../../components/FieldContextProvider';
import { useTextField } from '../../../hooks/useTextField';
import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
@ -107,7 +108,7 @@ const meta: Meta = {
onTab: { control: false },
onShiftTab: { control: false },
},
decorators: [clearMocksDecorator, SnackBarDecorator],
decorators: [clearMocksDecorator, SnackBarDecorator, I18nFrontDecorator],
parameters: {
clearMocks: true,
},

5
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx
View File

@ -15,6 +15,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
@ -49,9 +50,11 @@ export const SettingsAdminWorkspaceContent = ({
const { updateFeatureFlagState } = useFeatureFlagState();
const userLookupResult = useRecoilValue(userLookupResultState);
const { t } = useLingui();
const handleImpersonate = async (workspaceId: string) => {
if (!userLookupResult?.user.id) {
enqueueSnackBar('Please search for a user first', {
enqueueSnackBar(t`Please search for a user first`, {
variant: SnackBarVariant.Error,
});
return;

5
packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx
View File

@ -5,7 +5,7 @@ import { Button, IconCopy } from 'twenty-ui';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { useLingui } from '@lingui/react/macro';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
@ -20,6 +20,7 @@ type ApiKeyInputProps = { apiKey: string };
export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
const theme = useTheme();
const { t } = useLingui();
const { enqueueSnackBar } = useSnackBar();
return (
@ -31,7 +32,7 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
Icon={IconCopy}
title="Copy"
onClick={() => {
enqueueSnackBar('API Key copied to clipboard', {
enqueueSnackBar(t`API Key copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,

3
packages/twenty-front/src/modules/settings/developers/components/__stories__/ApiKeyInput.stories.tsx
View File

@ -2,12 +2,13 @@ import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
const meta: Meta<typeof ApiKeyInput> = {
title: 'Modules/Settings/Developers/ApiKeys/ApiKeyInput',
component: ApiKeyInput,
decorators: [ComponentDecorator, SnackBarDecorator],
decorators: [ComponentDecorator, SnackBarDecorator, I18nFrontDecorator],
args: {
apiKey:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0d2VudHktN2VkOWQyMTItMWMyNS00ZDAyLWJmMjUtNmFlY2NmN2VhNDE5IiwiaWF0IjoxNjk4MTQyODgyLCJleHAiOjE2OTk0MDE1OTksImp0aSI6ImMyMmFiNjQxLTVhOGYtNGQwMC1iMDkzLTk3MzUwYTM2YzZkOSJ9.JIe2TX5IXrdNl3n-kRFp3jyfNUE7unzXZLAzm2Gxl98',

18
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx
View File

@ -5,6 +5,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { Controller, useFormContext } from 'react-hook-form';
import { Button, H2Title, IconCopy, Section } from 'twenty-ui';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
@ -35,6 +36,7 @@ export const SettingsSSOOIDCForm = () => {
const { control } = useFormContext();
const { enqueueSnackBar } = useSnackBar();
const theme = useTheme();
const { t } = useLingui();
const authorizedUrl = window.location.origin;
const redirectionUrl = `${REACT_APP_SERVER_BASE_URL}/auth/oidc/callback`;
@ -43,8 +45,8 @@ export const SettingsSSOOIDCForm = () => {
<>
<Section>
<H2Title
title="Client Settings"
description="Provide your OIDC provider details"
title={t`Client Settings`}
description={t`Provide your OIDC provider details`}
/>
<StyledInputsContainer>
<StyledContainer>
@ -59,7 +61,7 @@ export const SettingsSSOOIDCForm = () => {
<StyledButtonCopy>
<Button
Icon={IconCopy}
title="Copy"
title={t`Copy`}
onClick={() => {
enqueueSnackBar('Authorized Url copied to clipboard', {
variant: SnackBarVariant.Success,
@ -75,7 +77,7 @@ export const SettingsSSOOIDCForm = () => {
<StyledLinkContainer>
<TextInput
readOnly={true}
label="Redirection URI"
label={t`Redirection URI`}
value={redirectionUrl}
fullWidth
/>
@ -83,9 +85,9 @@ export const SettingsSSOOIDCForm = () => {
<StyledButtonCopy>
<Button
Icon={IconCopy}
title="Copy"
title={t`Copy`}
onClick={() => {
enqueueSnackBar('Redirect Url copied to clipboard', {
enqueueSnackBar(t`Redirect Url copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
@ -99,8 +101,8 @@ export const SettingsSSOOIDCForm = () => {
</Section>
<Section>
<H2Title
title="Identity Provider"
description="Enter the credentials to set the connection"
title={t`Identity Provider`}
description={t`Enter the credentials to set the connection`}
/>
<StyledInputsContainer>
<Controller

22
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx
View File

@ -6,6 +6,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { ChangeEvent, useRef } from 'react';
import { useFormContext } from 'react-hook-form';
import { isDefined } from 'twenty-shared';
@ -57,6 +58,7 @@ export const SettingsSSOSAMLForm = () => {
const { enqueueSnackBar } = useSnackBar();
const theme = useTheme();
const { setValue, getValues, watch, trigger } = useFormContext();
const { t } = useLingui();
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
if (isDefined(e.target.files)) {
@ -64,7 +66,7 @@ export const SettingsSSOSAMLForm = () => {
const samlMetadataParsed = parseSAMLMetadataFromXMLFile(text);
e.target.value = '';
if (!samlMetadataParsed.success) {
return enqueueSnackBar('Invalid File', {
return enqueueSnackBar(t`Invalid File`, {
variant: SnackBarVariant.Error,
duration: 2000,
});
@ -100,7 +102,7 @@ export const SettingsSSOSAMLForm = () => {
`${REACT_APP_SERVER_BASE_URL}/auth/saml/metadata/${getValues('id')}`,
);
if (!response.ok) {
return enqueueSnackBar('Metadata file generation failed', {
return enqueueSnackBar(t`Metadata file generation failed`, {
variant: SnackBarVariant.Error,
duration: 2000,
});
@ -120,8 +122,8 @@ export const SettingsSSOSAMLForm = () => {
<>
<Section>
<H2Title
title="Identity Provider Metadata XML"
description="Upload the XML file with your connection infos"
title={t`Identity Provider Metadata XML`}
description={t`Upload the XML file with your connection infos`}
/>
<StyledUploadFileContainer>
<StyledFileInput
@ -133,7 +135,7 @@ export const SettingsSSOSAMLForm = () => {
<Button
Icon={IconUpload}
onClick={handleUploadFileClick}
title="Upload file"
title={t`Upload file`}
></Button>
{isXMLMetadataValid() && (
<IconCheck
@ -146,15 +148,15 @@ export const SettingsSSOSAMLForm = () => {
</Section>
<Section>
<H2Title
title="Service Provider Details"
description="Enter the infos to set the connection"
title={t`Service Provider Details`}
description={t`Enter the infos to set the connection`}
/>
<StyledInputsContainer>
<StyledContainer>
<Button
Icon={IconDownload}
onClick={downloadMetadata}
title="Download file"
title={t`Download file`}
></Button>
</StyledContainer>
<HorizontalSeparator text={'Or'} />
@ -194,9 +196,9 @@ export const SettingsSSOSAMLForm = () => {
<StyledButtonCopy>
<Button
Icon={IconCopy}
title="Copy"
title={t`Copy`}
onClick={() => {
enqueueSnackBar('Entity ID copied to clipboard', {
enqueueSnackBar(t`Entity ID copied to clipboard`, {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,

11
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
View File

@ -16,6 +16,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useLingui } from '@lingui/react/macro';
import { UnwrapRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
import { SsoIdentityProviderStatus } from '~/generated/graphql';
@ -36,6 +37,8 @@ export const SettingsSecuritySSORowDropdownMenu = ({
const { deleteSSOIdentityProvider } = useDeleteSSOIdentityProvider();
const { updateSSOIdentityProvider } = useUpdateSSOIdentityProvider();
const { t } = useLingui();
const handleDeleteSSOIdentityProvider = async (
identityProviderId: string,
) => {
@ -43,7 +46,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
identityProviderId,
});
if (isDefined(result.errors)) {
enqueueSnackBar('Error deleting SSO Identity Provider', {
enqueueSnackBar(t`Error deleting SSO Identity Provider`, {
variant: SnackBarVariant.Error,
duration: 2000,
});
@ -61,7 +64,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
: SsoIdentityProviderStatus.Active,
});
if (isDefined(result.errors)) {
enqueueSnackBar('Error editing SSO Identity Provider', {
enqueueSnackBar(t`Error editing SSO Identity Provider`, {
variant: SnackBarVariant.Error,
duration: 2000,
});
@ -82,7 +85,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
<MenuItem
accent="default"
LeftIcon={IconArchive}
text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'}
text={SSOIdp.status === 'Active' ? t`Deactivate` : t`Activate`}
onClick={() => {
toggleSSOIdentityProviderStatus(SSOIdp.id);
closeDropdown();
@ -91,7 +94,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Delete"
text={t`Delete`}
onClick={() => {
handleDeleteSSOIdentityProvider(SSOIdp.id);
closeDropdown();

8
packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowVersion.tsx
View File

@ -3,6 +3,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { RUN_WORKFLOW_VERSION } from '@/workflow/graphql/mutations/runWorkflowVersion';
import { useApolloClient, useMutation } from '@apollo/client';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { IconSettingsAutomation } from 'twenty-ui';
import {
RunWorkflowVersionMutation,
@ -21,6 +22,7 @@ export const useRunWorkflowVersion = () => {
const { enqueueSnackBar } = useSnackBar();
const theme = useTheme();
const { t } = useLingui();
const runWorkflowVersion = async ({
workflowVersionId,
@ -36,7 +38,7 @@ export const useRunWorkflowVersion = () => {
const workflowRunId = data?.runWorkflowVersion?.workflowRunId;
if (!workflowRunId) {
enqueueSnackBar('Workflow run failed', {
enqueueSnackBar(t`Workflow run failed`, {
variant: SnackBarVariant.Error,
});
return;
@ -44,7 +46,7 @@ export const useRunWorkflowVersion = () => {
const link = `/object/workflowRun/${workflowRunId}`;
enqueueSnackBar('Workflow is running...', {
enqueueSnackBar(t`Workflow is running...`, {
variant: SnackBarVariant.Success,
icon: (
<IconSettingsAutomation
@ -54,7 +56,7 @@ export const useRunWorkflowVersion = () => {
),
link: {
href: link,
text: 'View execution details',
text: t`View execution details`,
},
});
};