CEC-247, CEC-261 Manifest and ECU display (#65)

* CEC-261 Add ECU list control

* CEC-261 Update vehicle service mock

* CEC-247 Manifest screens

* Fix test

* Remove dynamic dates from mocks

* Remove timezone from mock dates

* Fix test for date string timezone difference

src/components/Manifest/Deploy/index.jsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext,
+} from "../../Contexts/CarUpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Cars/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle } = useStatusContext();
+  const [manifestName, setManifestName] = useState("");
+  const [version, setVersion] = useState("");
+  const [createDate, setCreateDate] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const [redirect, setRedirect] = useState("");
+  const classes = useStyles();
+
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const data = {
+        manifest_id: parseInt(manifest_id),
+        vins: selected,
+      };
+      await deployCarUpdates(data, token);
+      setMessage(
+        `Deployed ${manifestName} ${version} to ${selected.length} cars`
+      );
+      setRedirect(`/manifest-status/${manifest_id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      getManifests({ id: parseInt(manifest_id) }, token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    setTitle(`Deploy ${manifestName} ${version}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    var data = manifests[0];
+
+    setManifestName(data.name);
+    setVersion(data.version);
+    setCreateDate(LocalDateTimeString(data.created));
+  }, [manifests]);
+
+  if (redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <Typography variant="body2">Created {createDate}.</Typography>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={10}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={2} style={{ textAlign: "right" }}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.formControl}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const ManifestDeployForm = () => (
+  <VehicleProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </VehicleProvider>
+);
+
+export default ManifestDeployForm;