delete multiple objects

Author: Adam Stafford

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteMultipleObjects.tsx

@@ -0,0 +1,120 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  LinearProgress,
+} from "@material-ui/core";
+import { setErrorSnackMessage } from "../../../../../../actions";
+import api from "../../../../../../common/api";
+
+interface IDeleteObjectProps {
+  closeDeleteModalAndRefresh: (refresh: boolean) => void;
+  deleteOpen: boolean;
+  selectedObjects: string[];
+  selectedBucket: string;
+  setErrorSnackMessage: typeof setErrorSnackMessage;
+}
+
+const DeleteObject = ({
+  closeDeleteModalAndRefresh,
+  deleteOpen,
+  selectedBucket,
+  selectedObjects,
+  setErrorSnackMessage,
+}: IDeleteObjectProps) => {
+  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
+
+  const removeRecord = (i: number) => {
+    if (deleteLoading) {
+      return;
+    }
+    let recursive = false;
+    if (selectedObjects[i].endsWith("/")) {
+      recursive = true;
+    }
+    setDeleteLoading(true);
+    api
+      .invoke(
+        "DELETE",
+        `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObjects[i]}&recursive=${recursive}`
+      )
+      .then(() => {
+        setDeleteLoading(false);
+        closeDeleteModalAndRefresh(true);
+      })
+      .catch((err) => {
+        setDeleteLoading(false);
+        setErrorSnackMessage(err);
+      });
+  };
+
+  return (
+    <Dialog
+      open={deleteOpen}
+      onClose={() => {
+        closeDeleteModalAndRefresh(false);
+      }}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">Delete</DialogTitle>
+      <DialogContent>
+        {deleteLoading && <LinearProgress />}
+        <DialogContentText id="alert-dialog-description">
+          Are you sure you want to delete the selected objects?{" "}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            closeDeleteModalAndRefresh(false);
+          }}
+          color="primary"
+          disabled={deleteLoading}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            for (var i = 0; i < selectedObjects.length; i++) {
+              removeRecord(i);
+            }
+          }}
+          color="secondary"
+          disabled={deleteLoading}
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const mapDispatchToProps = {
+  setErrorSnackMessage,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+export default connector(DeleteObject);

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -75,6 +75,9 @@ import {
 } from "../../../../../../actions";
 import { BucketVersioning } from "../../../types";
 import RewindEnable from "./RewindEnable";
+import FileCopyIcon from "@material-ui/icons/FileCopy";
+import DeleteIcon from "@material-ui/icons/Delete";
+import DeleteMultipleObjects from "./DeleteMultipleObjects";
 
 const commonIcon = {
   backgroundRepeat: "no-repeat",
@@ -226,6 +229,7 @@ const ListObjects = ({
   const [rewind, setRewind] = useState<RewindObject[]>([]);
   const [loadingRewind, setLoadingRewind] = useState<boolean>(true);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
+  const [deleteMultipleOpen, setDeleteMultipleOpen] = useState<boolean>(false);
   const [createFolderOpen, setCreateFolderOpen] = useState<boolean>(false);
   const [selectedObject, setSelectedObject] = useState<string>("");
   const [selectedBucket, setSelectedBucket] = useState<string>("");
@@ -236,6 +240,7 @@ const ListObjects = ({
   const [loadingVersioning, setLoadingVersioning] = useState<boolean>(true);
   const [isVersioned, setIsVersioned] = useState<boolean>(false);
   const [rewindSelect, setRewindSelect] = useState<boolean>(false);
+  const [selectedObjects, setSelectedObjects] = useState<string[]>([]);
 
   const bucketName = match.params["bucket"];
 
@@ -451,6 +456,16 @@ const ListObjects = ({
     }
   };
 
+  const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => {
+    setDeleteMultipleOpen(false);
+
+    if (refresh) {
+      setSnackBarMessage(`Objects deleted successfully.`);
+      setSelectedObjects([]);
+      setLoading(true);
+    }
+  };
+
   const closeAddFolderModal = () => {
     setCreateFolderOpen(false);
   };
@@ -676,6 +691,25 @@ const ListObjects = ({
     }
   };
 
+  const selectListObjects = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetD = e.target;
+    const value = targetD.value;
+    const checked = targetD.checked;
+
+    let elements: string[] = [...selectedObjects]; // We clone the selectedBuckets array
+
+    if (checked) {
+      // If the user has checked this field we need to push this to selectedBucketsList
+      elements.push(value);
+    } else {
+      // User has unchecked this field, we need to remove it from the list
+      elements = elements.filter((element) => element !== value);
+    }
+    setSelectedObjects(elements);
+
+    return elements;
+  };
+
   const listModeColumns = [
     {
       label: "Name",
@@ -737,6 +771,14 @@ const ListObjects = ({
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
+      {deleteMultipleOpen && (
+        <DeleteMultipleObjects
+          deleteOpen={deleteMultipleOpen}
+          selectedBucket={selectedBucket}
+          selectedObjects={selectedObjects}
+          closeDeleteModalAndRefresh={closeDeleteMultipleModalAndRefresh}
+        />
+      )}
       {createFolderOpen && (
         <CreateFolderModal
           modalOpen={createFolderOpen}
@@ -837,6 +879,17 @@ const ListObjects = ({
                 style={{ display: "none" }}
               />
             </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<DeleteIcon />}
+              onClick={() => {
+                setDeleteMultipleOpen(true);
+              }}
+              disabled={selectedObjects.length === 0}
+            >
+              Delete Selected
+            </Button>
           </Grid>
           <Grid item xs={12}>
             <br />
@@ -851,6 +904,8 @@ const ListObjects = ({
               idField="name"
               records={rewindEnabled ? rewind : filteredRecords}
               customPaperHeight={classes.browsePaper}
+              selectedItems={selectedObjects}
+              onSelect={selectListObjects}
             />
           </Grid>
         </Grid>