feat: add tooltip to Scheduled badge (#5726)

Closes # [1-1831](https://linear.app/unleash/issue/1-1831/enhancement-tooltips-for-change-request-overview-page-to-add-hover) <img width="1332" alt="Screenshot 2023-12-22 at 12 59 15" src="https://github.com/Unleash/unleash/assets/104830839/1a851b47-4756-4f3f-a9e6-14067e395738"> <img width="1263" alt="Screenshot 2023-12-22 at 12 59 07" src="https://github.com/Unleash/unleash/assets/104830839/cdce0e81-3e04-4414-8965-13072b282dea"> --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
Unleash · Jan 9, 2024 · fbeb542 · fbeb542
1 parent a71b513
commit fbeb542
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx b/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
@@ -8,6 +8,7 @@ import {
     Close,
     Error as ErrorIcon,
 } from '@mui/icons-material';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 interface IChangeRequestStatusBadgeProps {
     changeRequest: IChangeRequest | undefined;
@@ -59,17 +60,30 @@ export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
             );
         case 'Scheduled': {
             const { schedule } = changeRequest;
-            const color = schedule?.status === 'pending' ? 'warning' : 'error';
+            const color = schedule!.status === 'pending' ? 'warning' : 'error';
             const icon =
                 schedule?.status === 'pending' ? (
                     <AccessTime fontSize={'small'} />
                 ) : (
                     <ErrorIcon fontSize={'small'} />
                 );
+            const scheduledAt = new Date(
+                schedule!.scheduledAt,
+            ).toLocaleString();
+
+            const tooltipTitle =
+                schedule?.status === 'pending'
+                    ? `Scheduled for ${scheduledAt}`
+                    : `Failed on ${scheduledAt} because of ${
+                          schedule!.failureReason
+                      }`;
+
             return (
-                <Badge color={color} icon={icon}>
-                    Scheduled
-                </Badge>
+                <HtmlTooltip title={tooltipTitle} arrow>
+                    <Badge color={color} icon={icon}>
+                        Scheduled
+                    </Badge>
+                </HtmlTooltip>
             );
         }
         default:

diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
@@ -5,7 +5,6 @@ import { SetStrategySortOrderSchema } from '../../openapi';
 
 export interface IChangeRequest {
     id: number;
-    state: ChangeRequestState;
     title: string;
     project: string;
     environment: string;
@@ -18,6 +17,7 @@ export interface IChangeRequest {
     rejections: IChangeRequestApproval[];
     comments: IChangeRequestComment[];
     conflict?: string;
+    state: ChangeRequestState;
     schedule?: IChangeRequestSchedule;
 }