feat: show suspended schedule states in review status (#5872)

Updates the change request review status box to handle suspended
schedules.

<img width="852" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/2af52b6d-d821-4d30-9166-e8e76ead120d">

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

@@ -5,6 +5,7 @@ import {
     Schedule,
     Edit,
     Error as ErrorIcon,
+    PauseCircle,
 } from '@mui/icons-material';
 import { Box, Typography, Divider } from '@mui/material';
 
@@ -55,6 +56,16 @@ export const StyledScheduleFailedIcon = styled(ErrorIcon)(({ theme }) => ({
     width: '35px',
     marginRight: theme.spacing(1),
 }));
+
+export const StyledScheduleSuspendedIcon = styled(PauseCircle)(
+    ({ theme }) => ({
+        color: theme.palette.text.secondary,
+        height: '35px',
+        width: '35px',
+        marginRight: theme.spacing(1),
+    }),
+);
+
 export const StyledEditIcon = styled(Edit)(({ theme }) => ({
     color: theme.palette.text.secondary,
     height: '24px',

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

@@ -23,12 +23,15 @@ import {
     StyledScheduledBox,
     StyledErrorIcon,
     StyledScheduleFailedIcon,
+    StyledScheduleSuspendedIcon,
 } from './ChangeRequestReviewStatus.styles';
 import {
     ChangeRequestState,
     ChangeRequestType,
     ChangeRequestSchedule,
     ChangeRequestScheduleFailed,
+    ChangeRequestSchedulePending,
+    ChangeRequestScheduleSuspended,
 } from 'component/changeRequest/changeRequest.types';
 import { getBrowserTimezone } from './utils';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
@@ -236,10 +239,23 @@ interface IScheduledProps {
 const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
     const theme = useTheme();
 
-    if (!schedule?.scheduledAt) {
+    if (!schedule) {
         return null;
     }
 
+    const scheduleStatusBox = (() => {
+        switch (schedule.status) {
+            case 'pending':
+                return <ScheduledPending schedule={schedule} />;
+            case 'failed':
+                return <ScheduledFailed schedule={schedule} />;
+            case 'suspended':
+                return <ScheduledSuspended schedule={schedule} />;
+            default:
+                return null;
+        }
+    })();
+
     return (
         <>
             <StyledFlexAlignCenterBox>
@@ -257,16 +273,7 @@ const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
             <StyledDivider />
 
             <StyledScheduledBox>
-                <ConditionallyRender
+                {scheduleStatusBox}
-                    condition={schedule.status === 'pending'}
-                    show={<ScheduledPending schedule={schedule} />}
-                    elseShow={
-                        <ScheduledFailed
-                            schedule={schedule as ChangeRequestScheduleFailed}
-                        />
-                    }
-                />
-
                 <StyledIconButton onClick={onEditClick}>
                     <StyledEditIcon />
                 </StyledIconButton>
@@ -282,10 +289,6 @@ const ScheduledFailed = ({
     const timezone = getBrowserTimezone();
     const { locationSettings } = useLocationSettings();
 
-    if (!schedule?.scheduledAt) {
-        return null;
-    }
-
     const scheduledTime = formatDateYMDHMS(
         new Date(schedule?.scheduledAt),
         locationSettings?.locale,
@@ -304,17 +307,41 @@ const ScheduledFailed = ({
         </StyledFlexAlignCenterBox>
     );
 };
-
+const ScheduledSuspended = ({
-const ScheduledPending = ({
     schedule,
-}: { schedule: ChangeRequestSchedule }) => {
+}: { schedule: ChangeRequestScheduleSuspended }) => {
     const theme = useTheme();
     const timezone = getBrowserTimezone();
     const { locationSettings } = useLocationSettings();
 
-    if (!schedule?.scheduledAt) {
+    const scheduledTime = formatDateYMDHMS(
-        return null;
+        new Date(schedule?.scheduledAt),
-    }
+        locationSettings?.locale,
+    );
+
+    return (
+        <StyledFlexAlignCenterBox>
+            <StyledScheduleSuspendedIcon />
+            <Box>
+                <StyledReviewTitle color={theme.palette.text.secondary}>
+                    The change request is suspended for the following reason:{' '}
+                    {schedule.reason}
+                </StyledReviewTitle>
+                <StyledReviewTitle color={theme.palette.text.secondary}>
+                    It will not be applied on {scheduledTime}.
+                </StyledReviewTitle>
+                <Typography>Your timezone is {timezone}</Typography>
+            </Box>
+        </StyledFlexAlignCenterBox>
+    );
+};
+
+const ScheduledPending = ({
+    schedule,
+}: { schedule: ChangeRequestSchedulePending }) => {
+    const theme = useTheme();
+    const timezone = getBrowserTimezone();
+    const { locationSettings } = useLocationSettings();
 
     const scheduledTime = formatDateYMDHMS(
         new Date(schedule?.scheduledAt),