Add Remove Tier feature (#3371)

web-app/src/api/consoleApi.ts

@@ -1761,7 +1761,7 @@ export class HttpClient<SecurityDataType = unknown> {
             : payloadFormatter(body),
       },
     ).then(async (response) => {
-      const r = response as HttpResponse<T, E>;
+      const r = response.clone() as HttpResponse<T, E>;
       r.data = null as unknown as T;
       r.error = null as unknown as E;
 
@@ -4542,6 +4542,23 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags Tiering
+     * @name RemoveTier
+     * @summary Remove Tier
+     * @request DELETE:/admin/tiers/{name}/remove
+     * @secure
+     */
+    removeTier: (name: string, params: RequestParams = {}) =>
+      this.request<void, ApiError>({
+        path: `/admin/tiers/${name}/remove`,
+        method: "DELETE",
+        secure: true,
+        ...params,
+      }),
+
     /**
      * No description
      *

web-app/src/screens/Console/Configurations/TiersConfiguration/DeleteTierConfirmModal.tsx

@@ -0,0 +1,79 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2024 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 from "react";
+import { ConfirmModalIcon } from "mds";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { setModalErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import ConfirmDialog from "screens/Console/Common/ModalWrapper/ConfirmDialog";
+
+interface ITierDeleteModal {
+  open: boolean;
+  closeModalAndRefresh: (refresh: boolean) => any;
+  tierName: string;
+}
+
+const DeleteTierConfirmModal = ({
+  open,
+  closeModalAndRefresh,
+  tierName,
+}: ITierDeleteModal) => {
+  const dispatch = useAppDispatch();
+
+  const deleteTier = () => {
+    if (tierName !== "") {
+      api.admin
+        .removeTier(tierName)
+        .then(() => {
+          closeModalAndRefresh(true);
+        })
+        .catch((err) => {
+          dispatch(setModalErrorSnackMessage(errorToHandler(err.error)));
+        });
+    } else {
+      setModalErrorSnackMessage({
+        errorMessage: "There was an error deleting the tier",
+        detailedError: "",
+      });
+    }
+  };
+
+  return (
+    <ConfirmDialog
+      title={`Delete Tier`}
+      confirmText={"Delete"}
+      isOpen={open}
+      titleIcon={<ConfirmModalIcon />}
+      isLoading={false}
+      onConfirm={() => deleteTier()}
+      onClose={() => closeModalAndRefresh(false)}
+      confirmationContent={
+        <React.Fragment>
+          Are you sure you want to delete the tier <strong>{tierName}</strong>?
+          <br />
+          <br />
+          <strong> Please note</strong>
+          <br /> Only empty tiers can be deleted. If the tier has had objects
+          transitioned into it, it cannot be removed.
+        </React.Fragment>
+      }
+    />
+  );
+};
+
+export default DeleteTierConfirmModal;

web-app/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx

@@ -41,6 +41,8 @@ import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
+  IAM_PERMISSIONS,
+  IAM_ROLES,
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
 import {
@@ -61,6 +63,7 @@ import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../../HelpMenu";
+import DeleteTierConfirmModal from "./DeleteTierConfirmModal";
 
 const UpdateTierCredentialsModal = withSuspense(
   React.lazy(() => import("./UpdateTierCredentialsModal")),
@@ -76,6 +79,9 @@ const ListTiersConfiguration = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [updateCredentialsOpen, setUpdateCredentialsOpen] =
     useState<boolean>(false);
+
+  const [deleteTierModalOpen, setDeleteTierModalOpen] =
+    useState<boolean>(false);
   const [selectedTier, setSelectedTier] = useState<Tier>({
     type: "unsupported",
     status: false,
@@ -261,6 +267,10 @@ const ListTiersConfiguration = () => {
   const closeTierCredentials = () => {
     setUpdateCredentialsOpen(false);
   };
+  const closeDeleteTier = () => {
+    setDeleteTierModalOpen(false);
+    setIsLoading(true);
+  };
 
   useEffect(() => {
     dispatch(setHelpName("list-tiers-configuration"));
@@ -276,6 +286,13 @@ const ListTiersConfiguration = () => {
           closeModalAndRefresh={closeTierCredentials}
         />
       )}
+      {deleteTierModalOpen && (
+        <DeleteTierConfirmModal
+          open={deleteTierModalOpen}
+          tierName={get(selectedTier, `${selectedTier.type}.name`, "")}
+          closeModalAndRefresh={closeDeleteTier}
+        />
+      )}
       <PageHeaderWrapper label="Tiers" actions={<HelpMenu />} />
 
       <PageLayout>
@@ -357,6 +374,18 @@ const ListTiersConfiguration = () => {
                                 setUpdateCredentialsOpen(true);
                               },
                             },
+                            {
+                              type: "delete",
+                              isDisabled: !hasPermission(
+                                "*",
+                                IAM_PERMISSIONS[IAM_ROLES.BUCKET_LIFECYCLE],
+                                true,
+                              ),
+                              onClick: (tierData: Tier) => {
+                                setSelectedTier(tierData);
+                                setDeleteTierModalOpen(true);
+                              },
+                            },
                           ]}
                           columns={[
                             {