CEC-4674: add bulk cancel updates (#386)

* add bulk cancel updates

* add permission check

* remove unused import

* make trigger multi-line

src/components/Manifest/Toolbar/actions/Cancel.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.cancelCarUpdate(id, token)
+            .then((response) => {
+              if (response.error) {
+                errorCount += 1;
+                setMessage(`${progressMessage} ${response.error}: ${response.message}`);
+              } else {
+                setMessage(`${progressMessage} Canceled 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 canceled ${completeMessage} updates.`);
+          resolve(responses);
+        });
+      });
+    },
+  }));
+
+  return (
+    <div>
+      <p>
+        You are canceling the following updates: {idCSV}.
+      </p>
+    </div>
+  );
+});