CEC-179 Car download progress (#32)

* Display download progress

* Change default

* Fix

* Fix

* Update readme

* Update readme and defaults
Fix Dockerfile

src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap

@@ -11,7 +11,7 @@ exports[`File Upload Form Should render 1`] = `
       <h1
         class="MuiTypography-root MuiTypography-h5"
       >
-        Upload Update Package
+        Create Update Package
       </h1>
       <form
         action="{onSubmit}"
@@ -114,12 +114,19 @@ exports[`File Upload Form Should render 1`] = `
           class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
             data-shrink="false"
             for="description"
             id="description-label"
           >
             Description
+            <span
+              aria-hidden="true"
+              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+            >
+               
+              *
+            </span>
           </label>
           <div
             class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
@@ -131,6 +138,7 @@ exports[`File Upload Form Should render 1`] = `
               maxlength="5120"
               name="description"
               placeholder="Package description"
+              required=""
               rows="4"
             />
             <fieldset
@@ -142,6 +150,7 @@ exports[`File Upload Form Should render 1`] = `
               >
                 <span>
                   Description
+                   *
                 </span>
               </legend>
             </fieldset>
@@ -151,12 +160,19 @@ exports[`File Upload Form Should render 1`] = `
           class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
             data-shrink="false"
             for="releasenotes"
             id="releasenotes-label"
           >
             Release Notes URL
+            <span
+              aria-hidden="true"
+              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+            >
+               
+              *
+            </span>
           </label>
           <div
             class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -168,6 +184,7 @@ exports[`File Upload Form Should render 1`] = `
               maxlength="1024"
               name="releasenotes"
               placeholder="Release Notes URL"
+              required=""
               type="text"
               value=""
             />
@@ -180,6 +197,7 @@ exports[`File Upload Form Should render 1`] = `
               >
                 <span>
                   Release Notes URL
+                   *
                 </span>
               </legend>
             </fieldset>

src/components/UpdatePackages/Create/index.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { Button, TextField, Typography } from "@material-ui/core";
 import { DropzoneArea } from "material-ui-dropzone";
 import { useUserContext } from "../../Contexts/UserContext";
@@ -9,6 +9,7 @@ import {
 } from "../../Contexts/FileUploadContext";
 import ModalProgressBar from "../../ModalProgressBar";
 import useStyles from "../../useStyles";
+import { Redirect } from "react-router";
 
 const FileUploadZone = ({ classes, token }) => {
   const { setFiles } = useFileUploadContext();
@@ -39,9 +40,10 @@ const FileUploadZone = ({ classes, token }) => {
 };
 
 const MainForm = () => {
-  const { uploading, upload, files } = useFileUploadContext();
+  const { uploading, upload, files, cancel } = useFileUploadContext();
   const { token } = useUserContext();
   const { setMessage } = useStatusContext();
+  const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
   const packagenameEl = useRef(null);
   const versionEl = useRef(null);
@@ -59,17 +61,26 @@ const MainForm = () => {
         description: descEl.current.value,
         releasenotes: releasenotesEl.current.value,
       };
+      const result = await upload(formData, authToken, files);
 
-      await upload(formData, authToken, files);
+      if (!result || result.error) return;
+
+      cancel();
+      setMessage(`Package uploaded`);
+      setRedirect(`/carupdate-deploy/${result.id}`);
     } catch (e) {
       setMessage(e.message);
     }
   };
 
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
   return (
     <div className={classes.paper}>
       <Typography component="h1" variant="h5">
-        Upload Update Package
+        Create Update Package
       </Typography>
       <form className={classes.form} noValidate action="{onSubmit}">
         <TextField
@@ -107,6 +118,7 @@ const MainForm = () => {
           inputProps={{
             maxLength: "5120",
           }}
+          required
           fullWidth
           multiline
           rows={4}
@@ -122,6 +134,7 @@ const MainForm = () => {
           inputProps={{
             maxLength: "1024",
           }}
+          required
           fullWidth
           placeholder="Release Notes URL"
           inputRef={releasenotesEl}

src/components/UpdatePackages/Edit/index.jsx

@@ -87,7 +87,7 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <Typography component="h1" variant="h5">
-        Update Package {id}
+        Edit Update Package {id}
       </Typography>
       <form className={classes.form} noValidate action="{onSubmit}">
         <TextField

src/components/UpdatePackages/List/index.jsx

@@ -26,7 +26,7 @@ import { Roles, hasRole } from "../../../utils/roles";
 
 const UpdatePackagesList = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(5);
+  const [pageSize, setPageSize] = useState(25);
   const [pageIndex, setPageIndex] = useState(0);
   const { getPackages, packages, totalPackages } = useUpdatesContext();
   const {
@@ -98,7 +98,7 @@ const UpdatePackagesList = () => {
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Typography component="h1" variant="h5">
-        Updates
+        Update Packages
       </Typography>
       <TableContainer>
         <Table>