Fixed CI failing test

harshit078 · harshit078 · commit 1f84876d7a69 · 2025-05-30T15:36:54.000+05:30
diff --git a/web-server/src/content/DoraMetrics/DoraMetricsDuration.tsx b/web-server/src/content/DoraMetrics/DoraMetricsDuration.tsx
@@ -1,6 +1,12 @@
-import { Card, Chip, Tooltip, useTheme } from '@mui/material';
+import {
+  CheckCircleRounded,
+  AccessTimeRounded,
+  OpenInNew,
+  Code,
+  ArrowForwardIosRounded
+} from '@mui/icons-material';
+import { Card, Tooltip, useTheme } from '@mui/material';
 import { FC, useMemo } from 'react';
-import { CheckCircleRounded, AccessTimeRounded, OpenInNew, Code, ArrowForwardIosRounded } from '@mui/icons-material';
 
 import { FlexBox } from '@/components/FlexBox';
 import { Line } from '@/components/Text';
@@ -9,7 +15,6 @@ import { getDurationString, isoDateString } from '@/utils/date';
 
 type DeploymentCardType = 'Longest' | 'Shortest';
 
-
 interface DeploymentCardProps {
   deployment: Deployment;
   type: DeploymentCardType;
@@ -19,7 +24,6 @@ interface DoraMetricsDurationProps {
   deployments: Deployment[];
 }
 
-
 const formatDeploymentDate = (dateString: string): string => {
   if (!dateString) return 'Unknown Date';
 
@@ -62,14 +66,16 @@ const DeploymentCard: FC<DeploymentCardProps> = ({ deployment }) => {
         width: '20vw',
         maxWidth: '30vw',
         border: `1px solid ${theme.palette.primary.light}`,
-        borderRadius: 2,
+        borderRadius: 2
       }}
     >
       <FlexBox col gap={1.2} sx={{ position: 'relative' }}>
-        <FlexBox gap={0.8} alignItems="center" >
+        <FlexBox gap={0.8} alignItems="center">
           <FlexBox alignItems="center" gap={1}>
             <CheckCircleRounded color="success" fontSize="inherit" />
-            <Line white semibold>Run On {formatDeploymentDate(deployment.conducted_at)}</Line>
+            <Line white semibold>
+              Run On {formatDeploymentDate(deployment.conducted_at)}
+            </Line>
           </FlexBox>
           <Tooltip title="Open in new tab" arrow>
             <FlexBox
@@ -105,7 +111,7 @@ const DeploymentCard: FC<DeploymentCardProps> = ({ deployment }) => {
               position: 'absolute',
               right: 0,
               top: '35%',
-              bottom: '35%',
+              bottom: '35%'
             }}
             fontSize="medium"
           />
@@ -115,28 +121,41 @@ const DeploymentCard: FC<DeploymentCardProps> = ({ deployment }) => {
   );
 };
 
