CEC-244 Remote car commands, search, sortable tables (#42)

* Add sortable table header

* Send bulk commands page
Update table page sizes
All tables are sortable

* Update site layout
Add search to update packages

* Reenable Datadog

* remove dev stuff

src/components/CarUpdates/Deploy/index.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import { Button, TextField, Typography } from "@material-ui/core";
-
+import { Button, Typography } from "@material-ui/core";
 import {
   UpdatesProvider,
   useUpdatesContext,
@@ -20,12 +19,10 @@ const MainForm = () => {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
-  const { setMessage } = useStatusContext();
+  const { setMessage, setTitle } = useStatusContext();
   const [packageName, setPackageName] = useState("");
   const [version, setVersion] = useState("");
-  const [link, setLink] = useState("");
   const [description, setDescription] = useState("");
-  const [releaseNotesLink, setReleaseNotesLink] = useState("");
   const [createDate, setCreateDate] = useState("");
   const [selectedVehicles, setSelectedVehicles] = useState([]);
   const [redirect, setRedirect] = useState("");
@@ -60,15 +57,18 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
+  useEffect(() => {
+    setTitle(`Deploy ${packageName} ${version}`);
+    // eslint-disable-next-line
+  }, [packageName, version]);
+
   useEffect(() => {
     if (!packages || packages.length === 0) return;
     var data = packages[0];
 
     setPackageName(data.package_name);
     setVersion(data.version);
-    setLink(data.link);
     setDescription(data.desc || "");
-    setReleaseNotesLink(data.release_notes || "");
     setCreateDate(tsLocalDateTimeString(data.timestamp));
   }, [packages]);
 
@@ -78,64 +78,11 @@ const MainForm = () => {
 
   return (
     <div className={classes.paper}>
-      <Typography component="h1" variant="h5">
-        Deploy {`${packageName} ${version} [${packageid}]`}
-      </Typography>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          label="Create Date"
-          variant="filled"
-          margin="normal"
-          inputProps={{
-            readOnly: true,
-          }}
-          value={createDate}
-          size="small"
-          fullWidth
-        />
-        <TextField
-          id="link"
-          name="link"
-          label="Package link"
-          variant="filled"
-          margin="normal"
-          inputProps={{
-            readOnly: true,
-          }}
-          value={link}
-          size="small"
-          fullWidth
-        />
-        <TextField
-          id="description"
-          name="description"
-          label="Description"
-          variant="filled"
-          margin="normal"
-          inputProps={{
-            readOnly: true,
-          }}
-          value={description}
-          size="small"
-          fullWidth
-          multiline
-          rows={4}
-          placeholder="Package description"
-        />
-        <TextField
-          id="releasenotes"
-          name="releasenotes"
-          label="Release Notes URL"
-          variant="filled"
-          margin="normal"
-          inputProps={{
-            readOnly: true,
-          }}
-          value={releaseNotesLink}
-          size="small"
-          fullWidth
-          placeholder="Release Notes URL"
-        />
+        <Typography variant="body2">
+          Created {createDate}. {description}
+        </Typography>
+        <hr style={{ marginBottom: 30, marginTop: 30 }} />
         <CarSelection onSelection={setSelectedVehicles} />
         <Button
           type="submit"