76 report progress bar (#77)

* Report progress bar * Update changelog * Remove console log statements * [MegaLinter] Apply linters fixes * Remove unused code --------- Co-authored-by: itayox <[email protected]>
oxsecurity · Aug 14, 2023 · cdf4bec · cdf4bec
1 parent 803b650
commit cdf4bec
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ _Can be run using `npm run codetotal:beta`_
   - Add auto focus to snippet & repo inputs
   - Highlight resource type in report header
   - Add a button in report toolbar to show code for snippet & file analysis
+  - Add a report progress bar
 - Back-End
   - Bug fix: SBOM packages not showing up in report page. Async parsing of packages information in SBOM module
   - Retry calls to pypi or npm in case first attempts are failing

diff --git a/packages/app/src/report/components/header/ReportHeader.tsx b/packages/app/src/report/components/header/ReportHeader.tsx
@@ -1,5 +1,6 @@
 import {
   Divider,
+  LinearProgress,
   Paper,
   Theme,
   Typography,
@@ -40,11 +41,21 @@ export const ReportHeader: FC<ReportBannerProps> = ({ ready }) => {
   const color = theme.palette[scoreColorKey].main || theme.palette.divider;
 
   return (
-    <Paper
-      square
-      style={{ borderColor: color }}
-      className={classes.reportBanner}
-    >
+    <Paper className={classes.reportBanner}>
+      <LinearProgress
+        color="inherit"
+        sx={{
+          height: 6,
+          color,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          transitionDuration: "0 !important",
+        }}
+        variant="determinate"
+        value={progress()}
+      />
       <div className={classes.textContainer}>
         <Typography
           variant="h1"
@@ -82,6 +93,7 @@ export const ReportHeader: FC<ReportBannerProps> = ({ ready }) => {
           {resourceType === AnalysisType.Snippet && !!snippet ? (
             <ReportHeaderSection
               label="Resource"
+              // DevSkim: ignore DS126858
               value={`md5: ${resourceValue}`}
               valueClassName={classes.resourceValue}
               dataCy="resource-value"
@@ -119,13 +131,13 @@ export const ReportHeader: FC<ReportBannerProps> = ({ ready }) => {
 
 const useStyles = makeStyles()((theme: Theme) => ({
   reportBanner: {
+    position: "relative",
     columnGap: theme.spacing(4),
     gridTemplateColumns: "1fr auto",
-    borderTop: "solid 6px",
     minHeight: 170,
     padding: theme.spacing(1, 2),
-    borderBottomLeftRadius: 15,
-    borderBottomRightRadius: 15,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
     display: "flex",
     flexDirection: "column-reverse",
     alignItems: "center",
@@ -136,6 +148,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
   },
   textContainer: {
+    width: "100%",
     flexGrow: 1,
     [theme.breakpoints.up("md")]: {
       display: "flex",
@@ -158,9 +171,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
     paddingBlockEnd: theme.spacing(1),
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(4),
+    gap: theme.spacing(2),
     maxWidth: 600,
     [theme.breakpoints.up("md")]: {
+      gap: theme.spacing(4),
       flexDirection: "row",
       alignItems: "flex-end",
     },

diff --git a/packages/backend/src/sbom/sbom-utils.ts b/packages/backend/src/sbom/sbom-utils.ts
@@ -44,8 +44,6 @@ export const fetchPackages = async (
 
   const allPackagesPromises = [...npmPackages, ...pyPackages];
   const allPackages = await Promise.all(allPackagesPromises);
-  console.log("All packages");
-  console.log(allPackages);
   return allPackages;
 };