Success animation

packages/app/package.json

@@ -20,13 +20,15 @@
     "md5": "^2.3.0",
     "monaco-editor": "^0.40.0",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.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",
     "react-router-dom": "^6.13.0",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use": "^17.4.0",
     "shared-types": "^1.0.0",
     "tss-react": "^4.8.6",
     "zustand": "^4.3.8"

packages/app/src/analysis/components/SubmitButton.tsx

@@ -6,6 +6,7 @@ export const SubmitButton: FC<SubmitButtonProps> = ({ loading, ...props }) => {
   return (
     <Button
       {...props}
+      disabled={props.disabled || loading}
       endIcon={
         loading ? (
           <CircularProgress

packages/app/src/common/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+export const usePrevious = <T>(value: T) => {
+  const previousRef = useRef<T>(value);
+
+  useEffect(() => {
+    previousRef.current = value;
+  }, [value]);
+
+  return previousRef.current;
+};

packages/app/src/report/components/ReportPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { AnalysisErrorDialog } from "../../common/AnalysisErrorDialog";
 import { clearReport } from "../actions/clear-report-actions";
 import { initReport } from "../actions/init-report-action";
+import { SuccessfulAnalysisNotice } from "./SuccessfulAnalysisNotice";
 import { LinterDrawer } from "./drawer/LinterDrawer";
 import { CodeDialog } from "./header/CodeDialog";
 import { NewAnalysisDialog } from "./header/NewAnalysisDialog";
@@ -37,6 +38,7 @@ const ReportPage: FC = () => {
       <AnalysisErrorDialog />
       <NewAnalysisDialog />
       <CodeDialog />
+      <SuccessfulAnalysisNotice />
     </div>
   );
 };

packages/app/src/report/components/SuccessfulAnalysisNotice.tsx

@@ -0,0 +1,146 @@
+import { Fade, Theme, darken, keyframes } from "@mui/material";
+import { FC, useEffect, useState } from "react";
+import Confetti from "react-confetti";
+import { createPortal } from "react-dom";
+import { IoCloseOutline } from "react-icons/io5";
+import { AnalysisStatus } from "shared-types";
+import { makeStyles } from "tss-react/mui";
+import { usePrevious } from "../../common/hooks/usePrevious";
+import { useReportStore } from "../stores/fe-report-store";
+
+export const SuccessfulAnalysisNotice: FC = () => {
+  const { classes } = useStyles();
+  const { progress, status, score } = useReportStore();
+  const prevStatus = usePrevious(status);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const noRisksFound = score === 0;
+    const completed = status === AnalysisStatus.Completed;
+    const justChanged = prevStatus === AnalysisStatus.Created;
+
+    if (justChanged && completed && noRisksFound) {
+      setShow(true);
+      setTimeout(() => {
+        setShow(false);
+      }, 10000);
+    }
+  }, [prevStatus, progress, status, score]);
+
+  const handleClose = () => {
+    setShow(false);
+  };
+
+  return createPortal(
+    <Fade in={show} timeout={1000}>
+      <div className={classes.container}>
+        <div className={classes.circle}>
+          🥰
+          <br />
+          You Rock!
+          <br />
+          No Issues Found
+        </div>
+        <Confetti style={{ overflow: "hidden", zIndex: 1 }} />
+        <div
+          className={classes.closeButton}
+          role="button"
+          onClick={handleClose}
+        >
+          <IoCloseOutline />
+          <span>Close</span>
+        </div>
+      </div>
+    </Fade>,
+    document.body
+  );
+};
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  container: {
+    position: "fixed",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    left: 0,
+    overflow: "hidden",
+    zIndex: 11,
+    display: "grid",
+    placeItems: "center",
+    background: "#000000AA",
+  },
+  circle: {
+    width: 300,
+    height: 300,
+    display: "grid",
+    placeItems: "center",
+    background: `radial-gradient(${darken(theme.palette.success.light, 0.2)}, ${
+      theme.palette.success.light
+    })`,
+    color: theme.palette.common.white,
+    borderRadius: "50%",
+    fontSize: 30,
+    textAlign: "center",
+    boxShadow: `0 0 25px 5px ${theme.palette.divider}`,
+    zIndex: 20,
+    "&:before": {
+      zIndex: -1,
+      position: "absolute",
+      transformOrigin: "center center",
+      content: "''",
+      width: 300,
+      height: 300,
+      display: "block",
+      borderRadius: "50%",
+      backgroundColor: theme.palette.success.light,
+      animation: `${keyframes`
+      0% {
+        opacity: .5;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(1.5);
+      }
+    `} 2s infinite ease-in-out`,
+    },
+  },
+  closeButton: {
+    display: "flex",
+    flexDirection: "row-reverse",
+    // gap: theme.spacing(2),
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "4rem",
+    height: "4rem",
+    // overflow: "hidden",
+    position: "absolute",
+    borderRadius: "100vh",
+    right: theme.spacing(2),
+    bottom: theme.spacing(2),
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.common.white,
+    transition: theme.transitions.create("width"),
+    fontSize: 20,
+    paddingInline: theme.spacing(2),
+    cursor: "pointer",
+
+    "& > svg": {
+      width: "2rem",
+      height: "2rem",
+    },
+
+    "& > span": {
+      transform: "scaleX(0)",
+      transition: theme.transitions.create("all"),
+      width: 0,
+    },
+    "&:hover, &:focus": {
+      backgroundColor: theme.palette.primary.main,
+      "& > span": {
+        width: "4rem",
+        transform: "scaleX(1)",
+      },
+    },
+  },
+}));

packages/app/src/report/stores/fe-report-store.ts

@@ -1,10 +1,10 @@
-import { AnalysisStatus, Issue, ReportState } from "shared-types";
+import { Issue, ReportState } from "shared-types";
 import { createStore, useStore } from "zustand";
 import { ScoreColorKey } from "../fe-report-types";
 import { resolveScoreColor } from "../utils/score-utils";
 
 const initialState: InitialState = {
-  status: AnalysisStatus.Created,
+  status: undefined,
   linters: [],
   packages: [],
   score: 0,

packages/shared-types/src/report-types.ts

@@ -6,7 +6,7 @@ export interface ReportState {
   requestId?: string;
   resourceType?: string;
   resourceValue?: string;
-  status: AnalysisStatus;
+  status?: AnalysisStatus;
   linters?: Linter[];
   packages: SbomPackage[];
   repoDetails?: RepoDetails;