From fbeb5425af05f8764588cd4c36dfd873686b1dab Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 9 Jan 2024 10:32:52 +0200
Subject: [PATCH] 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>
---
 .../ChangeRequestStatusBadge.tsx              | 22 +++++++++++++++----
 .../changeRequest/changeRequest.types.ts      |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx b/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
index 0b47bbf0fb..977ddc9d15 100644
--- 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
index dc5902ee9f..e90bfd6a5b 100644
--- 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;
 }