Merge branch 'release/0.0.3'

src/components/App/__snapshots__/App.test.js.snap

@@ -2434,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         Updated
                       </th>
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                        scope="col"
+                      />
                     </tr>
                   </thead>
                   <tbody
@@ -2472,6 +2476,26 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         7/12/2021 6:22:13 PM
                       </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body"
+                      >
+                        <a
+                          class=""
+                          href="/package-status/1"
+                          title="Send cancel for 1G1FP87S3GN100062"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                            />
+                          </svg>
+                        </a>
+                      </td>
                     </tr>
                   </tbody>
                   <tfoot
@@ -2482,7 +2506,7 @@ exports[`App Route /package-status authenticated 1`] = `
                     >
                       <td
                         class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                        colspan="5"
+                        colspan="6"
                       >
                         <div
                           class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
@@ -3287,6 +3311,7 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
+                      <div>
                         <a
                           class=""
                           href="/packages"
@@ -3304,6 +3329,8 @@ exports[`App Route /packages authenticated 1`] = `
                             />
                           </svg>
                         </a>
+                        <div />
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -7024,6 +7051,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                           </a>
                         </div>
                       </div>
+                      <div />
                     </div>
                   </div>
                 </div>

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/__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__/index.test.jsx.snap

@@ -175,6 +175,7 @@ exports[`CarStatus Render 1`] = `
                           VIN
                         </b>
                         : 
+                        TESTVIN1234567890
                       </p>
                     </div>
                     <div
@@ -182,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"
@@ -201,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"
@@ -217,6 +218,7 @@ exports[`CarStatus Render 1`] = `
                       </a>
                     </div>
                   </div>
+                  <div />
                 </div>
               </div>
             </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,6 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-
 const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
@@ -20,17 +19,16 @@ const validateDeployClosure = (data, propertyName, errPfx) => {
   if (!value || value.length === 0) {
     throw new Error(`${errPfx} are required`);
   }
-}
+};
 
 const validateDeployCarUpdates = (data) => {
-  return validateDeployClosure(data, 'vins', 'Cars')
+  return validateDeployClosure(data, "vins", "Cars");
 };
 
 const validateDeployFleetUpdates = (data) => {
-  return validateDeployClosure(data, 'fleet_names', 'Fleets')
+  return validateDeployClosure(data, "fleet_names", "Fleets");
 };
 
-
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -68,7 +66,7 @@ export const CarUpdatesProvider = ({ children }) => {
     }
 
     return result;
-  }
+  };
 
   const getCarUpdates = async (search, token) => {
     let result;
@@ -224,12 +222,28 @@ 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,

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/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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 import {
   Grid,
   Table,
@@ -15,24 +15,28 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
 
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
-import { useUserContext } from "../../../../Contexts/UserContext"
+import { useUserContext } from "../../../../Contexts/UserContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
+import {
+  FleetProvider,
+  useFleetContext,
+} from "../../../../Contexts/FleetContext";
 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 = [
   {
     id: "vin",
-    label: "VIN"
+    label: "VIN",
   },
   {
     id: "",
-    label: "Actions"
+    label: "Actions",
-  }
+  },
 ];
 
 const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
@@ -43,10 +47,21 @@ const MainForm = ({ name }) => {
   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 {
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+    fleetVehicles,
+    totalFleetVehicles,
+    getFleetVehicles,
+    deleteFleetVehicle,
+  } = useFleetContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+  } = useUserContext();
 
   const handleSearch = (query) => {
     setSearch(query);
@@ -103,7 +118,7 @@ const MainForm = ({ name }) => {
   const onDelete = async (vin) => {
     try {
       await deleteFleetVehicle(name, { vin: vin }, token);
-      setMessage(`Deleted ${vin}`)
+      setMessage(`Deleted ${vin}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -116,8 +131,8 @@ const MainForm = ({ name }) => {
       actions.push({
         tip: `Delete "${vin}"`,
         id: vin,
-        icon: <DeleteIcon aria-label={`Delete ${vin}`} />
+        icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
-      })
+      });
     }
     if (actions.length === 0) return ["No actions"];
 
@@ -132,11 +147,19 @@ 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>
         );
       }
     });
@@ -146,12 +169,15 @@ const MainForm = ({ name }) => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
+          <Link
+            to={`/fleet/${name}/vehicle-add`}
+            className={classes.labelInline}
+          >
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>
@@ -163,7 +189,7 @@ const MainForm = ({ name }) => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {fleetVehicles.map(vin => (
+          {fleetVehicles.map((vin) => (
             <TableRow key={vin}>
               <TableCell align="center">
                 <Link to={`/vehicle-status/${vin}`}>{vin}</Link>
@@ -190,7 +216,7 @@ const MainForm = ({ name }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div >
+    </div>
   );
 };
 

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

@@ -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/Manifest/List/index.jsx

@@ -30,6 +30,7 @@ import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
 import { useLocalStorage } from "../../useLocalStorage";
 import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import DeleteConfirmation from "../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -67,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();
@@ -178,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/services/__mocks__/updatesAPI.js

@@ -22,6 +22,10 @@ const updatesAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
 };
 
 export default updatesAPI;

src/services/updatesAPI.js

@@ -8,7 +8,8 @@ import {
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
 const createDeployUpdatesClosure = (suffix) => {
-  return async (data, token) =>   fetch(`${API_ENDPOINT}/${suffix}`, {
+  return async (data, token) =>
+    fetch(`${API_ENDPOINT}/${suffix}`, {
       method: "POST",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -17,8 +18,8 @@ const createDeployUpdatesClosure = (suffix) => {
       body: JSON.stringify(data),
     })
       .then(fetchRespHandler)
-    .catch(errorHandler)
+      .catch(errorHandler);
-}
+};
 
 const updatesAPI = {
   createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
@@ -76,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;