CEC-252, CEC-253 Remove modal status popup, new car selection control (#45)

* Create multiselect car table control
Remove table overflow containers

* Include trim to add car form

* CEC-252 Replace modal status with link to car details page

* Remove send command from car status page
Fix menu key warning

src/components/CarUpdates/Deploy/index.jsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import { Button, Typography } from "@material-ui/core";
+import { Button, Grid, Typography } from "@material-ui/core";
 import {
   UpdatesProvider,
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import CarSelection from "../../Cars/CarSelection";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Cars/CarSelectionTable";
 
 const MainForm = () => {
   const { packageid } = useParams();
@@ -24,20 +26,41 @@ const MainForm = () => {
   const [version, setVersion] = useState("");
   const [description, setDescription] = useState("");
   const [createDate, setCreateDate] = useState("");
-  const [selectedVehicles, setSelectedVehicles] = 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) => {
+    let newSelected;
+    if (event.target.checked) {
+      newSelected = [...selected];
+      newSelected.push(key);
+    } else {
+      newSelected = selected.filter((vin) => vin !== key);
+    }
+    setSelected(newSelected);
+  };
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
       const data = {
         package_id: parseInt(packageid),
-        vins: selectedVehicles,
+        vins: selected,
       };
       await createCarUpdates(data, token);
       setMessage(
-        `Deployed ${packageName} ${version} to ${selectedVehicles.length} cars`
+        `Deployed ${packageName} ${version} to ${selected.length} cars`
       );
       setRedirect(`/carupdate-status/${packageid}`);
     } catch (e) {
@@ -80,30 +103,48 @@ const MainForm = () => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">
-          Created {createDate}. {description}
+          Created {createDate}. {description || "No description"}
         </Typography>
-        <hr style={{ marginBottom: 30, marginTop: 30 }} />
-        <CarSelection onSelection={setSelectedVehicles} />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {busy ? "Deploying..." : "Deploy"}
-        </Button>
+        <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 UpdatePackageDeployForm = () => (
-  <UpdatesProvider>
-    <MainForm />
-  </UpdatesProvider>
+  <VehicleProvider>
+    <UpdatesProvider>
+      <MainForm />
+    </UpdatesProvider>
+  </VehicleProvider>
 );
 
 export default UpdatePackageDeployForm;