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/SSOForm/__snapshots__/SSOForm.test.js.snap

@@ -2,39 +2,25 @@
 
 exports[`Sign In Form Should render 1`] = `
 <div>
-  <main
-    class="MuiContainer-root MuiContainer-maxWidthXs"
+  <div
+    class="makeStyles-paper-1"
+    style="justify-content: center;"
   >
-    <div
-      class="makeStyles-paper-1"
+    <a
+      aria-disabled="false"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary"
+      href="https://cognito.com/authorize?redirect=https://example.com/callback"
+      tabindex="0"
     >
-      <h1
-        class="MuiTypography-root MuiTypography-h5"
+      <span
+        class="MuiButton-label"
       >
-        Fisker OTA Portal
-      </h1>
-      <form
-        action="{onSubmit}"
-        class="makeStyles-form-3"
-        novalidate=""
-      >
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
-          href="https://cognito.com/authorize?redirect=https://example.com/callback"
-          tabindex="0"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Sign In
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </form>
-    </div>
-  </main>
+        Sign In
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </a>
+  </div>
 </div>
 `;

src/components/SSOForm/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Button, Container, CssBaseline, Typography } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 import { useUserContext } from "../Contexts/UserContext";
 import useStyles from "../useStyles";
 
@@ -11,7 +11,7 @@ const getCode = (search) => {
 
 export default function SignInForm() {
   const classes = useStyles();
-  const { getAuthorizeURL, signIn } = useUserContext();
+  const { getAuthorizeURL, signIn, fetching } = useUserContext();
 
   useEffect(() => {
     const code = getCode(document.location.search);
@@ -21,25 +21,17 @@ export default function SignInForm() {
   }, []);
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Typography component="h1" variant="h5">
-          Fisker OTA Portal
-        </Typography>
-        <form className={classes.form} noValidate action="{onSubmit}">
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            href={getAuthorizeURL()}
-          >
-            Sign In
-          </Button>
-        </form>
-      </div>
-    </Container>
+    <div className={classes.paper} style={{ justifyContent: "center" }}>
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        href={getAuthorizeURL()}
+        disabled={fetching}
+      >
+        {fetching ? "Please wait..." : "Sign In"}
+      </Button>
+    </div>
   );
 }