feat: show failure in cr overview (#5660)

Show failure reason in change request overview

Closes
[1-1769](https://linear.app/unleash/issue/1-1769/add-reason-and-icon-to-change-request-overview)
<img width="771" alt="Screenshot 2023-12-15 at 10 37 03"
src="https://github.com/Unleash/unleash/assets/104830839/898b6ac9-bd44-442f-92a4-9b4d5754fea7">

---------

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

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

@@ -13,6 +13,7 @@ const server = testServerSetup();
 const mockChangeRequest = (
     featureName: string,
     state: ChangeRequestState,
+    failureReason?: string,
 ): IChangeRequest => {
     const result: IChangeRequest = {
         id: 1,
@@ -65,6 +66,10 @@ const mockChangeRequest = (
         };
     }
 
+    if (failureReason) {
+        result.schedule!.failureReason = failureReason;
+    }
+
     return result;
 };
 const pendingChangeRequest = (changeRequest: IChangeRequest) =>

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

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { Cancel, CheckCircle, Schedule, Edit } from '@mui/icons-material';
+import { Cancel, CheckCircle, Schedule, Edit, Info } from '@mui/icons-material';
 import { Box, Typography, Divider } from '@mui/material';
 
 const styledComponentPropCheck = () => (prop: string) =>
@@ -42,6 +42,13 @@ export const StyledScheduledIcon = styled(Schedule)(({ theme }) => ({
     width: '35px',
     marginRight: theme.spacing(1),
 }));
+
+export const StyledInfoIcon = styled(Info)(({ theme }) => ({
+    color: theme.palette.error.main,
+    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

@@ -21,12 +21,15 @@ import {
     StyledScheduledIcon,
     StyledEditIcon,
     StyledScheduledBox,
+    StyledInfoIcon,
 } from './ChangeRequestReviewStatus.styles';
 import {
     ChangeRequestState,
     IChangeRequest,
+    IChangeRequestSchedule,
 } from 'component/changeRequest/changeRequest.types';
 import { getBrowserTimezone } from './utils';
+import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
 
 interface ISuggestChangeReviewsStatusProps {
     changeRequest: IChangeRequest;
@@ -106,7 +109,7 @@ const ResolveComponent = ({
     changeRequest,
     onEditClick,
 }: IResolveComponentProps) => {
-    const { state } = changeRequest;
+    const { state, schedule } = changeRequest;
 
     if (!state) {
         return null;
@@ -129,12 +132,7 @@ const ResolveComponent = ({
     }
 
     if (state === 'Scheduled') {
-        return (
+        return <Scheduled schedule={schedule} onEditClick={onEditClick} />;
-            <Scheduled
-                scheduledDate={changeRequest.schedule?.scheduledAt}
-                onEditClick={onEditClick}
-            />
-        );
     }
 
     return <ReviewRequired minApprovals={changeRequest.minApprovals} />;
@@ -228,18 +226,17 @@ const StyledIconButton = styled(IconButton)({
 });
 
 interface IScheduledProps {
-    scheduledDate?: string;
+    schedule?: IChangeRequest['schedule'];
     onEditClick?: () => any;
 }
-const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
+const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
     const theme = useTheme();
+    const timezone = getBrowserTimezone();
 
-    if (!scheduledDate) {
+    if (!schedule?.scheduledAt) {
         return null;
     }
 
-    const timezone = getBrowserTimezone();
-
     return (
         <>
             <StyledFlexAlignCenterBox>
@@ -257,16 +254,12 @@ const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
             <StyledDivider />
 
             <StyledScheduledBox>
-                <StyledFlexAlignCenterBox>
+                <ConditionallyRender
-                    <StyledScheduledIcon />
+                    condition={schedule?.status === 'pending'}
-                    <Box>
+                    show={<ScheduledPending schedule={schedule} />}
-                        <StyledReviewTitle color={theme.palette.warning.dark}>
+                    elseShow={<ScheduledFailed schedule={schedule} />}
-                            Changes are scheduled to be applied on:{' '}
+                />
-                            {new Date(scheduledDate).toLocaleString()}
+
-                        </StyledReviewTitle>
-                        <Typography>Your timezone is {timezone}</Typography>
-                    </Box>
-                </StyledFlexAlignCenterBox>
                 <StyledIconButton onClick={onEditClick}>
                     <StyledEditIcon />
                 </StyledIconButton>
@@ -275,6 +268,48 @@ const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
     );
 };
 
+const ScheduledFailed = ({
+    schedule,
+}: { schedule: IChangeRequestSchedule }) => {
+    const theme = useTheme();
+    const timezone = getBrowserTimezone();
+
+    if (!schedule?.scheduledAt) {
+        return null;
+    }
+    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}
+                </StyledReviewTitle>
+                <Typography>Your timezone is {timezone}</Typography>
+            </Box>
+        </StyledFlexAlignCenterBox>
+    );
+};
+
+const ScheduledPending = ({
+    schedule,
+}: { schedule: IChangeRequestSchedule }) => {
+    const theme = useTheme();
+    const timezone = getBrowserTimezone();
+    return (
+        <StyledFlexAlignCenterBox>
+            <StyledScheduledIcon />
+            <Box>
+                <StyledReviewTitle color={theme.palette.warning.main}>
+                    Changes are scheduled to be applied on:{' '}
+                    {new Date(schedule?.scheduledAt).toLocaleString()}
+                </StyledReviewTitle>
+                <Typography>Your timezone is {timezone}</Typography>
+            </Box>
+        </StyledFlexAlignCenterBox>
+    );
+};
 const Cancelled = () => {
     const theme = useTheme();