From 011d6f849487d5e9ef707a13bc890e4ca02f7044 Mon Sep 17 00:00:00 2001
From: Paulina Shakirova <paulina.shakirova@elastic.co>
Date: Thu, 24 Oct 2024 15:21:12 +0200
Subject: [PATCH] fix: dynamically update timestamps based on the chosen
 timezone in the Advanced Settings (#196977)

## Summary

This PR fixes the
[#190562](https://github.com/elastic/kibana/issues/190562) where the
created and updated timestamps for Dashboards do not respect the default
timezone settings in advanced settings.

Currently, if the user changes the timezone in the advanced settings,
the timestamps for the activity monitor flyout still display timestamps
from the default browser timezone. This PR ensures that the timestamps
display in the desired timezone.

![Screenshot 2024-10-19 at 13 35
00](https://github.com/user-attachments/assets/399a3b0a-d16a-4010-8560-06f3a4bcbc96)

![Screenshot 2024-10-19 at 13 36
02](https://github.com/user-attachments/assets/62a5bf2f-c5c3-474d-b810-3b1f414d2b14)

(cherry picked from commit 7fa1e18516c484609749aaec7f58a39c302cd34f)
---
 .../src/components/activity_view.tsx            | 17 ++++++++++++-----
 1 file changed, 12 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..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,6 +9,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import moment from 'moment-timezone';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import {
@@ -97,10 +98,16 @@ export const ActivityView = ({ item }: ActivityViewProps) => {
   );
 };
 
-const dateFormatter = new Intl.DateTimeFormat(i18n.getLocale(), {
-  dateStyle: 'long',
-  timeStyle: 'short',
-});
+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,
@@ -130,7 +137,7 @@ const ActivityCard = ({
               id="contentManagement.contentEditor.activity.lastUpdatedByDateTime"
               defaultMessage="on {dateTime}"
               values={{
-                dateTime: dateFormatter.format(new Date(when)),
+                dateTime: formatDate(when),
               }}
             />
           </EuiText>