CEC-4524: add bulk delete action (#364)

* CEC-4524: add bulk delete action

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

@@ -12658,6 +12658,7 @@ exports[`App Route /vehicles authenticated 1`] = `
               <div
                 data-testid="transform-modal"
               />
+              <div />
             </div>
           </div>
         </main>

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

@@ -482,6 +482,7 @@ exports[`VehicleTable Render 1`] = `
                 </tfoot>
               </table>
             </div>
+            <div />
           </div>
         </div>
       </div>

src/components/Cars/List/index.jsx

@@ -17,6 +17,7 @@ import TransformModal from "../../TransformModal";
 import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 import TaskRunner from "../../../utils/taskRunner";
+import GeneralConfirmation from "../../GeneralConfirmation";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -93,6 +94,23 @@ const MainForm = () => {
       .catch((error) => setMessage(error.message));
   };
 
+  const handleDelete = async (fn) => {
+    const taskRunner = new TaskRunner(5);
+    const request = (vin) => {
+      return async () => {
+        return fn(vin, token)
+          .then(() => {
+            setMessage(`Deleted ${selectedVins.length} vehicles`);
+            setSelectedVins([]);
+          })
+          .catch((error) => {
+            setMessage(error.message);
+          })
+      }
+    }
+    selectedVins.forEach((vin) => taskRunner.push(request(vin)));
+  };
+
   const actions = [
     {
       name: "Update Configs",
@@ -103,7 +121,12 @@ const MainForm = () => {
       name: "Add Tags",
       disabled: selectedVins.length === 0,
       trigger: () => setActiveModal("addTags"),
-    }
+    },
+    {
+      name: "Delete",
+      disabled: selectedVins.length === 0,
+      trigger: () => setActiveModal("delete"),
+    },
   ];
 
   const handleOnlineHMI = (event) => {
@@ -187,6 +210,13 @@ const MainForm = () => {
             setData={setTagsToAdd}
             submit={() => handleAddTags(context.addTags)}
           />
+          <GeneralConfirmation
+            open={activeModal === "delete"}
+            close={() => setActiveModal(null)}
+            title="Delete"
+            message={`You are about to delete the following VINs: ${selectedVins.join(", ")}`}
+            actionFunction={() => handleDelete(context.deleteVehicle)}
+          />
         </>)}
       </VehicleConsumer>
     </div>