CEC-3672 Update manifest version on deploy (#277)

* CEC-3672 Add versions to CarUpdatesContext
Stub out getSoftwareVersions and updateManifestVersion

* CEC-3672 update version on deploy

* Validate version before updating

src/components/Manifest/Deploy/index.jsx

@@ -1,18 +1,19 @@
 import { Button, FormControlLabel, Grid, Switch, Typography } from "@material-ui/core";
-import clsx from "clsx";
+import SendIcon from "@material-ui/icons/Send";
 import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
 
 import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { Permissions } from "../../../utils/roles";
-import { CarUpdatesProvider, useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
+import { CarUpdatesProvider, SELECT_VERSION, useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { ManifestsProvider, useManifestsContext } from "../../Contexts/ManifestsContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import { DropDownList } from "../../Controls/DropDownList";
 import FleetSelectionTable from "../../Controls/FleetSelectionTable";
 import { RoleWrap } from "../../Controls/RoleWrap";
 import SearchField from "../../Controls/SearchField";
@@ -25,7 +26,7 @@ const MainForm = () => {
   const [updateType, setUpdateType] = useState(CAR_UPDATE);
   const {manifest_id} = useParams();
   const {getManifests, manifests, busy} = useManifestsContext();
-  const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
+  const {deployCarUpdates, deployFleetUpdates, getSoftwareVersions, versions, updateManifestVersion} = useCarUpdatesContext();
   const {
     groups,
     providers,
@@ -39,6 +40,7 @@ const MainForm = () => {
   const [createDate, setCreateDate] = useState("");
   const [selected, setSelected] = useState([]);
   const [search, setSearch] = useState("");
+  const [softwareVersion, setSoftwareVersion] = useState(SELECT_VERSION);
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
@@ -77,6 +79,8 @@ const MainForm = () => {
       const data = {
         manifest_id: parseInt(manifest_id),
       }
+      await updateManifestVersion(manifest_id, softwareVersion, token);
+
       if (updateType === CAR_UPDATE) {
         data.vins = selected;
         await deployCarUpdates(data, token);
@@ -96,13 +100,18 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      getManifests({id: parseInt(manifest_id)}, token);
+      await getManifests({id: parseInt(manifest_id)}, token);
+      await getSoftwareVersions(token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
     }
   };
 
+  const changeVersion = (e) => {
+    setSoftwareVersion(e.target.value);
+  }
+
   useEffect(() => {
     getData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -162,16 +171,22 @@ const MainForm = () => {
           <Grid item md={4} className={classes.textCenterAlign}>
             <SearchField classes={classes} onSearch={handleSearch}/>
           </Grid>
-          <Grid item md={4} className={classes.textRightAlign}>
+          <Grid item md={4} container justifyContent="flex-end">
+            <DropDownList
+              label="Software Version"
+              labelField="version"
+              valueField="version"
+              value={softwareVersion}
+              data={versions}
+              classes={classes}
+              onChange={changeVersion} />
             <Button
               type="submit"
-              disabled={busy || selected.length === 0}
-              variant="contained"
+              disabled={busy || selected.length === 0 || softwareVersion === SELECT_VERSION}
               color="primary"
-              className={clsx(classes.formControl, classes.textField)}
               onClick={onSubmit}
             >
-              {busy ? "Deploying..." : "Deploy"}
+                <SendIcon />
             </Button>
           </Grid>
         </Grid>