Use swagger api for delete single and multiple Service Accounts

swagger.yml

@@ -1425,9 +1425,7 @@ paths:
           in: body
           required: true
           schema:
-            type: array
-            items:
-              type: string
+            $ref: "#/definitions/selectedSAs"
       responses:
         204:
           description: A successful response.
@@ -6196,3 +6194,8 @@ definitions:
         format: int64
     required:
       - exp
+
+  selectedSAs:
+    type: array
+    items:
+      type: string

web-app/src/api/consoleApi.ts

@@ -1537,6 +1537,8 @@ export interface MaxShareLinkExpResponse {
   exp: number;
 }
 
+export type SelectedSAs = string[];
+
 export type QueryParamsType = Record<string | number, any>;
 export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
 
@@ -2177,14 +2179,15 @@ export class Api<
      */
     downloadMultipleObjects: (
       bucketName: string,
-      objectList: string[],
+      objectList: SelectedUsers,
       params: RequestParams = {},
     ) =>
       this.request<File, ApiError>({
         path: `/buckets/${bucketName}/objects/download-multiple`,
         method: "POST",
         body: objectList,
         secure: true,
+        type: ContentType.Json,
         ...params,
       }),
 
@@ -3088,14 +3091,15 @@ export class Api<
      * @secure
      */
     deleteMultipleServiceAccounts: (
-      selectedSA: string[],
+      selectedSA: SelectedSAs,
       params: RequestParams = {},
     ) =>
       this.request<void, ApiError>({
         path: `/service-accounts/delete-multi`,
         method: "DELETE",
         body: selectedSA,
         secure: true,
+        type: ContentType.Json,
         ...params,
       }),
 

web-app/src/screens/Console/Account/DeleteServiceAccount.tsx

@@ -14,14 +14,15 @@
 // 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, { Fragment } from "react";
-import { ErrorResponseHandler } from "../../../common/types";
-import useApi from "../Common/Hooks/useApi";
+import React, { Fragment, useState } from "react";
 import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 import { ConfirmDeleteIcon } from "mds";
 import { encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { api } from "api";
+import { ApiError, HttpResponse } from "api/consoleApi";
+import { errorToHandler } from "api/errors";
 
 interface IDeleteServiceAccountProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -35,22 +36,27 @@ const DeleteServiceAccount = ({
   selectedServiceAccount,
 }: IDeleteServiceAccountProps) => {
   const dispatch = useAppDispatch();
-  const onDelSuccess = () => closeDeleteModalAndRefresh(true);
-  const onDelError = (err: ErrorResponseHandler) =>
-    dispatch(setErrorSnackMessage(err));
   const onClose = () => closeDeleteModalAndRefresh(false);
 
-  const [deleteLoading, invokeDeleteApi] = useApi(onDelSuccess, onDelError);
+  const [loadingDelete, setLoadingDelete] = useState<boolean>(false);
 
   if (!selectedServiceAccount) {
     return null;
   }
 
   const onConfirmDelete = () => {
-    invokeDeleteApi(
-      "DELETE",
-      `/api/v1/service-accounts/${encodeURLString(selectedServiceAccount)}`,
-    );
+    setLoadingDelete(true);
+    api.serviceAccounts
+      .deleteServiceAccount(encodeURLString(selectedServiceAccount))
+      .then((_) => {
+        closeDeleteModalAndRefresh(true);
+      })
+      .catch(async (res: HttpResponse<void, ApiError>) => {
+        const err = (await res.json()) as ApiError;
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
+        closeDeleteModalAndRefresh(false);
+      })
+      .finally(() => setLoadingDelete(false));
   };
 
   return (
@@ -59,7 +65,7 @@ const DeleteServiceAccount = ({
       confirmText={"Delete"}
       isOpen={deleteOpen}
       titleIcon={<ConfirmDeleteIcon />}
-      isLoading={deleteLoading}
+      isLoading={loadingDelete}
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={

web-app/src/screens/Console/Users/DeleteMultipleServiceAccounts.tsx

@@ -14,13 +14,14 @@
 // 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, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { ConfirmDeleteIcon } from "mds";
-import { ErrorResponseHandler } from "../../../common/types";
-import useApi from "../../../screens/Console/Common/Hooks/useApi";
 import ConfirmDialog from "../../../screens/Console/Common/ModalWrapper/ConfirmDialog";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { api } from "api";
+import { ApiError, HttpResponse } from "api/consoleApi";
+import { errorToHandler } from "api/errors";
 
 interface IDeleteMultiSAsProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -34,28 +35,33 @@ const DeleteMultipleSAs = ({
   selectedSAs,
 }: IDeleteMultiSAsProps) => {
   const dispatch = useAppDispatch();
-  const onDelSuccess = () => closeDeleteModalAndRefresh(true);
-  const onDelError = (err: ErrorResponseHandler) =>
-    dispatch(setErrorSnackMessage(err));
   const onClose = () => closeDeleteModalAndRefresh(false);
-  const [deleteLoading, invokeDeleteApi] = useApi(onDelSuccess, onDelError);
+  const [loadingDelete, setLoadingDelete] = useState<boolean>(false);
+
   if (!selectedSAs) {
     return null;
   }
   const onConfirmDelete = () => {
-    invokeDeleteApi(
-      "DELETE",
-      `/api/v1/service-accounts/delete-multi`,
-      selectedSAs,
-    );
+    setLoadingDelete(true);
+    api.serviceAccounts
+      .deleteMultipleServiceAccounts(selectedSAs)
+      .then((_) => {
+        closeDeleteModalAndRefresh(true);
+      })
+      .catch(async (res: HttpResponse<void, ApiError>) => {
+        const err = (await res.json()) as ApiError;
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
+        closeDeleteModalAndRefresh(false);
+      })
+      .finally(() => setLoadingDelete(false));
   };
   return (
     <ConfirmDialog
       title={`Delete Access Keys`}
       confirmText={"Delete"}
       isOpen={deleteOpen}
       titleIcon={<ConfirmDeleteIcon />}
-      isLoading={deleteLoading}
+      isLoading={loadingDelete}
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={