feat: align counter component with Snyk UI (#199)

snyk-tech-services · Apr 17, 2024 · 0b0841f · 0b0841f
1 parent d95bd01
commit 0b0841f
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 237 deletions.
diff --git a/src/components/SnykEntityComponent/SnykOverviewComponent.tsx b/src/components/SnykEntityComponent/SnykOverviewComponent.tsx
@@ -7,7 +7,7 @@ import { useAsync } from "react-use";
 import { Alert } from '@mui/material';
 
 import { Grid } from "@mui/material";
-import { SnykCircularCounter } from "./components/SnykCircularCountersComponent";
+import { SnykCounter } from "./components/SnykCountersComponent";
 import { IssuesCount as IssuesCountType } from "../../types/types";
 import { useEntity } from "@backstage/plugin-catalog-react";
 import { UnifiedIssues } from "../../types/unifiedIssuesTypes";
@@ -129,18 +129,8 @@ export const SnykOverviewComponent = ({ entity }: { entity: Entity }) => {
   if (loading) {
     return (
       <InfoCard
-        title="Loading..."
-        deepLink={{ title: "Retrieving Vulnerabilities from Snyk", link: "" }}
+        title="Snyk Issues"
       >
-        <SnykCircularCounter
-          issuesCount={{
-            critical: 0,
-            high: 0,
-            medium: 0,
-            low: 0,
-          }}
-          loading={loading}
-        />
         <Progress />
       </InfoCard>
     );
@@ -162,8 +152,7 @@ export const SnykOverviewComponent = ({ entity }: { entity: Entity }) => {
 
   return (
     <InfoCard title="Snyk Issues" deepLink={linkInfo}>
-      <SnykCircularCounter issuesCount={issuesCount} loading={loading} />
-    </InfoCard>
+      <SnykCounter issuesCount={issuesCount} /> </InfoCard>
   );
 };
 

diff --git a/src/components/SnykEntityComponent/SnykTab.tsx b/src/components/SnykEntityComponent/SnykTab.tsx
@@ -13,7 +13,7 @@ import { useAsync } from "react-use";
 import { Alert } from "@material-ui/lab";
 import { IssuesTable } from "./components/SnykIssuesComponent";
 import { DepGraphInfo } from "./components/SnykDepGraphComponent";
-import { SnykCircularCounter } from "./components/SnykCircularCountersComponent";
+import { SnykCounter } from "./components/SnykCountersComponent";
 import {
   ProjectGetResponseType,
   DepgraphGetResponseType,
@@ -125,25 +125,22 @@ export const generateSnykTabForProject = (
               >
                 <Grid item xs={4}>
                   <InfoCard title="Vulnerabilities">
-                    <SnykCircularCounter
+                    <SnykCounter
                       issuesCount={issuesCount}
-                      loading={loading}
                     />
                   </InfoCard>
                 </Grid>
                 <Grid item xs={4}>
                   <InfoCard title="License Issues">
-                    <SnykCircularCounter
+                    <SnykCounter
                       issuesCount={licenseIssuesCount}
-                      loading={loading}
                     />
                   </InfoCard>
                 </Grid>
                 <Grid item xs={4}>
                   <InfoCard title="Ignored Issues">
-                    <SnykCircularCounter
+                    <SnykCounter
                       issuesCount={ignoredIssuesCount}
-                      loading={loading}
                     />
                   </InfoCard>
                 </Grid>
@@ -213,25 +210,22 @@ export const generateSnykTabForProject = (
             >
               <Grid item xs={4}>
                 <InfoCard title="Vulnerabilities">
-                  <SnykCircularCounter
+                  <SnykCounter
                     issuesCount={issuesCount}
-                    loading={loading}
                   />
                 </InfoCard>
               </Grid>
               <Grid item xs={4}>
                 <InfoCard title="License Issues">
-                  <SnykCircularCounter
+                  <SnykCounter
                     issuesCount={licenseIssuesCount}
-                    loading={loading}
                   />
                 </InfoCard>
               </Grid>
               <Grid item xs={4}>
                 <InfoCard title="Ignored Issues">
-                  <SnykCircularCounter
+                  <SnykCounter
                     issuesCount={ignoredIssuesCount}
-                    loading={loading}
                   />
                 </InfoCard>
               </Grid>

diff --git a/src/components/SnykEntityComponent/components/SnykCircularCountersComponent.tsx b/src/components/SnykEntityComponent/components/SnykCircularCountersComponent.tsx