CEC-5432: expand bulk-action to add, remove, and move vehicles between fleets (#484)

* battery indicator

* optimistic response remove from fleet

* update api to use params

* expand add to fleet to also remove

* typo

* update to post request

* CEC-5432: remove unused deps

* update mocks for delete

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

@@ -301,12 +301,6 @@ exports[`FleetVehiclesTable Render 1`] = `
                       </svg>
                     </span>
                   </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
                 </tr>
               </thead>
               <tbody
@@ -320,7 +314,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                 >
                   <td
                     class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                    colspan="9"
+                    colspan="8"
                   >
                     <div
                       class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

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

@@ -9,10 +9,8 @@ import {
   TablePagination,
   TableRow,
   Tooltip,
-  IconButton,
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
-import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
@@ -61,10 +59,6 @@ const tableColumns = [
     id: "park", // TODO: Update to 'gear' when we confirm each possible state
     label: "Park",
   },
-  {
-    id: "",
-    label: "Actions",
-  },
 ];
 
 const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
@@ -83,7 +77,7 @@ const MainForm = ({ name }) => {
     totalFleetVehicles,
     watchFleetVehicles,
     getFleetVehicles,
-    deleteFleetVehicle,
+    removeFleetVehiclesLocal,
   } = useFleetContext();
   const {
     token: {
@@ -113,6 +107,7 @@ const MainForm = ({ name }) => {
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
+        watchFleetVehicles.end();
       }
     })();
     return () => {
@@ -160,15 +155,12 @@ const MainForm = ({ name }) => {
       : fleetVehicles.map((vehicle) => vehicle.vin));
   }
 
-  const onDelete = async (vin) => {
-    try {
-      await deleteFleetVehicle(name, { vin: vin }, token);
-      setMessage(`Deleted ${vin}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
+  const bulkActionCallback = (action, _, context) => {
+    if (action === "updateFleetVehicles") {
+      const vinsToRemove = context.fromFleet === name ? context.fromVehicles : [];
+      removeFleetVehiclesLocal(vinsToRemove);
     }
-  };
+  }
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
@@ -179,7 +171,12 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={4}>
-          <BulkActions ids={selected} actions={["addTags", "sms", "updateConfig", "remoteCommand", "diagnostic"]} />
+          <BulkActions
+            actions={["updateFleetVehicles", "addTags", "sms", "updateConfig", "remoteCommand", "diagnostic"]}
+            ids={selected}
+            fleet={name}
+            callback={bulkActionCallback}
+          />
         </Grid>
         <Grid item md={7} align="right" className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
@@ -232,7 +229,7 @@ const MainForm = ({ name }) => {
                   <LinearProgress variant="determinate" value={car.car_update_progress} />
                 )}
               </TableCell>
-              <TableCell key={"cell5" + car.vin}>
+              <TableCell key={"cell5" + car.vin} align="left">
                 <Battery percent={car.charge} charge={car.charge_type} />
               </TableCell>
               <TableCell key={"cell6" + car.vin}>
@@ -241,13 +238,6 @@ const MainForm = ({ name }) => {
               <TableCell key={"cell7" + car.vin}>
                 {car.park ? "Yes" : "No"}
               </TableCell>
-              <TableCell key={"cell8" + car.vin} align="center">
-                <Tooltip key={`delete-${car.vin}`} title={`Delete "${car.vin}"`}>
-                  <IconButton onClick={() => onDelete(car.vin)}>
-                    <DeleteIcon aria-label={`Delete ${car.vin}`} />
-                  </IconButton>
-                </Tooltip>
-              </TableCell>
             </TableRow>
             )
           })}
@@ -256,7 +246,7 @@ const MainForm = ({ name }) => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={9}
+              colSpan={8}
               count={totalFleetVehicles}
               rowsPerPage={pageSize}
               page={pageIndex}

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

@@ -300,12 +300,6 @@ exports[`VehiclesTab Render 1`] = `
                   </svg>
                 </span>
               </th>
-              <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                scope="col"
-              >
-                Actions
-              </th>
             </tr>
           </thead>
           <tbody
@@ -319,7 +313,7 @@ exports[`VehiclesTab Render 1`] = `
             >
               <td
                 class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                colspan="9"
+                colspan="8"
               >
                 <div
                   class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"