Reorganize app pages (#73)

* Update layout and menus

* Add breadcrumbs
Add menu icons
Add ECU drop down

* Implement submenu
Update download progress

* revamped dashboard section - failing app.test.js

* Clean up

Co-authored-by: Drew Taylor <dtaylor@fiskerinc.com>

src/components/Manifest/Create/index.jsx

@@ -20,7 +20,7 @@ import { logger } from "../../../services/monitoring";
 import ECUFilesList from "../ECUFilesList";
 
 const FileTemplate = {
-  name: "",
+  name: "AGS",
   part_number: "",
   update_version: "1.0.0",
 };
@@ -90,7 +90,7 @@ const UploadProgress = (props) => {
 const MainForm = () => {
   const { createManifest, cancelUpload, busy } = useManifestsContext();
   const { token } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const [fileIndex, setFileIndex] = useState(0);
   const [ecuFiles, setECUFiles] = useState([]);
@@ -113,7 +113,16 @@ const MainForm = () => {
   };
 
   useEffect(() => {
-    setTitle("Create Package");
+    setTitle("Create Deployments");
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: "Create Deployments",
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -236,7 +245,7 @@ const MainForm = () => {
             className={classes.submit}
             onClick={onSubmit}
           >
-            "Submit"
+            Submit
           </Button>
         )}
       </form>

src/components/Manifest/Deploy/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
 import { Button, Grid, Typography } from "@material-ui/core";
+
 import {
   ManifestsProvider,
   useManifestsContext,
@@ -27,7 +28,7 @@ const MainForm = () => {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -93,7 +94,17 @@ const MainForm = () => {
   }, [token]);
 
   useEffect(() => {
-    setTitle(`Deploy ${manifestName} ${version}`);
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [manifestName, version]);
 

src/components/Manifest/ECUFilesList/index.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import SubList from "../../Controls/SubList";
+import ECUDropDrop from "../../Controls/ECUDropDown";
 
 const ECUFilesList = ({ data, onChange }) => {
   const options = [
@@ -11,6 +12,7 @@ const ECUFilesList = ({ data, onChange }) => {
     {
       label: "ECU",
       field: "name",
+      control: ECUDropDrop,
     },
     {
       label: "Part Number",

src/components/Manifest/List/index.jsx

@@ -10,6 +10,7 @@ import {
   Toolbar,
   Tooltip,
 } from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -64,7 +65,7 @@ const MainForm = () => {
   const [search, setSearch] = useState("");
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -86,7 +87,8 @@ const MainForm = () => {
   };
 
   useEffect(() => {
-    setTitle("Deploy Packages");
+    setTitle("Deployments");
+    setSitePath([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -184,6 +186,9 @@ const MainForm = () => {
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Toolbar className={classes.tableToolbar}>
+        <Link to="/package-create" className={classes.labelInline}>
+          <AddCircleIcon fontSize="large" />
+        </Link>
         <SearchField classes={classes} onSearch={handleSearch} />
       </Toolbar>
       <Table>

src/components/Manifest/ReleaseNotesList/index.jsx

@@ -1,28 +0,0 @@
-import React from "react";
-import SubList from "../../Controls/SubList";
-
-const ReleaseNotesList = ({ data, onChange }) => {
-  const options = [
-    {
-      label: "ID",
-      field: "data_id",
-      readonly: true,
-    },
-    {
-      label: "Locale",
-      field: "locale",
-    },
-    {
-      label: "URL",
-      field: "url",
-    },
-    {
-      label: "",
-      delete: true,
-    },
-  ];
-
-  return <SubList data={data} options={options} onChange={onChange} />;
-};
-
-export default ReleaseNotesList;

src/components/Manifest/Status/index.jsx

@@ -39,7 +39,7 @@ const MainForm = () => {
     startMonitor,
     stopMonitor,
   } = useCarUpdatesContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -60,7 +60,18 @@ const MainForm = () => {
 
   useEffect(() => {
     if (!manifests || manifests.length === 0) return;
-    setTitle(`Manifest ${manifests[0].name} ${manifests[0].version}`);
+    const title = `Manifest ${manifests[0].name} ${manifests[0].version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [manifests]);