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

…-from-the-report-page Oxdev 15939 enable re scanning from the report page
oxsecurity · Jul 31, 2023 · c6a3256 · c6a3256
2 parents 404174e + 4534c48
commit c6a3256
Show file tree

Hide file tree

Showing 21 changed files with 300 additions and 189 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "pre-commit": "^1.2.2",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "turbo": "^1.10.7",
+    "turbo": "^1.10.12",
     "typescript": "^5.1.6"
   },
   "keywords": [],

diff --git a/packages/app/src/analysis/AnalysisPage.tsx b/packages/app/src/analysis/AnalysisPage.tsx
@@ -1,22 +1,39 @@
-import { FC, useEffect } from "react";
+import { Theme } from "@mui/material";
+import { FC, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { AnalysisHeader } from "./components/AnalysisHeader";
-import { InputForm } from "./components/InputForm";
-import { clearAnalysisStore } from "./stores/analysis-store";
+import { AnalysisInputForm } from "./components/AnalysisInputForm";
 
 const AnalysisPage: FC = () => {
-  useEffect(() => {
-    return () => {
-      // on unmount
-      clearAnalysisStore();
-    };
-  }, []);
+  const { classes } = useStyles();
+  const navigate = useNavigate();
+
+  const handleAfterSubmit = useCallback(
+    (requestId: string) => {
+      navigate({ pathname: `/report/${requestId}` });
+    },
+    [navigate]
+  );
 
   return (
     <div style={{ paddingBlockEnd: 150 }}>
       <AnalysisHeader />
-      <InputForm />
+      <main className={classes.main}>
+        <AnalysisInputForm onAfterSubmit={handleAfterSubmit} />
+      </main>
     </div>
   );
 };
 
 export default AnalysisPage;
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  main: {
+    marginBlockStart: theme.spacing(3),
+    maxWidth: 620,
+    marginInline: "auto",
+    borderRadius: 15,
+    overflow: "hidden",
+  },
+}));
diff --git a/packages/app/src/analysis/actions/analysis-actions.ts b/packages/app/src/analysis/actions/analysis-actions.ts
@@ -1,5 +1,4 @@
 import axios from "axios";