-export const DoraMetricsDuration: FC<DoraMetricsDurationProps> = ({ deployments }) => {
+export const DoraMetricsDuration: FC<DoraMetricsDurationProps> = ({
+  deployments
+}) => {
   const { longestDeployment, shortestDeployment } = useMemo(() => {
     if (!Array.isArray(deployments) || !deployments.length) {
       return { longestDeployment: null, shortestDeployment: null };
     }
 
     const validDeployments = deployments
-      .filter((d): d is Deployment => Boolean(d.conducted_at && typeof d.run_duration === 'number'))
+      .filter((d): d is Deployment =>
+        Boolean(d.conducted_at && typeof d.run_duration === 'number')
+      )
       .filter((d) => d.run_duration >= 0);
 
     if (!validDeployments.length) {
       return { longestDeployment: null, shortestDeployment: null };
     }
 
     // Function to calculate Longest and shortest deployments
-    const { longest, shortest } = validDeployments.reduce((acc, current) => ({
-      longest: !acc.longest || current.run_duration > acc.longest.run_duration ? current : acc.longest,
-      shortest: !acc.shortest || current.run_duration < acc.shortest.run_duration ? current : acc.shortest
-    }), {
-      longest: null as Deployment | null,
-      shortest: null as Deployment | null
-    });
+    const { longest, shortest } = validDeployments.reduce(
+      (acc, current) => ({
+        longest:
+          !acc.longest || current.run_duration > acc.longest.run_duration
+            ? current
+            : acc.longest,
+        shortest:
+          !acc.shortest || current.run_duration < acc.shortest.run_duration
+            ? current
+            : acc.shortest
+      }),
+      {
+        longest: null as Deployment | null,
+        shortest: null as Deployment | null
+      }
+    );
 
     return { longestDeployment: longest, shortestDeployment: shortest };
   }, [deployments]);
@@ -145,19 +164,17 @@ export const DoraMetricsDuration: FC<DoraMetricsDurationProps> = ({ deployments
     <FlexBox col gap={1.5}>
       <FlexBox gap={3}>
         <FlexBox col gap={1}>
-          <Line white sx={{ fontSize: '1.0rem' }} semibold>Longest Deployment</Line>
-          <DeploymentCard
-            deployment={longestDeployment}
-            type="Longest"
-          />
+          <Line white sx={{ fontSize: '1.0rem' }} semibold>
+            Longest Deployment
+          </Line>
+          <DeploymentCard deployment={longestDeployment} type="Longest" />
         </FlexBox>
 
         <FlexBox col gap={1}>
-          <Line white sx={{ fontSize: '1.0rem' }} semibold>Shortest Deployment</Line>
-          <DeploymentCard
-            deployment={shortestDeployment}
-            type="Shortest"
-          />
+          <Line white sx={{ fontSize: '1.0rem' }} semibold>
+            Shortest Deployment
+          </Line>
+          <DeploymentCard deployment={shortestDeployment} type="Shortest" />
         </FlexBox>
       </FlexBox>
     </FlexBox>
diff --git a/web-server/src/content/PullRequests/DeploymentInsightsOverlay.tsx b/web-server/src/content/PullRequests/DeploymentInsightsOverlay.tsx
@@ -1,10 +1,10 @@
 import { ArrowDownwardRounded } from '@mui/icons-material';
 import { Card, Divider, useTheme, Collapse, Box } from '@mui/material';
+import Link from 'next/link';
 import pluralize from 'pluralize';
 import { ascend, descend, groupBy, path, prop, sort } from 'ramda';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { DoraMetricsTrend } from '../DoraMetrics/DoraMetricsTrend';
-import { DoraMetricsDuration } from '../DoraMetrics/DoraMetricsDuration';
+
 import { FlexBox } from '@/components/FlexBox';
 import { MiniButton } from '@/components/MiniButton';
 import { MiniCircularLoader } from '@/components/MiniLoader';
@@ -13,6 +13,7 @@ import { PullRequestsTableMini } from '@/components/PRTableMini/PullRequestsTabl
 import Scrollbar from '@/components/Scrollbar';
 import { Tabs, TabItem } from '@/components/Tabs';
 import { Line } from '@/components/Text';
+import { ROUTES } from '@/constants/routes';
 import { FetchState } from '@/constants/ui-states';
 import { useAuth } from '@/hooks/useAuth';
 import { useBoolState, useEasyState } from '@/hooks/useEasyState';
@@ -29,14 +30,15 @@ import {
 } from '@/slices/dora_metrics';
 import { useDispatch, useSelector } from '@/store';
 import { Deployment, PR, RepoWorkflowExtended } from '@/types/resources';
+import { DeploymentSources } from '@/types/resources';
 import { percent } from '@/utils/datatype';
 import { depFn } from '@/utils/fn';
-import Link from 'next/link';
-import { ROUTES } from '@/constants/routes';
-import { DeploymentSources } from '@/types/resources';
 
 import { DeploymentItem } from './DeploymentItem';
 
+import { DoraMetricsDuration } from '../DoraMetrics/DoraMetricsDuration';
+import { DoraMetricsTrend } from '../DoraMetrics/DoraMetricsTrend';
+
 enum DepStatusFilter {
   All,
   Pass,
@@ -199,8 +201,11 @@ export const DeploymentInsightsOverlay = () => {
   const dateRangeLabel = useCurrentDateRangeReactNode();
 
   // Determine if the selected repository uses PR_MERGE as its deployment source
-  const currentBaseRepo = selectedRepo.value ? teamDeployments.repos_map[selectedRepo.value] : null;
-  const isPRMergeSource = currentBaseRepo?.deployment_type === DeploymentSources.PR_MERGE;
+  const currentBaseRepo = selectedRepo.value
+    ? teamDeployments.repos_map[selectedRepo.value]
+    : null;
+  const isPRMergeSource =
+    currentBaseRepo?.deployment_type === DeploymentSources.PR_MERGE;
 
   if (!team) return <Line>Please select a team first...</Line>;
 
@@ -226,10 +231,11 @@ export const DeploymentInsightsOverlay = () => {
               px={1}
               py={1 / 2}
               corner={theme.spacing(1)}
-              border={`1px solid ${repo.id === selectedRepo.value
+              border={`1px solid ${
+                repo.id === selectedRepo.value
                   ? theme.colors.info.main
                   : theme.colors.secondary.light
-                }`}
+              }`}
               pointer
               bgcolor={
                 repo.id === selectedRepo.value
@@ -241,9 +247,7 @@ export const DeploymentInsightsOverlay = () => {
                   ? theme.colors.info.main
                   : undefined
               }
-              fontWeight={
-                repo.id === selectedRepo.value ? 'bold' : undefined
-              }
+              fontWeight={repo.id === selectedRepo.value ? 'bold' : undefined}
               onClick={() => {
                 selectedRepo.set(repo.id as ID);
               }}
@@ -297,7 +301,7 @@ export const DeploymentInsightsOverlay = () => {
             {activeTab === TabKeys.ANALYTICS ? (
               <FlexBox col gap={1} p={1}>
                 <Divider sx={{ mb: '10px' }} />
-                <Box sx={{mb:'10px'}} key={selectedRepo.value}>
+                <Box sx={{ mb: '10px' }} key={selectedRepo.value}>
                   <FlexBox col gap={1 / 2}>
                     <Line white medium>
                       <Line bold white>
@@ -338,10 +342,7 @@ export const DeploymentInsightsOverlay = () => {
                     </Line>
                     <ProgressBar
                       mt={1}
-                      perc={percent(
-                        successfulDeps.length,
-                        deployments.length
-                      )}
+                      perc={percent(successfulDeps.length, deployments.length)}
                       height="12px"
                       maxWidth="300px"
                       progressTitle="Successful deployments"
@@ -366,9 +367,17 @@ export const DeploymentInsightsOverlay = () => {
                 ) : (
                   <Box sx={{ mb: '10px' }}>
                     <Line small white>
-                      Deployment trends are only available for repos with workflows as source.{' '}
+                      Deployment trends are only available for repos with
+                      workflows as source.{' '}
                       <Link href={ROUTES.TEAMS.ROUTE.PATH} passHref>
-                        <Line component="a" small color="primary" bold underline pointer>
+                        <Line
+                          component="a"
+                          small
+                          color="primary"
+                          bold
+                          underline
+                          pointer
+                        >
                           Go to settings →
                         </Line>
                       </Link>
@@ -379,7 +388,7 @@ export const DeploymentInsightsOverlay = () => {
             ) : (
               <>
                 <FlexBox col flex1>
-                <Divider sx={{ mt: '10px' }} />
+                  <Divider sx={{ mt: '10px' }} />
                   <FlexBox gap1 flex1 fullWidth>
                     <FlexBox col>
                       <FlexBox p={1} pb={0} gap={1 / 2}>
