[8.x] fix: dynamically update timestamps based on the chosen timezone…

… in the Advanced Settings (#196977) (#197641)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: dynamically update timestamps based on the chosen timezone in
the Advanced Settings
(#196977)](#196977)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Paulina
Shakirova","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-24T13:21:12Z","message":"fix:
dynamically update timestamps based on the chosen timezone in the
Advanced Settings (#196977)\n\n## Summary\r\n\r\nThis PR fixes
the\r\n[#190562](#190562) where
the\r\ncreated and updated timestamps for Dashboards do not respect the
default\r\ntimezone settings in advanced settings.\r\n\r\nCurrently, if
the user changes the timezone in the advanced settings,\r\nthe
timestamps for the activity monitor flyout still display
timestamps\r\nfrom the default browser timezone. This PR ensures that
the timestamps\r\ndisplay in the desired timezone.\r\n\r\n![Screenshot
2024-10-19 at 13
35\r\n00](https://github.com/user-attachments/assets/399a3b0a-d16a-4010-8560-06f3a4bcbc96)\r\n\r\n![Screenshot
2024-10-19 at 13
36\r\n02](https://github.com/user-attachments/assets/62a5bf2f-c5c3-474d-b810-3b1f414d2b14)","sha":"7fa1e18516c484609749aaec7f58a39c302cd34f","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:SharedUX","backport:prev-major"],"title":"fix:
dynamically update timestamps based on the chosen timezone in the
Advanced
Settings","number":196977,"url":"https://github.com/elastic/kibana/pull/196977","mergeCommit":{"message":"fix:
dynamically update timestamps based on the chosen timezone in the
Advanced Settings (#196977)\n\n## Summary\r\n\r\nThis PR fixes
the\r\n[#190562](#190562) where
the\r\ncreated and updated timestamps for Dashboards do not respect the
default\r\ntimezone settings in advanced settings.\r\n\r\nCurrently, if
the user changes the timezone in the advanced settings,\r\nthe
timestamps for the activity monitor flyout still display
timestamps\r\nfrom the default browser timezone. This PR ensures that
the timestamps\r\ndisplay in the desired timezone.\r\n\r\n![Screenshot
2024-10-19 at 13
35\r\n00](https://github.com/user-attachments/assets/399a3b0a-d16a-4010-8560-06f3a4bcbc96)\r\n\r\n![Screenshot
2024-10-19 at 13
36\r\n02](https://github.com/user-attachments/assets/62a5bf2f-c5c3-474d-b810-3b1f414d2b14)","sha":"7fa1e18516c484609749aaec7f58a39c302cd34f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196977","number":196977,"mergeCommit":{"message":"fix:
dynamically update timestamps based on the chosen timezone in the
Advanced Settings (#196977)\n\n## Summary\r\n\r\nThis PR fixes
the\r\n[#190562](#190562) where
the\r\ncreated and updated timestamps for Dashboards do not respect the
default\r\ntimezone settings in advanced settings.\r\n\r\nCurrently, if
the user changes the timezone in the advanced settings,\r\nthe
timestamps for the activity monitor flyout still display
timestamps\r\nfrom the default browser timezone. This PR ensures that
the timestamps\r\ndisplay in the desired timezone.\r\n\r\n![Screenshot
2024-10-19 at 13
35\r\n00](https://github.com/user-attachments/assets/399a3b0a-d16a-4010-8560-06f3a4bcbc96)\r\n\r\n![Screenshot
2024-10-19 at 13
36\r\n02](https://github.com/user-attachments/assets/62a5bf2f-c5c3-474d-b810-3b1f414d2b14)","sha":"7fa1e18516c484609749aaec7f58a39c302cd34f"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <[email protected]>

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>