Merge branch 'develop' into release/0.0.3

package.json

@@ -4,19 +4,24 @@
   "private": true,
   "dependencies": {
     "@datadog/browser-logs": "^3.11.0",
+    "@date-io/date-fns": "1.x",
+    "@date-io/moment": "1.x",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.1",
     "clsx": "^1.1.1",
+    "date-fns": "^2.29.2",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
     "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
+    "moment": "^2.29.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-leaflet": "^3.2.5",
@@ -62,7 +67,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 47,
+        "functions": 45.5,
         "lines": 50,
         "statements": 49
       }

src/components/App/App.test.js

@@ -1,7 +1,6 @@
 jest.mock("../Contexts/CarUpdatesContext");
 jest.mock("../Contexts/FileUploadContext");
 jest.mock("../Contexts/VehicleContext");
-jest.mock("../Contexts/ManifestCreateContext");
 jest.mock("../Contexts/ManifestsContext");
 jest.mock("../Contexts/UserContext");
 jest.mock("../../services/monitoring");
@@ -73,10 +72,6 @@ describe("App", () => {
     await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /package-create unauthenticated", async () => {
-    await check("/package-create", "span.MuiButton-label", "Sign In");
-  });
-
   it("Route /vehicle-add unauthenticated", async () => {
     await check("/vehicle-add", "span.MuiButton-label", "Sign In");
   });
@@ -146,11 +141,6 @@ describe("App", () => {
     await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
   });
 
-  it("Route /package-create authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/package-create", "h6", "Create Deployments");
-  });
-
   it("Route /vehicle-add authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicle-add", "h6", "Add Vehicle");

src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap

