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/BulkActions/actions/AddToFleet.jsx

@@ -1,74 +0,0 @@
-import { useState, forwardRef, useImperativeHandle } from "react";
-import {
-  FormControl,
-} from '@material-ui/core';
-import SearchSelect from "../../SearchSelect/SearchSelect";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import fleetsAPI from "../../../services/fleetsAPI";
-
-export default forwardRef(({
-  ids,
-  idCSV,
-}, ref) => {
-  const { setMessage } = useStatusContext();
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
-
-  const [fleet, setFleet] = useState(null);
-
-  useImperativeHandle(ref, () => ({
-    async submit() {
-      if (!fleet) {
-        setMessage(`Select a valid fleet, "${fleet}" is invalid.`);
-        return Promise.reject("Invalid Fleet");
-      }
-
-      return fleetsAPI
-        .addFleetVehicles(fleet, { vins: ids }, token)
-        .then((response) => {
-          if (response.error) {
-            setMessage(`${response.error}: ${response.message}`);
-          }
-
-          if (response.vins) {
-            setMessage(`Added ${response.vins.length} vehicles to ${fleet}.`);
-            return;
-          }
-
-          setMessage(`Something unexpected happened while attempting to add vehicles to fleet.`);
-        })
-        .catch((error) => {
-          setMessage(JSON.stringify(error));
-        });
-    },
-  }));
-
-  async function searchFleets(search) {
-    return fleetsAPI
-      .getFleets({
-        search,
-        limit: 10,
-        offset: 0,
-        order: `id desc`,
-      }, token)
-      .then(response => response.data.map(fleet => fleet.name))
-      .catch(() => []);
-  }
-
-  return (
-    <div>
-      <p>
-        You are adding the following VINs to a fleet: {idCSV}.
-      </p>
-      <FormControl variant="filled" fullWidth={true}>
-        <SearchSelect
-          label="Fleet"
-          value={fleet}
-          setValue={setFleet}
-          getData={searchFleets}
-          research={true}
-        />
-      </FormControl>
-    </div>
-  );
-});

src/components/BulkActions/actions/UpdateFleetVehicles.jsx

@@ -0,0 +1,117 @@
+import { useState, forwardRef, useImperativeHandle } from "react";
+import {
+  FormControl,
+} from '@material-ui/core';
+import SearchSelect from "../../SearchSelect/SearchSelect";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import fleetsAPI from "../../../services/fleetsAPI";
+
+export default forwardRef(({
+  ids,
+  idCSV,
+  fleet,
+}, ref) => {
+  const { setMessage } = useStatusContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+
+  const [fromFleet, setFromFleet] = useState(fleet);
+  const [toFleet, setToFleet] = useState();
+
+  useImperativeHandle(ref, () => ({
+    async submit() {
+      const errorTracking = [false, false];
+
+      if (toFleet) {
+        await fleetsAPI
+          .addFleetVehicles(toFleet, ids, token)
+          .then((response) => {
+            if (response.error) {
+              errorTracking[0] = true;
+              setMessage(`${response.error}: ${response.message}`);
+            }
+
+            if (response.vins) {
+              setMessage(`Added ${response.vins.length} vehicles to ${toFleet}.`);
+              return;
+            }
+
+            setMessage(`Something unexpected happened while attempting to add vehicles to fleet.`);
+          })
+          .catch((error) => {
+            setMessage(JSON.stringify(error));
+            return Promise.reject("Could not add vehicles to fleet.");
+          });
+      }
+
+      if (fromFleet) {
+        await fleetsAPI
+          .deleteFleetVehicles(fromFleet, ids, token)
+          .then((response) => {
+            if (response.error) {
+              errorTracking[1] = true;
+              setMessage(`${response.error}: ${response.message}`);
+            }
+
+            if (response.message === "Deleted") {
+              setMessage(`Removed ${ids.length} vehicles from ${fromFleet}.`);
+              return;
+            }
+          })
+          .catch((error) => {
+            setMessage(JSON.stringify(error));
+            return Promise.reject("Could not remove vehicles from fleet.");
+          });
+      }
+
+      return {
+        fromFleet,
+        fromVehicles: errorTracking[1] ? [] : ids,
+        toFleet,
+        toVehicles: errorTracking[0] ? [] : ids,
+      };
+    },
+  }));
+
+  async function searchFleets(search) {
+    return fleetsAPI
+      .getFleets({
+        search,
+        limit: 10,
+        offset: 0,
+        order: `id desc`,
+      }, token)
+      .then(response => response.data.map(fleet => fleet.name))
+      .catch(() => []);
+  }
+
+  return (
+    <div>
+      <p>
+        This operation will affect fleet membership for the following VINs: {idCSV}.
+      </p>
+      <p>
+        VINs will be removed from the "From Fleet" and added to the "To Fleet". If you would
+        like to only add or only remove the other field can be left blank.
+      </p>
+      <FormControl variant="filled" fullWidth={true}>
+        <SearchSelect
+          label="Remove From Fleet"
+          value={fromFleet}
+          setValue={setFromFleet}
+          getData={searchFleets}
+          research={true}
+        />
+      </FormControl>
+      <FormControl variant="filled" fullWidth={true}>
+        <SearchSelect
+          label="Add To Fleet"
+          value={toFleet}
+          setValue={setToFleet}
+          getData={searchFleets}
+          research={true}
+        />
+      </FormControl>
+    </div>
+  );
+});

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

