Change main UI layout and add VINs to add and upload forms (#16)

* Add new upload update package form
Add new add vehicle form
Add new side menu layout
Add new toolbar layout
Update and add unit tests

* Enable add get and add vehicles

* Integration issues with ota_update service

* Update get vehicle JSON format

* Fix related unit test
Add release notes field

* Add StatusContext to display error and status messages

src/components/Layouts/MenuDrawer.jsx

@@ -0,0 +1,105 @@
+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 { Button, Container } from "@material-ui/core";
+
+export default function MenuDrawer({ children }) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { signOut, token } = useUserContext();
+  const [open, setOpen] = React.useState(false);
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open && 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
+          </Typography>
+          {token !== null && (
+            <Button
+              color="inherit"
+              onClick={signOut}
+              className={classes.rightToolbar}
+            >
+              Sign Out
+            </Button>
+          )}
+        </Toolbar>
+      </AppBar>
+      {token !== null && (
+        <Drawer
+          className={classes.drawer}
+          variant="persistent"
+          anchor="left"
+          open={open}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === "ltr" ? (
+                <ChevronLeftIcon />
+              ) : (
+                <ChevronRightIcon />
+              )}
+            </IconButton>
+          </div>
+          <Divider />
+          <SideMenu />
+        </Drawer>
+      )}
+      <main
+        className={clsx(classes.content, {
+          [classes.contentShift]: open && token !== null,
+        })}
+      >
+        <div className={classes.drawerHeader} />
+        <Container component="main" maxWidth="md">
+          {children}
+        </Container>
+      </main>
+    </div>
+  );
+}

src/components/Layouts/SideMenu.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { List } from "@material-ui/core";
+import ListItemLink from "../ListItemLink";
+
+export default function SideMenu() {
+  const menuData = [
+    { label: "Upload Update Package", to: "/home" },
+    { label: "Add Vehicles", to: "/vehicle-add" },
+  ];
+
+  return (
+    <List>
+      {menuData.map((item, index) => (
+        <ListItemLink key={index} primary={item.label} to={item.to} />
+      ))}
+    </List>
+  );
+}