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>

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 (
+                <HtmlTooltip title={tooltipTitle} arrow>
                     <Badge color={color} icon={icon}>
                         Scheduled
                     </Badge>
+                </HtmlTooltip>
             );
         }
         default:

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;
 }