mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix timezone display + translate dates (#12147)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/11566 + translates dates

- Date display bug: We had an issue with date (not date time) display
depending on the timezone the user had selected. The date is stored in
the db as yyyy-mm-dd, eg. 2025-05-01 for **May 1st, 2025**. When
returned this date is formatted in a UTC DateTime at midnight, so
2025-05-1 00:00:00. Then when displaying the date we were converting
this date using the timeZone, so 2025-04-30 17:00:00, thus displaying
**April 30th, 2025**. The fix chosen is that we should not take into
account the timezone for date (not date time!) displays as we always
want to show the same date.
- Date translation: dates were not translated, not in their default
display (_May 1st, 2025_) nor in their relative display (_about a month
ago_). The lib we use for date formatting, date-fns, offers a
translation option with pre-built `Locale`s from their lib.
Unfortunately and surprisingly we cannot just use directly string locale
codes (like `fr-FR`), cf [open issue on
date-fns](https://github.com/date-fns/date-fns/issues/3660). A util was
introduced to offset this by dynamically importing the right date-fns
Locale based on the locale code.
This commit is contained in:
Marie
2025-05-22 14:04:44 +02:00
committed by GitHub
parent 0ac4cc6899
commit b5544b6853
25 changed files with 352 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/twenty-front/src/localization/states/dateLocaleState.ts Normal file
View File

@ -0,0 +1,17 @@
import { Locale } from 'date-fns';
import { enUS } from 'date-fns/locale';
import { APP_LOCALES } from 'twenty-shared/translations';
import { createState } from 'twenty-ui/utilities';
type DateLocaleState = {
locale?: keyof typeof APP_LOCALES;
localeCatalog: Locale;
};
export const dateLocaleState = createState<DateLocaleState>({
key: 'dateLocaleState',
defaultValue: {
locale: undefined,
localeCatalog: enUS,
},
});

25
packages/twenty-front/src/modules/localization/utils/__tests__/formatDateISOStringToCustomUnicodeFormat.test.js
View File

@ -1,5 +1,6 @@
import { formatDateISOStringToCustomUnicodeFormat } from '@/localization/utils/formatDateISOStringToCustomUnicodeFormat';
import { formatInTimeZone } from 'date-fns-tz';
import { enUS } from 'date-fns/locale';
jest.mock('date-fns-tz');
@ -15,16 +16,18 @@ describe('formatDateISOStringToCustomUnicodeFormat', () => {
it('should use provided timezone', () => {
formatInTimeZone.mockReturnValue('06:30');
const result = formatDateISOStringToCustomUnicodeFormat(
mockDate,
mockTimeZone,
mockTimeFormat,
);
const result = formatDateISOStringToCustomUnicodeFormat({
date: mockDate,
timeZone: mockTimeZone,
dateFormat: mockTimeFormat,
localeCatalog: enUS,
});
expect(formatInTimeZone).toHaveBeenCalledWith(
new Date(mockDate),
mockTimeZone,
mockTimeFormat,
{ locale: enUS },
);
expect(result).toBe('06:30');
});
@ -34,16 +37,18 @@ describe('formatDateISOStringToCustomUnicodeFormat', () => {
throw new Error();
});
const result = formatDateISOStringToCustomUnicodeFormat(
mockDate,
mockTimeZone,
'f',
);
const result = formatDateISOStringToCustomUnicodeFormat({
date: mockDate,
timeZone: mockTimeZone,
dateFormat: 'f',
localeCatalog: enUS,
});
expect(formatInTimeZone).toHaveBeenCalledWith(
new Date(mockDate),
mockTimeZone,
'f',
{ locale: enUS },
);
expect(result).toBe('Invalid format string');
});

20
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToCustomUnicodeFormat.ts
View File

@ -1,12 +1,20 @@
import { formatInTimeZone } from 'date-fns-tz';
export const formatDateISOStringToCustomUnicodeFormat = (
date: string,
timeZone: string,
dateFormat: string,
) => {
export const formatDateISOStringToCustomUnicodeFormat = ({
date,
timeZone,
dateFormat,
localeCatalog,
}: {
date: string;
timeZone: string;
dateFormat: string;
localeCatalog: Locale;
}) => {
try {
return formatInTimeZone(new Date(date), timeZone, dateFormat);
return formatInTimeZone(new Date(date), timeZone, dateFormat, {
locale: localeCatalog,
});
} catch (e) {
return 'Invalid format string';
}

20
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToDate.ts
View File

@ -1,10 +1,18 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { formatInTimeZone } from 'date-fns-tz';
export const formatDateISOStringToDate = (
date: string,
timeZone: string,
dateFormat: DateFormat,
) => {
return formatInTimeZone(new Date(date), timeZone, dateFormat);
export const formatDateISOStringToDate = ({
date,
timeZone,
dateFormat,
localeCatalog,
}: {
date: string;
timeZone: string;
dateFormat: DateFormat;
localeCatalog?: Locale;
}) => {
return formatInTimeZone(new Date(date), timeZone, dateFormat, {
locale: localeCatalog,
});
};

22
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToDateTime.ts
View File

@ -2,15 +2,25 @@ import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { formatInTimeZone } from 'date-fns-tz';
export const formatDateISOStringToDateTime = (
date: string,
timeZone: string,
dateFormat: DateFormat,
timeFormat: TimeFormat,
) => {
export const formatDateISOStringToDateTime = ({
date,
timeZone,
dateFormat,
timeFormat,
localeCatalog,
}: {
date: string;
timeZone: string;
dateFormat: DateFormat;
timeFormat: TimeFormat;
localeCatalog: Locale;
}) => {
return formatInTimeZone(
new Date(date),
timeZone,
`${dateFormat} ${timeFormat}`,
{
locale: localeCatalog,
},
);
};

25
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToRelativeDate.ts
View File

@ -1,25 +1,40 @@
import { t } from '@lingui/core/macro';
import {
differenceInDays,
formatDistance,
isToday,
isTomorrow,
isYesterday,
Locale,
startOfDay,
} from 'date-fns';
export const formatDateISOStringToRelativeDate = (
isoDate: string,
export const formatDateISOStringToRelativeDate = ({
isoDate,
isDayMaximumPrecision = false,
) => {
localeCatalog,
}: {
isoDate: string;
isDayMaximumPrecision?: boolean;
localeCatalog: Locale;
}) => {
const now = new Date();
const targetDate = new Date(isoDate);
if (isDayMaximumPrecision && isToday(targetDate)) return 'Today';
if (isDayMaximumPrecision && isToday(targetDate)) return t`Today`;
if (isDayMaximumPrecision && isYesterday(targetDate)) return t`Yesterday`;
if (isDayMaximumPrecision && isTomorrow(targetDate)) return t`Tomorrow`;
const isWithin24h = Math.abs(differenceInDays(targetDate, now)) < 1;
if (isDayMaximumPrecision || !isWithin24h)
return formatDistance(startOfDay(targetDate), startOfDay(now), {
addSuffix: true,
locale: localeCatalog,
});
return formatDistance(targetDate, now, { addSuffix: true });
return formatDistance(targetDate, now, {
addSuffix: true,
locale: localeCatalog,
});
};

9
packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/__tests__/computeAggregateValueAndLabel.test.ts
View File

@ -6,6 +6,7 @@ import { AggregateRecordsData } from '@/object-record/hooks/useAggregateRecords'
import { computeAggregateValueAndLabel } from '@/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { DATE_AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/DateAggregateOperations';
import { enUS } from 'date-fns/locale';
import { FieldMetadataType } from '~/generated/graphql';
const MOCK_FIELD_ID = '7d2d7b5e-7b3e-4b4a-8b0a-7b3e4b4a8b0a';
@ -35,6 +36,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadata,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: AGGREGATE_OPERATIONS.sum,
localeCatalog: enUS,
...defaultParams,
});
@ -53,6 +55,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadata,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: AGGREGATE_OPERATIONS.sum,
localeCatalog: enUS,
...defaultParams,
});
@ -90,6 +93,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadataWithPercentageField,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: AGGREGATE_OPERATIONS.avg,
localeCatalog: enUS,
...defaultParams,
});
@ -127,6 +131,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadataWithDecimalsField,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: AGGREGATE_OPERATIONS.sum,
localeCatalog: enUS,
...defaultParams,
});
@ -161,6 +166,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadataWithDatetimeField,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: DATE_AGGREGATE_OPERATIONS.earliest,
localeCatalog: enUS,
...defaultParams,
});
@ -195,6 +201,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadataWithDatetimeField,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: DATE_AGGREGATE_OPERATIONS.latest,
localeCatalog: enUS,
...defaultParams,
});
@ -215,6 +222,7 @@ describe('computeAggregateValueAndLabel', () => {
const result = computeAggregateValueAndLabel({
data: mockData,
objectMetadataItem: mockObjectMetadata,
localeCatalog: enUS,
...defaultParams,
});
@ -237,6 +245,7 @@ describe('computeAggregateValueAndLabel', () => {
objectMetadataItem: mockObjectMetadata,
fieldMetadataId: MOCK_FIELD_ID,
aggregateOperation: AGGREGATE_OPERATIONS.sum,
localeCatalog: enUS,
...defaultParams,
});

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel.ts
View File

@ -26,6 +26,7 @@ export const computeAggregateValueAndLabel = ({
dateFormat,
timeFormat,
timeZone,
localeCatalog,
}: {
data: AggregateRecordsData;
objectMetadataItem: ObjectMetadataItem;
@ -34,6 +35,7 @@ export const computeAggregateValueAndLabel = ({
dateFormat: DateFormat;
timeFormat: TimeFormat;
timeZone: string;
localeCatalog: Locale;
}) => {
if (isEmpty(data)) {
return {};
@ -105,6 +107,7 @@ export const computeAggregateValueAndLabel = ({
dateFormat,
timeFormat,
dateFieldSettings,
localeCatalog,
});
break;
}
@ -116,6 +119,7 @@ export const computeAggregateValueAndLabel = ({
timeZone,
dateFormat,
dateFieldSettings,
localeCatalog,
});
break;
}

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

@ -4,10 +4,10 @@ import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { DateFieldDisplay } from '@/object-record/record-field/meta-types/display/components/DateFieldDisplay';
import { UserContext } from '@/users/contexts/UserContext';
import { ComponentDecorator } from 'twenty-ui/testing';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/DateFieldDisplay',

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

@ -4,10 +4,10 @@ import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { DateTimeFieldDisplay } from '@/object-record/record-field/meta-types/display/components/DateTimeFieldDisplay';
import { UserContext } from '@/users/contexts/UserContext';
import { ComponentDecorator } from 'twenty-ui/testing';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/DateTimeFieldDisplay',

7
packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable @nx/workspace-no-navigate-prefer-link */
import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
import { SettingsPath } from '@/types/SettingsPath';
import { t } from '@lingui/core/macro';
import { IconSettings } from 'twenty-ui/display';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@ -13,9 +14,9 @@ export const RecordTableEmptyStateRemote = () => {
return (
<RecordTableEmptyStateDisplay
buttonTitle={'Go to Settings'}
subTitle={'If this is unexpected, please verify your settings.'}
title={'No Data Available for Remote Table'}
buttonTitle={t`Go to Settings`}
subTitle={t`If this is unexpected, please verify your settings.`}
title={t`No Data Available for Remote Table`}
ButtonIcon={IconSettings}
animatedPlaceholderType="noRecord"
onClick={handleButtonClick}

4
packages/twenty-front/src/modules/object-record/record-table/hooks/useAggregateRecordsForHeader.ts
View File

@ -12,6 +12,7 @@ import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
type UseAggregateRecordsProps = {
objectMetadataItem: ObjectMetadataItem;
@ -35,6 +36,8 @@ export const useAggregateRecordsForHeader = ({
recordIndexKanbanAggregateOperationState,
);
const dateLocale = useRecoilValue(dateLocaleState);
const { filterValueDependencies } = useFilterValueDependencies();
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
@ -65,6 +68,7 @@ export const useAggregateRecordsForHeader = ({
dateFormat,
timeFormat,
timeZone,
localeCatalog: dateLocale.localeCatalog,
});
return {

4
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter.tsx
View File

@ -16,6 +16,7 @@ import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
export const useAggregateRecordsForRecordTableColumnFooter = (
fieldMetadataId: string,
@ -31,6 +32,8 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
currentRecordFiltersComponentState,
);
const dateLocale = useRecoilValue(dateLocaleState);
const { filterValueDependencies } = useFilterValueDependencies();
const requestFilters = computeRecordGqlOperationFilter({
@ -99,6 +102,7 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
dateFormat,
timeFormat,
timeZone,
localeCatalog: dateLocale.localeCatalog,
});
return {

9
packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx
View File

@ -1,6 +1,8 @@
import { FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateString } from '~/utils/string/formatDateString';
import { EllipsisDisplay } from './EllipsisDisplay';
@ -8,15 +10,16 @@ type DateDisplayProps = {
value: string | null | undefined;
dateFieldSettings?: FieldDateMetadataSettings;
};
export const DateDisplay = ({ value, dateFieldSettings }: DateDisplayProps) => {
const { dateFormat, timeZone } = useContext(UserContext);
const { dateFormat } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const formattedDate = formatDateString({
value,
timeZone,
timeZone: 'UTC', // Needed because we have db-stored date (yyyy-mm-dd) is converted to UTC dateTime by TypeORM
dateFormat,
dateFieldSettings,
localeCatalog: dateLocale.localeCatalog,
});
return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;

4
packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
View File

@ -1,6 +1,8 @@
import { FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
import { EllipsisDisplay } from './EllipsisDisplay';
@ -14,6 +16,7 @@ export const DateTimeDisplay = ({
dateFieldSettings,
}: DateTimeDisplayProps) => {
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const formattedDate = formatDateTimeString({
value,
@ -21,6 +24,7 @@ export const DateTimeDisplay = ({
dateFormat,
timeFormat,
dateFieldSettings,
localeCatalog: dateLocale.localeCatalog,
});
return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;

44
packages/twenty-front/src/modules/ui/field/display/components/__stories__/DateDisplay.stories.tsx Normal file
View File

@ -0,0 +1,44 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { FieldDateDisplayFormat } from '@/object-record/record-field/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { DateDisplay } from '../DateDisplay';
const meta: Meta<typeof DateDisplay> = {
title: 'UI/Field/Display/DateDisplay',
component: DateDisplay,
decorators: [
(Story) => (
<UserContext.Provider
value={{
dateFormat: DateFormat.DAY_FIRST,
timeFormat: TimeFormat.HOUR_24,
timeZone: 'Pacific/Tahiti', // Needed for our test on time difference
}}
>
<Story />
</UserContext.Provider>
),
],
};
export default meta;
type Story = StoryObj<typeof DateDisplay>;
export const Default: Story = {
args: {
value: '2025-05-01T00:00:00.000Z',
dateFieldSettings: {
displayFormat: FieldDateDisplayFormat.USER_SETTINGS,
},
},
play: async ({ canvasElement }) => {
// Test that date is rightfully displayed and not converted to timeZone date which would be on April 30th
const canvas = within(canvasElement);
const dateElement = await canvas.findByText('1 May, 2025');
expect(dateElement).toBeInTheDocument();
},
};

76
packages/twenty-front/src/modules/ui/field/display/utils/getDateFnsLocale.util.ts Normal file
View File

@ -0,0 +1,76 @@
import { APP_LOCALES } from 'twenty-shared/translations';
type AppLocale = keyof typeof APP_LOCALES;
export const getDateFnsLocaleImport = (locale: AppLocale) => {
switch (locale) {
case 'af-ZA':
return import('date-fns/locale/af');
case 'ar-SA':
return import('date-fns/locale/ar');
case 'ca-ES':
return import('date-fns/locale/ca');
case 'cs-CZ':
return import('date-fns/locale/cs');
case 'da-DK':
return import('date-fns/locale/da');
case 'de-DE':
return import('date-fns/locale/de');
case 'el-GR':
return import('date-fns/locale/el');
case 'en':
case 'pseudo-en':
return import('date-fns/locale/en-US');
case 'es-ES':
return import('date-fns/locale/es');
case 'fi-FI':
return import('date-fns/locale/fi');
case 'fr-FR':
return import('date-fns/locale/fr');
case 'he-IL':
return import('date-fns/locale/he');
case 'hu-HU':
return import('date-fns/locale/hu');
case 'it-IT':
return import('date-fns/locale/it');
case 'ja-JP':
return import('date-fns/locale/ja');
case 'ko-KR':
return import('date-fns/locale/ko');
case 'nl-NL':
return import('date-fns/locale/nl');
case 'no-NO':
return import('date-fns/locale/nb');
case 'pl-PL':
return import('date-fns/locale/pl');
case 'pt-BR':
case 'pt-PT':
return import('date-fns/locale/pt');
case 'ro-RO':
return import('date-fns/locale/ro');
case 'ru-RU':
return import('date-fns/locale/ru');
case 'sr-Cyrl':
return import('date-fns/locale/sr');
case 'sv-SE':
return import('date-fns/locale/sv');
case 'tr-TR':
return import('date-fns/locale/tr');
case 'uk-UA':
return import('date-fns/locale/uk');
case 'vi-VN':
return import('date-fns/locale/vi');
case 'zh-CN':
return import('date-fns/locale/zh-CN');
case 'zh-TW':
return import('date-fns/locale/zh-TW');
default: {
return import('date-fns/locale/en-US');
}
}
};
export const getDateFnsLocale = async (localeString?: string | null) => {
return getDateFnsLocaleImport(localeString as AppLocale)
.then((m) => m.default as unknown as Locale)
.catch((_e) => undefined);
};

30
packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
@ -18,12 +18,15 @@ import { detectTimeZone } from '@/localization/utils/detectTimeZone';
import { getDateFormatFromWorkspaceDateFormat } from '@/localization/utils/getDateFormatFromWorkspaceDateFormat';
import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTimeFormatFromWorkspaceTimeFormat';
import { AppPath } from '@/types/AppPath';
import { getDateFnsLocale } from '@/ui/field/display/utils/getDateFnsLocale.util';
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
import { enUS } from 'date-fns/locale';
import { useLocation } from 'react-router-dom';
import { APP_LOCALES, SOURCE_LOCALE } from 'twenty-shared/translations';
import { isDefined } from 'twenty-shared/utils';
import { WorkspaceMember } from '~/generated-metadata/graphql';
import { useGetCurrentUserQuery } from '~/generated/graphql';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
import { isMatchingLocation } from '~/utils/isMatchingLocation';
@ -38,8 +41,22 @@ export const UserProviderEffect = () => {
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
const setWorkspaces = useSetRecoilState(workspacesState);
const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
const updateLocaleCatalog = useRecoilCallback(
({ snapshot, set }) =>
async (newLocale: keyof typeof APP_LOCALES) => {
const localeValue = snapshot.getLoadable(dateLocaleState).getValue();
if (localeValue.locale !== newLocale) {
getDateFnsLocale(newLocale).then((localeCatalog) => {
set(dateLocaleState, {
locale: newLocale,
localeCatalog: localeCatalog || enUS,
});
});
}
},
[],
);
const setCurrentWorkspaceMember = useSetRecoilState(
currentWorkspaceMemberState,
@ -98,9 +115,11 @@ export const UserProviderEffect = () => {
};
if (isDefined(workspaceMember)) {
setCurrentWorkspaceMember(
affectDefaultValuesOnEmptyWorkspaceMemberFields(workspaceMember),
);
const updatedWorkspaceMember =
affectDefaultValuesOnEmptyWorkspaceMemberFields(workspaceMember);
setCurrentWorkspaceMember(updatedWorkspaceMember);
updateLocaleCatalog(updatedWorkspaceMember.locale);
// TODO: factorize
setDateTimeFormat({
@ -152,6 +171,7 @@ export const UserProviderEffect = () => {
setIsCurrentUserLoaded,
setDateTimeFormat,
setCurrentWorkspaceMembersWithDeleted,
updateLocaleCatalog,
]);
return <></>;

3
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerEditButton.tsx
View File

@ -7,6 +7,7 @@ import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
import { t } from '@lingui/core/macro';
import { Button } from 'twenty-ui/input';
export const ViewPickerEditButton = () => {
@ -49,7 +50,7 @@ export const ViewPickerEditButton = () => {
) {
return (
<Button
title="Go to Settings"
title={t`Go to Settings`}
onClick={navigateToSelectSettings}
size="small"
accent="blue"

3
packages/twenty-front/src/modules/workflow/components/OverrideWorkflowDraftConfirmationModal.tsx
View File

@ -6,6 +6,7 @@ import {
} from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
import { t } from '@lingui/core/macro';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { getAppPath } from '~/utils/navigation/getAppPath';
@ -56,7 +57,7 @@ export const OverrideWorkflowDraftConfirmationModal = ({
closeModal(OVERRIDE_WORKFLOW_DRAFT_CONFIRMATION_MODAL_ID);
}}
variant="secondary"
title="Go to Draft"
title={t`Go to Draft`}
fullWidth
/>
}

12
packages/twenty-front/src/pages/settings/profile/appearance/components/LocalePicker.tsx
View File

@ -1,16 +1,19 @@
import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { getDateFnsLocale } from '@/ui/field/display/utils/getDateFnsLocale.util';
import { Select } from '@/ui/input/components/Select';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useLingui } from '@lingui/react/macro';
import { enUS } from 'date-fns/locale';
import { APP_LOCALES } from 'twenty-shared/translations';
import { isDefined } from 'twenty-shared/utils';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
import { logError } from '~/utils/logError';
@ -25,6 +28,7 @@ export const LocalePicker = () => {
const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
currentWorkspaceMemberState,
);
const setDateLocale = useSetRecoilState(dateLocaleState);
const isDebugMode = useRecoilValue(isDebugModeState);
const { updateOneRecord } = useUpdateOneRecord({
@ -58,6 +62,12 @@ export const LocalePicker = () => {
});
await updateWorkspaceMember({ locale: value });
const dateFnsLocale = await getDateFnsLocale(value);
setDateLocale({
locale: value,
localeCatalog: dateFnsLocale || enUS,
});
await dynamicActivate(value);
try {
localStorage.setItem('locale', value);

7
packages/twenty-front/src/utils/string/__tests__/formatDateString.test.ts
View File

@ -1,5 +1,6 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { FieldDateDisplayFormat } from '@/object-record/record-field/types/FieldMetadata';
import { enUS } from 'date-fns/locale';
import { DateTime } from 'luxon';
import { formatDateString } from '~/utils/string/formatDateString';
@ -13,6 +14,7 @@ describe('formatDateString', () => {
const result = formatDateString({
...defaultParams,
value: null,
localeCatalog: enUS,
});
expect(result).toBe('');
@ -22,6 +24,7 @@ describe('formatDateString', () => {
const result = formatDateString({
...defaultParams,
value: undefined,
localeCatalog: enUS,
});
expect(result).toBe('');
@ -37,6 +40,7 @@ describe('formatDateString', () => {
dateFieldSettings: {
displayFormat: FieldDateDisplayFormat.RELATIVE,
},
localeCatalog: enUS,
});
expect(result).toBe(mockRelativeDate);
@ -58,6 +62,7 @@ describe('formatDateString', () => {
dateFieldSettings: {
displayFormat: FieldDateDisplayFormat.USER_SETTINGS,
},
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);
@ -83,6 +88,7 @@ describe('formatDateString', () => {
displayFormat: FieldDateDisplayFormat.CUSTOM,
customUnicodeDateFormat: 'yyyy',
},
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);
@ -101,6 +107,7 @@ describe('formatDateString', () => {
const result = formatDateString({
...defaultParams,
value: mockDate,
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);

7
packages/twenty-front/src/utils/string/__tests__/formatDateTimeString.test.ts
View File

@ -1,6 +1,7 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { FieldDateDisplayFormat } from '@/object-record/record-field/types/FieldMetadata';
import { enUS } from 'date-fns/locale';
import { DateTime } from 'luxon';
import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
@ -15,6 +16,7 @@ describe('formatDateTimeString', () => {
const result = formatDateTimeString({
...defaultParams,
value: null,
localeCatalog: enUS,
});
expect(result).toBe('');
@ -24,6 +26,7 @@ describe('formatDateTimeString', () => {
const result = formatDateTimeString({
...defaultParams,
value: undefined,
localeCatalog: enUS,
});
expect(result).toBe('');
@ -39,6 +42,7 @@ describe('formatDateTimeString', () => {
dateFieldSettings: {
displayFormat: FieldDateDisplayFormat.RELATIVE,
},
localeCatalog: enUS,
});
expect(result).toBe(mockRelativeDate);
@ -60,6 +64,7 @@ describe('formatDateTimeString', () => {
dateFieldSettings: {
displayFormat: FieldDateDisplayFormat.USER_SETTINGS,
},
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);
@ -85,6 +90,7 @@ describe('formatDateTimeString', () => {
displayFormat: FieldDateDisplayFormat.CUSTOM,
customUnicodeDateFormat: 'yyyy',
},
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);
@ -103,6 +109,7 @@ describe('formatDateTimeString', () => {
const result = formatDateTimeString({
...defaultParams,
value: mockDate,
localeCatalog: enUS,
});
expect(result).toBe(mockFormattedDate);

33
packages/twenty-front/src/utils/string/formatDateString.ts
View File

@ -13,11 +13,13 @@ export const formatDateString = ({
timeZone,
dateFormat,
dateFieldSettings,
localeCatalog,
}: {
timeZone: string;
dateFormat: DateFormat;
value?: string | null;
dateFieldSettings?: FieldDateMetadataSettings;
localeCatalog: Locale;
}): string => {
if (!isDefined(value)) {
return '';
@ -25,16 +27,31 @@ export const formatDateString = ({
switch (dateFieldSettings?.displayFormat) {
case FieldDateDisplayFormat.RELATIVE:
return formatDateISOStringToRelativeDate(value);
return formatDateISOStringToRelativeDate({
isoDate: value,
isDayMaximumPrecision: true,
localeCatalog,
});
case FieldDateDisplayFormat.USER_SETTINGS:
return formatDateISOStringToDate(value, timeZone, dateFormat);
case FieldDateDisplayFormat.CUSTOM:
return formatDateISOStringToCustomUnicodeFormat(
value,
return formatDateISOStringToDate({
date: value,
timeZone,
dateFieldSettings.customUnicodeDateFormat,
);
dateFormat,
localeCatalog,
});
case FieldDateDisplayFormat.CUSTOM:
return formatDateISOStringToCustomUnicodeFormat({
date: value,
timeZone,
dateFormat: dateFieldSettings.customUnicodeDateFormat,
localeCatalog,
});
default:
return formatDateISOStringToDate(value, timeZone, dateFormat);
return formatDateISOStringToDate({
date: value,
timeZone,
dateFormat,
localeCatalog,
});
}
};

31
packages/twenty-front/src/utils/string/formatDateTimeString.ts
View File

@ -7,6 +7,7 @@ import {
FieldDateDisplayFormat,
FieldDateMetadataSettings,
} from '@/object-record/record-field/types/FieldMetadata';
import { Locale } from 'date-fns';
export const formatDateTimeString = ({
value,
@ -14,12 +15,14 @@ export const formatDateTimeString = ({
dateFormat,
timeFormat,
dateFieldSettings,
localeCatalog,
}: {
timeZone: string;
dateFormat: DateFormat;
timeFormat: TimeFormat;
value?: string | null;
dateFieldSettings?: FieldDateMetadataSettings;
localeCatalog: Locale;
}) => {
if (!value) {
return '';
@ -27,26 +30,32 @@ export const formatDateTimeString = ({
switch (dateFieldSettings?.displayFormat) {
case FieldDateDisplayFormat.RELATIVE:
return formatDateISOStringToRelativeDate(value);
return formatDateISOStringToRelativeDate({
isoDate: value,
localeCatalog: localeCatalog,
});
case FieldDateDisplayFormat.USER_SETTINGS:
return formatDateISOStringToDateTime(
value,
return formatDateISOStringToDateTime({
date: value,
timeZone,
dateFormat,
timeFormat,
);
localeCatalog,
});
case FieldDateDisplayFormat.CUSTOM:
return formatDateISOStringToCustomUnicodeFormat(
value,
return formatDateISOStringToCustomUnicodeFormat({
date: value,
timeZone,
dateFieldSettings.customUnicodeDateFormat,
);
dateFormat: dateFieldSettings.customUnicodeDateFormat,
localeCatalog,
});
default:
return formatDateISOStringToDateTime(
value,
return formatDateISOStringToDateTime({
date: value,
timeZone,
dateFormat,
timeFormat,
);
localeCatalog,
});
}
};