Use swagger api for delete single and multiple Service Accounts (#3199)

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,7 +2179,7 @@ export class Api<
      */
     downloadMultipleObjects: (
       bucketName: string,
-      objectList: string[],
+      objectList: SelectedUsers,
       params: RequestParams = {},
     ) =>
       this.request<File, ApiError>({
@@ -2185,6 +2187,7 @@ export class Api<
         method: "POST",
         body: objectList,
         secure: true,
+        type: ContentType.Json,
         ...params,
       }),
 
@@ -3088,7 +3091,7 @@ export class Api<
      * @secure
      */
     deleteMultipleServiceAccounts: (
-      selectedSA: string[],
+      selectedSA: SelectedSAs,
       params: RequestParams = {},
     ) =>
       this.request<void, ApiError>({
@@ -3096,6 +3099,7 @@ export class Api<
         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,20 +35,25 @@ 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
@@ -55,7 +61,7 @@ const DeleteMultipleSAs = ({
       confirmText={"Delete"}
       isOpen={deleteOpen}
       titleIcon={<ConfirmDeleteIcon />}
-      isLoading={deleteLoading}
+      isLoading={loadingDelete}
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={