CEC-4920: Add redeploy bulk-action (#420)

* standardize bulk actions

* add redploy bulk-action

* add cases to disable redeploy

* update status check

* rename func

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

@@ -5348,45 +5348,7 @@ exports[`App Route /package-status authenticated 1`] = `
                   </div>
                   <div
                     class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-                  >
+                  />
-                    <div
-                      aria-label="choose action"
-                      class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
-                      role="group"
-                    >
-                      <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        Cancel Updates
-                      </button>
-                      <button
-                        aria-haspopup="menu"
-                        aria-label="select action"
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
-                        data-testid="dropdown-button-expand"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                          data-testid="ArrowDropDownIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="m7 10 5 5 5-5z"
-                          />
-                        </svg>
-                        <span
-                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                        />
-                      </button>
-                    </div>
-                  </div>
                 </div>
                 <table
                   class="MuiTable-root"

src/components/BulkActions/actions/AddTags.jsx

@@ -5,8 +5,8 @@ import TextInputList from "../../Controls/TextInputList";
 import vehiclesAPI from "../../../services/vehiclesAPI";
 
 export default forwardRef(({
-  vins,
+  ids,
-  vinCSV,
+  idCSV,
 }, ref) => {
   const { setMessage } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -16,7 +16,7 @@ export default forwardRef(({
   useImperativeHandle(ref, () => ({
     async submit() {
       return vehiclesAPI
-        .addTags(vins, tags, token)
+        .addTags(ids, tags, token)
         .then((data) => {
           if (data.error) {
             setMessage(`${data.error}: ${data.message}`);
@@ -32,7 +32,7 @@ export default forwardRef(({
   return (
     <div>
       <p>
-        You are adding tags to the following VINs: {vinCSV}.
+        You are adding tags to the following VINs: {idCSV}.
       </p>
       <TextInputList
         label="Tags"

src/components/BulkActions/actions/AddTags.test.jsx

@@ -38,8 +38,8 @@ describe("BulkActions/AddTags", () => {
         <UserProvider>
           <AddTags
             ref={ref}
-            vins={["TESTVIN123456789a"]}
+            ids={["TESTVIN123456789a"]}
-            vinCSV=""
+            idCSV=""
           />
         </UserProvider>
       </StatusProvider>

src/components/BulkActions/actions/AddToFleet.test.jsx

@@ -40,8 +40,8 @@ describe("BulkActions/AddToFleet", () => {
         <UserProvider>
           <AddToFleet
             ref={ref}
-            vins={["TESTVIN1234567890"]}
+            ids={["TESTVIN1234567890"]}
-            vinCSV=""
+            idCSV=""
           />
         </UserProvider>
       </StatusProvider>

src/components/BulkActions/actions/Cancel.jsx

@@ -1,8 +1,8 @@
 import { forwardRef, useImperativeHandle } from "react";
-import { useStatusContext } from "../../../Contexts/StatusContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
-import { useUserContext } from "../../../Contexts/UserContext";
+import { useUserContext } from "../../Contexts/UserContext";
-import TaskRunner from "../../../../utils/taskRunner";
+import TaskRunner from "../../../utils/taskRunner";
-import updatesAPI from "../../../../services/updatesAPI";
+import updatesAPI from "../../../services/updatesAPI";
 
 export default forwardRef(({
   ids,

src/components/BulkActions/actions/Cancel.test.jsx

@@ -1,17 +1,17 @@
-jest.mock("../../../Contexts/UserContext");
+jest.mock("../../Contexts/UserContext");
-jest.mock("../../../Contexts/StatusContext");
+jest.mock("../../Contexts/StatusContext");
-jest.mock("../../../../services/updatesAPI");
+jest.mock("../../../services/updatesAPI");
 
 import React from "react";
 import {
   render,
   act,
 } from "@testing-library/react";
-import { UserProvider, setToken } from "../../../Contexts/UserContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { StatusProvider } from "../../../Contexts/StatusContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import Cancel from "./Cancel";
-import updatesAPI from "../../../../services/updatesAPI";
+import updatesAPI from "../../../services/updatesAPI";
 
 describe("Manifest/Cancel", () => {
   beforeAll(() => {

src/components/BulkActions/actions/DeleteVehicles.jsx

@@ -5,8 +5,8 @@ import TaskRunner from "../../../utils/taskRunner";
 import vehiclesAPI from "../../../services/vehiclesAPI";
 
 export default forwardRef(({
-  vins,
+  ids,
-  vinCSV,
+  idCSV,
 }, ref) => {
   const { setMessage } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -14,11 +14,11 @@ export default forwardRef(({
   useImperativeHandle(ref, () => ({
     async submit() {
       return new Promise((resolve, reject) => {
-        const taskRunner = new TaskRunner(5, vins.length);
+        const taskRunner = new TaskRunner(5, ids.length);
         let errorCount = 0;
 
         const task = (vin, index) => {
-          const progressMessage = `${index + 1}/${vins.length}`;
+          const progressMessage = `${index + 1}/${ids.length}`;
           return async () => vehiclesAPI.deleteVehicle(vin, token)
             .then((response) => {
               if (response.error) {
@@ -32,12 +32,12 @@ export default forwardRef(({
             .catch((error) => reject(error));
         }
 
-        vins.forEach((vin, i) => {
+        ids.forEach((vin, i) => {
           taskRunner.push(task(vin, i));
         });
 
         taskRunner.onComplete().then((responses) => {
-          const completeMessage = `${vins.length - errorCount}/${vins.length}`;
+          const completeMessage = `${ids.length - errorCount}/${ids.length}`;
           setMessage(`Successfully deleted ${completeMessage} vehicles.`);
           resolve(responses);
         });
@@ -48,7 +48,7 @@ export default forwardRef(({
   return (
     <div>
       <p>
-        You are about to delete the following VINs: {vinCSV}.
+        You are about to delete the following VINs: {idCSV}.
       </p>
     </div>
   );

src/components/BulkActions/actions/DeleteVehicles.test.jsx

@@ -27,8 +27,8 @@ describe("BulkActions/DeleteVehicles", () => {
         <UserProvider>
           <DeleteVehicles
             ref={ref}
-            vins={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
+            ids={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
-            vinCSV=""
+            idCSV=""
           />
         </UserProvider>
       </StatusProvider>

src/components/BulkActions/actions/Redeploy.jsx

@@ -0,0 +1,55 @@
+import { forwardRef, useImperativeHandle } from "react";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import TaskRunner from "../../../utils/taskRunner";
+import updatesAPI from "../../../services/updatesAPI";
+
+export default forwardRef(({
+  ids,
+  idCSV,
+}, ref) => {
+  const { setMessage } = useStatusContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+
+  useImperativeHandle(ref, () => ({
+    async submit() {
+      return new Promise((resolve, reject) => {
+        const taskRunner = new TaskRunner(5, ids.length);
+        let errorCount = 0;
+
+        const task = (id, index) => {
+          const progressMessage = `${index + 1}/${ids.length}`;
+          return async () => updatesAPI.deployCarUpdate(id, token)
+            .then((response) => {
+              if (response.error) {
+                errorCount += 1;
+                setMessage(`${progressMessage} ${response.error}: ${response.message}`);
+              } else {
+                setMessage(`${progressMessage} Redeployed update ${id}`);
+              }
+              return response;
+            })
+            .catch((error) => reject(error));
+        }
+
+        ids.forEach((id, i) => {
+          taskRunner.push(task(id, i));
+        });
+
+        taskRunner.onComplete().then((responses) => {
+          const completeMessage = `${ids.length - errorCount}/${ids.length}`;
+          setMessage(`Successfully rededployed ${completeMessage} updates.`);
+          resolve(responses);
+        });
+      });
+    },
+  }));
+
+  return (
+    <div>
+      <p>
+        You are redeploying the following updates: {idCSV}.
+      </p>
+    </div>
+  );
+});

src/components/BulkActions/actions/Redeploy.test.jsx

@@ -0,0 +1,40 @@
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../../services/updatesAPI");
+
+import React from "react";
+import {
+  render,
+  act,
+} from "@testing-library/react";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import Redeploy from "./Redeploy";
+import updatesAPI from "../../../services/updatesAPI";
+
+describe("Manifest/Redeploy", () => {
+  beforeAll(() => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+  });
+
+  it("makes request to redeploy an update", async () => {
+    const api = jest.spyOn(updatesAPI, "deployCarUpdate");
+    const ref = React.createRef();
+
+    render(
+      <StatusProvider>
+        <UserProvider>
+          <Redeploy
+            ref={ref}
+            ids={["1", "2", "3"]}
+            idCSV=""
+          />
+        </UserProvider>
+      </StatusProvider>
+    );
+
+    await act(async () => ref.current.submit());
+    expect(api).toHaveBeenCalledTimes(3);
+  });
+});

src/components/BulkActions/actions/SendSMS.jsx

@@ -12,8 +12,8 @@ import smsAPI from "../../../services/smsAPI";
 import { SMS } from "../../Contexts/SMSContext";
 
 export default forwardRef(({
-  vins,
+  ids,
-  vinCSV,
+  idCSV,
 }, ref) => {
   const [shouldAwait, setShouldAwait] = useState(false);
   const [smsMessage, setSmsMessage] = useState("");
@@ -23,9 +23,9 @@ export default forwardRef(({
   useImperativeHandle(ref, () => ({
     async submit() {
       return new Promise((resolve) => {
-        const taskRunner = new TaskRunner(5, vins.length);
+        const taskRunner = new TaskRunner(5, ids.length);
 
-        vins.forEach((vin) => {
+        ids.forEach((vin) => {
           taskRunner.push(async () => {
 
             const { iccid } = await vehiclesAPI.getVehicle(vin, token);
@@ -47,7 +47,7 @@ export default forwardRef(({
 
         taskRunner.onComplete()
           .then((responses) => {
-            setMessage(`Sent ${vins.length} SMS messages`);
+            setMessage(`Sent ${ids.length} SMS messages`);
             resolve(responses);
           });
       });
@@ -57,7 +57,7 @@ export default forwardRef(({
   return (
     <div>
       <p>
-        You are about to send SMS to the following vins: {vinCSV}.
+        You are about to send SMS to the following vins: {idCSV}.
       </p>
       <TextField
         fullWidth

src/components/BulkActions/actions/SendSMS.test.jsx

@@ -53,8 +53,8 @@ describe("BulkActions/SendSMS", () => {
         <UserProvider>
           <SendSMS
             ref={ref}
-            vins={["3C4PDCBG0ET127145"]}
+            ids={["3C4PDCBG0ET127145"]}
-            vinCSV=""
+            idCSV=""
           />
         </UserProvider>
       </StatusProvider>

src/components/BulkActions/actions/UpdateConfig.jsx

@@ -9,8 +9,8 @@ import TaskRunner from "../../../utils/taskRunner";
 import vehiclesAPI from "../../../services/vehiclesAPI";
 
 export default forwardRef(({
-  vins,
+  ids,
-  vinCSV,
+  idCSV,
 }, ref) => {
   const { setMessage } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -20,11 +20,11 @@ export default forwardRef(({
   useImperativeHandle(ref, () => ({
     async submit() {
       return new Promise((resolve, reject) => {
-        const taskRunner = new TaskRunner(5, vins.length);
+        const taskRunner = new TaskRunner(5, ids.length);
         let errorCount = 0;
 
         const task = (vin, index) => {
-          const progressMessage = `${index + 1}/${vins.length}`;
+          const progressMessage = `${index + 1}/${ids.length}`;
           return async () => vehiclesAPI.updateConfig(vin, forcePush, token)
             .then((response) => {
               if (response.error) {
@@ -38,12 +38,12 @@ export default forwardRef(({
             .catch((error) => reject(error));
         }
 
-        vins.forEach((vin, i) => {
+        ids.forEach((vin, i) => {
           taskRunner.push(task(vin, i));
         });
 
         taskRunner.onComplete().then((responses) => {
-          const completeMessage = `${vins.length - errorCount}/${vins.length}`;
+          const completeMessage = `${ids.length - errorCount}/${ids.length}`;
           setMessage(`Successfully updated ${completeMessage} vehicles.`);
           resolve(responses);
         });
@@ -58,7 +58,7 @@ export default forwardRef(({
   return (
     <div>
       <p>
-        You are updating the config for the following VINs: {vinCSV}.
+        You are updating the config for the following VINs: {idCSV}.
       </p>
       <FormControlLabel
         label="Force Push"

src/components/BulkActions/actions/UpdateConfig.test.jsx

@@ -27,8 +27,8 @@ describe("BulkActions/UpdateConfig", () => {
         <UserProvider>
           <UpdateConfig
             ref={ref}
-            vins={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
+            ids={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
-            vinCSV=""
+            idCSV=""
           />
         </UserProvider>
       </StatusProvider>

src/components/BulkActions/index.jsx

@@ -11,11 +11,14 @@ const AddToFleet = lazy(() => import("./actions/AddToFleet"));
 const DeleteVehicles = lazy(() => import("./actions/DeleteVehicles"));
 const UpdateConfig = lazy(() => import("./actions/UpdateConfig"));
 const SendSMS = lazy(() => import("./actions/SendSMS"));
+const Cancel = lazy(() => import("./actions/Cancel"));
+const Redeploy = lazy(() => import("./actions/Redeploy"));
 
 export default function BulkActions({
-  vins = [],
+  ids = [],
   actions = [],
 }) {
+  const [open, setOpen] = useState(false);
   const [title, setTitle] = useState("Action");
   const [active, setActive] = useState(null);
   const activeRef = useRef();
@@ -52,16 +55,28 @@ export default function BulkActions({
       disabled: !hasRole(groups, Permissions.FiskerCreate, providers),
       trigger: () => setActive("sms"),
     },
+    {
+      id: "cancel",
+      name: "Cancel Updates",
+      disabled: false,
+      trigger: () => setActive("cancel"),
+    },
+    {
+      id: "redeploy",
+      name: "Redploy Updates",
+      disabled: false,
+      trigger: () => setActive("redeploy"),
+    }
   ].filter((action) => actions.includes(action.id));
 
   const payload = {
-    vins,
+    ids,
-    vinCSV: (vins && vins.length > 0) ? vins.join(", ") : "N/A",
+    idCSV: (ids && ids.length > 0) ? ids.join(", ") : "N/A",
     ref: activeRef
   };
 
   const handleClose = () => {
-    setActive(null);
+    setOpen(false).then(() => setActive(null));
   }
 
   const handleSubmit = () => {
@@ -73,14 +88,14 @@ export default function BulkActions({
     setTitle(filteredActions.find((action) => active === action.id)?.name || "Action");
   }, [active, filteredActions]);
 
-  if (!vins || vins.length === 0) return <></>;
+  if (!ids || ids.length === 0) return <></>;
 
   return (
     <>
-      <DropDownButton actions={filteredActions} />
+      <DropDownButton actions={filteredActions} onClick={() => setOpen(true)} />
       <Modal
         title={title}
-        open={!!active}
+        open={open}
         close={handleClose}
         submit={handleSubmit}
       >
@@ -91,6 +106,8 @@ export default function BulkActions({
             {active === "deleteVehicles" && <DeleteVehicles {...payload} />}
             {active === "updateConfig" && <UpdateConfig {...payload} />}
             {active === "sms" && <SendSMS {...payload} />}
+            {active === "cancel" && <Cancel {...payload} />}
+            {active === "redeploy" && <Redeploy {...payload} />}
           </section>
         </Suspense>
       </Modal>

src/components/BulkActions/index.test.jsx

@@ -28,7 +28,7 @@ describe("BulkActions", () => {
         <UserProvider>
           <BulkActions
             actions={["addTags"]}
-            vins={["TESTVIN1234567890"]}
+            ids={["TESTVIN1234567890"]}
           />
         </UserProvider>
       </StatusProvider>
@@ -45,7 +45,7 @@ describe("BulkActions", () => {
         <UserProvider>
           <BulkActions
             actions={["addTags"]}
-            vins={["TESTVIN1234567890"]}
+            ids={["TESTVIN1234567890"]}
           />
         </UserProvider>
       </StatusProvider>
@@ -63,7 +63,7 @@ describe("BulkActions", () => {
         <UserProvider>
           <BulkActions
             actions={["addTags", "someInvalidAction", "updateConfig"]}
-            vins={["TESTVIN1234567890"]}
+            ids={["TESTVIN1234567890"]}
           />
         </UserProvider>
       </StatusProvider>

src/components/Contexts/CarUpdatesContext.jsx

@@ -62,7 +62,7 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
       result = await api.deployCarUpdate(id, token);
       if (result.error)
-        throw new Error(`Cancel car update error. ${result.message}`);
+        throw new Error(`Retry car update error. ${result.message}`);
     } finally {
       setBusy(false);
     }

src/components/Controls/CarUpdatesTable/index.jsx

@@ -9,6 +9,7 @@ import {
   TableRow,
 } from "@material-ui/core";
 import CancelIcon from "@material-ui/icons/Cancel";
+import ReplayIcon from "@material-ui/icons/Replay";
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -71,6 +72,7 @@ const MainForm = ({ vin, token }) => {
   const [order, setOrder] = useState("desc");
   const {
     cancelUpdate,
+    deployUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -158,6 +160,31 @@ const MainForm = ({ vin, token }) => {
     }
   };
 
+  const sendDeploy = async (row) => {
+    try {
+      await deployUpdate(row.id, token);
+      setMessage(`Sent deploy for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  const isRedeployAvailable = (status) => {
+    switch (status) {
+      case "manifest_succeeded":
+      case "manifest_canceled":
+      case "manifest_error":
+      case "manifest_cancel_pending":
+      case "rollback_succeeded":
+      case "manifest_rejected":
+      case "rollback_failed":
+      case "cleanup_succeeded":
+        return true;
+      default:
+        return false;
+    }
+  }
+
   return (
     <Table>
       <TableHeaderSortable
@@ -208,6 +235,14 @@ const MainForm = ({ vin, token }) => {
                 >
                   <CancelIcon fontSize="inherit" />
                 </IconButton>
+                <IconButton
+                  onClick={() => sendDeploy(row)}
+                  aria-label={`Send deploy for ${row.vin}`}
+                  size="small"
+                  disabled={!isRedeployAvailable(row.status)}
+                >
+                  <ReplayIcon fontSize="inherit" />
+                </IconButton>
               </RoleWrap>
             </TableCell>
           </TableRow>

src/components/Controls/DropDownButton/index.jsx

@@ -11,12 +11,13 @@ import {
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
-const DropDownButton = ({ actions = [], payload = [] }) => {
+const DropDownButton = ({ actions = [], payload = [], onClick = () => { } }) => {
   const [open, setOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const anchorRef = useRef(null);
 
   const handleClick = () => {
+    onClick()
     actions[selectedIndex].trigger(...payload);
   };
 

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

@@ -145,47 +145,7 @@ exports[`FleetDetailsTab Render 1`] = `
               </div>
               <div
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
-              >
+              />
-                <div
-                  aria-label="choose action"
-                  class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
-                  role="group"
-                >
-                  <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-                    tabindex="0"
-                    type="button"
-                  >
-                    Add Tags
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
-                  </button>
-                  <button
-                    aria-haspopup="menu"
-                    aria-label="select action"
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
-                    data-testid="dropdown-button-expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                      data-testid="ArrowDropDownIcon"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="m7 10 5 5 5-5z"
-                      />
-                    </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
-                  </button>
-                </div>
-              </div>
             </div>
             <div />
           </div>

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

@@ -153,47 +153,7 @@ exports[`DetailsTab Render 1`] = `
                 </div>
                 <div
                   class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
-                >
+                />
-                  <div
-                    aria-label="choose action"
-                    class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
-                    role="group"
-                  >
-                    <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-                      tabindex="0"
-                      type="button"
-                    >
-                      Add Tags
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
-                    </button>
-                    <button
-                      aria-haspopup="menu"
-                      aria-label="select action"
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
-                      data-testid="dropdown-button-expand"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                        data-testid="ArrowDropDownIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="m7 10 5 5 5-5z"
-                        />
-                      </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
-                    </button>
-                  </div>
-                </div>
               </div>
               <div />
             </div>

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

@@ -241,47 +241,7 @@ exports[`FleetStatus Render 1`] = `
                       </div>
                       <div
                         class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
-                      >
+                      />
-                        <div
-                          aria-label="choose action"
-                          class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
-                          role="group"
-                        >
-                          <button
-                            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-                            tabindex="0"
-                            type="button"
-                          >
-                            Add Tags
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                            />
-                          </button>
-                          <button
-                            aria-haspopup="menu"
-                            aria-label="select action"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
-                            data-testid="dropdown-button-expand"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                              data-testid="ArrowDropDownIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="m7 10 5 5 5-5z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
                     </div>
                     <div />
                   </div>

src/components/Manifest/Status/index.jsx

@@ -30,7 +30,7 @@ import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 import ManifestDetails from "../Details";
 import TableHeaderSortable from "../../Table/HeaderSortable";
-import Toolbar from "../Toolbar";
+import BulkActions from "../../BulkActions";
 
 const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
@@ -191,7 +191,7 @@ const MainForm = () => {
           <ManifestDetails />
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}>
-          <Toolbar ids={ids} actions={["cancel"]} />
+          <BulkActions ids={ids} actions={["cancel", "redeploy"]} />
         </Grid>
       </Grid>
       <Table>

src/components/Manifest/Toolbar/__snapshots__/index.test.jsx.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Toolbar Render 1`] = `
-<div>
-  <div
-    data-testid="mocked-statusprovider"
-  >
-    <div
-      data-testid="mocked-userprovider"
-    >
-      <div
-        aria-label="choose action"
-        class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
-        role="group"
-      >
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-          tabindex="0"
-          type="button"
-        >
-          Cancel Updates
-          <span
-            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-          />
-        </button>
-        <button
-          aria-haspopup="menu"
-          aria-label="select action"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
-          data-testid="dropdown-button-expand"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="ArrowDropDownIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="m7 10 5 5 5-5z"
-            />
-          </svg>
-          <span
-            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

src/components/Manifest/Toolbar/index.jsx

@@ -1,71 +0,0 @@
-import { useEffect, useState, useRef, Suspense, lazy } from "react";
-import DropDownButton from "../../Controls/DropDownButton";
-import { Modal } from "../../BulkActions/Modal";
-import { useUserContext } from "../../Contexts/UserContext";
-import { Permissions, hasRole } from "../../../utils/roles";
-
-// Code-splitting individual actions
-// https://react.dev/reference/react/lazy
-const Cancel = lazy(() => import("./actions/Cancel"));
-
-export default function Toolbar({
-  ids = [],
-  actions = [],
-}) {
-  const [title, setTitle] = useState("Action");
-  const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(null);
-  const activeRef = useRef();
-  const { groups, providers } = useUserContext();
-
-  const hasAccess = hasRole(groups, Permissions.FiskerMagnaCreate, providers);
-
-  const filteredActions = [
-    {
-      id: "cancel",
-      name: "Cancel Updates",
-      disabled: !hasAccess || ids.length <= 0,
-      trigger: () => {
-        setOpen(true);
-        setActive("cancel");
-      },
-    },
-  ].filter((action) => actions.includes(action.id));
-
-  const payload = {
-    ids,
-    idCSV: ids.join(", "),
-    ref: activeRef
-  };
-
-  const handleClose = () => {
-    setOpen(false).then(() => setActive(null));
-  }
-
-  const handleSubmit = () => {
-    activeRef.current.submit();
-    handleClose();
-  }
-
-  useEffect(() => {
-    setTitle(filteredActions.find((action) => active === action.id)?.name || "Action");
-  }, [active, filteredActions]);
-
-  return (
-    <>
-      <DropDownButton actions={filteredActions} />
-      <Modal
-        title={title}
-        open={open}
-        close={handleClose}
-        submit={handleSubmit}
-      >
-        <Suspense fallback={<div>Loading...</div>}>
-          <section>
-            {active === "cancel" && <Cancel {...payload} />}
-          </section>
-        </Suspense>
-      </Modal>
-    </>
-  )
-}

src/components/Manifest/Toolbar/index.test.jsx

@@ -1,77 +0,0 @@
-jest.mock("../../Contexts/UserContext");
-jest.mock("../../Contexts/StatusContext");
-
-import React from "react";
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { StatusProvider } from "../../Contexts/StatusContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
-import Toolbar from ".";
-import addSnapshotSerializer from "../../../utils/snapshot";
-
-describe("Toolbar", () => {
-  beforeAll(() => {
-    setToken(TEST_AUTH_OBJECT_FISKER);
-    global.URL.createObjectURL = jest.fn();
-    global.URL.revokeObjectURL = jest.fn();
-    addSnapshotSerializer(expect);
-  });
-
-  it("Render", async () => {
-    const { container } = render(
-      <StatusProvider>
-        <UserProvider>
-          <Toolbar
-            actions={["cancel"]}
-            ids={[1]}
-          />
-        </UserProvider>
-      </StatusProvider>
-    );
-    await waitFor(() => {
-      /* render */
-    });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("opens a modal", async () => {
-    render(
-      <StatusProvider>
-        <UserProvider>
-          <Toolbar
-            actions={["cancel"]}
-            ids={[1]}
-          />
-        </UserProvider>
-      </StatusProvider>
-    );
-
-    const buttonEl = screen.getByText("Cancel Updates");
-    fireEvent.click(buttonEl);
-    const submitEl = screen.getByText("Submit");
-    expect(submitEl).toBeTruthy();
-  });
-
-  it("filters valid actions", async () => {
-    render(
-      <StatusProvider>
-        <UserProvider>
-          <Toolbar
-            actions={["cancel", "someInvalidAction"]}
-            ids={[1]}
-          />
-        </UserProvider>
-      </StatusProvider>
-    );
-
-    const dropdownBtn = screen.getByTestId("dropdown-button-expand");
-    fireEvent.click(dropdownBtn);
-    const dropdownOptions = screen.getAllByRole("menuitem");
-    expect(dropdownOptions.length).toBe(1);
-  });
-});

src/services/__mocks__/updatesAPI.js

@@ -27,6 +27,10 @@ const updatesAPI = {
     return { message: "OK" };
   },
 
+  deployCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
+
   getSUMSVersions: async (token) => {
     return {
       "data": ["2023.02.01.0.0.A", "2023.02.01.0.0.B"]