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)
This commit is contained in:
Paulina Shakirova 2024-10-24 15:21:12 +02:00 committed by GitHub
parent 1820eafcdf
commit 7fa1e18516
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>