Merge branch 'development' into docs

oxsecurity · Jul 26, 2023 · 104468c · 104468c
2 parents 21cece8 + da9e393
commit 104468c
Show file tree

Hide file tree

Showing 55 changed files with 1,297 additions and 119 deletions.
diff --git a/cypress/e2e/02-analysis.cy.ts b/cypress/e2e/02-analysis.cy.ts
@@ -5,7 +5,7 @@ describe("analysis", () => {
     cy.visit("/");
 
     // submit button disabled by default
-    cy.get(`[data-cy="snippet-submit"]`).should("be.disabled");
+    cy.get(`[data-cy="submit"]`).should("be.disabled");
 
     submitSnippet();
 
@@ -15,4 +15,3 @@ describe("analysis", () => {
     });
   });
 });
-
diff --git a/cypress/e2e/utils/submit-snippet.ts b/cypress/e2e/utils/submit-snippet.ts
@@ -3,10 +3,10 @@ export const submitSnippet = () => {
   cy.get(`[data-cy="snippet-input"]`).type(snippetCode, { delay: 1 });
 
   // assert the button is enabled
-  cy.get(`[data-cy="snippet-submit"]`).should("be.visible");
+  cy.get(`[data-cy="submit"]`).should("be.visible");
 
   // submit the snippet
-  cy.get(`[data-cy="snippet-submit"]`).click();
+  cy.get(`[data-cy="submit"]`).click();
 };
 
 const snippetCode = `

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -7,6 +7,10 @@
       content="CodeTotal by OX Security, a megalinter UI"
     />
     <link rel="icon" href="/favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css"
+    />
     <meta name="theme-color" content="#6837FF" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Code Total By OX Security</title>

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -16,9 +16,12 @@
     "@mui/material": "^5.13.5",
     "axios": "^1.4.0",
     "filesize": "^10.0.7",
+    "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
+    "monaco-editor": "^0.40.0",
     "react": "^18.2.0",
     "react-countup": "^6.4.2",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-icons": "^4.10.1",
@@ -29,8 +32,10 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
+    "@types/lodash-es": "^4.17.8",
     "@types/md5": "^2.3.2",
     "@types/react": "^18.0.37",
+    "@types/react-csv": "^1.1.3",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",

diff --git a/packages/app/src/analysis/actions/analysis-actions.ts b/packages/app/src/analysis/actions/analysis-actions.ts
@@ -43,7 +43,8 @@ export const startAnalysis = async (navigate: NavigateFunction) => {
 };
 
 const createRequestData = (): Analysis | undefined => {
-  const { inputType, repositoryURL, file, snippet } = AnalysisStore.getState();
+  const { inputType, repositoryURL, file, snippet, language } =
+    AnalysisStore.getState();
   const sharedVariables = {
     name: "Lint",
     inputType,
@@ -55,6 +56,10 @@ const createRequestData = (): Analysis | undefined => {
     case AnalysisType.File:
       return { ...sharedVariables, file } as FileAnalysis;
     case AnalysisType.Snippet:
-      return { ...sharedVariables, snippet } as SnippetAnalysis;
+      return {
+        ...sharedVariables,
+        snippet,
+        language,
+      } as SnippetAnalysis;
   }
 };
diff --git a/packages/app/src/analysis/components/CodeSnippetForm.tsx b/packages/app/src/analysis/components/CodeSnippetForm.tsx
@@ -1,17 +1,22 @@
-import { Button, TextField, Theme } from "@mui/material";
+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 { SubmitButton } from "./SubmitButton";
 
 export const CodeSnippetForm: FC = () => {
   const { classes } = useStyles();
-  const { snippet, snippetEnabled } = useAnalysisStore();
+  const { snippet, snippetEnabled, sending, language } = useAnalysisStore();
   const navigate = useNavigate();
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    AnalysisStore.setState({ snippet: e.target.value });
+    const snippet = e.target.value;
+    AnalysisStore.setState({ snippet });
+    fetchDetect(snippet);
   }, []);
 
   const handleSubmit = () => {
@@ -33,15 +38,31 @@ export const CodeSnippetForm: FC = () => {
           "data-cy": "snippet-input",
         }}
       />
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={handleSubmit}
-        disabled={!snippetEnabled()}
-        data-cy="snippet-submit"
-      >
-        Check Snippet
-      </Button>
+      <div className={classes.footer}>
+        <div>
+          {language && language.name && (
+            <div className={classes.language}>
+              {language.icon ? (
+                <LanguageIcon language={language} />
+              ) : (
+                <Typography variant="body2" color="text.secondary">
+                  {language.name}
+                </Typography>
+              )}
+            </div>
+          )}
+        </div>
+        <SubmitButton
+          variant="contained"
+          color="primary"
+          onClick={handleSubmit}
+          disabled={!snippetEnabled() || sending === "loading"}
+          loading={sending === "loading"}
+          data-cy="submit"
+        >
+          Send Snippet
+        </SubmitButton>
+      </div>
     </div>
   );
 };
@@ -54,4 +75,15 @@ const useStyles = makeStyles()((theme: Theme) => ({
     gap: theme.spacing(2),
     padding: theme.spacing(1),
   },
+  language: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignSelf: "flex-start",
+  },
+  footer: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignSelf: "stretch",
+    justifyContent: "space-between",
+  },
 }));