+
+ Send Snippet
+
+
);
};
@@ -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",
+ },
}));
diff --git a/packages/app/src/analysis/components/FileUploadForm.tsx b/packages/app/src/analysis/components/FileUploadForm.tsx
index 516f984..83a4d59 100644
--- a/packages/app/src/analysis/components/FileUploadForm.tsx
+++ b/packages/app/src/analysis/components/FileUploadForm.tsx
@@ -1,4 +1,10 @@
-import { Theme, Typography, alpha, darken } from "@mui/material";
+import {
+ CircularProgress,
+ Theme,
+ Typography,
+ alpha,
+ darken,
+} from "@mui/material";
import { filesize } from "filesize";
import { FC, useCallback, useState } from "react";
import { FileRejection, useDropzone } from "react-dropzone";
@@ -7,13 +13,18 @@ import { useNavigate } from "react-router-dom";
import { makeStyles } from "tss-react/mui";
import config from "../../config";
import { startAnalysis } from "../actions/analysis-actions";
-import { AnalysisStore } from "../stores/analysis-store";
+import {
+ AnalysisStore,
+ AsyncState,
+ useAnalysisStore,
+} from "../stores/analysis-store";
const MAX_SIZE = parseInt(config.CODETOTAL_UPLOAD_FILE_LIMIT_BYTES);
export const FileUploadForm: FC = () => {
const { classes } = useStyles();
const navigate = useNavigate();
+ const { sending } = useAnalysisStore();
const [error, setError] = useState("");
const onDrop = useCallback(
@@ -47,28 +58,46 @@ export const FileUploadForm: FC = () => {
maxSize: MAX_SIZE,
});
+ const uploading = sending === AsyncState.Loading;
+
return (
-
+ {language && language.name && (
+
+
+ {language.icon ? (
+
+ {language.name}
+
+ )}
+
+ )}
+
+
{
) => {
- if (msg.status && msg.status === AnalysisStatus.Completed) {
+ onMessage: (msg: Partial) => {
+ const completed = msg.status && msg.status === AnalysisStatus.Completed;
+ const error = !!msg.analysisError;
+ if (completed || error) {
+ // close ws connection on completed/error
unsubscribe();
}
ReportStore.setState({ ...msg });
},
- () => {
+ onError: () => {
ReportStore.setState({
- subscriptionError: "Web socket connection error",
+ wsError: "Web socket connection error",
});
},
- () => {
+ onClose: () => {
const { inProgress } = ReportStore.getState();
inProgress &&
ReportStore.setState({
- subscriptionError: "Web socket connection closed while scanning",
+ wsError: "Web socket connection closed while scanning",
});
- }
- );
+ },
+ });
ReportStore.setState({ unsubscribe });
};
diff --git a/packages/app/src/report/components/Detection.tsx b/packages/app/src/report/components/Detection.tsx
index 36ac66b..59b3843 100644
--- a/packages/app/src/report/components/Detection.tsx
+++ b/packages/app/src/report/components/Detection.tsx
@@ -21,6 +21,5 @@ const useStyles = makeStyles()(() => ({
detection: {
height: "100%",
position: "relative",
- display: "grid",
},
}));
diff --git a/packages/app/src/report/components/ExportToCSV.tsx b/packages/app/src/report/components/ExportToCSV.tsx
new file mode 100644
index 0000000..5a97d4e
--- /dev/null
+++ b/packages/app/src/report/components/ExportToCSV.tsx
@@ -0,0 +1,47 @@
+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/ReportHeader.tsx b/packages/app/src/report/components/ReportHeader.tsx
index 0e32157..2db0713 100644
--- a/packages/app/src/report/components/ReportHeader.tsx
+++ b/packages/app/src/report/components/ReportHeader.tsx
@@ -1,13 +1,20 @@
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 { Score } from "./Score";
@@ -23,6 +30,7 @@ export const ReportHeader: FC = ({ ready }) => {
linters = [],
lintersWithIssues,
progress,
+ language,
} = useReportStore();
if (!lintersWithIssues) {
return null;
@@ -64,6 +72,18 @@ export const ReportHeader: FC = ({ ready }) => {
value={resourceValue || "-"}
dataCy="resource-value"
/>
+
+ Drop the files here ...
- ) : ( - <> + {uploading && ( +
+
- Drag and drop a file here
-
- or -
- Click to browse + Uploading file
- {error && (
-
- {error}
-
- )}
+
+ )}
+ {!uploading && (
+ <>
+ - or -
- Click to browse + Uploading file
+ {isDragActive ? (
+
+ Release to upload...
+
+ ) : (
+ <>
+
+ Drag and drop a file here
+
+ or +
+ Click to browse +
+ {error && (
+
+ {error}
+
+ )}
+
+ )}
+
)}
+ or +
+ Click to browse +
- {sending === "loading" && (
- = ({ loading, ...props }) => {
+ return (
+ }
+ startIcon={
+ loading && (
+ {
+ loading: boolean;
+}
diff --git a/packages/app/src/analysis/stores/analysis-store.ts b/packages/app/src/analysis/stores/analysis-store.ts
index 31f19bd..31c8bd0 100644
--- a/packages/app/src/analysis/stores/analysis-store.ts
+++ b/packages/app/src/analysis/stores/analysis-store.ts
@@ -1,4 +1,4 @@
-import { AnalysisType, OneOfValues } from "shared-types";
+import { AnalysisType, OneOfValues, ProgrammingLanguage } from "shared-types";
import { useStore } from "zustand";
import { createStore } from "zustand/vanilla";
@@ -8,6 +8,7 @@ const initialState: AnalysisStoreState = {
file: undefined,
sending: "idle",
inputType: AnalysisType.Snippet,
+ language: undefined,
};
export const AnalysisStore = createStore<
@@ -24,6 +25,7 @@ interface AnalysisStoreState {
file?: File;
sending: OneOfValues;
inputType: OneOfValues;
+ language?: ProgrammingLanguage;
}
interface AnalysisStoreFunctions {
diff --git a/packages/app/src/app/components/AppRouteProvider.tsx b/packages/app/src/app/components/AppRouteProvider.tsx
index a3ecf83..c1b768c 100644
--- a/packages/app/src/app/components/AppRouteProvider.tsx
+++ b/packages/app/src/app/components/AppRouteProvider.tsx
@@ -1,5 +1,6 @@
-import { FC, lazy } from "react";
+import { FC, Suspense, lazy } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { Loader } from "../../report/components/Loader";
import { ErrorPage } from "./ErrorPage";
const LazyAnalysisPage = lazy(() => import("../../analysis/AnalysisPage"));
@@ -18,5 +19,9 @@ const router = createBrowserRouter([
]);
export const AppRouteProvider: FC = () => {
- return = ({ language }) => {
+ const { classes, cx } = useStyles();
+ const theme = useTheme();
+ const isDarkmode = theme.palette.mode === "dark";
+ if (!language) {
+ return null;
+ }
+
+ // only is dark mode and only for "plain" type icons
+ // they require a background since when used with an img tag
+ // colors can't be applied through css and we end up with a black colored icon
+ const requiresBackground = isDarkmode && language.icon === "plain";
+
+ return (
+
+
+ }/${language.name?.toLowerCase()}-${)
+
+
+ );
+};
+const useStyles = makeStyles()((theme: Theme) => ({
+ languageIcon: {
+ display: "inline-flex",
+ height: "2em",
+ width: "2em",
+ },
+ img: {
+ width: "100%",
+ height: "100%",
+ },
+ darkmode: {
+ backgroundColor: theme.palette.text.secondary,
+ borderRadius: "50%",
+ display: "inline-flex",
+ },
+}));
+
+interface LanguageIconProps {
+ language?: ProgrammingLanguage;
+}
diff --git a/packages/app/src/common/utils/detect-lanauge-utils.ts b/packages/app/src/common/utils/detect-lanauge-utils.ts
new file mode 100644
index 0000000..7ab4b12
--- /dev/null
+++ b/packages/app/src/common/utils/detect-lanauge-utils.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+import debounce from "lodash-es/debounce";
+import { ProgrammingLanguage } from "shared-types";
+import { AnalysisStore } from "../../analysis/stores/analysis-store";
+import config from "../../config";
+
+export const detect = async (snippet: string) => {
+ const res = await axios.post(
+ `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/detect`,
+ { snippet }
+ );
+ AnalysisStore.setState({ language: res.data });
+};
+
+export const fetchDetect = debounce(detect, 1000);
diff --git a/packages/app/src/report/ReportPage.tsx b/packages/app/src/report/ReportPage.tsx
index 18eac81..0322086 100644
--- a/packages/app/src/report/ReportPage.tsx
+++ b/packages/app/src/report/ReportPage.tsx
@@ -1,5 +1,6 @@
import { FC, useEffect, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
+import { AnalysisErrorDialog } from "../common/AnalysisErrorDialog";
import { initProgress } from "./actions/init-report-action";
import { IssuesTable } from "./components/IssuesTable";
import { ReportDrawer } from "./components/ReportDrawer";
@@ -26,6 +27,7 @@ const ReportPage: FC = () => {
+
);
};
diff --git a/packages/app/src/report/actions/error-report-action.ts b/packages/app/src/report/actions/error-report-action.ts
new file mode 100644
index 0000000..026edda
--- /dev/null
+++ b/packages/app/src/report/actions/error-report-action.ts
@@ -0,0 +1,8 @@
+import { ReportStore } from "../stores/fe-report-store";
+
+export const resetReport = () => {
+ const { unsubscribe, reset } = ReportStore.getState();
+
+ unsubscribe && unsubscribe();
+ reset();
+};
diff --git a/packages/app/src/report/actions/init-report-action.ts b/packages/app/src/report/actions/init-report-action.ts
index 9ce442a..e56ec30 100644
--- a/packages/app/src/report/actions/init-report-action.ts
+++ b/packages/app/src/report/actions/init-report-action.ts
@@ -3,7 +3,7 @@ import { NavigateFunction } from "react-router-dom";
import { AnalysisStatus } from "shared-types";
import config from "../../config";
import { ReportStore } from "../stores/fe-report-store";
-import { subscribeToLintProgress } from "./subscribe-report-action";
+import { subscribeToReportProgress } from "./subscribe-report-action";
export const initProgress = async (
requestId: string,
@@ -17,9 +17,7 @@ export const initProgress = async (
switch (status) {
case AnalysisStatus.Created:
- subscribeToLintProgress(requestId);
- break;
- case AnalysisStatus.Completed:
+ subscribeToReportProgress(requestId);
break;
case AnalysisStatus.NotFound:
navigate("/");
diff --git a/packages/app/src/report/actions/subscribe-report-action.ts b/packages/app/src/report/actions/subscribe-report-action.ts
index 0cda637..8418a7b 100644
--- a/packages/app/src/report/actions/subscribe-report-action.ts
+++ b/packages/app/src/report/actions/subscribe-report-action.ts
@@ -1,32 +1,35 @@
import { AnalysisStatus, ReportState } from "shared-types";
-import { subscribe } from "../../ws-client";
import { ReportStore } from "../stores/fe-report-store";
+import { subscribe } from "../utils/ws-client";
-export const subscribeToLintProgress = (requestId: string) => {
+export const subscribeToReportProgress = (requestId: string) => {
console.log("subscribing to WS...");
// clear previous error
- ReportStore.setState({ subscriptionError: undefined });
+ ReportStore.setState({ wsError: undefined });
- const unsubscribe = subscribe(
+ const unsubscribe = subscribe({
requestId,
- (msg: Partial
-
- )}
-
{sending === "error" && (
@@ -111,13 +99,4 @@ const useStyles = makeStyles()((theme: Theme) => ({
flexGrow: 1,
position: "relative",
},
- loader: {
- width: "100%",
- height: "100%",
- display: "grid",
- placeItems: "center",
- position: "absolute",
- top: 0,
- left: 0,
- },
}));
diff --git a/packages/app/src/analysis/components/RepositoryForm.tsx b/packages/app/src/analysis/components/RepositoryForm.tsx
index 2dcd8dc..5dadd44 100644
--- a/packages/app/src/analysis/components/RepositoryForm.tsx
+++ b/packages/app/src/analysis/components/RepositoryForm.tsx
@@ -1,14 +1,15 @@
-import { Button, FormControl, TextField, Theme } from "@mui/material";
+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 { SubmitButton } from "./SubmitButton";
export const RepositoryForm: FC = () => {
const { classes } = useStyles();
const navigate = useNavigate();
- const { repositoryURL, repoEnabled } = useAnalysisStore();
+ const { repositoryURL, repoEnabled, sending } = useAnalysisStore();
const handleChange = useCallback((e: React.ChangeEvent) => {
AnalysisStore.setState({ repositoryURL: e.target.value });
@@ -28,14 +29,15 @@ export const RepositoryForm: FC = () => {
/>
-
+
);
};
diff --git a/packages/app/src/analysis/components/SubmitButton.tsx b/packages/app/src/analysis/components/SubmitButton.tsx
new file mode 100644
index 0000000..6536660
--- /dev/null
+++ b/packages/app/src/analysis/components/SubmitButton.tsx
@@ -0,0 +1,25 @@
+import { Button, ButtonProps, CircularProgress } from "@mui/material";
+import { FC } from "react";
+import { BiSend } from "react-icons/bi";
+
+export const SubmitButton: FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+