From 04c349ea24d427cce8203e5fca8fa72348c653ff Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Sat, 19 Oct 2024 13:27:53 +0200 Subject: [PATCH 1/5] fix: update dynamically timestamps based on chosen timezone --- .../src/components/activity_view.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx index 60eadc9e50db9..27276faab80b5 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx @@ -10,6 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; +import moment from 'moment'; import React from 'react'; import { UserAvatarTip, @@ -97,10 +98,7 @@ export const ActivityView = ({ item }: ActivityViewProps) => { ); }; -const dateFormatter = new Intl.DateTimeFormat(i18n.getLocale(), { - dateStyle: 'long', - timeStyle: 'short', -}); +const dateFormatter = (when: string) => moment(when).format('MMMM D, YYYY [at] h:mm A'); const ActivityCard = ({ what, @@ -130,7 +128,7 @@ const ActivityCard = ({ id="contentManagement.contentEditor.activity.lastUpdatedByDateTime" defaultMessage="on {dateTime}" values={{ - dateTime: dateFormatter.format(new Date(when)), + dateTime: dateFormatter(when), }} /> From 22d66cdd98d216bc0198737567fb8f53a7536a3b Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Tue, 22 Oct 2024 19:19:06 +0200 Subject: [PATCH 2/5] update function using only timeZone from moment --- .../src/components/activity_view.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx index 27276faab80b5..39f3c6f09f1cf 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx @@ -9,6 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import moment from 'moment'; import { FormattedMessage } from '@kbn/i18n-react'; import moment from 'moment'; import React from 'react'; @@ -98,7 +99,16 @@ export const ActivityView = ({ item }: ActivityViewProps) => { ); }; -const dateFormatter = (when: string) => moment(when).format('MMMM D, YYYY [at] h:mm A'); +const formatDate = (time: string) => { + const locale = i18n.getLocale(); + const timeZone = moment().tz(); + + return new Intl.DateTimeFormat(locale, { + dateStyle: 'long', + timeStyle: 'short', + timeZone, + }).format(new Date(time)); +}; const ActivityCard = ({ what, @@ -128,7 +138,7 @@ const ActivityCard = ({ id="contentManagement.contentEditor.activity.lastUpdatedByDateTime" defaultMessage="on {dateTime}" values={{ - dateTime: dateFormatter(when), + dateTime: formatDate(when), }} /> From a52b759d4c090caba031d61e43838d5285ec853b Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Tue, 22 Oct 2024 19:26:09 +0200 Subject: [PATCH 3/5] fix: remove import duplication --- .../content_insights_public/src/components/activity_view.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx index 39f3c6f09f1cf..08f4075d27a15 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx @@ -11,7 +11,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elasti import { i18n } from '@kbn/i18n'; import moment from 'moment'; import { FormattedMessage } from '@kbn/i18n-react'; -import moment from 'moment'; import React from 'react'; import { UserAvatarTip, From 65d01795559b626ba9ae473fec64874f8116c9fe Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Wed, 23 Oct 2024 16:18:43 +0200 Subject: [PATCH 4/5] fix failing tests - mock dependency --- .../src/components/activity_view.test.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx index a27d6466b2ef5..4c4b4bd41d592 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx @@ -14,6 +14,15 @@ import { I18nProvider } from '@kbn/i18n-react'; import { ActivityView as ActivityViewComponent, ActivityViewProps } from './activity_view'; +jest.mock('moment', () => { + const original = jest.requireActual('moment'); + return () => { + const m = original; + m.tz = jest.fn(() => 'Europe/Madrid'); + return m; + }; +}); + const mockGetUserProfile = jest.fn(async (uid: string) => ({ uid, enabled: true, From ef6b086ae8fa7afa80cfce40a5287d20ac423105 Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Wed, 23 Oct 2024 16:54:15 +0200 Subject: [PATCH 5/5] remove mocking dep in tests and replace import in component --- .../src/components/activity_view.test.tsx | 9 --------- .../src/components/activity_view.tsx | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx index 4c4b4bd41d592..a27d6466b2ef5 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.test.tsx @@ -14,15 +14,6 @@ import { I18nProvider } from '@kbn/i18n-react'; import { ActivityView as ActivityViewComponent, ActivityViewProps } from './activity_view'; -jest.mock('moment', () => { - const original = jest.requireActual('moment'); - return () => { - const m = original; - m.tz = jest.fn(() => 'Europe/Madrid'); - return m; - }; -}); - const mockGetUserProfile = jest.fn(async (uid: string) => ({ uid, enabled: true, diff --git a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx index 08f4075d27a15..360ccc1757581 100644 --- a/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx +++ b/packages/content-management/content_insights/content_insights_public/src/components/activity_view.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import moment from 'moment'; +import moment from 'moment-timezone'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import {