From 96cbcd1e7b99fccaf21ebc934cb37236e0d57351 Mon Sep 17 00:00:00 2001
From: Karthik Jeeyar <karthik.jk11@gmail.com>
Date: Thu, 21 Mar 2024 00:25:58 +0530
Subject: [PATCH] fix(pipelines): Handle invalid response on acs image check
 table gracefully (#22)

---
 .changeset/slow-balloons-help.md                 |  5 +++++
 .../DeploymentCheck/DeploymentCheckSummary.tsx   |  2 +-
 .../ImageCheck/ImageCheckSummary.tsx             |  2 +-
 .../__tests__/ImageCheckTable.test.tsx           | 16 ++++++++++++++++
 .../components/Output/utils/summary-utils.tsx    | 12 ++++++------
 5 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/slow-balloons-help.md

diff --git a/.changeset/slow-balloons-help.md b/.changeset/slow-balloons-help.md
new file mode 100644
index 0000000..23bcc77
--- /dev/null
+++ b/.changeset/slow-balloons-help.md
@@ -0,0 +1,5 @@
+---
+"@aonic-ui/pipelines": patch
+---
+
+Handle the invalid input for acs table gracefully
diff --git a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx
index afc066f..fe5b8fa 100644
--- a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx
+++ b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx
@@ -19,7 +19,7 @@ const DeploymentCheckSummary: React.FC = () => {
   );
 
   const breakingChangesSummary = React.useMemo(
-    () => getBreakingChangeCount(acsDeploymentCheckResults?.results[0]?.violatedPolicies),
+    () => getBreakingChangeCount(acsDeploymentCheckResults?.results?.[0]?.violatedPolicies),
     [acsDeploymentCheckResults],
   );
 
diff --git a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx
index 570e095..b5136ad 100644
--- a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx
+++ b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx
@@ -18,7 +18,7 @@ const ImageCheckSummary: React.FC = () => {
     [acsImageCheckResults],
   );
   const breakingChangesSummary = React.useMemo(
-    () => getBreakingChangeCount(acsImageCheckResults?.results[0]?.violatedPolicies),
+    () => getBreakingChangeCount(acsImageCheckResults?.results?.[0]?.violatedPolicies),
     [acsImageCheckResults],
   );
 
diff --git a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/__tests__/ImageCheckTable.test.tsx b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/__tests__/ImageCheckTable.test.tsx
index f1fe58c..1b48881 100644
--- a/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/__tests__/ImageCheckTable.test.tsx
+++ b/packages/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/__tests__/ImageCheckTable.test.tsx
@@ -38,4 +38,20 @@ describe('ImageCheckTable', () => {
       screen.getByTestId('image-check-table');
     });
   });
+
+
+  test('should render the ImageCheckTable even if the results are not available', async () => {
+    render(
+      <ACSContextProvider
+        {...extraProps}
+        acsImageCheckResults={{ summary: acsImageCheckResults.summary } as ACSCheckResults}
+      >
+        <ImageCheckTable />
+      </ACSContextProvider>,
+    );
+
+   await waitFor(() => {
+      screen.getByTestId('image-check-table');
+    });
+  });
 });
diff --git a/packages/pipelines/src/components/Output/utils/summary-utils.tsx b/packages/pipelines/src/components/Output/utils/summary-utils.tsx
index 7dafcce..70a5d1b 100644
--- a/packages/pipelines/src/components/Output/utils/summary-utils.tsx
+++ b/packages/pipelines/src/components/Output/utils/summary-utils.tsx
@@ -127,14 +127,14 @@ export const getBreakingChangeStatus = (
       return (
         <>
           <ExclamationTriangleIcon title={status} color={redColor.value} />{' '}
-          <b>{cveSummary?.[status]}</b> violations breaks build
+          <b>{cveSummary?.[status] ?? 0}</b> violations breaks build
         </>
       );
     case ACS_BREAKING_CHANGES.NotBreaking:
       return (
         <>
           <ExclamationTriangleIcon title={status} color={yellowColor.value} />{' '}
-          <b>{cveSummary?.[status]}</b> violations not breaking builds
+          <b>{cveSummary?.[status] ?? 0}</b> violations not breaking builds
         </>
       );
 
@@ -215,8 +215,8 @@ export const SummaryTextAndCount: React.FC<{
 );
 
 export const getCheckSeveritySummary = (data: ACSCheckResults) => ({
-  [ACS_IMAGE_CHECK_SEVERITY.Critical]: data.results?.[0]?.summary?.CRITICAL,
-  [ACS_IMAGE_CHECK_SEVERITY.High]: data.results?.[0]?.summary?.HIGH,
-  [ACS_IMAGE_CHECK_SEVERITY.Medium]: data.results?.[0]?.summary?.MEDIUM,
-  [ACS_IMAGE_CHECK_SEVERITY.Low]: data.results?.[0]?.summary?.LOW,
+  [ACS_IMAGE_CHECK_SEVERITY.Critical]: data.results?.[0]?.summary?.CRITICAL ?? 0,
+  [ACS_IMAGE_CHECK_SEVERITY.High]: data.results?.[0]?.summary?.HIGH ?? 0,
+  [ACS_IMAGE_CHECK_SEVERITY.Medium]: data.results?.[0]?.summary?.MEDIUM ?? 0,
+  [ACS_IMAGE_CHECK_SEVERITY.Low]: data.results?.[0]?.summary?.LOW ?? 0,
 });