Feat: show status of scheduled change request (#5630)

Modifies the ChangeRequestStatusBadge to display the failed execution

Closes #
[1-1767](https://linear.app/unleash/issue/1-1767/add-status-to-scheduled-badge)
![Screenshot 2023-12-13 at 13 10
42](https://github.com/Unleash/unleash/assets/104830839/5aab83b4-a3d8-4a88-8f17-628cb37d7850)
![Screenshot 2023-12-13 at 13 15
26](https://github.com/Unleash/unleash/assets/104830839/799e4bbe-b469-4cee-a3df-f0b6efcca33a)

---------

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

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

@@ -31,7 +31,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                 </StyledHeader>
             </ChangeRequestTitle>
             <StyledInnerContainer>
-                <ChangeRequestStatusBadge state={changeRequest.state} />
+                <ChangeRequestStatusBadge changeRequest={changeRequest} />
                 <Typography
                     variant='body2'
                     sx={(theme) => ({

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx

@@ -103,7 +103,7 @@ export const EnvironmentChangeRequest: FC<{
                     </Box>
                     <Box sx={{ ml: 'auto' }}>
                         <ChangeRequestStatusBadge
-                            state={environmentChangeRequest.state}
+                            changeRequest={environmentChangeRequest}
                         />
                     </Box>
                 </Box>

frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx

@@ -1,10 +1,16 @@
 import { VFC } from 'react';
-import { ChangeRequestState } from '../changeRequest.types';
+import { IChangeRequest } from '../changeRequest.types';
 import { Badge } from 'component/common/Badge/Badge';
-import { AccessTime, Check, CircleOutlined, Close } from '@mui/icons-material';
+import {
+    AccessTime,
+    Check,
+    CircleOutlined,
+    Close,
+    Info,
+} from '@mui/icons-material';
 
 interface IChangeRequestStatusBadgeProps {
-    state: ChangeRequestState;
+    changeRequest: IChangeRequest | undefined;
 }
 
 const ReviewRequiredBadge: VFC = () => (
@@ -16,8 +22,12 @@ const ReviewRequiredBadge: VFC = () => (
 const DraftBadge: VFC = () => <Badge color='warning'>Draft</Badge>;
 
 export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
-    state,
+    changeRequest,
 }) => {
+    if (!changeRequest) {
+        return null;
+    }
+    const { state } = changeRequest;
     switch (state) {
         case 'Draft':
             return <DraftBadge />;
@@ -47,12 +57,21 @@ export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
                     Rejected
                 </Badge>
             );
-        case 'Scheduled':
+        case 'Scheduled': {
+            const { schedule } = changeRequest;
+            const color = schedule?.status === 'pending' ? 'warning' : 'error';
+            const icon =
+                schedule?.status === 'pending' ? (
+                    <AccessTime fontSize={'small'} />
+                ) : (
+                    <Info fontSize={'small'} />
+                );
             return (
-                <Badge color='warning' icon={<AccessTime fontSize={'small'} />}>
+                <Badge color={color} icon={icon}>
                     Scheduled
                 </Badge>
             );
+        }
         default:
             return <ReviewRequiredBadge />;
     }

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell.tsx

@@ -1,18 +1,23 @@
 import { VFC } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { ChangeRequestState } from 'component/changeRequest/changeRequest.types';
+import {
+    ChangeRequestState,
+    IChangeRequest,
+} from 'component/changeRequest/changeRequest.types';
 import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 
 interface IChangeRequestStatusCellProps {
     value?: string | null; // FIXME: proper type
+    row: { original: IChangeRequest };
 }
 
 export const ChangeRequestStatusCell: VFC<IChangeRequestStatusCellProps> = ({
     value,
+    row: { original },
 }) => {
     const renderState = () => {
         if (!value) return null;
-        return <ChangeRequestStatusBadge state={value as ChangeRequestState} />;
+        return <ChangeRequestStatusBadge changeRequest={original} />;
     };
 
     if (!value) {