CEC-4594: add bulk actions to fleet (#368)

* CEC-4594: add bulk actions to fleet

* add reject case

src/components/BulkActions/index.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import TransformModal from "../TransformModal";
+import DropDownButton from "../Controls/DropDownButton";
+import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import useAddTags from "./useAddTags";
+import useUpdateConfig from "./useUpdateConfig";
+
+const transformArrayToCSV = (arr) => arr.join(", ");
+
+export default function BulkActions({
+  vins = [],
+}) {
+  const [vinCSV, setVinCSV] = useState(transformArrayToCSV(vins));
+  const [active, setActive] = useState(null);
+  const actions = [
+    {
+      name: "Update Configs",
+      disabled: vins.length === 0,
+      trigger: () => setActive("updateConfig"),
+    },
+    {
+      name: "Add Tags",
+      disabled: vins.length === 0,
+      trigger: () => setActive("addTags"),
+    },
+  ];
+
+  const updateConfig = useUpdateConfig();
+  const addTags = useAddTags();
+
+  const { setMessage } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const handleUpdateConfig = () => {
+    updateConfig.submit(vins, token)
+      .then(() => {
+        setMessage(`${vins.length} vehicles updated.`);
+      })
+      .catch((error) => {
+        setMessage(error.message);
+      });
+  }
+
+  const handleAddTags = () => {
+    addTags.submit(vins, token)
+      .then(() => setMessage(`Added ${addTags.data.tags.value.length} tags to ${vins.length} vehicles.`))
+      .catch((error) => setMessage(error.message));
+  }
+
+  const handleClose = () => setActive(null);
+
+  useEffect(() => {
+    setVinCSV(transformArrayToCSV(vins));
+  }, [vins]);
+
+  return (
+    <>
+      <DropDownButton actions={actions} payload={[vins]} />
+      <TransformModal
+        title="Update Config"
+        body={`You are updating the config for the following VINs: ${vinCSV}.`}
+        close={handleClose}
+        open={active === "updateConfig"}
+        data={updateConfig.data}
+        setData={updateConfig.setData}
+        submit={handleUpdateConfig}
+      />
+      <TransformModal
+        title="Add Tags"
+        body={`You are adding tags for the following VINs: ${vinCSV}.`}
+        close={handleClose}
+        open={active === "addTags"}
+        data={addTags.data}
+        setData={addTags.setData}
+        submit={handleAddTags}
+      />
+    </>
+  );
+}

src/components/BulkActions/useAddTags.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import vehiclesAPI from "../../services/vehiclesAPI";
+
+export default function useAddTags() {
+  const [tags, setTags] = useState({
+    tags: {
+      label: "Tags",
+      type: "list.string",
+      value: [],
+    },
+  });
+
+  const submit = async (vins, token) => {
+    return vehiclesAPI.addTags(vins, tags.tags.value, token);
+  }
+
+  return {
+    data: tags,
+    setData: setTags,
+    submit,
+  };
+}

src/components/BulkActions/useUpdateConfig.js

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import TaskRunner from "../../utils/taskRunner";
+import vehiclesAPI from "../../services/vehiclesAPI";
+
+export default function useUpdateConfig() {
+  const [config, setConfig] = useState({
+    force: {
+      label: "Force Push",
+      type: "boolean",
+      value: false,
+    },
+  });
+
+  const submit = async (vins, token) => {
+    return new Promise((resolve, reject) => {
+      const taskRunner = new TaskRunner(5);
+
+      const task = (vin, isLast) => {
+        return async () => vehiclesAPI.updateConfig(vin, config.force.value, token)
+          .then((response) => {
+            if (isLast) {
+              if (response.error) {
+                reject(response);
+              }
+              resolve(response)
+            }
+          })
+          .catch((error) => reject(error));
+      }
+
+      vins.forEach((vin, index) => taskRunner.push(task(vin, index === vins.length - 1)));
+    });
+  }
+
+  return {
+    data: config,
+    setData: setConfig,
+    submit,
+  };
+}