Skip to content

Commit

Permalink
fix: dynamically update timestamps based on the chosen timezone in th…
Browse files Browse the repository at this point in the history
…e Advanced Settings (elastic#196977)

## Summary

This PR fixes the
[elastic#190562](elastic#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 7fa1e18)
  • Loading branch information
paulinashakirova committed Oct 24, 2024
1 parent 59e95ef commit 011d6f8
Showing 1 changed file with 12 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 011d6f8

Please sign in to comment.