CEC-244 Remote car commands, search, sortable tables (#42)

* Add sortable table header

* Send bulk commands page
Update table page sizes
All tables are sortable

* Update site layout
Add search to update packages

* Reenable Datadog

* remove dev stuff

src/components/Layouts/MenuDrawer.jsx

@@ -1,34 +1,22 @@
 import React from "react";
 import clsx from "clsx";
-import { useTheme } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
-import MenuIcon from "@material-ui/icons/Menu";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 
 import SideMenu from "./SideMenu";
 import useStyles from "../useStyles";
 import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
 import { Button, Container } from "@material-ui/core";
+import logo from "../../assets/fisker-badge.svg";
 
 export default function MenuDrawer({ children }) {
   const classes = useStyles();
-  const theme = useTheme();
+  const { title } = useStatusContext();
   const { signOut, token } = useUserContext();
-  const [open, setOpen] = React.useState(true);
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
 
   const onSignOut = () => {
     document.location = signOut();
@@ -39,26 +27,12 @@ export default function MenuDrawer({ children }) {
       <AppBar
         position="fixed"
         className={clsx(classes.appBar, {
-          [classes.appBarShift]: open && token !== null,
+          [classes.appBarShift]: token !== null,
         })}
       >
         <Toolbar>
-          {token !== null && (
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawerOpen}
-              edge="start"
-              className={clsx(
-                classes.menuButton,
-                open && classes.hide && token !== null
-              )}
-            >
-              <MenuIcon />
-            </IconButton>
-          )}
           <Typography variant="h6" noWrap>
-            Fisker OTA Portal
+            {title}
           </Typography>
           {token !== null && (
             <Button
@@ -76,19 +50,17 @@ export default function MenuDrawer({ children }) {
           className={classes.drawer}
           variant="persistent"
           anchor="left"
-          open={open}
+          open={true}
           classes={{
             paper: classes.drawerPaper,
           }}
         >
           <div className={classes.drawerHeader}>
-            <IconButton onClick={handleDrawerClose}>
-              {theme.direction === "ltr" ? (
-                <ChevronLeftIcon />
-              ) : (
-                <ChevronRightIcon />
-              )}
-            </IconButton>
+            <img
+              src={logo}
+              alt="Fisker Admin Portal"
+              className={classes.logo}
+            />
           </div>
           <Divider />
           <SideMenu />
@@ -96,7 +68,7 @@ export default function MenuDrawer({ children }) {
       )}
       <main
         className={clsx(classes.content, {
-          [classes.contentShift]: open && token !== null,
+          [classes.contentShift]: token !== null,
         })}
       >
         <div className={classes.drawerHeader} />

src/components/Layouts/SideMenu.jsx

@@ -11,7 +11,7 @@ const menuData = [
     roles: [],
   },
   {
-    label: "View Packages",
+    label: "Deploy Packages",
     to: "/updates",
     roles: [Roles.CREATE, Roles.READ],
   },
@@ -30,6 +30,11 @@ const menuData = [
     to: "/vehicle-add",
     roles: [Roles.CREATE],
   },
+  {
+    label: "Send Command",
+    to: "/vehicles-command",
+    roles: [Roles.CREATE],
+  },
 ];
 
 export default function SideMenu() {

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -44,7 +44,7 @@ exports[`SideMenu Authenticated 1`] = `
             <span
               class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              View Packages
+              Deploy Packages
             </span>
           </div>
           <span
@@ -118,6 +118,28 @@ exports[`SideMenu Authenticated 1`] = `
           />
         </a>
       </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/vehicles-command"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Send Command
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
     </ul>
   </div>
 </div>