@@ -10,7 +10,7 @@ import {
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
-import AddToFleet from "./AddToFleet";
+import UpdateFleetVehicles from "./UpdateFleetVehicles";
 import fleetsAPI from "../../../services/fleetsAPI";
 
 jest.mock('react', () => ({
@@ -23,22 +23,25 @@ jest.mock('@material-ui/core/FormControl', () => {
   return () => <div data-testid="mock-form-control" />;
 });
 
-describe("BulkActions/AddToFleet", () => {
+describe("BulkActions/UpdateFleetVehicles", () => {
   beforeAll(() => {
     setToken(TEST_AUTH_OBJECT_FISKER);
   });
 
   it("makes request to update the config of multiple vehicles", async () => {
     useState
+      .mockReturnValueOnce(["Default-Test", jest.fn()])
+      .mockReturnValueOnce([["Default-Test"], jest.fn()])
       .mockReturnValueOnce(["Default-Test", jest.fn()])
       .mockReturnValueOnce([["Default-Test"], jest.fn()]);
-    const api = jest.spyOn(fleetsAPI, "addFleetVehicles");
+    const add = jest.spyOn(fleetsAPI, "addFleetVehicles");
+    const remove = jest.spyOn(fleetsAPI, "deleteFleetVehicles");
     const ref = React.createRef();
 
     render(
       <StatusProvider>
         <UserProvider>
-          <AddToFleet
+          <UpdateFleetVehicles
             ref={ref}
             ids={["TESTVIN1234567890"]}
             idCSV=""
@@ -48,6 +51,7 @@ describe("BulkActions/AddToFleet", () => {
     );
 
     await act(async () => ref.current.submit());
-    expect(api).toHaveBeenCalled();
+    expect(add).toHaveBeenCalled();
+    expect(remove).toHaveBeenCalled();
   });
 });

src/components/BulkActions/index.jsx

@@ -8,17 +8,19 @@ import truncateCSV from "../../utils/truncateCSV";
 // Code-splitting individual actions
 // https://react.dev/reference/react/lazy
 const AddTags = lazy(() => import("./actions/AddTags"));
-const AddToFleet = lazy(() => import("./actions/AddToFleet"));
-const UpdateConfig = lazy(() => import("./actions/UpdateConfig"));
-const SendSMS = lazy(() => import("./actions/SendSMS"));
 const Cancel = lazy(() => import("./actions/Cancel"));
+const Diagnostic = lazy(() => import("./actions/Diagnostic"));
 const Redeploy = lazy(() => import("./actions/Redeploy"));
 const RemoteCommand = lazy(() => import("./actions/RemoteCommand"));
-const Diagnostic = lazy(() => import("./actions/Diagnostic"));
+const SendSMS = lazy(() => import("./actions/SendSMS"));
+const UpdateConfig = lazy(() => import("./actions/UpdateConfig"));
+const UpdateFleetVehicles = lazy(() => import("./actions/UpdateFleetVehicles"));
 
 export default function BulkActions({
   ids = [],
   actions = [],
+  fleet = undefined,
+  callback = (active, ids, context) => { }, // context is raised from the action itself
 }) {
   const [open, setOpen] = useState(false);
   const [title, setTitle] = useState("Action");
@@ -34,30 +36,18 @@ export default function BulkActions({
       disabled: false,
       trigger: () => setActive("addTags"),
     },
-    {
-      id: "addToFleet",
-      name: "Add To Fleet",
-      disabled: false,
-      trigger: () => setActive("addToFleet"),
-    },
-    {
-      id: "updateConfig",
-      name: "Update Config",
-      disabled: false,
-      trigger: () => setActive("updateConfig"),
-    },
-    {
-      id: "sms",
-      name: "Send SMS",
-      disabled: !hasRole(groups, Permissions.FiskerCreate, providers),
-      trigger: () => setActive("sms"),
-    },
     {
       id: "cancel",
       name: "Cancel Updates",
       disabled: false,
       trigger: () => setActive("cancel"),
     },
+    {
+      id: "diagnostic",
+      name: "Send Diagnostic",
+      disabled: !hasRole(groups, Permissions.CarDiagnostic, providers),
+      trigger: () => setActive("diagnostic"),
+    },
     {
       id: "redeploy",
       name: "Redploy Updates",
@@ -72,16 +62,29 @@ export default function BulkActions({
       embedded: true,
     },
     {
-      id: "diagnostic",
-      name: "Send Diagnostic",
-      disabled: !hasRole(groups, Permissions.CarDiagnostic, providers),
-      trigger: () => setActive("diagnostic"),
-    }
+      id: "sms",
+      name: "Send SMS",
+      disabled: !hasRole(groups, Permissions.FiskerCreate, providers),
+      trigger: () => setActive("sms"),
+    },
+    {
+      id: "updateConfig",
+      name: "Update Config",
+      disabled: false,
+      trigger: () => setActive("updateConfig"),
+    },
+    {
+      id: "updateFleetVehicles",
+      name: "Move Vehicles",
+      disabled: false,
+      trigger: () => setActive("updateFleetVehicles"),
+    },
   ].filter((action) => actions.includes(action.id));
 
   const payload = {
     ids,
     idCSV: (ids && ids.length > 0) ? truncateCSV(ids, 10) : "N/A",
+    fleet,
     ref: activeRef
   };
 
@@ -91,7 +94,7 @@ export default function BulkActions({
 
   const handleSubmit = () => {
     if (activeRef.current.submit) {
-      activeRef.current.submit();
+      activeRef.current.submit().then((error) => callback(active, ids, error));
     }
     handleClose();
   }
@@ -117,13 +120,13 @@ export default function BulkActions({
         <Suspense fallback={<div>Loading...</div>}>
           <section>
             {active === "addTags" && <AddTags {...payload} />}
-            {active === "addToFleet" && <AddToFleet {...payload} />}
-            {active === "updateConfig" && <UpdateConfig {...payload} />}
-            {active === "sms" && <SendSMS {...payload} />}
             {active === "cancel" && <Cancel {...payload} />}
+            {active === "diagnostic" && <Diagnostic {...payload} />}
             {active === "redeploy" && <Redeploy {...payload} />}
             {active === "remoteCommand" && <RemoteCommand {...payload} />}
-            {active === "diagnostic" && <Diagnostic {...payload} />}
+            {active === "sms" && <SendSMS {...payload} />}
+            {active === "updateConfig" && <UpdateConfig {...payload} />}
+            {active === "updateFleetVehicles" && <UpdateFleetVehicles {...payload} />}
           </section>
         </Suspense>
       </Modal>