diff --git a/packages/app/src/analysis/components/CodeSnippetForm.tsx b/packages/app/src/analysis/components/CodeSnippetForm.tsx
index bfa637e..ef4a328 100644
--- a/packages/app/src/analysis/components/CodeSnippetForm.tsx
+++ b/packages/app/src/analysis/components/CodeSnippetForm.tsx
@@ -1,17 +1,15 @@
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
= ({ onSubmit }) => {
const { classes } = useStyles();
const { snippet, snippetEnabled, sending, language } = useAnalysisStore();
- const navigate = useNavigate();
const handleChange = useCallback((e: React.ChangeEvent) => {
const snippet = e.target.value;
@@ -19,10 +17,6 @@ export const CodeSnippetForm: FC = () => {
fetchDetect(snippet);
}, []);
- const handleSubmit = () => {
- startAnalysis(navigate);
- };
-
return (
{
{
+export const FileUploadForm: FC = ({ onSubmit }) => {
const { classes } = useStyles();
- const navigate = useNavigate();
const { sending } = useAnalysisStore();
const [error, setError] = useState("");
@@ -47,9 +45,9 @@ export const FileUploadForm: FC = () => {
const file = files[0];
AnalysisStore.setState({ file });
- startAnalysis(navigate);
+ onSubmit();
},
- [navigate]
+ [onSubmit]
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
diff --git a/packages/app/src/analysis/components/RepositoryForm.tsx b/packages/app/src/analysis/components/RepositoryForm.tsx
index 5dadd44..321f232 100644
--- a/packages/app/src/analysis/components/RepositoryForm.tsx
+++ b/packages/app/src/analysis/components/RepositoryForm.tsx
@@ -1,24 +1,18 @@
import { FormControl, TextField, Theme } from "@mui/material";
import { FC, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
import { makeStyles } from "tss-react/mui";
-import { startAnalysis } from "../actions/analysis-actions";
import { AnalysisStore, useAnalysisStore } from "../stores/analysis-store";
+import { AnalysisFormProps } from "./AnalysisInputForm";
import { SubmitButton } from "./SubmitButton";
-export const RepositoryForm: FC = () => {
+export const RepositoryForm: FC = ({ onSubmit }) => {
const { classes } = useStyles();
- const navigate = useNavigate();
const { repositoryURL, repoEnabled, sending } = useAnalysisStore();
const handleChange = useCallback((e: React.ChangeEvent) => {
AnalysisStore.setState({ repositoryURL: e.target.value });
}, []);
- const handleSubmit = () => {
- startAnalysis(navigate);
- };
-
return (
@@ -32,7 +26,7 @@ export const RepositoryForm: FC = () => {
diff --git a/packages/app/src/analysis/stores/analysis-store.ts b/packages/app/src/analysis/stores/analysis-store.ts
index 31c8bd0..e8d7abe 100644
--- a/packages/app/src/analysis/stores/analysis-store.ts
+++ b/packages/app/src/analysis/stores/analysis-store.ts
@@ -13,10 +13,11 @@ const initialState: AnalysisStoreState = {
export const AnalysisStore = createStore<
AnalysisStoreState & AnalysisStoreFunctions
->((_, get) => ({
+>((set, get) => ({
...initialState,
repoEnabled: () => !!get().repositoryURL && get().repositoryURL.length > 0,
snippetEnabled: () => !!get().snippet && get().snippet.length > 0,
+ reset: () => set({ ...initialState }),
}));
interface AnalysisStoreState {
@@ -31,6 +32,7 @@ interface AnalysisStoreState {
interface AnalysisStoreFunctions {
repoEnabled(): boolean;
snippetEnabled(): boolean;
+ reset(): void;
}
export const AsyncState = {
@@ -41,7 +43,3 @@ export const AsyncState = {
} as const;
export const useAnalysisStore = () => useStore(AnalysisStore);
-
-export const clearAnalysisStore = () => {
- AnalysisStore.setState(initialState);
-};
diff --git a/packages/app/src/report/ReportPage.tsx b/packages/app/src/report/ReportPage.tsx
index 0322086..66532c4 100644
--- a/packages/app/src/report/ReportPage.tsx
+++ b/packages/app/src/report/ReportPage.tsx
@@ -1,25 +1,12 @@
-import { FC, useEffect, useRef } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { FC } from "react";
import { AnalysisErrorDialog } from "../common/AnalysisErrorDialog";
-import { initProgress } 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(() => {
- if (calls.current === 0) {
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- initProgress(requestId!, navigate);
- calls.current += 1;
- }
- }, [requestId, navigate]);
-
return (
@@ -28,6 +15,7 @@ const ReportPage: FC = () => {
+
);
};
diff --git a/packages/app/src/report/actions/init-report-action.ts b/packages/app/src/report/actions/init-report-action.ts
index e56ec30..df0f45c 100644
--- a/packages/app/src/report/actions/init-report-action.ts
+++ b/packages/app/src/report/actions/init-report-action.ts
@@ -18,6 +18,7 @@ export const initProgress = async (
switch (status) {
case AnalysisStatus.Created:
subscribeToReportProgress(requestId);
+ navigate({ pathname: `/report/${requestId}` });
break;
case AnalysisStatus.NotFound:
navigate("/");
diff --git a/packages/app/src/report/components/BackButton.tsx b/packages/app/src/report/components/BackButton.tsx
new file mode 100644
index 0000000..3e4899e
--- /dev/null
+++ b/packages/app/src/report/components/BackButton.tsx
@@ -0,0 +1,21 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { FC, SyntheticEvent } from "react";
+import { IoMdArrowBack } from "react-icons/io";
+import { useNavigate } from "react-router-dom";
+
+export const BackButton: FC = () => {
+ const navigate = useNavigate();
+
+ const navigateBack = (e: SyntheticEvent) => {
+ e.preventDefault();
+ navigate("/");
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/app/src/report/components/DownloadAllIssuesButton.tsx b/packages/app/src/report/components/DownloadAllIssuesButton.tsx
new file mode 100644
index 0000000..a772194
--- /dev/null
+++ b/packages/app/src/report/components/DownloadAllIssuesButton.tsx
@@ -0,0 +1,60 @@
+import { Button, Theme, Tooltip } from "@mui/material";
+import { FC } from "react";
+import { CSVLink } from "react-csv";
+import { MdCloudDownload } from "react-icons/md";
+import { makeStyles } from "tss-react/mui";
+import { useReportStore } from "../stores/fe-report-store";
+
+export const DownloadAllIssuesButton: FC = () => {
+ const { classes } = useStyles();
+ const { allIssues, requestId } = useReportStore();
+
+ const disabled = allIssues().length === 0;
+ const button = (
+ }
+ tabIndex={-1}
+ size="small"
+ color="primary"
+ disabled={disabled}
+ sx={{ textTransform: "none" }}
+ >
+ Issues
+
+ );
+ const downloadLink = (
+
+ {button}
+
+ );
+
+ return (
+
+ {disabled ? button : downloadLink}
+
+ );
+};
+
+const useStyles = makeStyles()((theme: Theme) => ({
+ exportToCSV: {
+ display: "inline-flex",
+ alignItems: "center",
+ gap: theme.spacing(1),
+ color: theme.palette.primary.main,
+ fontWeight: 400,
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
+ },
+ },
+}));
diff --git a/packages/app/src/report/components/ExportToCSV.tsx b/packages/app/src/report/components/ExportToCSV.tsx
deleted file mode 100644
index 5a97d4e..0000000
--- a/packages/app/src/report/components/ExportToCSV.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { IconButton, Theme, Tooltip, Zoom } from "@mui/material";
-import { FC } from "react";
-import { CSVLink } from "react-csv";
-import { MdCloudDownload } from "react-icons/md";
-import { AnalysisStatus } from "shared-types";
-import { makeStyles } from "tss-react/mui";
-import { useReportStore } from "../stores/fe-report-store";
-
-export const ExportToCSV: FC = () => {
- const { classes } = useStyles();
- const { status, allIssues, requestId } = useReportStore();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const useStyles = makeStyles()((theme: Theme) => ({
- exportToCSV: {
- display: "inline-flex",
- alignItems: "center",
- gap: theme.spacing(1),
- color: theme.palette.primary.main,
- fontWeight: 400,
- textDecoration: "none",
- "&:hover": {
- textDecoration: "underline",
- },
- },
-}));
diff --git a/packages/app/src/report/components/NewAnalysisDialog.tsx b/packages/app/src/report/components/NewAnalysisDialog.tsx
new file mode 100644
index 0000000..7eda441
--- /dev/null
+++ b/packages/app/src/report/components/NewAnalysisDialog.tsx
@@ -0,0 +1,42 @@
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ Theme,
+} from "@mui/material";
+import { FC } from "react";
+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();
+
+ return (
+
+ );
+};
+
+const useStyles = makeStyles()((theme: Theme) => ({
+ dialogContent: {
+ display: "flex",
+ flexDirection: "column",
+ gap: theme.spacing(2),
+ padding: 0,
+ },
+}));
diff --git a/packages/app/src/report/components/ReportHeader.tsx b/packages/app/src/report/components/ReportHeader.tsx
index 2db0713..f161c54 100644
--- a/packages/app/src/report/components/ReportHeader.tsx
+++ b/packages/app/src/report/components/ReportHeader.tsx
@@ -1,21 +1,17 @@
import {
Divider,
- IconButton,
Paper,
Theme,
- Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { FC } from "react";
-import { IoMdArrowBack } from "react-icons/io";
-import { NavLink } from "react-router-dom";
import { makeStyles } from "tss-react/mui";
import { LanguageIcon } from "../../common/LanguageIcon";
import { useReportStore } from "../stores/fe-report-store";
-import { ExportToCSV } from "./ExportToCSV";
import { ReportHeaderSection } from "./ReportHeaderSection";
+import { ReportToolbar } from "./ReportToolbar";
import { Score } from "./Score";
export const ReportHeader: FC = ({ ready }) => {
@@ -32,6 +28,7 @@ export const ReportHeader: FC = ({ ready }) => {
progress,
language,
} = useReportStore();
+
if (!lintersWithIssues) {
return null;
}
@@ -75,16 +72,7 @@ export const ReportHeader: FC = ({ ready }) => {
-
-
-
-
-
-
-
-
-
-
+
({
nowrap: {
wordBreak: "keep-all",
},
- footer: {
- display: "flex",
- alignItems: "center",
- gap: theme.spacing(2),
- paddingBlockStart: theme.spacing(1),
- justifyContent: "space-between"
- },
}));
interface ReportBannerProps {
diff --git a/packages/app/src/report/components/ReportTabs.tsx b/packages/app/src/report/components/ReportTabs.tsx
index 85b3f50..1a95aa0 100644
--- a/packages/app/src/report/components/ReportTabs.tsx
+++ b/packages/app/src/report/components/ReportTabs.tsx
@@ -11,7 +11,6 @@ import {
import { FC, useState } from "react";
import { makeStyles } from "tss-react/mui";
import { ReportType } from "../fe-report-types";
-
import { Details } from "./Details";
import { Detection } from "./Detection";
import { ReportPanel } from "./ReportPanel";
@@ -44,19 +43,17 @@ export const ReportTabs: FC = () => {
onChange={handlePanelTypeChange}
>
{
const useStyles = makeStyles()((theme: Theme) => ({
tab: {
textTransform: "none",
+
transition: theme.transitions.create("background"),
[theme.breakpoints.up("md")]: {
minWidth: 180,
+ borderTopRightRadius: 15,
+ borderTopLeftRadius: 15,
},
},
selectedTab: {
diff --git a/packages/app/src/report/components/ReportToolbar.tsx b/packages/app/src/report/components/ReportToolbar.tsx
new file mode 100644
index 0000000..d45120d
--- /dev/null
+++ b/packages/app/src/report/components/ReportToolbar.tsx
@@ -0,0 +1,41 @@
+import { Button, Divider, Theme } from "@mui/material";
+import { FC } from "react";
+import { makeStyles } from "tss-react/mui";
+import { useReportStore } from "../stores/fe-report-store";
+import { BackButton } from "./BackButton";
+import { DownloadAllIssuesButton } from "./DownloadAllIssuesButton";
+
+export const ReportToolbar: FC = () => {
+ const { classes } = useStyles();
+ const { openNewAnalysisDialog } = useReportStore();
+
+ return (
+
+
+
+
+
+
+
+