@@ -149,6 +149,29 @@ exports[`CANFiltersTable Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Fleet
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
@@ -173,6 +196,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     1000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -226,6 +256,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     2000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -279,6 +316,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     0
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >

src/components/CANFilter/Table/index.jsx

@@ -39,6 +39,10 @@ const tableColumns = [
     id: "interval",
     label: "Interval (ms)"
   },
+  {
+    id: "fleet",
+    label: "Fleet"
+  },
   {
     id: "",
     label: "Actions"
@@ -178,6 +182,9 @@ const MainForm = ({ vin }) => {
             <TableRow key={row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
+              <TableCell align="center">
+                <Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
+              </TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}

src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap

@@ -28,6 +28,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                     VIN
                   </b>
                   : 
+                  TESTVIN1234567890
                 </p>
                 <p>
                   <b>
@@ -84,13 +85,13 @@ exports[`VehicleDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/vehicle-update?vin=undefined"
+                  href="/vehicle-update?vin=TESTVIN1234567890"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -103,11 +104,11 @@ exports[`VehicleDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -119,6 +120,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>

src/components/Cars/Status/Details/index.jsx

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
 import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -76,12 +78,13 @@ const MainForm = ({ vin }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${vin}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };

src/components/Cars/Status/Details/index.test.jsx

@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderVehicleDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm vin="TESTVIN1234567890"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("VehicleDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleDetailsTab();

src/components/Cars/Status/RemoteCommandsTab.jsx

@@ -0,0 +1,26 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import Typography from "@material-ui/core/Typography";
+import SendCommand from "../../Controls/SendCommand";
+import PropTypes from "prop-types";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+
+const RemoteCommandsTab = (props) => {
+  const { vin } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Vehicle Commands</Typography>
+      <VehicleProvider>
+        <SendCommand vins={[vin]}></SendCommand>
+      </VehicleProvider>
+    </div>
+  )
+}
+
+RemoteCommandsTab.propTypes = {
+  vin: PropTypes.string,
+}
+
+export default RemoteCommandsTab

src/components/Cars/Status/RemoteCommandsTab.test.jsx

@@ -0,0 +1,40 @@
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import {render, waitFor} from "@testing-library/react";
+import {StatusProvider} from "../../Contexts/StatusContext";
+import {setToken, UserProvider} from "../../Contexts/UserContext";
+import RemoteCommandsTab from "./RemoteCommandsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import React from "react";
+
+const renderRemoteCommandsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <RemoteCommandsTab vin="TESTVIN1234567890" />
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("RemoteCommandsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderRemoteCommandsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap

@@ -148,6 +148,29 @@ exports[`CANFiltersTab Render 1`] = `
                   </svg>
                 </span>
               </th>
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                scope="col"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiTableSortLabel-root"
+                  role="button"
+                  tabindex="0"
+                >
+                  Fleet
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                    />
+                  </svg>
+                </span>
+              </th>
               <th
                 class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                 scope="col"
@@ -172,6 +195,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 1000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -225,6 +255,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 2000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -278,6 +315,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 0
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >

src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap

@@ -149,6 +149,10 @@ exports[`CarUpdatesTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                />
               </tr>
             </thead>
             <tbody
@@ -162,7 +166,7 @@ exports[`CarUpdatesTab Render 1`] = `
               >
                 <td
                   class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                  colspan="5"
+                  colspan="6"
                 >
                   <div
                     class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap

@@ -128,6 +128,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>

src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RemoteCommandsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6"
+        >
+          Vehicle Commands
+        </h6>
+        <div
+          data-testid="mocked-vehicleprovider"
+        >
+          <div
+            class="makeStyles-paper-0"
+            style="margin-top: 20px;"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-formControl-0"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+                for="send-command"
+              >
+                Command
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
+                  id="send-command"
+                  name="send-command"
+                >
+                  <option
+                    value="doors_lock"
+                  >
+                    Lock doors
+                  </option>
+                  <option
+                    value="doors_unlock"
+                  >
+                    Unlock doors
+                  </option>
+                  <option
+                    value="vent_windows"
+                  >
+                    Vent windows
+                  </option>
+                  <option
+                    value="close_windows"
+                  >
+                    Close windows
+                  </option>
+                  <option
+                    value="flash_headlights"
+                  >
+                    Flash headlights
+                  </option>
+                  <option
+                    value="trunk_close"
+                  >
+                    Close trunk
+                  </option>
+                  <option
+                    value="alert"
+                  >
+                    Alert
+                  </option>
+                  <option
+                    value="precondition"
+                  >
+                    Precondition
+                  </option>
+                  <option
+                    value="california_mode"
+                  >
+                    California mode
+                  </option>
+                  <option
+                    value="trunk_open"
+                  >
+                    Open trunk
+                  </option>
+                  <option
+                    value="temp_cabin"
+                  >
+                    Set cabin temperature(°C)
+                  </option>
+                  <option
+                    value="defrost"
+                  >
+                    Defrost
+                  </option>
+                  <option
+                    value="driver_seat_preheat"
+                  >
+                    Driver seat preheat
+                  </option>
+                  <option
+                    value="passenger_seat_preheat"
+                  >
+                    Preheat passenger seat
+                  </option>
+                  <option
+                    value="steering_wheel_preheat"
+                  >
+                    Preheat Steering wheel
+                  </option>
+                  <option
+                    value="charging"
+                  >
+                    Charging
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <button
+              aria-label="send command"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Send
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -119,6 +119,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-5"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-5"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -133,7 +151,7 @@ exports[`CarStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -157,6 +175,7 @@ exports[`CarStatus Render 1`] = `
                           VIN
                         </b>
                         : 
+                        TESTVIN1234567890
                       </p>
                     </div>
                     <div
@@ -164,13 +183,13 @@ exports[`CarStatus Render 1`] = `
                     >
                       <a
                         class=""
-                        href="/vehicle-update?vin=undefined"
+                        href="/vehicle-update?vin=TESTVIN1234567890"
                         style="margin: 5px;"
-                        title="Update \\"undefined\\""
+                        title="Update \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Update \\"undefined\\""
+                          aria-label="Update \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -183,11 +202,11 @@ exports[`CarStatus Render 1`] = `
                       <a
                         class=""
                         href="/"
-                        title="Delete \\"undefined\\""
+                        title="Delete \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Delete \\"undefined\\""
+                          aria-label="Delete \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -199,6 +218,7 @@ exports[`CarStatus Render 1`] = `
                       </a>
                     </div>
                   </div>
+                  <div />
                 </div>
               </div>
             </div>
@@ -228,6 +248,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-4"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-5"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-5"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import CANSignalsTab from "./CANSignalsTab";
+import RemoteCommandsTab from "./RemoteCommandsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -64,6 +65,7 @@ const CarStatus = () => {
           <Tab label="CAN Filters" {...tabProps(2)} />
           <Tab label="Digital Twin" {...tabProps(3)} />
           <Tab label="CAN Signals" {...tabProps(4)} />
+          <Tab label="Remote Commands" {...tabProps(5)} />
         </Tabs>
       </Box>
 
@@ -86,6 +88,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
         <CANSignalsTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
+        <RemoteCommandsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };

src/components/Cars/Status/index.test.jsx

@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("CarStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();

src/components/Contexts/CarUpdatesContext.jsx

@@ -6,7 +6,7 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-const validateDeployCarUpdates = (data) => {
+const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
   }
@@ -15,11 +15,20 @@ const validateDeployCarUpdates = (data) => {
     throw new Error("Manifest id required");
   }
 
-  if (!data.vins || data.vins.length === 0) {
+  const { [propertyName]: value } = data;
-    throw new Error("Cars are required");
+  if (!value || value.length === 0) {
+    throw new Error(`${errPfx} are required`);
   }
 };
 
+const validateDeployCarUpdates = (data) => {
+  return validateDeployClosure(data, "vins", "Cars");
+};
+
+const validateDeployFleetUpdates = (data) => {
+  return validateDeployClosure(data, "fleet_names", "Fleets");
+};
+
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -43,6 +52,22 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deployFleetUpdates = async (data, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      validateDeployFleetUpdates(data);
+      result = await api.createFleetUpdates(data, token);
+      if (result.error)
+        throw new Error(`Deploy fleet updates error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const getCarUpdates = async (search, token) => {
     let result;
 
@@ -197,13 +222,30 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const cancelUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.cancelCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
+        cancelUpdate,
         deployCarUpdates,
+        deployFleetUpdates,
         getCarUpdates,
         getLog,
         getVINUpdates,

src/components/Contexts/ManifestCreateContext.jsx

@@ -1,247 +0,0 @@
-import React, { useContext, useState } from "react";
-
-import api from "../../services/manifestsAPI";
-import { uploadFile, getCancelToken } from "../../services/uploadFile";
-import { useStatusContext } from "./StatusContext";
-import {
-  validateManifest,
-  validateManifestECUs,
-} from "../../utils/manifestValidation";
-
-const ManifestCreateContext = React.createContext();
-
-const checkExistingManifest = async (data, token) => {
-  const check = {
-    name: data.name,
-    version: data.version,
-  };
-  const { data: result } = await api.getManifests(check, token);
-  if (result.length > 0)
-    throw new Error(`Update ${data.name} ${data.version} already exists`);
-};
-
-const ECUTemplate = {
-  name: "AGS",
-  version: "",
-  hw_version: "",
-  configuration_mask: "",
-  configuration: "",
-  files: [],
-  manifest_id: 0,
-};
-
-const FileTemplate = {
-  offset: "0",
-  checksum: "",
-  type: "none",
-};
-
-export const ManifestCreateProvider = ({ children }) => {
-  const { setMessage } = useStatusContext();
-  const [busy, setBusy] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadStatus, setUploadStatus] = useState(null);
-  const [cancelUploadToken, setCancelUploadToken] = useState(null);
-  const [uploadFileIndex, setUploadFileIndex] = useState(0);
-  const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [ecus, setECUs] = useState([]);
-  const [ecuIndex, setECUIndex] = useState(0);
-
-  const addECU = () => {
-    try {
-      const result = ecus.concat(
-        Object.assign({ data_id: ecuIndex }, ECUTemplate)
-      );
-      setECUIndex(ecuIndex + 1);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const deleteECU = (data_id) => {
-    try {
-      const result = ecus.filter((item) => item.data_id !== data_id);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const getECU = (ecu_data_id) =>
-    ecus.find((item) => item.data_id === ecu_data_id);
-
-  const getECUFile = (ecu, filename) =>
-    ecu.files.find((file) => file.filename === filename);
-
-  const validateECUFiles = (ecu, files) => {
-    files.forEach((file) => {
-      if (file.size === 0) throw new Error(`${file.name} is 0 size`);
-      const result = getECUFile(ecu, file.name);
-      if (result) throw new Error(`${file.name} already exists`);
-    });
-  };
-
-  const getAllECUFiles = () => {
-    let result = [];
-
-    for (let i = 0, len = ecus.length; i < len; i++) {
-      const ecu = ecus[i];
-      result = result.concat(ecu.files);
-    }
-
-    return result;
-  };
-
-  const addECUFile = (ecu_data_id, items) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-
-      const files = Array.from(items);
-      validateECUFiles(ecu, files);
-
-      const total = ecu.files.length;
-      const result = files.map((file, index) =>
-        Object.assign(
-          { order: total + index, file: file, filename: file.name },
-          FileTemplate
-        )
-      );
-      ecu.files = ecu.files.concat(result);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const sortECUFiles = (ecu) => {
-    ecu.files.sort((x, y) => {
-      if (x.order === y.order) return 0;
-      return x.order < y.order ? -1 : 1;
-    });
-  };
-
-  const deleteECUFile = (ecu_data_id, filename) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-      ecu.files = ecu.files.filter((file) => file.filename !== filename);
-      sortECUFiles(ecu);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const updateECUs = () => {
-    setECUs(ecus.concat([]));
-  };
-
-  const createManifest = async (data, token) => {
-    let result;
-    let currentFileIndex = 0;
-    const incremFileIndex = () => {
-      setUploadFileIndex(currentFileIndex);
-      currentFileIndex++;
-    };
-
-    try {
-      setBusy(true);
-      validateManifest(data, token);
-      validateManifestECUs(ecus);
-      await checkExistingManifest(data, token);
-
-      setUploadedFiles(getAllECUFiles());
-      if (result !== null) result = await api.createManifest(data, token);
-      if (result.error)
-        throw new Error(`Create manifest error. ${result.message}`);
-
-      for (let i = 0, len = ecus.length; i < len; i++) {
-        const ecu = ecus[i];
-        ecu.manifest_id = result.id;
-        await createManifestECU(ecu, token, incremFileIndex);
-      }
-    } finally {
-      setBusy(false);
-      setUploadFileIndex(0);
-      setUploadedFiles([]);
-    }
-
-    return result;
-  };
-
-  const createManifestECU = async (ecu, token, incremFileIndexFn) => {
-    const { files, ...data } = ecu;
-
-    const result = await api.createManifestECU(data, token);
-    if (result.error)
-      throw new Error(`Create manifest error. ${result.message}`);
-
-    for (let i = 0, len = ecu.files.length; i < len; i++) {
-      const file = ecu.files[i];
-      file.manifest_ecu_id = result.id;
-      incremFileIndexFn();
-      const resp = await uploadECUFile(file, token);
-      if (resp.error)
-        throw new Error(`Upload manifest file error. ${resp.error}`);
-    }
-  };
-
-  const cancelUpload = () => {
-    if (cancelUploadToken) cancelUploadToken.cancel();
-    setBusy(false);
-    setUploadStatus("Upload cancelled");
-    setCancelUploadToken(null);
-    setUploadProgress(0);
-  };
-
-  const uploadECUFile = async (file, accessToken) => {
-    const cancel = getCancelToken();
-
-    setUploadProgress(0);
-    setUploadStatus(`Uploading ${file.filename}`);
-    setCancelUploadToken(cancel);
-
-    const result = await uploadFile(
-      file,
-      accessToken,
-      setUploadProgress,
-      cancel.token
-    );
-    if (result.message) {
-      throw new Error(`${result.error}. ${result.message}`);
-    }
-
-    setUploadStatus(`Uploaded ${file.filename}`);
-    setCancelUploadToken(null);
-    setUploadProgress(100);
-
-    return result;
-  };
-
-  return (
-    <ManifestCreateContext.Provider
-      value={{
-        busy,
-        ecus,
-        uploadedFiles,
-        uploadFileIndex,
-        uploadProgress,
-        uploadStatus,
-        addECU,
-        addECUFile,
-        cancelUpload,
-        createManifest,
-        createManifestECU,
-        deleteECU,
-        deleteECUFile,
-        updateECUs,
-      }}
-    >
-      {children}
-    </ManifestCreateContext.Provider>
-  );
-};
-
-export const useManifestCreateContext = () => useContext(ManifestCreateContext);

src/components/Contexts/VehicleContext.jsx

@@ -164,10 +164,10 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const sendCommand = async (vins, command, parameters, token) => {
+  const sendCommand = async (vins, command, token) => {
     try {
       setBusy(true);
-      const result = await api.sendCommand(vins, command, parameters, token);
+      const result = await api.sendCommand(vins, command, token);
       if (result.error)
         throw new Error(`Send command error. ${result.message}`);
       return result;

src/components/Contexts/VehicleContext.test.jsx

@@ -317,6 +317,55 @@ describe("VehicleContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("sendCommand", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const {busy, sendCommand} = useVehicleContext();
+        const { message, setMessage } = useStatusContext();
+
+        const sendC = async (vin, command) => {
+          try {
+            await sendCommand(vin, command);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
+            <button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
+            <button
+              data-testid="sendCommandVin"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
+            />
+            <button
+              data-testid="sendCommandWrongCommand"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
+            />
+            </>
+        );}
+        render(
+          <StatusProvider>
+            <VehicleProvider>
+              <TestComp />
+            </VehicleProvider>
+          </StatusProvider>
+        );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+  })
 });
 
 const expectedFilters = [

src/components/Contexts/__mocks__/ManifestCreateContext.jsx

@@ -1,50 +0,0 @@
-import React from "react";
-
-const ManifestsContext = React.createContext();
-
-let busy = false;
-let ecus = [
-  {
-    data_id: 0,
-    name: "AGS",
-    version: "",
-    hw_version: "",
-    manifest_id: 0,
-    files: [
-      {
-        filename: "test.bin",
-        order: 0,
-        offset: "0",
-        checksum: "",
-        self_download: false,
-        mode: "D",
-        type: 1,
-      },
-    ],
-  },
-];
-let uploadedFiles = [];
-let uploadFileIndex = 0;
-let uploadProgress = 0;
-let uploadStatus = null;
-
-export const ManifestCreateProvider = ({ children }) => {
-  return <div data-testid="mocked-manifestcreateprovider">{children}</div>;
-};
-
-export const useManifestCreateContext = () => ({
-  busy,
-  ecus,
-  uploadedFiles,
-  uploadFileIndex,
-  uploadProgress,
-  uploadStatus,
-  addECU: jest.fn(),
-  addECUFile: jest.fn(),
-  cancelUpload: jest.fn(),
-  createManifest: jest.fn(),
-  createManifestECU: jest.fn(),
-  deleteECU: jest.fn(),
-  deleteECUFile: jest.fn(),
-  updateECUs: jest.fn(),
-});

src/components/Controls/CarSelectionTable/index.jsx

@@ -60,6 +60,7 @@ const CarSelectionTable = (props) => {
     onSelect,
     onSelectAll,
   } = props;
+
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
@@ -67,7 +68,8 @@ const CarSelectionTable = (props) => {
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage } = useStatusContext();
   const { search: searchTerm } = search;
-  const sortHandler = (_event, property) => {
+
+  const handleSort = (_event, property) => {
     if (property === orderBy) {
       if (order === "asc") {
         setOrder("desc");
@@ -137,7 +139,7 @@ const CarSelectionTable = (props) => {
           orderBy={orderBy}
           order={order}
           columnData={tableColumns}
-          onSortRequest={sortHandler}
+          onSortRequest={handleSort}
           multiSelect={multiSelect}
           onSelectAll={handleSelectAll}
           selectCount={selected ? selected.length : 0}

src/components/Controls/CarUpdatesTable/index.jsx

@@ -6,8 +6,10 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import CancelIcon from "@material-ui/icons/Cancel";
 
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -18,7 +20,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -41,6 +43,10 @@ const tableColumns = [
     id: "updated_at",
     label: "Updated",
   },
+  {
+    id: "",
+    label: "",
+  },
 ];
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
+  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
+    useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
     return "None";
   };
 
+  const sendCancel = async (row) => {
+    try {
+      await cancelUpdate(row.id, token);
+      setMessage(`Sent cancel for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <Table>
       <TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
             <TableCell align="center">
               {LocalDateTimeString(row.updated)}
             </TableCell>
+            <TableCell>
+              <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                <Link to="#" onClick={() => sendCancel(row)}>
+                  <CancelIcon />
+                </Link>
+              </Tooltip>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
         <TableRow>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 100]}
-            colSpan={5}
+            colSpan={6}
             count={totalCarUpdates}
             rowsPerPage={pageSize}
             page={pageIndex}

src/components/Controls/FleetSelectionTable/index.jsx

@@ -0,0 +1,199 @@
+import React, {useEffect, useState} from "react";
+import {Link} from 'react-router-dom';
+import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
+import clsx from "clsx";
+
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {useFleetContext} from "../../Contexts/FleetContext"
+import {logger} from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
+import PropTypes from "prop-types";
+
+const tableColumns = [
+  {
+    id: "name",
+    label: "Name"
+  },
+  {
+    id: "log_level",
+    label: "Log Level"
+  },
+  {
+    id: "canbus_enabled",
+    label: "CAN Bus Enabled"
+  },
+  {
+    id: "data_logger_enabled",
+    label: "Data Logger Enabled"
+  },
+  {
+    id: "num_vehicles",
+    label: "Vehicles"
+  },
+  {
+    id: "num_filters",
+    label: "Filters"
+  }
+];
+
+const PAGE_SIZE = "FLEET_SELECTION_TABLE_PAGE_SIZE";
+
+const FleetSelectionTable = (props) => {
+  const {
+    token,
+    classes,
+    search,
+    multiSelect,
+    selected,
+    onSelect,
+    onSelectAll,
+  } = props;
+
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const { fleets, getFleets, totalFleets } = useFleetContext();
+  const { setMessage } = useStatusContext();
+  const { search: searchTerm } = search;
+
+  const handleSort = (_event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (_event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSelectAll = (event) => {
+    if (!onSelectAll) return;
+
+    const newSelected = [];
+    if (event.target.checked) {
+      fleets.forEach((car) => {
+        newSelected.push(car.name);
+      });
+    }
+
+    onSelectAll(newSelected);
+  };
+
+  const handleSelect = (event, key) => {
+    if (!onSelect) return;
+
+    onSelect(event, key);
+  };
+
+
+  useEffect(() => {
+    const options = { search: searchTerm,
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+    };
+    (async () => {
+      try {
+        if (!token) return;
+        await getFleets(options, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order, searchTerm]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+          multiSelect={multiSelect}
+          onSelectAll={handleSelectAll}
+          selectCount={selected ? selected.length : 0}
+          rowCount={fleets ? fleets.length : 0}
+        />
+        <TableBody>
+          {fleets.map((row) => {
+              const isSelected = selected
+                ? selected.indexOf(row.name) !== -1
+                : false;
+              return (
+                <TableRow key={row.name}>
+                  {multiSelect && (
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={(event) => handleSelect(event, row.name)}
+                      />
+                    </TableCell>
+                  )}
+                  <TableCell align="center">
+                    <Link to={`/fleet/${row.name}`}>{row.name}</Link>
+                  </TableCell>
+                  <TableCell align="center">{row.log_level}</TableCell>
+                  <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
+                  <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
+                </TableRow>)
+            }
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleets}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: {"aria-label": "rows per page"},
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  );
+};
+
+FleetSelectionTable.propTypes = {
+  token: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  search: PropTypes.object.isRequired,
+  multiSelect: PropTypes.bool.isRequired,
+  selected: PropTypes.array,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  connectionStatus: PropTypes.bool,
+}
+
+export default FleetSelectionTable;

src/components/Controls/ManifestECUFileList/index.jsx

@@ -1,79 +0,0 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import FileDragArea from "../FileDragArea";
-import ListHead from "../ListHead";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import ManifestECUFileTypes from "../ManifestECUFileTypes";
-
-const options = [
-  {
-    label: "Filename",
-    field: "filename",
-    readonly: true,
-  },
-  {
-    label: "Offset",
-    field: "offset",
-  },
-  {
-    label: "Checksum",
-    field: "checksum",
-  },
-  {
-    label: "Type",
-    field: "type",
-    control: ManifestECUFileTypes,
-  },
-  {
-    label: "",
-    field: "filename",
-    delete: true,
-  },
-];
-
-const ManifestECUFileList = ({ data }) => {
-  const { addECUFile, deleteECUFile } = useManifestCreateContext();
-
-  const onAddFile = (files) => {
-    addECUFile(data.data_id, files);
-  };
-
-  const onDeletFile = (filename) => {
-    deleteECUFile(data.data_id, filename);
-  };
-
-  return (
-    <Table>
-      {data && data.files && data.files.length > 0 && (
-        <ListHead options={options} />
-      )}
-      <TableBody>
-        {data.files.map((file) => (
-          <SubListItem
-            key={file.filename}
-            data={file}
-            options={options}
-            onDelete={onDeletFile}
-          />
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={options.length}>
-            <FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
-          </TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  );
-};
-
-export default ManifestECUFileList;

src/components/Controls/ManifestECUList/index.jsx

@@ -1,75 +0,0 @@
-import React from "react";
-import {
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import ECUDropDrop from "../ECUDropDown";
-import ListHead from "../ListHead";
-import ManifestECURow from "../ManifestECURow";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import PageDragPreventDefault from "../PageDragPreventDefault";
-
-const options = [
-  {
-    label: "ID",
-    field: "data_id",
-    readonly: true,
-  },
-  {
-    label: "ECU",
-    field: "name",
-    control: ECUDropDrop,
-    required: true,
-  },
-  {
-    label: "Version",
-    field: "version",
-    required: true,
-  },
-  {
-    label: "Hardware",
-    field: "hw_version",
-  },
-  {
-    label: "",
-    delete: true,
-  },
-];
-
-const ManifestECUList = () => {
-  const { ecus, addECU } = useManifestCreateContext();
-
-  return (
-    <>
-      <PageDragPreventDefault />
-      <Table>
-        <ListHead options={options} />
-        <TableBody>
-          {ecus.map((item) => {
-            return (
-              <ManifestECURow
-                key={item.data_id}
-                data={item}
-                options={options}
-              />
-            );
-          })}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={5} align="center">
-              <Button onClick={addECU}>Add ECU</Button>
-            </TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </>
-  );
-};
-
-export default ManifestECUList;

src/components/Controls/ManifestECURow/index.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-import { TableCell, TableRow } from "@material-ui/core";
-
-import ManifestECUFileList from "../ManifestECUFileList";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestECURow = ({ data, options }) => {
-  const { deleteECU } = useManifestCreateContext();
-
-  const onDeleteECU = () => {
-    deleteECU(data.data_id);
-  };
-
-  return (
-    <>
-      <SubListItem
-        key={data.data_id}
-        data={data}
-        options={options}
-        onDelete={onDeleteECU}
-      />
-      <TableRow>
-        <TableCell colSpan={options.length}>
-          <ManifestECUFileList data={data} />
-        </TableCell>
-      </TableRow>
-    </>
-  );
-};
-
-export default ManifestECURow;

src/components/Controls/ManifestUploadProgress/index.jsx

@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
-
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestUploadProgress = (props) => {
-  const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
-    useManifestCreateContext();
-  const [progress, setProgress] = useState(0);
-  const [completed, setCompleted] = useState(0);
-  const [total, setTotal] = useState(0);
-
-  useEffect(() => {
-    const x = uploadedFiles.reduce(
-      (current, { file }) => current + file.size,
-      0
-    );
-    setTotal(x);
-  }, [uploadedFiles]);
-
-  useEffect(() => {
-    if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
-      return;
-    let uploaded = 0;
-    uploadedFiles.forEach(({ file }, i) => {
-      if (i < uploadFileIndex) uploaded += file.size;
-    });
-    setCompleted(uploaded);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadFileIndex]);
-
-  useEffect(() => {
-    if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
-    const { file } = uploadedFiles[uploadFileIndex];
-    const uploaded = completed + file.size * uploadProgress;
-    const x = Math.min(99, Math.floor((uploaded / total) * 100));
-    setProgress(x);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadProgress, completed]);
-
-  return (
-    <>
-      <Grid container>
-        <Grid xs={12}>
-          <Typography align="center">
-            {`File ${uploadFileIndex + 1} of ${
-              uploadedFiles.length
-            }. ${uploadStatus}`}
-          </Typography>
-        </Grid>
-      </Grid>
-      <Grid container alignContent="center" spacing={0}>
-        <Grid xs={11}>
-          <LinearProgress
-            variant="determinate"
-            value={progress}
-            style={{ marginTop: 16 }}
-          />
-        </Grid>
-        <Grid xs={1} alignContent="flex-end" align="right">
-          <Button onClick={props.onCancel}>Cancel</Button>
-        </Grid>
-      </Grid>
-    </>
-  );
-};
-
-export default ManifestUploadProgress;

src/components/Controls/SendCommand/Commands.jsx

@@ -0,0 +1,251 @@
+import {Grid, Slider, Switch} from "@material-ui/core";
+import Typography from "@material-ui/core/Typography";
+
+const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
+  ...Array.from({length: 26}, (_, i) => {
+    return {value: i + 2, label: `${i + 15}°C`}
+  })];
+
+const valuetext = (value) => {
+  return `${value}`;
+}
+
+const highMidLowOffMarks = [{
+  value: 3, label: "High",
+}, {
+  value: 2, label: "Mid",
+}, {
+  value: 1, label: "Low",
+}, {
+  value: 0, label: "Off",
+},]
+
+const precondMarks = [
+  {value: 0, label: "Battery"},
+  {value: 1, label: "All"},
+  {value: 2, label: "Climate"},
+  {value: 3, label: "Stop"},
+]
+
+const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
+
+const labelRemoved = (marks) => Array.from(marks).map((mark) => {
+  return {value: mark.value}
+})
+
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "trunk_close", label: "Close trunk"},
+  {value: "alert", label: "Alert"},
+  {
+    value: "precondition", label: "Precondition", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="precondition-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(precondMarks)}
+            getAriaValueText={labelFunc(precondMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="precondition-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={precondMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  },
+  {
+    value: "california_mode", label: "California mode", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+      <Typography id="california_mode-slider" gutterBottom>
+        Set California mode
+      </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+      </span>
+      },
+    },
+  }, {
+    value: "trunk_open", label: "Open trunk", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="trunk_open-slider" gutterBottom>
+            Set trunk's openness level
+          </Typography>
+          <Slider
+            defaultValue={1}
+            value={val}
+            getAriaValueText={valuetext}
+            aria-label="Open trunk"
+            aria-labelledby="trunk_open-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            marks
+            size="small"
+            min={1}
+            max={5}
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
+      dataFunc: (val, handleValChange) => {
+        return <span>
+          <Typography id="temp_cabin-slider" gutterBottom>
+            Set cabin temperature
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(tempMarks)}
+            getAriaValueText={labelFunc(tempMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="temp_cabin-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={27}
+            marks={labelRemoved(tempMarks)}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>
+      }
+    }
+  }, {
+    value: "defrost", label: "Defrost", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="defrost-slider" gutterBottom>
+            Set defrost
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "driver_seat_preheat", label: "Driver seat preheat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="driver_seat_preheat-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="driver_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="passenger_seat_preheat-slider" gutterBottom>
+            Set passenger seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="passenger_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+
+        return <span>
+          <Typography id="steering_wheel_preheat-slider" gutterBottom>
+            Set steering wheel preheat on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "charging", label: "Charging", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="charging-slider" gutterBottom>
+            Set charging on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }]
+
+export default Commands;

src/components/Controls/SendCommand/Parameters.jsx

@@ -0,0 +1,73 @@
+import PropTypes from "prop-types";
+import {FormControl} from "@material-ui/core";
+import useStyles from "../../useStyles";
+import {MuiPickersUtilsProvider} from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+
+export const Dates = (
+  {
+    startDateFunc,
+    endDateFunc,
+    startDate,
+    handleStartChange,
+    endDate,
+    handleEndChange,
+  }) => {
+  if (startDateFunc && endDateFunc) {
+    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
+      {startDateFunc(startDate, handleStartChange)}
+      {endDateFunc(endDate, handleEndChange, startDate)}
+    </MuiPickersUtilsProvider>);
+  }
+
+  return null;
+}
+
+Dates.propTypes = {
+  startDateFunc: PropTypes.func,
+  endDateFunc: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+}
+
+export const Parameters = (props) => {
+  const {params} = props;
+
+  const classes = useStyles();
+
+  if (params === null || params === undefined || params === "") {
+    return null;
+  }
+
+  const {data, handleDataChange} = props;
+  const {startDate, handleStartChange} = props;
+  const {endDate, handleEndChange} = props;
+
+  return (
+    <FormControl size="small" className={classes.formControl}>
+      <div style={{width: "300px", marginTop: "1em"}}>
+        {params.dataFunc(data, handleDataChange)}
+      </div>
+      <Dates
+        startDateFunc={params.startDateFunc}
+        endDateFunc={params.endDateFunc}
+        startDate={startDate}
+        handleStartChange={handleStartChange}
+        endDate={endDate}
+        handleEndChange={handleEndChange}
+      ></Dates>
+    </FormControl>
+  )
+}
+
+Parameters.propTypes = {
+  params: PropTypes.any,
+  data: PropTypes.any,
+  handleDataChange: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+};

src/components/Controls/SendCommand/Parameters.test.jsx

@@ -0,0 +1,140 @@
+jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
+
+
+import {render, waitFor} from "@testing-library/react";
+import {Dates, Parameters} from "./Parameters";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+
+const date = Date.parse("2011-10-10T14:48:00")
+
+const renderDates = async (empty) => {
+  if (empty) {
+    await waitFor(() => {
+      /* render */
+    });
+    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
+
+    return container;
+  }
+
+
+  const [start, setStart] = [date, (_) => {}];
+  const [end, setEnd] = [date, (_) => {}];
+
+  const handleStartChange = (val) => {
+    setStart(val)
+  }
+
+  const handleEndChange = (val) => {
+    setEnd(val)
+  }
+
+  await waitFor(() => {
+    /* render */
+  });
+
+  const {container} = render(
+    <div>
+      <Dates
+        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
+        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
+        startDate={start}
+        endDate={end}
+        handleStartChange={handleStartChange}
+        handleEndChange={handleEndChange}
+      />
+    </div>
+  )
+
+  return container
+}
+
+describe("Dates", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderDates(true);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render filled", async () => {
+    const container = await renderDates(false);
+    expect(container).toMatchSnapshot();
+  })
+})
+
+const renderState = {
+  EMPTY: 0,
+  JUST_DATA: 1,
+  WITH_DATE: 2,
+}
+
+const renderParameters = async (rs) => {
+  await waitFor(() => {
+    /* render */
+  });
+
+  if (rs===renderState.EMPTY) {
+    const { container } = render(<Parameters/>)
+
+    return container;
+  }
+  const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
+  const [data, handleDataChange] = [true, (_)=>{}];
+
+  if (rs===renderState.JUST_DATA) {
+    const { container } = render(<Parameters
+      params={params}
+      data={data}
+      handleDataChange={handleDataChange}
+    />)
+
+    return container;
+  }
+
+  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
+  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
+
+  const [start, handleStartChange] = [date, (_)=>{}];
+  const [end, handleEndChange] = [date, (_)=>{}];
+
+  if (rs===renderState.WITH_DATE) {
+    const {container} = render(<Parameters
+        params={params}
+        data={data}
+        handleDataChange={handleDataChange}
+        start={start}
+        handleStartChange={handleStartChange}
+        end={end}
+        handleEndChange={handleEndChange}
+      />
+    )
+
+    return container
+  }
+}
+
+
+describe("Params", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderParameters(renderState.EMPTY);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render just data", async () => {
+    const container = await renderDates(renderState.JUST_DATA);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render with date", async () => {
+    const container = await renderDates(renderState.WITH_DATE);
+    expect(container).toMatchSnapshot();
+  })
+})

src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dates Render empty 1`] = `<div />`;
+
+exports[`Dates Render filled 1`] = `
+<div>
+  <div>
+    <div>
+      1318258080000
+    </div>
+    <div>
+      1318258080000
+      , 
+      1318258080000
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Params Render empty 1`] = `<div />`;
+
+exports[`Params Render just data 1`] = `<div />`;
+
+exports[`Params Render with date 1`] = `<div />`;

src/components/Controls/SendCommand/index.jsx

@@ -1,31 +1,32 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import PropTypes from "prop-types";
-import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
+import {Button, FormControl, InputLabel, Select} from "@material-ui/core";
-import SendIcon from "@material-ui/icons/Send";
 
-import { useVehicleContext } from "../../Contexts/VehicleContext";
+import {useVehicleContext} from "../../Contexts/VehicleContext";
-import commands from "../../../services/commands";
+import commands from "./Commands";
 import useStyles from "../../useStyles";
-import { useUserContext } from "../../Contexts/UserContext";
+import {useUserContext} from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
-import { logger } from "../../../services/monitoring";
+import {logger} from "../../../services/monitoring";
+import {Parameters} from "./Parameters";
+import clsx from "clsx";
+import {sanitize} from "./sanitize";
 
-const SendCommand = ({ vins }) => {
+const SendCommand = ({vins}) => {
   const classes = useStyles();
-  const { sendCommand, busy } = useVehicleContext();
+  const {busy, sendCommand} = useVehicleContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const NoParameters = {
+  const {setMessage} = useStatusContext();
-    value: "",
-    label: "None",
-  };
-  const { setMessage } = useStatusContext();
   const [command, setCommand] = useState("");
-  const [parameters, setParameters] = useState([NoParameters]);
+  const [parameters, setParameters] = useState(null);
-  const [parameter, setParameter] = useState("");
+  const [data, setData] = useState(null);
+  const [startTime, setStartTime] = useState(null)
+  const [endTime, setEndTime] = useState(null)
+
   const changeCommandHandler = (e) => {
     selectCommand(e.target.value);
   };
@@ -34,16 +35,27 @@ const SendCommand = ({ vins }) => {
     const params = getParameters(cmd);
     setCommand(cmd);
     setParameters(params);
-    setParameter(params[0].value);
+    setData(null);
+    setStartTime(null);
+    setEndTime(null);
   };
 
-  const changeParametersHandler = (e) => {
+  const handleDataChange = (_, value) => {
-    setParameter(e.target.value);
+    setData(value);
   };
 
-  const clickHandler = async (e) => {
+  const handleStartChange = (date, _) => {
+    setStartTime(date);
+  }
+
+  const handleEndChange = (date, _) => {
+    setEndTime(date)
+  }
+
+  const clickHandler = async (_) => {
     try {
-      await sendCommand(vins, command, parameter, token);
+      const cmd = sanitize({command: command, data: data, start: startTime, end: endTime});
+      await sendCommand(vins, cmd, token);
       if (vins.length === 1) {
         setMessage(`Sent command to ${vins[0]}`);
       } else {
@@ -59,13 +71,13 @@ const SendCommand = ({ vins }) => {
     for (let i = 0, len = commands.length; i < len; i += 1) {
       const item = commands[i];
       if (item.value === cmd) {
-        if (!item.parameters) {
+        if (!item.params) {
           break;
         }
-        return item.parameters;
+        return item.params;
       }
     }
-    return [NoParameters];
+    return null;
   };
 
   useEffect(() => {
@@ -75,9 +87,9 @@ const SendCommand = ({ vins }) => {
   }, []);
 
   return (
-    <div className={classes.form} style={{ marginTop: 20 }}>
+    <div className={clsx(classes.paper)} style={{marginTop: 20}}>
       <FormControl
-        className={classes.formControlInline}
+        className={classes.formControl}
         variant="outlined"
         size="small"
       >
@@ -101,45 +113,27 @@ const SendCommand = ({ vins }) => {
           ))}
         </Select>
       </FormControl>
-      <FormControl
+      <Parameters
-        className={classes.formControlInline}
+        params={parameters}
-        variant="outlined"
+        data={data}
-        size="small"
+        handleDataChange={handleDataChange}
-      >
+        startDate={startTime}
-        <InputLabel
+        handleStartChange={handleStartChange}
-          htmlFor="send-parameter"
+        endDate={endTime}
-          className={classes.whiteBackground}
+        handleEndChange={handleEndChange}
-        >
+      />
-          Parameter
+      <Button
-        </InputLabel>
+        type="submit"
-        <Select
-          native
-          value={parameter}
-          variant="outlined"
-          inputProps={{
-            name: "send-parameter",
-            id: "send-parameter",
-          }}
-          onChange={changeParametersHandler}
-          disabled={parameters.length === 0}
-        >
-          {parameters.map((item) => (
-            <option key={item.value} value={item.value}>
-              {item.label}
-            </option>
-          ))}
-        </Select>
-      </FormControl>
-      <IconButton
-        color="primary"
         aria-label="send command"
-        component="span"
-        onClick={clickHandler}
-        size="small"
         disabled={busy || vins.length === 0}
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={clickHandler}
       >
-        <SendIcon fontSize="large" />
+        {busy ? "Sending..." : "Send"}
-      </IconButton>
+      </Button>
     </div>
   );
 };

src/components/Controls/SendCommand/sanitize.js

@@ -0,0 +1,115 @@
+export const onOff = {
+  false: "off",
+  true: "on",
+}
+
+export const onOffTemp = {
+  0: "off",
+  1: "on",
+  ...Object.fromEntries(Array.from({length: 26}, (_, i) => [i+2, `${i+15}`]))
+}
+
+export const precond = {
+  0: "battery",
+  1: "all",
+  2: "climate",
+  3: "stop"
+}
+
+export const hmol = {
+  0: "off",
+  1: "low",
+  2: "mid",
+  3: "high"
+}
+
+export const emptyCommands = [
+  "doors_lock", "doors_unlock", "vent_windows",
+  "close_windows", "trunk_close", "flash_headlights",
+  "alert"
+]
+
+export const onOffCommands = ["california_mode", "steering_wheel_preheat", "defrost", "charging"]
+
+export const hmolCommands = ["passenger_seat_preheat", "driver_seat_preheat"]
+
+
+const removeIfFieldsAreEmpty = (cmd, fields) => {
+  for (const field of fields) {
+    if (cmd[field] == null) {
+      delete cmd[field]
+    }
+  }
+
+  return cmd
+}
+
+const tempCabinPeriodConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 27) {
+    cmd.data = 0
+  }
+
+  cmd.data = onOffTemp[cmd.data]
+
+  return cmd
+}
+
+const onOffConvert = (cmd) => {
+  if (cmd.data == null || cmd.data !== true) {
+    cmd.data = false
+  }
+
+  cmd.data = onOff[cmd.data]
+
+  return cmd
+}
+
+const precondConvert = cmd => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = precond[cmd.data]
+
+  return cmd
+}
+
+const hmolConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = hmol[cmd.data]
+
+  return cmd
+}
+
+const trunkOpenConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 1 || cmd.data > 5) {
+    cmd.data = 1
+  }
+
+  cmd.data = cmd.data.toString()
+
+  return cmd
+}
+
+export const sanitize = (cmd) => {
+  cmd = removeIfFieldsAreEmpty(cmd, ["data", "start", "end"])
+
+  if (onOffCommands.includes(cmd.command)) {
+    cmd = onOffConvert(cmd)
+  } else if (hmolCommands.includes(cmd.command)) {
+    cmd = hmolConvert(cmd)
+  } else if (cmd.command === "precondition") {
+    cmd = precondConvert(cmd)
+  } else if (cmd.command === "trunk_open") {
+    cmd = trunkOpenConvert(cmd)
+  } else if (cmd.command === "temp_cabin") {
+    cmd = tempCabinPeriodConvert(cmd)
+  } else {
+    delete cmd.data;
+  }
+
+  return cmd
+}

src/components/Controls/SendCommand/sanitize.test.js

@@ -0,0 +1,150 @@
+import {emptyCommands, hmol, hmolCommands, onOff, onOffCommands, onOffTemp, precond, sanitize,} from "./sanitize";
+
+const randomValues = [null, undefined, "someString", 33]
+
+describe("Sanitize test", () => {
+  it("empty commands", () => {
+    for (const command of emptyCommands) {
+      const cmd = sanitize({command})
+      expect(cmd.command).toEqual(command)
+      expect("data" in cmd).toEqual(false);
+      expect("start" in cmd).toEqual(false);
+      expect("end" in cmd).toEqual(false);
+    }
+  })
+
+  it("on-off commands with proper values", () => {
+    for (const command of onOffCommands) {
+      for (const data of [false, true]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(onOff[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("on-off commands with dirty values", () => {
+    for (const command of onOffCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("high-mid-low-off with proper values", () => {
+    for (const command of hmolCommands) {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(hmol[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("precondition with proper values", () => {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command:"precondition", data})
+
+        expect(cmd.data).toEqual(precond[data])
+        expect(cmd.command).toEqual("precondition")
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+  })
+
+  it("precondition with wrong values", () => {
+      const cmd = {command:"precondition"}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("battery")
+        expect(res.command).toEqual("precondition")
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+  })
+
+
+
+  it("high-mid-low-off with wrong values", () => {
+    for (const command of hmolCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("open trunk", () => {
+    const cmd = {command: "trunk_open"}
+    for (let i = 1; i <= 5; i++) {
+      cmd.data = i
+
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual(i.toString())
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+  it("open trunk with wrong values", () => {
+    const cmd = {command: "trunk_open"}
+    for (const rVal of randomValues) {
+      if (rVal !== undefined) {
+        cmd.data = rVal
+      }
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual("1")
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+
+  it("cabin temp with period with proper values", () => {
+    for (let i = 0; i <= 27; i++) {
+      const res = sanitize({
+        command: "temp_cabin",
+        data: i,
+        start: new Date(),
+        end: new Date(),
+      })
+
+
+      expect(res.command).toEqual("temp_cabin")
+      expect(res.data).toEqual(onOffTemp[i])
+      expect(typeof res.start).toEqual("object")
+      expect(typeof res.end).toEqual("object")
+    }
+  })
+})

src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap

@@ -8,7 +8,7 @@ exports[`TabPanel Render 1`] = `
     role="tabpanel"
   >
     <div
-      class="MuiBox-root MuiBox-root-1"
+      class="MuiBox-root MuiBox-root-0"
     >
       <div>
         Test

src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Confirmation Modal Should render 1`] = `
+<div
+  aria-hidden="true"
+>
+  <div />
+</div>
+`;

src/components/DeleteConfirmation/index.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
+
+const DeleteConfirmation = (props) => {
+    return (
+      <div>
+      <Dialog open={props.open}
+      onClose={props.close}>
+        <DialogTitle id="alert-dialog-title">
+          {"Delete Resource?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {"Are you sure you want to delete: " + props.message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.close}>Cancel</Button>
+          <Button variant="contained" color="secondary" onClick={() => { props.close(); props.deleteFunction()}} autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+      </div>
+    )
+}
+
+DeleteConfirmation.propTypes={
+  open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
+  close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
+  message: PropTypes.any.isRequired, // What the user will see if being confirmed to be deleted
+  deleteFunction: PropTypes.func.isRequired, // Function that runs when user clicks delete
+}
+
+export default DeleteConfirmation;

src/components/DeleteConfirmation/index.test.jsx

@@ -0,0 +1,20 @@
+jest.mock("../Contexts/UserContext");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import DeleteConfirmation from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+describe("Delete Confirmation Modal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Should render", () => {
+    const { container } = render(
+      <DeleteConfirmation open={true} close={()=>{}} message="Test Message" deleteFunction={()=>{}}/>
+    );
+    expect(container).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap

@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
                     Name
                   </b>
                   : 
+                  Test Fleet
                 </p>
                 <p>
                   <b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/fleet-update?name=undefined"
+                  href="/fleet-update?name=Test Fleet"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>

src/components/Fleets/Status/Details/index.jsx

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleet, getFleet, deleteFleet } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${name}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };

src/components/Fleets/Status/Details/index.test.jsx

@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm name="Test Fleet"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -153,6 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
+                    <div>
                       <a
                         class=""
                         href="/"
@@ -170,6 +171,8 @@ exports[`FleetVehiclesTable Render 1`] = `
                           />
                         </svg>
                       </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -187,6 +190,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
+                    <div>
                       <a
                         class=""
                         href="/"
@@ -204,6 +208,8 @@ exports[`FleetVehiclesTable Render 1`] = `
                           />
                         </svg>
                       </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -221,6 +227,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
+                    <div>
                       <a
                         class=""
                         href="/"
@@ -238,6 +245,8 @@ exports[`FleetVehiclesTable Render 1`] = `
                           />
                         </svg>
                       </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
               </tbody>

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -42,11 +43,17 @@ const MainForm = ({ name }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
+  const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
   const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
   useEffect(() => {
     (async () => {
       try {
@@ -54,6 +61,7 @@ const MainForm = ({ name }) => {
         await getFleetVehicles(
           name,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -66,7 +74,7 @@ const MainForm = ({ name }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
+  }, [token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -126,11 +134,15 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
+          <div>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => onDelete(action.id)}>
                 {action.icon}
               </Link>
             </Tooltip>
+            <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
+
         );
       }
     });
@@ -145,7 +157,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>

src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap

@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -152,6 +152,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
+                <div>
                   <a
                     class=""
                     href="/"
@@ -169,6 +170,8 @@ exports[`VehiclesTab Render 1`] = `
                       />
                     </svg>
                   </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -186,6 +189,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
+                <div>
                   <a
                     class=""
                     href="/"
@@ -203,6 +207,8 @@ exports[`VehiclesTab Render 1`] = `
                       />
                     </svg>
                   </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -220,6 +226,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
+                <div>
                   <a
                     class=""
                     href="/"
@@ -237,6 +244,8 @@ exports[`VehiclesTab Render 1`] = `
                       />
                     </svg>
                   </a>
+                  <div />
+                </div>
               </td>
             </tr>
           </tbody>

src/components/Fleets/Status/__snapshots__/index.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
                             Name
                           </b>
                           : 
+                          Fleet Name
                         </p>
                         <p>
                           <b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
                       >
                         <a
                           class=""
-                          href="/fleet-update?name=undefined"
+                          href="/fleet-update?name=Fleet Name"
                           style="margin: 5px;"
-                          title="Update \\"undefined\\""
+                          title="Update \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Update \\"undefined\\""
+                            aria-label="Update \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
                         <a
                           class=""
                           href="/"
-                          title="Delete \\"undefined\\""
+                          title="Delete \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Delete \\"undefined\\""
+                            aria-label="Delete \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
                         </a>
                       </div>
                     </div>
+                    <div />
                   </div>
                 </div>
               </div>

src/components/Fleets/Status/index.test.jsx

@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();

src/components/Fleets/Table/__snapshots__/index.test.jsx.snap

@@ -24,7 +24,6 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-0"
                   href="/fleet-add"
                 >
                   <svg
@@ -40,7 +39,6 @@ exports[`FleetTable Render 1`] = `
                 </a>
               </div>
               <div
-                align="right"
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
@@ -98,6 +96,9 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
+            <div
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
+            >
               <table
                 class="MuiTable-root"
               >
@@ -494,5 +495,6 @@ exports[`FleetTable Render 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;

src/components/Fleets/Table/index.jsx

@@ -1,66 +1,26 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
-import {
+import {Grid,} from "@material-ui/core";
-  Grid,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TablePagination,
-  TableRow
-} from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import clsx from "clsx";
 
-import TableHeaderSortable from "../../Table/HeaderSortable";
+import {useUserContext} from "../../Contexts/UserContext"
-import {
+import {useStatusContext} from "../../Contexts/StatusContext";
-  useUserContext
+import {FleetProvider} from "../../Contexts/FleetContext"
-} from "../../Contexts/UserContext"
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
-import { logger } from "../../../services/monitoring";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
-import {useLocalStorage} from "../../useLocalStorage";
 
-const tableColumns = [
-  {
-    id: "name",
-    label: "Name"
-  },
-  {
-    id: "log_level",
-    label: "Log Level"
-  },
-  {
-    id: "canbus_enabled",
-    label: "CAN Bus Enabled"
-  },
-  {
-    id: "data_logger_enabled",
-    label: "Data Logger Enabled"
-  },
-  {
-    id: "num_vehicles",
-    label: "Vehicles"
-  },
-  {
-    id: "num_filters",
-    label: "Filters"
-  }
-];
-
-const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
 
 const MainForm = () => {
-  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
-  const [order, setOrder] = useState("desc");
   const classes = useStyles();
-  const { setMessage, setSitePath, setTitle } = useStatusContext();
+  const [search, setSearch] = useState("");
-  const { fleets, totalFleets, getFleets } = useFleetContext();
+  const {setSitePath, setTitle} = useStatusContext();
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
 
   useEffect(() => {
     setTitle("Fleets");
@@ -68,106 +28,26 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!token) return;
-        await getFleets(
-          {
-            limit: pageSize,
-            offset: pageSize * pageIndex,
-            order: `${orderBy} ${order}`,
-          },
-          token
-        );
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
-
-  const handleChangePageIndex = (_event, newIndex) => {
-    setPageIndex(newIndex);
-  };
-
-  const handleChangePageSize = (event) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPageIndex(0);
-  };
-
-  const handleSort = (_event, property) => {
-    try {
-      if (property === orderBy) {
-        if (order === "asc") {
-          setOrder("desc");
-        } else {
-          setOrder("asc");
-        }
-      } else {
-        setOrderBy(property);
-        setOrder("asc");
-      }
-    } catch (e) {
-      logger.warn(e.stack);
-    }
-  };
-
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={"/fleet-add"} className={classes.labelInline}>
+          <Link to={"/fleet-add"}>
-            <AddCircleIcon fontSize="large" />
+            <AddCircleIcon fontSize="large"/>
           </Link>
         </Grid>
-        <Grid item md={4} align="right" className={classes.textCenterAlign}>
+        <Grid item md={4} className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={handleSearch}/>
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>
-      <Table>
+      <FleetSelectionTable
-        <TableHeaderSortable
+        token={token}
         classes={classes}
-          orderBy={orderBy}
+        search={{search}}
-          order={order}
+        multiSelect={false}
-          columnData={tableColumns}
-          onSortRequest={handleSort}
       />
-        <TableBody>
+    </div>
-          {fleets.map((row) => (
-            <TableRow key={row.name}>
-              <TableCell align="center">
-                <Link to={`/fleet/${row.name}`}>{row.name}</Link>
-              </TableCell>
-              <TableCell align="center">{row.log_level}</TableCell>
-              <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
-              <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
-              count={totalFleets}
-              rowsPerPage={pageSize}
-              page={pageIndex}
-              SelectProps={{
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              }}
-              onPageChange={handleChangePageIndex}
-              onRowsPerPageChange={handleChangePageSize}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div >
   );
 };
 

src/components/Fleets/Update/__snapshots__/index.test.jsx.snap

@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="name"
                   id="name-label"
@@ -41,16 +41,14 @@ exports[`FleetUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    disabled=""
                     id="name"
                     maxlength="255"
                     name="name"
-                    readonly=""
                     required=""
                     type="text"
                     value=""

src/components/Fleets/Update/index.jsx

@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
-  const name = queries.get("name") ?? "";
 
   const { fleet, getFleet, updateFleet, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +31,8 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
+  const [name, setName] = useState(queries.get("name") ?? "");
+  const [oldName, ] = useState(name);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -56,7 +57,7 @@ const MainForm = () => {
     (async () => {
       try {
         if (!name || !token) return;
-        await getFleet(name, token);
+        await getFleet(oldName, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -77,6 +78,10 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fleet]);
 
+  const onNameChange = (event) => {
+    setName(event.target.value);
+  }
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -110,7 +115,10 @@ const MainForm = () => {
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
         }
       };
-      const result = await updateFleet(name, formData, token);
+
+      console.log(oldName);
+
+      const result = await updateFleet(oldName, formData, token);
       if (!result || result.error) return;
 
       setMessage(`Updated ${result.name}`);
@@ -136,12 +144,11 @@ const MainForm = () => {
           margin="normal"
           inputProps={{
             maxLength: "255",
-            readOnly: true,
           }}
-          disabled
           value={name}
           required
           fullWidth
+          onChange={onNameChange}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup

src/components/Manifest/Create/index.jsx

@@ -1,157 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
-import { Button, TextField, Typography } from "@material-ui/core";
-
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import {
-  ManifestCreateProvider,
-  useManifestCreateContext,
-} from "../../Contexts/ManifestCreateContext";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
-import ManifestECUList from "../../Controls/ManifestECUList";
-import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
-
-const MainForm = () => {
-  const { createManifest, cancelUpload, busy } = useManifestCreateContext();
-  const { token } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const [redirect, setRedirect] = useState(null);
-  const classes = useStyles();
-  const packagenameEl = useRef(null);
-  const versionEl = useRef(null);
-  const descEl = useRef(null);
-  const releasenotesEl = useRef(null);
-
-  useEffect(() => {
-    setTitle("Create Deployments");
-    setSitePath([
-      {
-        label: "Deployments",
-        link: "/packages",
-      },
-      {
-        label: "Create Deployments",
-      },
-    ]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
-      const {
-        idToken: { jwtToken: authToken },
-      } = token;
-      const formData = {
-        name: packagenameEl.current.value,
-        version: versionEl.current.value,
-        description: descEl.current.value,
-        release_notes: releasenotesEl.current.value,
-      };
-      const manifest = await createManifest(formData, authToken);
-
-      if (!manifest || manifest.error) return;
-
-      cancelUpload();
-      setMessage(`Package uploaded`);
-      setRedirect(`/package-deploy/${manifest.id}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-
-  if (redirect && redirect.length > 0) {
-    return <Redirect to={redirect} />;
-  }
-
-  return (
-    <div className={classes.paper}>
-      <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          id="packagename"
-          name="packagename"
-          label="Package name"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={packagenameEl}
-        />
-        <TextField
-          id="version"
-          name="version"
-          label="Version"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={versionEl}
-        />
-        <TextField
-          id="description"
-          name="description"
-          label="Description"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "5120",
-          }}
-          required
-          fullWidth
-          multiline
-          minRows={4}
-          placeholder="Package description"
-          inputRef={descEl}
-        />
-        <TextField
-          id="release_notes"
-          name="release_notes"
-          label="Release Notes URL"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          required
-          fullWidth
-          placeholder="Release Notes URL"
-          inputRef={releasenotesEl}
-        />
-        <Typography variant="h6">ECU Files</Typography>
-        <ManifestECUList />
-        {busy ? (
-          <ManifestUploadProgress onCancel={cancelUpload} />
-        ) : (
-          <Button
-            type="submit"
-            disabled={busy}
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            onClick={onSubmit}
-          >
-            Submit
-          </Button>
-        )}
-      </form>
-    </div>
-  );
-};
-
-export default function FileUploadForm() {
-  return (
-    <ManifestCreateProvider>
-      <MainForm />
-    </ManifestCreateProvider>
-  );
-}

src/components/Manifest/Deploy/FleetDeployForm.jsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+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 "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = 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 = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  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(`/package-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(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const 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={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const FleetDeployForm = () => (
+  <FleetProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </FleetProvider>
+);
+
+export default FleetDeployForm;

src/components/Manifest/Deploy/VehicleDeployForm.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+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 "../../Controls/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, setSitePath } = 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 = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  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(`/package-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(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const 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={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const VehicleDeployForm = () => (
+  <VehicleProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </VehicleProvider>
+);
+
+export default VehicleDeployForm;

src/components/Manifest/Deploy/index.jsx

@@ -1,35 +1,37 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { useParams, Redirect } from "react-router";
+import {Redirect, useParams} from "react-router";
-import { Button, Grid, Typography } from "@material-ui/core";
+import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
 import clsx from "clsx";
 
-import {
+import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
-  ManifestsProvider,
+import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
-  useManifestsContext,
+import {VehicleProvider} from "../../Contexts/VehicleContext";
-} from "../../Contexts/ManifestsContext";
+import {useUserContext} from "../../Contexts/UserContext";
-import {
+import {useStatusContext} from "../../Contexts/StatusContext";
-  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 "../../Controls/CarSelectionTable";
-import { logger } from "../../../services/monitoring";
+import {logger} from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
+import {LocalDateTimeString} from "../../../utils/dates";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+
+const CAR_UPDATE = false;
+const FLEET_UPDATE = true;
 
 const MainForm = () => {
-  const { manifest_id } = useParams();
+  const [updateType, setUpdateType] = useState(CAR_UPDATE);
-  const { getManifests, manifests, busy } = useManifestsContext();
+
-  const { deployCarUpdates } = useCarUpdatesContext();
+  const {manifest_id} = useParams();
+  const {getManifests, manifests, busy} = useManifestsContext();
+  const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {setMessage, setTitle, setSitePath} = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -38,6 +40,11 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
+  const handleChange = (_) => {
+    setSelected([]);
+    setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
+  }
+
   const handleSearch = (query) => {
     setSelected([]);
     setSearch(query);
@@ -54,7 +61,7 @@ const MainForm = () => {
         newSelected = [...selected];
         newSelected.push(key);
       } else {
-        newSelected = selected.filter((vin) => vin !== key);
+        newSelected = selected.filter((vinOrName) => vinOrName !== key);
       }
       setSelected(newSelected);
     } catch (e) {
@@ -67,9 +74,14 @@ const MainForm = () => {
       event.preventDefault();
       const data = {
         manifest_id: parseInt(manifest_id),
-        vins: selected,
+      }
-      };
+      if (updateType === CAR_UPDATE) {
+        data.vins = selected;
         await deployCarUpdates(data, token);
+      } else {
+        data.fleet_names = selected;
+        await deployFleetUpdates(data, token);
+      }
       setMessage(
         `Deployed ${manifestName} ${version} to ${selected.length} cars`
       );
@@ -82,7 +94,7 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      getManifests({ id: parseInt(manifest_id) }, token);
+      getManifests({id: parseInt(manifest_id)}, token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -119,7 +131,7 @@ const MainForm = () => {
   }, [manifests]);
 
   if (redirect.length > 0) {
-    return <Redirect to={redirect} />;
+    return <Redirect to={redirect}/>;
   }
 
   return (
@@ -127,13 +139,21 @@ const MainForm = () => {
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">Created {createDate}.</Typography>
         <Grid container className={classes.root} spacing={2}>
-          <Grid item md={4}>
+          <Grid item md={2}>
             <div
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
+          <Grid item md={2} className={classes.textCenterAlign}>
+            <FormControlLabel control={<Switch
+              checked={updateType === CAR_UPDATE}
+              onChange={handleChange}
+              inputProps={{'aria-label': 'controlled'}}
+            />} label="Car(default) or Fleet"/>
+
+          </Grid>
           <Grid item md={4} className={classes.textCenterAlign}>
-            <SearchField classes={classes} onSearch={handleSearch} />
+            <SearchField classes={classes} onSearch={handleSearch}/>
           </Grid>
           <Grid item md={4} className={classes.textRightAlign}>
             <Button
@@ -148,28 +168,39 @@ const MainForm = () => {
             </Button>
           </Grid>
         </Grid>
+        {updateType === CAR_UPDATE ?
+          <VehicleProvider>
             <CarSelectionTable
               classes={classes}
               token={token}
               multiSelect={true}
-          search={{ search }}
+              search={{search}}
               selected={selected}
               onSelect={handleSelect}
               onSelectAll={handleSelectAll}
-        />
+            /></VehicleProvider> :
+          <FleetProvider>
+            <FleetSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}/>
+          </FleetProvider>
+        }
       </form>
     </div>
   );
 };
 
 const ManifestDeployForm = () => (
-  <VehicleProvider>
   <ManifestsProvider>
     <CarUpdatesProvider>
-        <MainForm />
+      <MainForm/>
     </CarUpdatesProvider>
   </ManifestsProvider>
-  </VehicleProvider>
 );
 
 export default ManifestDeployForm;

src/components/Manifest/List/index.jsx

@@ -28,7 +28,9 @@ import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
+import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import DeleteConfirmation from "../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -57,7 +59,7 @@ const tableColumns = [
   },
 ];
 
-const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -66,6 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -103,6 +106,7 @@ const MainForm = () => {
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
+            manifest_type: TYPE_MANIFEST_SOFTWARE,
             search,
           },
           token
@@ -176,11 +180,19 @@ const MainForm = () => {
         );
       } else {
         return (
+          <div>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => onDelete(action.id)}>
                 {action.icon}
               </Link>
             </Tooltip>
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
+          </div>
         );
       }
     });

src/components/Manifest/Status/index.jsx

@@ -10,7 +10,9 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
+import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 
 import {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
-const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -38,6 +40,7 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {
+    cancelUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const sendCancel = async ({ id, vin }) => {
+    try {
+      await cancelUpdate(id, token);
+      setMessage(`Sent cancel for ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
             <TableCell align="center">Status</TableCell>
             <TableCell align="center">Created</TableCell>
             <TableCell align="center">Updated</TableCell>
+            <TableCell align="center"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
               <TableCell align="center">
                 {LocalDateTimeString(row.updated)}
               </TableCell>
+              <TableCell>
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
+              colSpan={6}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}

src/components/Routes/SiteRoutes.jsx

@@ -28,7 +28,6 @@ const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
 const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
-const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
 const PageNotFound = React.lazy(() => import("../404"));
 const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
@@ -137,14 +136,6 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
-        <AuthRoute
-          path="/package-create"
-          render={() => <ManifestCreate />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
         <AuthRoute
           path="/package-deploy/:manifest_id"
           render={() => <ManifestDeploy />}

src/services/__mocks__/updatesAPI.js

@@ -5,6 +5,12 @@ const updatesAPI = {
     return data;
   },
 
+  createFleetUpdates: async (data, token) => {
+    if (!data.id) data.id = 0;
+    data.id++;
+    return data;
+  },
+
   getCarUpdates: async (filter, token) => {
     return { data: [] };
   },
@@ -16,6 +22,10 @@ const updatesAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
 };
 
 export default updatesAPI;

src/services/__mocks__/vehiclesAPI.js

@@ -94,11 +94,10 @@ const vehiclesAPI = {
       data: [2021, 2022],
     };
   },
-  sendCommand: async (vin, command, parameters) => {
+  sendCommand: async (vin, command) => {
     return {
       vin,
       command,
-      parameters,
     };
   },
   updateVehicle: async (vin, vehicle) => {

src/services/commands.js

@@ -1,81 +1,26 @@
-const Locks = [
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "california_mode", label: "California mode"},
+  {value: "trunk_open", label: "Open trunk"},
+  {value: "trunk_close", label: "Close trunk "},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "alert", label: "Alert"},
+  {value: "temp_cabin", label: "Set cabin temperature"},
   {
-    value: "right_front",
+    value: "temp_cabin",
-    label: "Front right door",
+    label: "Set cabin temperature for period",
-  },{
+    params: {
-    value: "left_front",
+      data: ""
-    label: "Front left door",
-  },{
-    value: "right_rear",
-    label: "Rear right door",
-  },{
-    value: "left_rear",
-    label: "Rear left door",
-  },{
-    value: "trunk",
-    label: "Trunk",
     },
-];
-
-const Windows = [
-  {
-    value: "right_front",
-    label: "Front right window",
-  },{
-    value: "left_front",
-    label: "Front left window",
-  },{
-    value: "right_rear",
-    label: "Rear right window",
-  },{
-    value: "left_rear",
-    label: "Rear left window",
   },
-];
+  {value: "defrost", label: "Defrost"},
-
+  {value: "driver_seat_preheat", label: "Driver seat preheat"},
-const Commands = [{
+  {value: "passenger_seat_preheat", label: "Preheat passenger seat"},
-    value: "lock",
+  {value: "steering_wheel_preheat", label: "Preheat Steering wheel"},
-    label: "Lock door",
+  {value: "precondition", label: "Precondition"},
-    parameters: Locks,
+  {value: "charging", label: "Charging"}]
-  },
-  {
-    value: "unlock",
-    label: "Unlock door",
-    parameters: Locks,
-  },{
-    value: "open",
-    label: "Open window",
-    parameters: Windows,
-  },
-  {
-    value: "close",
-    label: "Close window",
-    parameters: Windows,
-  },
-  {
-    value: "ecu",
-    label: "ECU Versions",
-  },
-  {
-    value: "log",
-    label: "Log level",
-    parameters: [
-      {
-        value: "info",
-        label: "Info",
-      },
-      {
-        value: "debug",
-        label: "Debug",
-      },
-      {
-        value: "trace",
-        label: "Trace",
-      },
-    ],
-  },{
-    value: "headlights",
-    label: "Flash headlights",
-  }];
 
 export default Commands;

src/services/updatesAPI.js

@@ -7,9 +7,9 @@ import {
 
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
-const updatesAPI = {
+const createDeployUpdatesClosure = (suffix) => {
-  createCarUpdates: async (data, token) =>
+  return async (data, token) =>
-    fetch(`${API_ENDPOINT}/carupdate`, {
+    fetch(`${API_ENDPOINT}/${suffix}`, {
       method: "POST",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -18,7 +18,13 @@ const updatesAPI = {
       body: JSON.stringify(data),
     })
       .then(fetchRespHandler)
-      .catch(errorHandler),
+      .catch(errorHandler);
+};
+
+const updatesAPI = {
+  createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
+
+  createCarUpdates: createDeployUpdatesClosure("carupdate"),
 
   getCarUpdateLog: async (query, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/carupdateslog`, query);
@@ -71,6 +77,18 @@ const updatesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler);
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
 };
 
 export default updatesAPI;

src/services/vehiclesAPI.js

@@ -125,7 +125,7 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  sendCommand: async (vins, command, parameters, token) =>
+  sendCommand: async (vins, command, token) =>
     fetch(`${API_ENDPOINT}/vehiclecommand`, {
       method: "POST",
       headers: Object.assign(
@@ -134,8 +134,7 @@ const vehiclesAPI = {
       ),
       body: JSON.stringify({
         vins,
-        command,
+        ...command,
-        parameters,
       }),
     })
       .then(fetchRespHandler)

src/utils/manifest_types.js

@@ -0,0 +1,2 @@
+export const TYPE_MANIFEST_SOFTWARE = 1;
+export const TYPE_MANIFEST_CONFIG = 2;

src/utils/snapshot.js

@@ -1,4 +1,4 @@
-const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
+const rxStyles = /(mui|MuiBox-root|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {