CEC-4523: Add bulk archive support (#379)

* CEC-4523: add archive endpoint and action

src/components/Manifest/List/index.jsx

@@ -21,7 +21,6 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import EditIcon from "@material-ui/icons/Edit";
-import { useArchiveManifests } from "../../../hooks";
 import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { TYPE_MANIFEST_AFTERSALES, TYPE_MANIFEST_CONFIG, TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
@@ -40,6 +39,8 @@ import DeleteConfirmation from "../../DeleteConfirmation";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
+import { useUpdateManifest } from "../../../hooks";
+import GeneralConfirmation from "../../GeneralConfirmation";
 
 const tableColumns = [
   {
@@ -114,10 +115,10 @@ const MainForm = () => {
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
   const [active, setActive] = useLocalStorage("DEPLOYMENT_TAB_TOGGLE", "software");
-  const [selected, setSelected] = useState([]);
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deleteRowName, setDeleteRowName] = useState("");
+  const [showArchiveModal, setShowArchiveModal] = useState(false);
+  const [archiveLabel, setArchiveLabel] = useState("Archive");
 
   const { getManifests, manifests, totalManifests } =
     useManifestsContext();
@@ -129,7 +130,13 @@ const MainForm = () => {
     groups,
     providers,
   } = useUserContext();
-  const { archive } = useArchiveManifests(token);
+  const {
+    remove,
+    archive,
+    updateManifestIds,
+    setUpdateManifestIds,
+    setMakeActive,
+  } = useUpdateManifest(token);
 
   const sortHandler = (event, property) => {
     if (property === orderBy) {
@@ -227,7 +234,11 @@ const MainForm = () => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageIndex, pageSize, token, orderBy, order, search, active]);
+  }, [pageIndex, pageSize, token, orderBy, order, search, active, updateManifestIds]);
+
+  useEffect(() => {
+    setUpdateManifestIds([]);
+  }, [active, setUpdateManifestIds]);
 
   const handleChangePageIndex = (_event, newIndex) => {
     setPageIndex(newIndex);
@@ -245,20 +256,28 @@ const MainForm = () => {
 
   const handleActiveChange = (event, newAlignment) => {
     if (newAlignment !== null) {
-      setActive(newAlignment)
+      setActive(newAlignment);
+      setMakeActive(newAlignment === 'archived');
+      setArchiveLabel(() => {
+        if (newAlignment === "archived") {
+          return "Activate";
+        }
+
+        return "Archive";
+      });
     }
   }
 
   const handleSelectAll = () => {
-    setSelected((selected) => selected.length ? [] : manifests);
+    setUpdateManifestIds((selected) => selected.length ? [] : manifests.map((manifest) => manifest.id));
   };
 
   const handleSelect = (event, manifest) => {
-    setSelected((selected) => {
-      if (event.target.checked && selected.find(({ id }) => id === manifest.id)) {
+    setUpdateManifestIds((selected) => {
+      if (event.target.checked && selected.find((id) => id === manifest.id)) {
         return selected;
       } else if (event.target.checked) {
-        return [...selected, manifest];
+        return [...selected, manifest.id];
       }
       return selected.filter(({ id }) => id !== manifest.id);
     });
@@ -269,11 +288,12 @@ const MainForm = () => {
     setShowDeleteModal(true);
   };
 
-  const onDelete = async () => {
+  const onArchive = async () => {
     try {
-      await archive(selected.map((manifest) => manifest.id))
-        .then(({ summary }) => {
-          setMessage(summary);
+      await archive()
+        .then(({ message }) => {
+          setUpdateManifestIds([]);
+          setMessage(message);
         });
     } catch (e) {
       setMessage(e.message);
@@ -281,12 +301,18 @@ const MainForm = () => {
     }
   };
 
-  useEffect(() => {
-    setDeleteRowName(() => selected
-      .map((manifest) => `${manifest.name} ${manifest.version}`)
-      .join(", ")
-    );
-  }, [selected]);
+  const onDelete = async () => {
+    try {
+      await remove()
+        .then(({ summary }) => {
+          setUpdateManifestIds([]);
+          setMessage(summary);
+        });
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
 
   const Actions = (row) => {
     let actions = [];
@@ -372,9 +398,9 @@ const MainForm = () => {
           <DropDownButton
             actions={[
               {
-                name: "Archive",
-                trigger: () => setShowDeleteModal(true),
-                disabled: !selected.length,
+                name: archiveLabel,
+                trigger: () => setShowArchiveModal(true),
+                disabled: !updateManifestIds.length || active === "all",
               }
             ]}
           />
@@ -389,13 +415,13 @@ const MainForm = () => {
           onSortRequest={sortHandler}
           multiSelect
           onSelectAll={handleSelectAll}
-          selectCount={selected ? selected.length : 0}
+          selectCount={updateManifestIds ? updateManifestIds.length : 0}
           rowCount={manifests ? manifests.length : 0}
         />
         <TableBody>
           {manifests.map((row) => {
-            const isSelected = selected
-              ? !!selected.find(({ id }) => id === row.id)
+            const isSelected = updateManifestIds
+              ? !!updateManifestIds.find((id) => id === row.id)
               : false;
             return (
               <TableRow key={row.id}>
@@ -457,11 +483,18 @@ const MainForm = () => {
         </TableFooter>
       </Table>
       <DeleteConfirmation
-        message={deleteRowName}
+        message={`${updateManifestIds.length} records.`}
         open={showDeleteModal}
         close={() => setShowDeleteModal(false)}
         deleteFunction={() => onDelete()}
       />
+      <GeneralConfirmation
+        title={`${archiveLabel} Resource?`}
+        message={`${archiveLabel} ${updateManifestIds.length} records.`}
+        open={showArchiveModal}
+        close={() => setShowArchiveModal(false)}
+        actionFunction={() => onArchive()}
+      />
     </div>
   );
 };