Merge pull request #23 from oxsecurity/OXDEV-15939-enable-re-scanning…

…-from-the-report-page Fix switching between reports
oxsecurity · Aug 1, 2023 · abe7f8b · abe7f8b
2 parents 0e3b851 + 60a9635
commit abe7f8b
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 30 deletions.
diff --git a/packages/app/src/analysis/AnalysisPage.tsx b/packages/app/src/analysis/AnalysisPage.tsx
@@ -11,7 +11,7 @@ const AnalysisPage: FC = () => {
 
   const handleAfterSubmit = useCallback(
     (requestId: string) => {
-      navigate({ pathname: `/report/${requestId}` });
+      navigate(`/report/${requestId}`);
     },
     [navigate]
   );

diff --git a/packages/app/src/analysis/actions/analysis-actions.ts b/packages/app/src/analysis/actions/analysis-actions.ts
@@ -7,7 +7,6 @@ import {
   SnippetAnalysis,
 } from "shared-types";
 import config from "../../config";
-import { ReportStore } from "../../report/stores/fe-report-store";
 import { AnalysisStore, AsyncState } from "../stores/analysis-store";
 
 export const startAnalysis = async () => {
@@ -16,11 +15,6 @@ export const startAnalysis = async () => {
   });
 
   try {
-    // Reset progress store and unsubscribe from future messages
-    const { reset, unsubscribe } = ReportStore.getState();
-    unsubscribe && unsubscribe();
-    reset();
-
     const data = createRequestData();
     const report = await axios.post(
       `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/analysis`,

diff --git a/packages/app/src/analysis/components/AnalysisInputForm.tsx b/packages/app/src/analysis/components/AnalysisInputForm.tsx
@@ -1,9 +1,7 @@
 import { Alert, Paper, Tab, Tabs, Theme } from "@mui/material";
 import { FC, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
 import { AnalysisType, OneOfValues } from "shared-types";
 import { makeStyles } from "tss-react/mui";
-import { initProgress } from "../../report/actions/init-report-action";
 import { startAnalysis } from "../actions/analysis-actions";
 import { AnalysisStore, useAnalysisStore } from "../stores/analysis-store";
 import { AnalysisTabPanel } from "./AnalysisTabPanel";
@@ -16,7 +14,6 @@ export const AnalysisInputForm: FC<AnalysisInputFormProps> = ({
 }) => {
   const { classes } = useStyles();
   const { sending, inputType } = useAnalysisStore();
-  const navigate = useNavigate();
 
   const handleFormTypeChange = (
     _: unknown,
@@ -27,9 +24,8 @@ export const AnalysisInputForm: FC<AnalysisInputFormProps> = ({
 
   const handleSubmit = useCallback(async () => {
     const requestId = await startAnalysis();
-    initProgress(requestId, navigate);
     onAfterSubmit(requestId);
-  }, [onAfterSubmit, navigate]);
+  }, [onAfterSubmit]);
 
   return (
     <Paper elevation={1} className={classes.inputForm} square>

diff --git a/packages/app/src/app/components/Footer.tsx b/packages/app/src/app/components/Footer.tsx
@@ -82,6 +82,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     gap: "1ch",
     flexWrap: "wrap",
     fontSize: 12,
+    lineHeight: 1,
   },
   link: {
     color: theme.palette.primary.main,
@@ -92,7 +93,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
   },
   oxLogo: {
-    width: "1em",
-    height: "1em",
+    width: "1.3em",
+    height: "auto",
   },
 }));
diff --git a/packages/app/src/report/ReportPage.tsx b/packages/app/src/report/ReportPage.tsx
@@ -1,12 +1,30 @@
-import { FC } from "react";
+import { FC, useEffect, useRef } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { AnalysisErrorDialog } from "../common/AnalysisErrorDialog";
+import { initReport } from "./actions/init-report-action";
 import { IssuesTable } from "./components/IssuesTable";
 import { NewAnalysisDialog } from "./components/NewAnalysisDialog";
 import { ReportDrawer } from "./components/ReportDrawer";
 import { ReportHeader } from "./components/ReportHeader";
 import { ReportTabs } from "./components/ReportTabs";
 
 const ReportPage: FC = () => {
+  const calls = useRef(0);
+  const { requestId } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      if (calls.current > 0 && requestId) {
+        const success = await initReport(requestId);
+        if (!success) {
+          navigate("/");
+        }
+      }
+      calls.current += 1;
+    })();
+  }, [requestId, navigate]);
+
   return (
     <div style={{ paddingBlockEnd: 60 }}>
       <ReportHeader ready />

diff --git a/packages/app/src/report/actions/init-report-action.ts b/packages/app/src/report/actions/init-report-action.ts
@@ -1,31 +1,30 @@
 import axios from "axios";
-import { NavigateFunction } from "react-router-dom";
 import { AnalysisStatus } from "shared-types";
 import config from "../../config";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribeToReportProgress } from "./subscribe-report-action";
 
