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/Layouts/SideMenu.jsx

@@ -4,46 +4,89 @@ import ListItemLink from "../ListItemLink";
 import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
+import HomeIcon from "@material-ui/icons/Home";
+import CommuteIcon from "@material-ui/icons/Commute";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+import AssessmentIcon from "@material-ui/icons/Assessment";
 
 const menuData = [
   {
     label: "Home",
     to: "/home",
+    icon: <HomeIcon />,
     roles: [],
   },
   {
-    label: "Dashboard",
-    to: "/dashboard",
-    roles: [Roles.CREATE, Roles.READ],
-  },
-  {
-    label: "Deploy Packages",
+    label: "Deployments",
     to: "/packages",
+    icon: <CloudDownloadIcon />,
     roles: [Roles.CREATE, Roles.READ],
   },
   {
-    label: "Create Package",
-    to: "/package-create",
-    roles: [Roles.CREATE],
-  },
-  {
-    label: "View Vehicles",
+    label: "Vehicles",
     to: "/vehicles",
+    icon: <CommuteIcon />,
+    roles: [Roles.CREATE],
+  },
+  {
+    label: "Datascope",
+    to: "/datascope",
+    icon: <AssessmentIcon />,
     roles: [Roles.CREATE, Roles.READ],
-  },
-  {
-    label: "Add Vehicle",
-    to: "/vehicle-add",
-    roles: [Roles.CREATE],
-  },
-  {
-    label: "Send Command",
-    to: "/vehicles-command",
-    roles: [Roles.CREATE],
+    submenus: [
+      {
+        label: "Battery",
+        to: "/datascope/battery",
+      },
+      {
+        label: "Diagnostics",
+        url: "https://grafana.fiskerdps.com",
+      },
+    ],
   },
 ];
 
-export default function SideMenu() {
+const MenuItem = ({ item, children }) => {
+  return (
+    <li>
+      {item.to && (
+        <ListItemLink primary={item.label} to={item.to} icon={item.icon} />
+      )}
+      {item.url && (
+        <ListItemExternalLink
+          primary={item.label}
+          url={item.url}
+          icon={item.icon}
+        />
+      )}
+      {children}
+    </li>
+  );
+};
+
+const ExpandableSideMenuItem = ({ item }) => {
+  /*
+  const [expanded, setExpanded] = useState(true);
+  const clickHandler = (e) => {
+    setExpanded(!expanded);
+  };
+  */
+
+  return (
+    <>
+      <span>
+        <MenuItem item={item}></MenuItem>
+      </span>
+      <ul style={{ marginLeft: 50 }}>
+        {item.submenus.map((subitem, index) => (
+          <MenuItem key={`submenu-${index}`} item={subitem} />
+        ))}
+      </ul>
+    </>
+  );
+};
+
+const SideMenu = () => {
   const { groups } = useUserContext();
   const menu = menuData.reduce((result, item) => {
     if (hasRole(item.roles, groups)) {
@@ -55,14 +98,14 @@ export default function SideMenu() {
 
   return (
     <List>
-      {menu.map((item, index) => (
-        <li key={index}>
-          {item.to && <ListItemLink primary={item.label} to={item.to} />}
-          {item.url && (
-            <ListItemExternalLink primary={item.label} url={item.url} />
-          )}
-        </li>
-      ))}
+      {menu.map((item, index) => {
+        const key = `menu-${index}`;
+        if (item.submenus)
+          return <ExpandableSideMenuItem key={key} item={item} />;
+        return <MenuItem key={key} item={item} />;
+      })}
     </List>
   );
-}
+};
+
+export default SideMenu;