From cdf4becdfc1d7bea622971847fb53f5a405a674b Mon Sep 17 00:00:00 2001
From: itayox <111698101+itayox@users.noreply.github.com>
Date: Mon, 14 Aug 2023 20:31:24 +0300
Subject: [PATCH] 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 <itayox@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../report/components/header/ReportHeader.tsx | 32 +++++++++++++------
 packages/backend/src/sbom/sbom-utils.ts       |  2 --
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e80d1bf..9c1f47e 100644
--- 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
index e3b5415..e57fbf0 100644
--- 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
index 32d6d86..8ec179d 100644
--- 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;
 };