-export const initProgress = async (
-  requestId: string,
-  navigate: NavigateFunction
-) => {
+export const initReport = async (requestId: string) => {
   try {
+    // reset report store
+    ReportStore.getState().reset();
+
+    // fetch report
     const res = await axios.get(
       `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/report/${requestId}`
     );
-    const { status } = res.data;
 
+    const { status } = res.data;
     switch (status) {
       case AnalysisStatus.Created:
         subscribeToReportProgress(requestId);
-        navigate({ pathname: `/report/${requestId}` });
         break;
       case AnalysisStatus.NotFound:
-        navigate("/");
-        return;
+        return false;
     }
 
     ReportStore.setState(res.data);
+    return true;
   } catch (err) {
     console.error(err);
   }

diff --git a/packages/app/src/report/actions/subscribe-report-action.ts b/packages/app/src/report/actions/subscribe-report-action.ts
@@ -2,12 +2,16 @@ import { AnalysisStatus, ReportState } from "shared-types";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribe } from "../utils/ws-client";
 
+let unsubscribe: () => void;
+
 export const subscribeToReportProgress = (requestId: string) => {
-  console.log("subscribing to WS...");
+  // unsubscribe from previous connection
+  unsubscribe && unsubscribe();
+
   // clear previous error
   ReportStore.setState({ wsError: undefined });
 
-  const unsubscribe = subscribe({
+  unsubscribe = subscribe({
     requestId,
     onMessage: (msg: Partial<ReportState>) => {
       const completed = msg.status && msg.status === AnalysisStatus.Completed;

diff --git a/packages/app/src/report/components/DownloadAllIssuesButton.tsx b/packages/app/src/report/components/DownloadAllIssuesButton.tsx
@@ -13,7 +13,6 @@ export const DownloadAllIssuesButton: FC = () => {
   const button = (
     <Button
       startIcon={<MdCloudDownload />}
-      tabIndex={-1}
       size="small"
       color="primary"
       disabled={disabled}
@@ -28,7 +27,8 @@ export const DownloadAllIssuesButton: FC = () => {
       data={allIssues()}
       target="_blank"
       className={classes.exportToCSV}
-      style={{ pointerEvents: "none" }}
+      tabIndex={-1}
+      style={{ outline: "none" }}
     >
       {button}
     </CSVLink>

diff --git a/packages/app/src/report/components/NewAnalysisDialog.tsx b/packages/app/src/report/components/NewAnalysisDialog.tsx
@@ -5,14 +5,24 @@ import {
   DialogContent,
   Theme,
 } from "@mui/material";
-import { FC } from "react";
+import { FC, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import { makeStyles } from "tss-react/mui";
 import { AnalysisInputForm } from "../../analysis/components/AnalysisInputForm";
 import { useReportStore } from "../stores/fe-report-store";
 
 export const NewAnalysisDialog: FC = () => {
   const { classes } = useStyles();
   const { newAnalysisDialogOpen, closeNewAnalysisDialog } = useReportStore();
+  const navigate = useNavigate();
+
+  const handleAfterSubmit = useCallback(
+    (requestId: string) => {
+      closeNewAnalysisDialog();
+      navigate(`/report/${requestId}`);
+    },
+    [closeNewAnalysisDialog, navigate]
+  );
 
   return (
     <Dialog
@@ -23,7 +33,7 @@ export const NewAnalysisDialog: FC = () => {
       scroll="body"
     >
       <DialogContent className={classes.dialogContent}>
-        <AnalysisInputForm onAfterSubmit={closeNewAnalysisDialog} />
+        <AnalysisInputForm onAfterSubmit={handleAfterSubmit} />
       </DialogContent>
       <DialogActions sx={{ padding: 2 }}>
         <Button onClick={closeNewAnalysisDialog}>Close (ESC)</Button>

diff --git a/packages/app/src/report/components/ReportHeader.tsx b/packages/app/src/report/components/ReportHeader.tsx
@@ -68,6 +68,7 @@ export const ReportHeader: FC<ReportBannerProps> = ({ ready }) => {
             label="Resource"
             value={resourceValue || "-"}
             dataCy="resource-value"
+            valueClassName={classes.resourceValue}
           />
           <LanguageIcon language={language} />
         </div>
@@ -143,6 +144,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
   nowrap: {
     wordBreak: "keep-all",
   },
+  resourceValue: {
+    maxWidth: 300,
+    whiteSpace: "nowrap",
+  },
 }));
 
 interface ReportBannerProps {