-import { NavigateFunction } from "react-router-dom";
 import {
   Analysis,
   AnalysisType,
@@ -11,7 +10,7 @@ import config from "../../config";
 import { ReportStore } from "../../report/stores/fe-report-store";
 import { AnalysisStore, AsyncState } from "../stores/analysis-store";
 
-export const startAnalysis = async (navigate: NavigateFunction) => {
+export const startAnalysis = async () => {
   AnalysisStore.setState({
     sending: AsyncState.Loading,
   });
@@ -32,8 +31,8 @@ export const startAnalysis = async (navigate: NavigateFunction) => {
         },
       }
     );
-    const requestId = report.data.requestId;
-    navigate({ pathname: `/report/${requestId}` });
+    AnalysisStore.getState().reset();
+    return report.data.requestId;
   } catch (err) {
     console.error(err);
     AnalysisStore.setState({

diff --git a/packages/app/src/analysis/components/AnalysisHeader.tsx b/packages/app/src/analysis/components/AnalysisHeader.tsx
@@ -36,11 +36,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
   avatar: {
     marginInlineStart: -20,
     width: 140,
-    height: 130,
+    height: "14vh",
   },
   title: {
     marginBlockStart: theme.spacing(1),
-    fontSize: 50,
+    fontSize: "clamp(30px, 5vw, 50px)",
     fontWeight: 800,
     letterSpacing: 0.3,
   },

diff --git a/...app/src/analysis/components/InputForm.tsx → ...analysis/components/AnalysisInputForm.tsx b/...app/src/analysis/components/InputForm.tsx → ...analysis/components/AnalysisInputForm.tsx
@@ -1,16 +1,22 @@
 import { Alert, Paper, Tab, Tabs, Theme } from "@mui/material";
-import { FC } from "react";
+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";
 import { CodeSnippetForm } from "./CodeSnippetForm";
 import { FileUploadForm } from "./FileUploadForm";
 import { RepositoryForm } from "./RepositoryForm";
 
-export const InputForm: FC = () => {
+export const AnalysisInputForm: FC<AnalysisInputFormProps> = ({
+  onAfterSubmit,
+}) => {
   const { classes } = useStyles();
   const { sending, inputType } = useAnalysisStore();
+  const navigate = useNavigate();
 
   const handleFormTypeChange = (
     _: unknown,
@@ -19,8 +25,14 @@ export const InputForm: FC = () => {
     AnalysisStore.setState({ inputType: newInputType });
   };
 
+  const handleSubmit = useCallback(async () => {
+    const requestId = await startAnalysis();
+    initProgress(requestId, navigate);
+    onAfterSubmit(requestId);
+  }, [onAfterSubmit, navigate]);
+
   return (
-    <Paper component="main" elevation={1} className={classes.inputForm}>
+    <Paper elevation={1} className={classes.inputForm} square>
       <div className={classes.tabsContainer}>
         <Tabs
           selectionFollowsFocus
@@ -44,33 +56,30 @@ export const InputForm: FC = () => {
         </Tabs>
       </div>
       <div className={classes.tabPanel}>
-        <div>
-          {sending === "error" && (
-            <Alert severity="error" square>
-              Unable to start scanning, please try again later
-            </Alert>
-          )}
-          <AnalysisTabPanel
-            value={AnalysisType.Snippet}
-            selectedValue={inputType}
-          >
-            <CodeSnippetForm />
-          </AnalysisTabPanel>
-          <AnalysisTabPanel value={AnalysisType.File} selectedValue={inputType}>
-            <FileUploadForm />
-          </AnalysisTabPanel>
-          <AnalysisTabPanel value={AnalysisType.Repo} selectedValue={inputType}>
-            <RepositoryForm />
-          </AnalysisTabPanel>
-        </div>
+        {sending === "error" && (
+          <Alert severity="error" square>
+            Unable to start scanning, please try again later
+          </Alert>
+        )}
+        <AnalysisTabPanel
+          value={AnalysisType.Snippet}
+          selectedValue={inputType}
+        >
+          <CodeSnippetForm onSubmit={handleSubmit} />
+        </AnalysisTabPanel>
+        <AnalysisTabPanel value={AnalysisType.File} selectedValue={inputType}>
+          <FileUploadForm onSubmit={handleSubmit} />
+        </AnalysisTabPanel>
+        <AnalysisTabPanel value={AnalysisType.Repo} selectedValue={inputType}>
+          <RepositoryForm onSubmit={handleSubmit} />
+        </AnalysisTabPanel>
       </div>
     </Paper>
   );
 };
 
 const useStyles = makeStyles()((theme: Theme) => ({
   inputForm: {
-    marginBlockStart: theme.spacing(3),
     textAlign: "center",
     transition: theme.transitions.create("all"),
     display: "flex",
@@ -81,8 +90,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
         : `0px 0px 10px 10px #00000010`,
     width: "100%",
     marginInline: "auto",
-    minHeight: 200,
-    maxWidth: 620,
+    minHeight: 280,
   },
   tabsContainer: {
     borderBottom: 1,
@@ -100,3 +108,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
     position: "relative",
   },
 }));
+
+interface AnalysisInputFormProps {
+  onAfterSubmit(requestId: string): void;
+}
+
+export interface AnalysisFormProps {
+  onSubmit(): void;
+}
diff --git a/packages/app/src/analysis/components/AnalysisTabPanel.tsx b/packages/app/src/analysis/components/AnalysisTabPanel.tsx
@@ -11,8 +11,8 @@ export const AnalysisTabPanel: FC<PropsWithChildren<AnalysisTabPanelProps>> = (
     <div
       role="tabpanel"
       hidden={value !== selectedValue}
-      id={`simple-tabpanel-${selectedValue}`}
-      aria-labelledby={`simple-tab-${selectedValue}`}
+      id={`analysis-tabpanel-${value}`}
+      aria-labelledby={`analysis-tab-${value}`}
       {...other}
       style={{ height: "100%" }}
     >

diff --git a/packages/app/src/analysis/components/CodeSnippetForm.tsx b/packages/app/src/analysis/components/CodeSnippetForm.tsx
@@ -1,28 +1,22 @@
 import { TextField, Theme, Typography } from "@mui/material";
 import { FC, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
 import { makeStyles } from "tss-react/mui";
 import { LanguageIcon } from "../../common/LanguageIcon";
 import { fetchDetect } from "../../common/utils/detect-lanauge-utils";
-import { startAnalysis } from "../actions/analysis-actions";
 import { AnalysisStore, useAnalysisStore } from "../stores/analysis-store";
+import { AnalysisFormProps } from "./AnalysisInputForm";
 import { SubmitButton } from "./SubmitButton";
 
-export const CodeSnippetForm: FC = () => {
+export const CodeSnippetForm: FC<AnalysisFormProps> = ({ onSubmit }) => {
   const { classes } = useStyles();
   const { snippet, snippetEnabled, sending, language } = useAnalysisStore();
-  const navigate = useNavigate();
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const snippet = e.target.value;
     AnalysisStore.setState({ snippet });
     fetchDetect(snippet);
   }, []);
 
-  const handleSubmit = () => {
-    startAnalysis(navigate);
-  };
-
   return (
     <div className={classes.codeSnippetForm}>
       <TextField
@@ -55,7 +49,7 @@ export const CodeSnippetForm: FC = () => {
         <SubmitButton
           variant="contained"
           color="primary"
-          onClick={handleSubmit}
+          onClick={onSubmit}
           disabled={!snippetEnabled() || sending === "loading"}
           loading={sending === "loading"}
           data-cy="submit"