chore: format schedule information according to user preferences (#5747)

This pr uses the user's preferred timezone to display the scheduled
times. If the user has no preferences, the default will be used.

With norwegian locale set as preference: 

<img width="1529" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/0072432c-e470-4edc-91fb-864a86bc8f30">

With nothing set (falls back to my system setting):
<img width="1529" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/adf3d95f-4015-4302-ac09-e3ba511090db">

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx

@@ -8,6 +8,7 @@ import {
     useTheme,
 } from '@mui/material';
 import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 import {
     StyledOuterContainer,
     StyledButtonContainer,
@@ -30,6 +31,7 @@ import {
 } from 'component/changeRequest/changeRequest.types';
 import { getBrowserTimezone } from './utils';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
+import { formatDateYMDHMS } from 'utils/formatDate';
 
 interface ISuggestChangeReviewsStatusProps {
     changeRequest: IChangeRequest;
@@ -232,6 +234,7 @@ interface IScheduledProps {
 const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
     const theme = useTheme();
     const timezone = getBrowserTimezone();
+    const { locationSettings } = useLocationSettings();
 
     if (!schedule?.scheduledAt) {
         return null;
@@ -273,18 +276,24 @@ const ScheduledFailed = ({
 }: { schedule: IChangeRequestSchedule }) => {
     const theme = useTheme();
     const timezone = getBrowserTimezone();
+    const { locationSettings } = useLocationSettings();
 
     if (!schedule?.scheduledAt) {
         return null;
     }
+
+    const scheduledTime = formatDateYMDHMS(
+        new Date(schedule?.scheduledAt),
+        locationSettings?.locale,
+    );
+
     return (
         <StyledFlexAlignCenterBox>
             <StyledInfoIcon />
             <Box>
                 <StyledReviewTitle color={theme.palette.error.main}>
-                    Changes failed to be applied on{' '}
-                    {new Date(schedule?.scheduledAt).toLocaleString()} because
-                    of {schedule?.failureReason}
+                    Changes failed to be applied on {scheduledTime} because of{' '}
+                    {schedule?.failureReason}
                 </StyledReviewTitle>
                 <Typography>Your timezone is {timezone}</Typography>
             </Box>
@@ -297,13 +306,23 @@ const ScheduledPending = ({
 }: { schedule: IChangeRequestSchedule }) => {
     const theme = useTheme();
     const timezone = getBrowserTimezone();
+    const { locationSettings } = useLocationSettings();
+
+    if (!schedule?.scheduledAt) {
+        return null;
+    }
+
+    const scheduledTime = formatDateYMDHMS(
+        new Date(schedule?.scheduledAt),
+        locationSettings?.locale,
+    );
+
     return (
         <StyledFlexAlignCenterBox>
             <StyledScheduledIcon />
             <Box>
                 <StyledReviewTitle color={theme.palette.warning.dark}>
-                    Changes are scheduled to be applied on:{' '}
-                    {new Date(schedule?.scheduledAt).toLocaleString()}
+                    Changes are scheduled to be applied on: {scheduledTime}
                 </StyledReviewTitle>
                 <Typography>Your timezone is {timezone}</Typography>
             </Box>

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx

@@ -10,6 +10,8 @@ import { ChangeRequestState } from '../../changeRequest.types';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
 import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
 import { Info } from '@mui/icons-material';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMDHMS } from 'utils/formatDate';
 
 interface ISuggestChangeTimelineProps {
     state: ChangeRequestState;
@@ -103,6 +105,8 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
     }
     const activeIndex = data.findIndex((item) => item === state);
 
+    const { locationSettings } = useLocationSettings();
+
     return (
         <StyledPaper elevation={0}>
             <StyledBox>
@@ -112,7 +116,10 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
                             scheduledAt &&
                             state === 'Scheduled' &&
                             state === title
-                                ? new Date(scheduledAt).toLocaleString()
+                                ? formatDateYMDHMS(
+                                      new Date(scheduledAt),
+                                      locationSettings?.locale,
+                                  )
                                 : undefined;
                         const color = determineColor(
                             state,

frontend/src/utils/formatDate.ts

@@ -1,6 +1,6 @@
 export const formatDateYMDHMS = (
     date: number | string | Date,
-    locale: string,
+    locale?: string,
 ): string => {
     return new Date(date).toLocaleString(locale, {
         day: '2-digit',