Diplay ECU name in update status (#110)

Optimize car update status progress control
Remove car update status page test
Replace with individual component tests

src/components/Controls/CarUpdateStatusProgress/index.jsx

@@ -5,6 +5,80 @@ import clsx from "clsx";
 
 import CircularProgress from "../CircularProgress";
 
+const PHASES = [
+  {
+    label: "Pending",
+    events: ["pending"],
+    progress: () => 100,
+  },
+  {
+    label: "Recieved",
+    events: ["manifest_accepted", "manifest_received"],
+    progress: () => 100,
+  },
+  {
+    label: "Precondition",
+    events: ["requirements_succeeded"],
+    progress: () => 100,
+  },
+  {
+    label: "Download",
+    events: [
+      "downloading",
+      "download_start",
+      "download_complete",
+      "download_error",
+      "package_download_start",
+    ],
+    progress: (msg, progress) =>
+      [
+        "package_download_start",
+        "downloading",
+        "download_start",
+        "download_complete",
+      ].indexOf(msg) > -1
+        ? progress
+        : -100,
+  },
+  {
+    label: "Approved",
+    events: ["package_download_complete", "install_approval_await"],
+    progress: () => -1,
+  },
+  {
+    label: "Install",
+    events: [
+      "install_approval_received",
+      "install_start",
+      "installing",
+      "install_complete",
+      "install_error",
+    ],
+    progress: (msg, progress) =>
+      [
+        "install_approval_received",
+        "install_start",
+        "installing",
+        "install_complete",
+      ].indexOf(msg) > -1
+        ? progress
+        : -100,
+  },
+  {
+    label: "Clean up",
+    events: ["package_install_complete", "cleanup_failed"],
+    progress: (msg, progress) => {
+      if (msg === "package_install_complete") return -1;
+      return -100;
+    },
+  },
+  {
+    label: "Updated",
+    events: ["cleanup_success", "manifest_succeeded"],
+    progress: (msg, progress) => 100,
+  },
+];
+
 const Progress = ({ value, classes }) => {
   if (value === 100)
     return (
@@ -21,63 +95,26 @@ const Progress = ({ value, classes }) => {
   return <RadioButtonUnchecked className={classes.progressIcon} />;
 };
 
+const getProgress = (index, phase, progress) => {
+  if (index === phase) return progress;
+  if (index < phase) return 100;
+  return -1;
+};
+
 const CarUpdateStatus = ({ status, classes }) => {
-  const [approval, setApproval] = useState(-1);
-  const [cleanup, setCleanup] = useState(-1);
-  const [download, setDownload] = useState(-1);
-  const [install, setInstall] = useState(-1);
-  const [precondition, setPrecondition] = useState(-1);
-  const [received, setReceived] = useState(-1);
-  const [updated, setUpdated] = useState(-1);
+  const [phase, setPhase] = useState(0);
+  const [progress, setProgress] = useState(-1);
 
   useEffect(() => {
-    /* eslint-disable no-fallthrough, default-case */
     if (!status) return;
-    // update previous steps
-    switch (status.msg) {
-      case "manifest_succeeded":
-        setUpdated(100);
-      case "cleanup_success":
-        setCleanup(100);
-      case "package_install_complete":
-        setInstall(100);
-      case "install_approval_received":
-        setApproval(100);
-      case "install_approval_await":
-      case "install_start":
-      case "installing":
-      case "install_complete":
-      case "install_error":
-      case "package_download_complete":
-        setDownload(100);
-      case "download_start":
-      case "downloading":
-      case "download_complete":
-      case "download_error":
-      case "package_download_start":
-      case "requirements_succeeded":
-        setPrecondition(100);
-      case "manifest_accepted":
-      case "manifest_received":
-        setReceived(100);
-    }
-    // update progress and errors
-    switch (status.msg) {
-      case "installing":
-        setInstall(status.progress);
-        break;
-      case "install_error":
-        setInstall(-100);
-        break;
-      case "downloading":
-        setDownload(status.progress);
-        break;
-      case "download_error":
-        setDownload(-100);
-        break;
-      case "cleanup_failed":
-        setCleanup(-100);
+
+    for (let i = 0, len = PHASES.length; i < len; i++) {
+      const PHASE = PHASES[i];
+      if (PHASE.events.indexOf(status.msg) > -1) {
+        setPhase(i);
+        setProgress(PHASE.progress(status.msg, status.progress));
         break;
+      }
     }
   }, [status]);
 
@@ -90,38 +127,17 @@ const CarUpdateStatus = ({ status, classes }) => {
         flexWrap: "wrap",
       }}
     >
-      <div className={classes.textCenterAlign}>
-        <Progress value={100} classes={classes} />
-        <Typography>Pending</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={received} classes={classes} />
-        <Typography>Recieved</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={precondition} classes={classes} />
-        <Typography>Precondition</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={download} classes={classes} />
-        <Typography>Download</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={approval} classes={classes} />
-        <Typography>Approved</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={install} classes={classes} />
-        <Typography>Install</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={cleanup} classes={classes} />
-        <Typography>Clean up</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={updated} classes={classes} />
-        <Typography>Updated</Typography>
-      </div>
+      {PHASES.map((item, index) => {
+        return (
+          <div key={index} className={classes.textCenterAlign}>
+            <Progress
+              value={getProgress(index, phase, progress)}
+              classes={classes}
+            />
+            <Typography>{item.label}</Typography>
+          </div>
+        );
+      })}
     </div>
   );
 };