Enabled Delete selected version functionality (#1731)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

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

@@ -14,7 +14,7 @@
 // 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 React, { useState, Fragment } from "react";
 import { connect } from "react-redux";
 import { DialogContentText } from "@mui/material";
 import { setErrorSnackMessage } from "../../../../../../actions";
@@ -32,6 +32,7 @@ interface IDeleteObjectProps {
   selectedBucket: string;
   setErrorSnackMessage: typeof setErrorSnackMessage;
   versioning: boolean;
+  selectedVersion?: string;
 }
 
 const DeleteObject = ({
@@ -41,6 +42,7 @@ const DeleteObject = ({
   selectedObject,
   setErrorSnackMessage,
   versioning,
+  selectedVersion = "",
 }: IDeleteObjectProps) => {
   const onDelSuccess = () => closeDeleteModalAndRefresh(true);
   const onDelError = (err: ErrorResponseHandler) => setErrorSnackMessage(err);
@@ -57,7 +59,11 @@ const DeleteObject = ({
     const recursive = decodedSelectedObject.endsWith("/");
     invokeDeleteApi(
       "DELETE",
-      `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObject}&recursive=${recursive}&all_versions=${deleteVersions}`
+      `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObject}${
+        selectedVersion !== ""
+          ? `&version_id=${selectedVersion}`
+          : `&recursive=${recursive}&all_versions=${deleteVersions}`
+      }`
     );
   };
 
@@ -72,9 +78,22 @@ const DeleteObject = ({
       onClose={onClose}
       confirmationContent={
         <DialogContentText>
-          Are you sure you want to delete:{" "}
-          <b>{decodeFileName(selectedObject)}</b>? <br />
-          {versioning && (
+          Are you sure you want to delete: <br />
+          <b>{decodeFileName(selectedObject)}</b>{" "}
+          {selectedVersion !== "" ? (
+            <Fragment>
+              <br />
+              <br />
+              Version ID:
+              <br />
+              <strong>{selectedVersion}</strong>
+            </Fragment>
+          ) : (
+            ""
+          )}
+          ? <br />
+          <br />
+          {versioning && selectedVersion === "" && (
             <FormSwitchWrapper
               label={"Delete All Versions"}
               indicatorLabels={["Yes", "No"]}

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

@@ -46,7 +46,9 @@ import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions
 import {
   completeObject,
   setLoadingObjectInfo,
+  setLoadingVersions,
   setNewObject,
+  setSelectedVersion,
   setVersionsModeEnabled,
   updateProgress,
 } from "../../../../ObjectBrowser/actions";
@@ -132,6 +134,8 @@ interface IObjectDetailPanelProps {
   completeObject: typeof completeObject;
   setVersionsModeEnabled: typeof setVersionsModeEnabled;
   setLoadingObjectInfo: typeof setLoadingObjectInfo;
+  setLoadingVersions: typeof setLoadingVersions;
+  setSelectedVersion: typeof setSelectedVersion;
 }
 
 const emptyFile: IFileInfo = {
@@ -162,6 +166,8 @@ const ObjectDetailPanel = ({
   setVersionsModeEnabled,
   loadingObjectInfo,
   setLoadingObjectInfo,
+  setLoadingVersions,
+  setSelectedVersion,
 }: IObjectDetailPanelProps) => {
   const [shareFileModalOpen, setShareFileModalOpen] = useState<boolean>(false);
   const [retentionModalOpen, setRetentionModalOpen] = useState<boolean>(false);
@@ -313,8 +319,12 @@ const ObjectDetailPanel = ({
   const closeDeleteModal = (closeAndReload: boolean) => {
     setDeleteOpen(false);
 
-    if (closeAndReload) {
+    if (closeAndReload && selectedVersion === "") {
       onClosePanel(true);
+    } else {
+      setLoadingVersions(true);
+      setSelectedVersion("");
+      setLoadingObjectInfo(true);
     }
   };
 
@@ -466,6 +476,7 @@ const ObjectDetailPanel = ({
           selectedObject={internalPaths}
           closeDeleteModalAndRefresh={closeDeleteModal}
           versioning={distributedSetup && versioning}
+          selectedVersion={selectedVersion}
         />
       )}
       {legalholdOpen && actualInfo && (
@@ -527,34 +538,32 @@ const ObjectDetailPanel = ({
       />
 
       <Grid item xs={12} sx={{ textAlign: "center" }}>
-        {selectedVersion === "" && (
-          <SecureComponent
-            resource={bucketName}
-            scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
-            matchAll
-            errorProps={{ disabled: true }}
+        <SecureComponent
+          resource={bucketName}
+          scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
+          matchAll
+          errorProps={{ disabled: true }}
+        >
+          <Button
+            startIcon={<DeleteIcon />}
+            color="secondary"
+            variant={"outlined"}
+            onClick={() => {
+              setDeleteOpen(true);
+            }}
+            disabled={selectedVersion === "" && actualInfo.is_delete_marker}
+            sx={{
+              width: "calc(100% - 44px)",
+              margin: "8px 0",
+              "& svg.min-icon": {
+                width: 14,
+                height: 14,
+              },
+            }}
           >
-            <Button
-              startIcon={<DeleteIcon />}
-              color="secondary"
-              variant={"outlined"}
-              onClick={() => {
-                setDeleteOpen(true);
-              }}
-              disabled={actualInfo.is_delete_marker || selectedVersion !== ""}
-              sx={{
-                width: "calc(100% - 44px)",
-                margin: "8px 0",
-                "& svg.min-icon": {
-                  width: 14,
-                  height: 14,
-                },
-              }}
-            >
-              Delete
-            </Button>
-          </SecureComponent>
-        )}
+            Delete{selectedVersion !== "" ? " version" : ""}
+          </Button>
+        </SecureComponent>
       </Grid>
       <Grid item xs={12} className={classes.headerForSection}>
         <span>Object Info</span>
@@ -687,6 +696,8 @@ const mapDispatchToProps = {
   completeObject,
   setVersionsModeEnabled,
   setLoadingObjectInfo,
+  setLoadingVersions,
+  setSelectedVersion,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);