Fix/scheduled request UI (#5318)

Change timezone format
Fixes a bug where the Edit button on hover being elongated

Before:
<img width="755" alt="Screenshot 2023-11-09 at 21 36 01"
src="https://github.com/Unleash/unleash/assets/104830839/189f21d5-8a68-4d6b-b094-b518749a9b2f">

After:
<img width="812" alt="Screenshot 2023-11-09 at 22 09 26"
src="https://github.com/Unleash/unleash/assets/104830839/9056f995-bd2b-4353-8526-77160e49e990">

Adds the missed onClick to the edit button to show the dialog

Fixes a bug with ScheduleChangesDialog onClose

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

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

@@ -219,7 +219,7 @@ export const ChangeRequestOverview: FC = () => {
     const onCancelAbort = () => setShowCancelDialog(false);
     const onCancelReject = () => setShowRejectDialog(false);
     const onApplyScheduledAbort = () => setShowApplyScheduledDialog(false);
-    const onScheduleChangeAbort = () => setShowApplyScheduledDialog(false);
+    const onScheduleChangeAbort = () => setShowScheduleChangeDialog(false);
     const onRejectScheduledAbort = () => setShowRejectScheduledDialog(false);
 
     const isSelfReview =
@@ -286,6 +286,9 @@ export const ChangeRequestOverview: FC = () => {
                         />
                         <ChangeRequestReviewStatus
                             changeRequest={changeRequest}
+                            onEditClick={() =>
+                                setShowScheduleChangeDialog(true)
+                            }
                         />
                         <StyledButtonBox>
                             <ConditionallyRender

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

@@ -1,5 +1,12 @@
 import React, { FC } from 'react';
-import { Box, IconButton, Theme, Typography, useTheme } from '@mui/material';
+import {
+    Box,
+    IconButton,
+    styled,
+    Theme,
+    Typography,
+    useTheme,
+} from '@mui/material';
 import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
 import {
     StyledOuterContainer,
@@ -19,10 +26,11 @@ import {
     ChangeRequestState,
     IChangeRequest,
 } from 'component/changeRequest/changeRequest.types';
-import { getBrowserTimezoneInHumanReadableUTCOffset } from './utils';
+import { getBrowserTimezone } from './utils';
 
 interface ISuggestChangeReviewsStatusProps {
     changeRequest: IChangeRequest;
+    onEditClick?: () => void;
 }
 const resolveBorder = (state: ChangeRequestState, theme: Theme) => {
     if (state === 'Approved' || state === 'Scheduled') {
@@ -58,7 +66,7 @@ const resolveIconColors = (state: ChangeRequestState, theme: Theme) => {
 };
 
 export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
-    ({ changeRequest }) => {
+    ({ changeRequest, onEditClick }) => {
         const theme = useTheme();
         return (
             <StyledOuterContainer>
@@ -80,7 +88,10 @@ export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
                     }}
                     border={resolveBorder(changeRequest.state, theme)}
                 >
-                    <ResolveComponent changeRequest={changeRequest} />
+                    <ResolveComponent
+                        changeRequest={changeRequest}
+                        onEditClick={onEditClick}
+                    />
                 </StyledReviewStatusContainer>
             </StyledOuterContainer>
         );
@@ -88,9 +99,13 @@ export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
 
 interface IResolveComponentProps {
     changeRequest: IChangeRequest;
+    onEditClick?: () => void;
 }
 
-const ResolveComponent = ({ changeRequest }: IResolveComponentProps) => {
+const ResolveComponent = ({
+    changeRequest,
+    onEditClick,
+}: IResolveComponentProps) => {
     const { state } = changeRequest;
 
     if (!state) {
@@ -115,7 +130,10 @@ const ResolveComponent = ({ changeRequest }: IResolveComponentProps) => {
 
     if (state === 'Scheduled') {
         return (
-            <Scheduled scheduledDate={changeRequest.schedule?.scheduledAt} />
+            <Scheduled
+                scheduledDate={changeRequest.schedule?.scheduledAt}
+                onEditClick={onEditClick}
+            />
         );
     }
 
@@ -204,17 +222,23 @@ const Applied = () => {
     );
 };
 
+const StyledIconButton = styled(IconButton)({
+    maxWidth: '32px',
+    maxHeight: '32px',
+});
+
 interface IScheduledProps {
     scheduledDate?: string;
+    onEditClick?: () => any;
 }
-const Scheduled = ({ scheduledDate }: IScheduledProps) => {
+const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
     const theme = useTheme();
 
     if (!scheduledDate) {
         return null;
     }
 
-    const timezone = getBrowserTimezoneInHumanReadableUTCOffset();
+    const timezone = getBrowserTimezone();
 
     return (
         <>
@@ -243,9 +267,9 @@ const Scheduled = ({ scheduledDate }: IScheduledProps) => {
                         <Typography>Your timezone is {timezone}</Typography>
                     </Box>
                 </StyledFlexAlignCenterBox>
-                <IconButton>
+                <StyledIconButton onClick={onEditClick}>
                     <StyledEditIcon />
-                </IconButton>
+                </StyledIconButton>
             </StyledScheduledBox>
         </>
     );

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/utils.ts

@@ -15,3 +15,7 @@ export const getBrowserTimezoneInHumanReadableUTCOffset = (
 
     return `UTC${sign}${zeroPaddedHours}:${zeroPaddedMinutes}`;
 };
+
+export const getBrowserTimezone = (): string => {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx

@@ -4,7 +4,7 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { APPLY_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { DateTimePicker } from 'component/common/DateTimePicker/DateTimePicker';
-import { getBrowserTimezoneInHumanReadableUTCOffset } from '../ChangeRequestReviewStatus/utils';
+import { getBrowserTimezone } from '../ChangeRequestReviewStatus/utils';
 
 export interface ScheduleChangeRequestDialogProps {
     title: string;
@@ -42,7 +42,7 @@ export const ScheduleChangeRequestDialog: FC<ScheduleChangeRequestDialogProps> =
         );
         const [error, setError] = useState<string | undefined>(undefined);
 
-        const timezone = getBrowserTimezoneInHumanReadableUTCOffset();
+        const timezone = getBrowserTimezone();
 
         return (
             <Dialogue
@@ -50,7 +50,7 @@ export const ScheduleChangeRequestDialog: FC<ScheduleChangeRequestDialogProps> =
                 primaryButtonText={primaryButtonText}
                 secondaryButtonText='Cancel'
                 open={open}
-                onClose={onClose}
+                onClose={() => onClose()}
                 onClick={() => onConfirm(selectedDate)}
                 permissionButton={
                     <PermissionButton

src/lib/types/events.ts

@@ -127,6 +127,8 @@ export const CHANGE_REQUEST_CANCELLED = 'change-request-cancelled' as const;
 export const CHANGE_REQUEST_SENT_TO_REVIEW =
     'change-request-sent-to-review' as const;
 export const CHANGE_REQUEST_APPLIED = 'change-request-applied' as const;
+export const SCHEDULED_CHANGE_REQUEST_APPLIED =
+    'scheduled-change-request-applied' as const;
 export const CHANGE_REQUEST_SCHEDULED = 'change-request-scheduled' as const;
 
 export const API_TOKEN_CREATED = 'api-token-created' as const;
@@ -248,6 +250,7 @@ export const IEventTypes = [
     CHANGE_REQUEST_CANCELLED,
     CHANGE_REQUEST_SENT_TO_REVIEW,
     CHANGE_REQUEST_APPLIED,
+    SCHEDULED_CHANGE_REQUEST_APPLIED,
     CHANGE_REQUEST_SCHEDULED,
     API_TOKEN_CREATED,
     API_TOKEN_UPDATED,