Refactor to swagger ts API (#2860)

2023-06-13 16:00:56 -06:00
parent 0904f83627
commit aa9b73522e
25 changed files with 272 additions and 303 deletions
--- a/portal-ui/src/api/errors.ts
+++ b/portal-ui/src/api/errors.ts
@@ -29,7 +29,7 @@ export const errorToHandler = (e: Error): ErrorResponseHandler => {
  }
  return {
    statusCode: e.code,
-    errorMessage: e.message,
-    detailedError: e.detailedMessage,
+    errorMessage: e.message || "",
+    detailedError: e.detailedMessage || "",
  };
 };
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -29,11 +29,9 @@ import {
 } from "mds";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import api from "../../../common/api";
 import { stringSort } from "../../../utils/sortFunctions";
 import { actionsTray } from "../Common/FormComponents/common/styleLibrary";

-import { ErrorResponseHandler } from "../../../common/types";
 import ChangePasswordModal from "./ChangePasswordModal";
 import SearchBox from "../Common/SearchBox";
 import withSuspense from "../Common/Components/withSuspense";
@@ -56,6 +54,8 @@ import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import HelpMenu from "../HelpMenu";

 const DeleteServiceAccount = withSuspense(
@@ -94,16 +94,16 @@ const Account = () => {

  useEffect(() => {
    if (loading) {
-      api
-        .invoke("GET", `/api/v1/service-accounts`)
-        .then((res: string[]) => {
-          const serviceAccounts = res.sort(stringSort);
+      api.serviceAccounts
+        .listUserServiceAccounts()
+        .then((res) => {
+          const serviceAccounts = res.data.sort(stringSort);

          setLoading(false);
          setRecords(serviceAccounts);
        })
-        .catch((err: ErrorResponseHandler) => {
-          dispatch(setErrorSnackMessage(err));
+        .catch((err) => {
+          dispatch(setErrorSnackMessage(errorToHandler(err.error)));
          setLoading(false);
        });
    }
--- a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -35,8 +35,6 @@ import AddServiceAccountHelpBox from "./AddServiceAccountHelpBox";

 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { ErrorResponseHandler } from "../../../../src/common/types";
-import api from "../../../../src/common/api";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";

 import PanelTitle from "../Common/PanelTitle/PanelTitle";
@@ -45,7 +43,10 @@ import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { getRandomString } from "../../../common/utils";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import HelpMenu from "../HelpMenu";
+import { ContentType } from "api/consoleApi";

 const AddServiceAccount = () => {
  const dispatch = useAppDispatch();
@@ -67,32 +68,35 @@ const AddServiceAccount = () => {

  useEffect(() => {
    if (addSending) {
-      api
-        .invoke("POST", `/api/v1/service-account-credentials`, {
-          policy: policyJSON,
-          accessKey: accessKey,
-          secretKey: secretKey,
-        })
+      api.serviceAccountCredentials
+        .createServiceAccountCreds(
+          {
+            policy: policyJSON,
+            accessKey: accessKey,
+            secretKey: secretKey,
+          },
+          { type: ContentType.Json }
+        )
        .then((res) => {
          setAddSending(false);
          setNewServiceAccount({
-            accessKey: res.accessKey || "",
-            secretKey: res.secretKey || "",
+            accessKey: res.data.accessKey || "",
+            secretKey: res.data.secretKey || "",
            url: res.url || "",
          });
        })

-        .catch((err: ErrorResponseHandler) => {
+        .catch((err) => {
          setAddSending(false);
-          dispatch(setErrorSnackMessage(err));
+          dispatch(setErrorSnackMessage(errorToHandler(err.error)));
        });
    }
  }, [addSending, setAddSending, dispatch, policyJSON, accessKey, secretKey]);

  useEffect(() => {
    if (isRestrictedByPolicy) {
-      api.invoke("GET", `/api/v1/user/policy`).then((res: string) => {
-        setPolicyJSON(JSON.stringify(JSON.parse(res), null, 4));
+      api.user.getUserPolicy().then((res) => {
+        setPolicyJSON(JSON.stringify(JSON.parse(res.data), null, 4));
      });
    }
  }, [isRestrictedByPolicy]);
@@ -146,6 +150,7 @@ const AddServiceAccount = () => {
              noValidate
              autoComplete="off"
              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                e.preventDefault();
                addServiceAccount(e);
              }}
            >
--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -19,11 +19,11 @@ import { Button, ChangePasswordIcon, InputBox, Grid, FormLayout } from "mds";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import { LinearProgress } from "@mui/material";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
-import { ChangePasswordRequest } from "../Buckets/types";
-import { ErrorResponseHandler } from "../../../common/types";
-import api from "../../../common/api";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { api } from "api";
+import { AccountChangePasswordRequest } from "api/consoleApi";
+import { errorToHandler } from "api/errors";

 interface IChangePasswordProps {
  open: boolean;
@@ -67,13 +67,13 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
    }
    setLoading(true);

-    let request: ChangePasswordRequest = {
+    let request: AccountChangePasswordRequest = {
      current_secret_key: currentPassword,
      new_secret_key: newPassword,
    };

-    api
-      .invoke("POST", "/api/v1/account/change-password", request)
+    api.account
+      .accountChangePassword(request)
      .then(() => {
        setLoading(false);
        setNewPassword("");
@@ -81,12 +81,12 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
        setCurrentPassword("");
        closeModal();
      })
-      .catch((err: ErrorResponseHandler) => {
+      .catch((err) => {
        setLoading(false);
        setNewPassword("");
        setReNewPassword("");
        setCurrentPassword("");
-        dispatch(setModalErrorSnackMessage(err));
+        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
      });
  };

--- a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
@@ -29,12 +29,12 @@ import {
  modalStyleUtils,
  spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
-import { ChangeUserPasswordRequest } from "../Buckets/types";

-import { ErrorResponseHandler } from "../../../common/types";
-import api from "../../../common/api";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { api } from "api";
+import { ChangeUserPasswordRequest } from "api/consoleApi";
+import { errorToHandler } from "api/errors";

 const styles = (theme: Theme) =>
  createStyles({
@@ -89,19 +89,19 @@ const ChangeUserPassword = ({
      newSecretKey: newPassword,
    };

-    api
-      .invoke("POST", "/api/v1/account/change-user-password", request)
+    api.account
+      .changeUserPassword(request)
      .then((res) => {
        setLoading(false);
        setNewPassword("");
        setReNewPassword("");
        closeModal();
      })
-      .catch((err: ErrorResponseHandler) => {
+      .catch((err) => {
        setLoading(false);
        setNewPassword("");
        setReNewPassword("");
-        dispatch(setModalErrorSnackMessage(err));
+        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
      });
  };

--- a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
+++ b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
@@ -27,13 +27,13 @@ import {
  spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";

-import { ErrorResponseHandler } from "../../../common/types";
-import api from "../../../common/api";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import { encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { api } from "api";
+import { errorToHandler } from "api/errors";

 const styles = (theme: Theme) =>
  createStyles({
@@ -73,39 +73,30 @@ const ServiceAccountPolicy = ({
  const [policyDefinition, setPolicyDefinition] = useState<string>("");
  useEffect(() => {
    if (loading) {
-      api
-        .invoke(
-          "GET",
-          `/api/v1/service-accounts/${encodeURLString(
-            selectedAccessKey
-          )}/policy`
-        )
+      api.serviceAccounts
+        .getServiceAccountPolicy(encodeURLString(selectedAccessKey))
        .then((res) => {
          setLoading(false);
-          setPolicyDefinition(res);
+          setPolicyDefinition(res.data);
        })
-        .catch((err: ErrorResponseHandler) => {
+        .catch((err) => {
          setLoading(false);
-          dispatch(setModalErrorSnackMessage(err));
+          dispatch(setModalErrorSnackMessage(errorToHandler(err)));
        });
    }
  }, [loading, setLoading, dispatch, selectedAccessKey]);

  const setPolicy = (event: React.FormEvent, newPolicy: string) => {
    event.preventDefault();
-    api
-      .invoke(
-        "PUT",
-        `/api/v1/service-accounts/${encodeURLString(selectedAccessKey)}/policy`,
-        {
-          policy: newPolicy,
-        }
-      )
-      .then((res) => {
+    api.serviceAccounts
+      .setServiceAccountPolicy(encodeURLString(selectedAccessKey), {
+        policy: newPolicy,
+      })
+      .then(() => {
        closeModalAndRefresh();
      })
-      .catch((err: ErrorResponseHandler) => {
-        dispatch(setModalErrorSnackMessage(err));
+      .catch((err) => {
+        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
      });
  };

--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -22,10 +22,7 @@ import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";

 import { TabPanel } from "../../../shared/tabs";
-import { User } from "../../Users/types";
-import { ErrorResponseHandler } from "../../../../common/types";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import api from "../../../../common/api";
 import {
  CONSOLE_UI_RESOURCE,
  IAM_PAGES,
@@ -40,7 +37,9 @@ import { encodeURLString } from "../../../../common/utils";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
-import { Policy } from "../../../../api/consoleApi";
+import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
+import { api } from "api";
+import { errorToHandler } from "api/errors";

 function a11yProps(index: any) {
  return {
@@ -58,9 +57,9 @@ const AccessDetails = () => {

  const [curTab, setCurTab] = useState<number>(0);
  const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
-  const [bucketPolicy, setBucketPolicy] = useState<Policy[]>([]);
+  const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
  const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
-  const [bucketUsers, setBucketUsers] = useState<User[]>([]);
+  const [bucketUsers, setBucketUsers] = useState<ServiceAccounts>([]);

  const bucketName = params.bucketName || "";

@@ -117,14 +116,14 @@ const AccessDetails = () => {
  useEffect(() => {
    if (loadingUsers) {
      if (displayUsersList) {
-        api
-          .invoke("GET", `/api/v1/bucket-users/${bucketName}`)
-          .then((res: any) => {
-            setBucketUsers(res);
+        api.bucketUsers
+          .listUsersWithAccessToBucket(bucketName)
+          .then((res) => {
+            setBucketUsers(res.data);
            setLoadingUsers(false);
          })
-          .catch((err: ErrorResponseHandler) => {
-            dispatch(setErrorSnackMessage(err));
+          .catch((err) => {
+            dispatch(setErrorSnackMessage(errorToHandler(err)));
            setLoadingUsers(false);
          });
      } else {
@@ -141,14 +140,14 @@ const AccessDetails = () => {
  useEffect(() => {
    if (loadingPolicies) {
      if (displayPoliciesList) {
-        api
-          .invoke("GET", `/api/v1/bucket-policy/${bucketName}`)
-          .then((res: any) => {
-            setBucketPolicy(res.policies);
+        api.bucketPolicy
+          .listPoliciesWithBucket(bucketName)
+          .then((res) => {
+            setBucketPolicy(res.data.policies);
            setLoadingPolicies(false);
          })
-          .catch((err: ErrorResponseHandler) => {
-            dispatch(setErrorSnackMessage(err));
+          .catch((err) => {
+            dispatch(setErrorSnackMessage(errorToHandler(err)));
            setLoadingPolicies(false);
          });
      } else {
@@ -181,15 +180,17 @@ const AccessDetails = () => {
            resource={bucketName}
            errorProps={{ disabled: true }}
          >
-            <TableWrapper
-              noBackground={true}
-              itemActions={PolicyActions}
-              columns={[{ label: "Name", elementKey: "name" }]}
-              isLoading={loadingPolicies}
-              records={bucketPolicy}
-              entityName="Policies"
-              idField="name"
-            />
+            {bucketPolicy && (
+              <TableWrapper
+                noBackground={true}
+                itemActions={PolicyActions}
+                columns={[{ label: "Name", elementKey: "name" }]}
+                isLoading={loadingPolicies}
+                records={bucketPolicy}
+                entityName="Policies"
+                idField="name"
+              />
+            )}
          </SecureComponent>
        </TabPanel>

--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -20,9 +20,7 @@ import { useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import { AddIcon, Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
-import { ErrorResponseHandler } from "../../../../common/types";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import api from "../../../../common/api";
 import Grid from "@mui/material/Grid";
 import {
  actionsTray,
@@ -43,6 +41,9 @@ import makeStyles from "@mui/styles/makeStyles";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import { api } from "api";
+import { AccessRule as IAccessRule } from "api/consoleApi";
+import { errorToHandler } from "api/errors";

 const AddAccessRuleModal = withSuspense(
  React.lazy(() => import("./AddAccessRule"))
@@ -79,7 +80,7 @@ const AccessRule = () => {
  const loadingBucket = useSelector(selBucketDetailsLoading);

  const [loadingAccessRules, setLoadingAccessRules] = useState<boolean>(true);
-  const [accessRules, setAccessRules] = useState([]);
+  const [accessRules, setAccessRules] = useState<IAccessRule[] | undefined>([]);
  const [addAccessRuleOpen, setAddAccessRuleOpen] = useState<boolean>(false);
  const [deleteAccessRuleOpen, setDeleteAccessRuleOpen] =
    useState<boolean>(false);
@@ -138,14 +139,14 @@ const AccessRule = () => {
  useEffect(() => {
    if (loadingAccessRules) {
      if (displayAccessRules) {
-        api
-          .invoke("GET", `/api/v1/bucket/${bucketName}/access-rules`)
-          .then((res: any) => {
-            setAccessRules(res.accessRules);
+        api.bucket
+          .listAccessRulesWithBucket(bucketName)
+          .then((res) => {
+            setAccessRules(res.data.accessRules);
            setLoadingAccessRules(false);
          })
-          .catch((err: ErrorResponseHandler) => {
-            dispatch(setErrorSnackMessage(err));
+          .catch((err) => {
+            dispatch(setErrorSnackMessage(errorToHandler(err)));
            setLoadingAccessRules(false);
          });
      } else {
@@ -227,24 +228,26 @@ const AccessRule = () => {
          resource={bucketName}
          errorProps={{ disabled: true }}
        >
-          <TableWrapper
-            noBackground={true}
-            itemActions={AccessRuleActions}
-            columns={[
-              {
-                label: "Prefix",
-                elementKey: "prefix",
-                renderFunction: (prefix: string) => {
-                  return prefix || "/";
+          {accessRules && (
+            <TableWrapper
+              noBackground={true}
+              itemActions={AccessRuleActions}
+              columns={[
+                {
+                  label: "Prefix",
+                  elementKey: "prefix",
+                  renderFunction: (prefix: string) => {
+                    return prefix || "/";
+                  },
                },
-              },
-              { label: "Access", elementKey: "access" },
-            ]}
-            isLoading={loadingAccessRules}
-            records={accessRules}
-            entityName="Access Rules"
-            idField="prefix"
-          />
+                { label: "Access", elementKey: "access" },
+              ]}
+              isLoading={loadingAccessRules}
+              records={accessRules}
+              entityName="Access Rules"
+              idField="prefix"
+            />
+          )}
        </SecureComponent>
      </Grid>
    </Fragment>
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -27,14 +27,14 @@ import {
  modalStyleUtils,
 } from "../../Common/FormComponents/common/styleLibrary";

-import api from "../../../../common/api";
-import { ErrorResponseHandler } from "../../../../common/types";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import {
  setErrorSnackMessage,
  setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import { api } from "api";
+import { errorToHandler } from "api/errors";

 interface IAddAccessRule {
  classes: any;
@@ -80,8 +80,8 @@ const AddAccessRule = ({
  };

  const createProcess = () => {
-    api
-      .invoke("PUT", `/api/v1/bucket/${bucket}/access-rules`, {
+    api.bucket
+      .setAccessRuleWithBucket(bucket, {
        prefix: prefix,
        access: selectedAccess,
      })
@@ -89,8 +89,8 @@ const AddAccessRule = ({
        dispatch(setSnackBarMessage("Access Rule added successfully"));
        onClose();
      })
-      .catch((err: ErrorResponseHandler) => {
-        dispatch(setErrorSnackMessage(err));
+      .catch((err) => {
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
        onClose();
      });
  };
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
@@ -25,12 +25,12 @@ import {
  modalStyleUtils,
  spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { ErrorResponseHandler } from "../../../../common/types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import api from "../../../../common/api";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import { api } from "api";
+import { errorToHandler } from "api/errors";

 interface IBucketTagModal {
  modalOpen: boolean;
@@ -73,16 +73,16 @@ const AddBucketTagModal = ({
    newTag[newKey] = newLabel;
    const newTagList = { ...currentTags, ...newTag };

-    api
-      .invoke("PUT", `/api/v1/buckets/${bucketName}/tags`, {
+    api.buckets
+      .putBucketTags(bucketName, {
        tags: newTagList,
      })
-      .then((res: any) => {
+      .then(() => {
        setIsSending(false);
        onCloseAndUpdate(true);
      })
-      .catch((error: ErrorResponseHandler) => {
-        dispatch(setModalErrorSnackMessage(error));
+      .catch((error) => {
+        dispatch(setModalErrorSnackMessage(errorToHandler(error.error)));
        setIsSending(false);
      });
  };
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
@@ -21,14 +21,12 @@ import { Button, EventSubscriptionIcon } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import api from "../../../../common/api";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import Checkbox from "@mui/material/Checkbox";
 import Table from "@mui/material/Table";
-import { ArnList } from "../types";
 import {
  formFieldStyles,
  modalStyleUtils,
@@ -40,6 +38,8 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
 import AutocompleteWrapper from "../../Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import { api } from "api";
+import { NotificationEventType } from "api/consoleApi";

 const styles = (theme: Theme) =>
  createStyles({
@@ -70,8 +70,10 @@ const AddEvent = ({
  const [prefix, setPrefix] = useState<string>("");
  const [suffix, setSuffix] = useState<string>("");
  const [arn, setArn] = useState<string>("");
-  const [selectedEvents, setSelectedEvents] = useState<string[]>([]);
-  const [arnList, setArnList] = useState<string[]>([]);
+  const [selectedEvents, setSelectedEvents] = useState<NotificationEventType[]>(
+    []
+  );
+  const [arnList, setArnList] = useState<string[] | undefined>([]);

  const addRecord = (event: React.FormEvent) => {
    event.preventDefault();
@@ -79,8 +81,8 @@ const AddEvent = ({
      return;
    }
    setAddLoading(true);
-    api
-      .invoke("POST", `/api/v1/buckets/${selectedBucket}/events`, {
+    api.buckets
+      .createBucketEvent(selectedBucket, {
        configuration: {
          arn: arn,
          events: selectedEvents,
@@ -101,15 +103,13 @@ const AddEvent = ({

  const fetchArnList = useCallback(() => {
    setAddLoading(true);
-    api
-      .invoke("GET", `/api/v1/admin/arns`)
-      .then((res: ArnList) => {
-        let arns: string[] = [];
-        if (res.arns !== null) {
-          arns = res.arns;
+    api.admin
+      .arnList()
+      .then((res) => {
+        if (res.data.arns !== null) {
+          setArnList(res.data.arns);
        }
        setAddLoading(false);
-        setArnList(arns);
      })
      .catch((err: ErrorResponseHandler) => {
        setAddLoading(false);
@@ -122,17 +122,17 @@ const AddEvent = ({
  }, [fetchArnList]);

  const events = [
-    { label: "PUT - Object Uploaded", value: "put" },
-    { label: "GET - Object accessed", value: "get" },
-    { label: "DELETE - Object Deleted", value: "delete" },
+    { label: "PUT - Object Uploaded", value: NotificationEventType.Put },
+    { label: "GET - Object accessed", value: NotificationEventType.Get },
+    { label: "DELETE - Object Deleted", value: NotificationEventType.Delete },
  ];

  const handleClick = (
    event: React.MouseEvent<unknown> | ChangeEvent<unknown>,
-    name: string
+    name: NotificationEventType
  ) => {
    const selectedIndex = selectedEvents.indexOf(name);
-    let newSelected: string[] = [];
+    let newSelected: NotificationEventType[] = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selectedEvents, name);
@@ -149,7 +149,7 @@ const AddEvent = ({
    setSelectedEvents(newSelected);
  };

-  const arnValues = arnList.map((arnConstant) => ({
+  const arnValues = arnList?.map((arnConstant) => ({
    label: arnConstant,
    value: arnConstant,
  }));
@@ -185,7 +185,7 @@ const AddEvent = ({
                name="select-access-policy"
                label={"ARN"}
                value={arn}
-                options={arnValues}
+                options={arnValues || []}
              />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -31,14 +31,8 @@ import {
 } from "@mui/material";
 import Grid from "@mui/material/Grid";

-import {
-  ITierElement,
-  ITierResponse,
-} from "../../Configurations/TiersConfiguration/types";
-import { ErrorResponseHandler } from "../../../../common/types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import api from "../../../../common/api";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
@@ -52,7 +46,10 @@ import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMe
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { BucketVersioningInfo, ITiersDropDown } from "../types";
+import { ITiersDropDown } from "../types";
+import { api } from "api";
+import { BucketVersioningResponse, Tier } from "api/consoleApi";
+import { errorToHandler } from "api/errors";

 interface IReplicationModal {
  open: boolean;
@@ -84,12 +81,12 @@ const AddLifecycleModal = ({
  const [tiersList, setTiersList] = useState<ITiersDropDown[]>([]);
  const [addLoading, setAddLoading] = useState(false);
  const [versioningInfo, setVersioningInfo] =
-    useState<BucketVersioningInfo | null>(null);
+    useState<BucketVersioningResponse | null>(null);
  const [prefix, setPrefix] = useState("");
  const [tags, setTags] = useState<string>("");
  const [storageClass, setStorageClass] = useState("");

-  const [ilmType, setIlmType] = useState<string>("expiry");
+  const [ilmType, setIlmType] = useState<"expiry" | "transition">("expiry");
  const [targetVersion, setTargetVersion] = useState<"current" | "noncurrent">(
    "current"
  );
@@ -101,13 +98,13 @@ const AddLifecycleModal = ({

  useEffect(() => {
    if (loadingTiers) {
-      api
-        .invoke("GET", `/api/v1/admin/tiers`)
-        .then((res: ITierResponse) => {
-          const tiersList: ITierElement[] | null = get(res, "items", []);
+      api.admin
+        .tiersList()
+        .then((res) => {
+          const tiersList: Tier[] | null = get(res.data, "items", []);

          if (tiersList !== null && tiersList.length >= 1) {
-            const objList = tiersList.map((tier: ITierElement) => {
+            const objList = tiersList.map((tier: Tier) => {
              const tierType = tier.type;
              const value = get(tier, `${tierType}.name`, "");

@@ -121,7 +118,7 @@ const AddLifecycleModal = ({
          }
          setLoadingTiers(false);
        })
-        .catch((err: ErrorResponseHandler) => {
+        .catch(() => {
          setLoadingTiers(false);
        });
    }
@@ -140,14 +137,14 @@ const AddLifecycleModal = ({

  useEffect(() => {
    if (loadingVersioning && distributedSetup) {
-      api
-        .invoke("GET", `/api/v1/buckets/${bucketName}/versioning`)
-        .then((res: BucketVersioningInfo) => {
-          setVersioningInfo(res);
+      api.buckets
+        .getBucketVersioning(bucketName)
+        .then((res) => {
+          setVersioningInfo(res.data);
          setLoadingVersioning(false);
        })
-        .catch((err: ErrorResponseHandler) => {
-          dispatch(setModalErrorSnackMessage(err));
+        .catch((err) => {
+          dispatch(setModalErrorSnackMessage(errorToHandler(err)));
          setLoadingVersioning(false);
        });
    }
@@ -192,19 +189,15 @@ const AddLifecycleModal = ({
      ...rules,
    };

-    api
-      .invoke(
-        "POST",
-        `/api/v1/buckets/${bucketName}/lifecycle`,
-        lifecycleInsert
-      )
+    api.buckets
+      .addBucketLifecycle(bucketName, lifecycleInsert)
      .then(() => {
        setAddLoading(false);
        closeModalAndRefresh(true);
      })
-      .catch((err: ErrorResponseHandler) => {
+      .catch((err) => {
        setAddLoading(false);
-        dispatch(setModalErrorSnackMessage(err));
+        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
      });
  };

@@ -245,8 +238,8 @@ const AddLifecycleModal = ({
                      id="ilm_type"
                      name="ilm_type"
                      label="Type of lifecycle"
-                      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                        setIlmType(e.target.value as string);
+                      onChange={(e) => {
+                        setIlmType(e.target.value as "expiry" | "transition");
                      }}
                      selectorOptions={[
                        { value: "expiry", label: "Expiry" },
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -28,12 +28,10 @@ import {
  modalStyleUtils,
  spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { BucketReplicationRule, BulkReplicationResponse } from "../types";
+import { BucketReplicationRule } from "../types";

-import { ErrorResponseHandler } from "../../../../common/types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import api from "../../../../common/api";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
@@ -42,6 +40,8 @@ import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMe

 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import { api } from "api";
+import { errorToHandler } from "api/errors";

 interface IReplicationModal {
  open: boolean;
@@ -91,7 +91,9 @@ const AddReplicationModal = ({
  const [repDelete, setRepDelete] = useState<boolean>(true);
  const [metadataSync, setMetadataSync] = useState<boolean>(true);
  const [tags, setTags] = useState<string>("");
-  const [replicationMode, setReplicationMode] = useState<string>("async");
+  const [replicationMode, setReplicationMode] = useState<"async" | "sync">(
+    "async"
+  );
  const [bandwidthScalar, setBandwidthScalar] = useState<string>("100");
  const [bandwidthUnit, setBandwidthUnit] = useState<string>("Gi");
  const [healthCheck, setHealthCheck] = useState<string>("60");
@@ -146,12 +148,12 @@ const AddReplicationModal = ({
      replicateMetadata: metadataSync,
    };

-    api
-      .invoke("POST", "/api/v1/buckets-replication", remoteBucketsInfo)
-      .then((response: BulkReplicationResponse) => {
+    api.bucketsReplication
+      .setMultiBucketReplication(remoteBucketsInfo)
+      .then((res) => {
        setAddLoading(false);

-        const states = get(response, "replicationState", []);
+        const states = get(res.data, "replicationState", []);

        if (states.length > 0) {
          const itemVal = states[0];
@@ -179,9 +181,9 @@ const AddReplicationModal = ({
          })
        );
      })
-      .catch((err: ErrorResponseHandler) => {
+      .catch((err) => {
        setAddLoading(false);
-        dispatch(setModalErrorSnackMessage(err));
+        dispatch(setModalErrorSnackMessage(errorToHandler(err.error)));
      });
  };

@@ -292,7 +294,7 @@ const AddReplicationModal = ({
                id="replication_mode"
                name="replication_mode"
                onChange={(e: SelectChangeEvent<string>) => {
-                  setReplicationMode(e.target.value as string);
+                  setReplicationMode(e.target.value as "async" | "sync");
                }}
                label="Replication Mode"
                value={replicationMode}
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -54,10 +54,8 @@ import {
 import { decodeURLString, encodeURLString } from "../../../../common/utils";
 import { permissionItems } from "../ListBuckets/Objects/utils";
 import { setErrorSnackMessage } from "../../../../systemSlice";
-import api from "../../../../common/api";
-import { BucketObjectLocking, BucketVersioningInfo } from "../types";
-import { ErrorResponseHandler } from "../../../../common/types";
 import OBHeader from "../../ObjectBrowser/OBHeader";
+import { api } from "api";

 const styles = (theme: Theme) =>
  createStyles({
@@ -433,16 +431,16 @@ const BrowserHandler = () => {
  useEffect(() => {
    if (loadingVersioning && !anonymousMode) {
      if (displayListObjects) {
-        api
-          .invoke("GET", `/api/v1/buckets/${bucketName}/versioning`)
-          .then((res: BucketVersioningInfo) => {
-            dispatch(setIsVersioned(res));
+        api.buckets
+          .getBucketVersioning(bucketName)
+          .then((res) => {
+            dispatch(setIsVersioned(res.data));
            dispatch(setLoadingVersioning(false));
          })
-          .catch((err: ErrorResponseHandler) => {
+          .catch((err) => {
            console.error(
              "Error Getting Object Versioning Status: ",
-              err.detailedError
+              err.error.detailedMessage
            );
            dispatch(setLoadingVersioning(false));
          });
@@ -462,16 +460,16 @@ const BrowserHandler = () => {
  useEffect(() => {
    if (loadingLocking) {
      if (displayListObjects) {
-        api
-          .invoke("GET", `/api/v1/buckets/${bucketName}/object-locking`)
-          .then((res: BucketObjectLocking) => {
-            dispatch(setLockingEnabled(res.object_locking_enabled));
+        api.buckets
+          .getBucketObjectLockingStatus(bucketName)
+          .then((res) => {
+            dispatch(setLockingEnabled(res.data.object_locking_enabled));
            dispatch(setLoadingLocking(false));
          })
-          .catch((err: ErrorResponseHandler) => {
+          .catch((err) => {
            console.error(
              "Error Getting Object Locking Status: ",
-              err.detailedError
+              err.error.detailedMessage
            );
            dispatch(setLoadingLocking(false));
          });
@@ -482,29 +480,6 @@ const BrowserHandler = () => {
    }
  }, [bucketName, loadingLocking, dispatch, displayListObjects]);

-  useEffect(() => {
-    if (loadingLocking) {
-      if (displayListObjects) {
-        api
-          .invoke("GET", `/api/v1/buckets/${bucketName}/object-locking`)
-          .then((res: BucketObjectLocking) => {
-            dispatch(setLockingEnabled(res.object_locking_enabled));
-            setLoadingLocking(false);
-          })
-          .catch((err: ErrorResponseHandler) => {
-            console.error(
-              "Error Getting Object Locking Status: ",
-              err.detailedError
-            );
-            setLoadingLocking(false);
-          });
-      } else {
-        dispatch(resetMessages());
-        setLoadingLocking(false);
-      }
-    }
-  }, [bucketName, loadingLocking, dispatch, displayListObjects]);
-
  return (
    <Fragment>
      {!anonymousMode && <OBHeader bucketName={bucketName} />}
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -37,13 +37,10 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import api from "../../../../common/api";
-import { BucketInfo } from "../types";
 import {
  containerForHeader,
  searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { ErrorResponseHandler } from "../../../../common/types";

 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 import { Box } from "@mui/material";
@@ -78,6 +75,8 @@ import {
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import HelpMenu from "../../HelpMenu";

 const DeleteBucket = withSuspense(
@@ -158,15 +157,15 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {

  useEffect(() => {
    if (loadingBucket) {
-      api
-        .invoke("GET", `/api/v1/buckets/${bucketName}`)
-        .then((res: BucketInfo) => {
+      api.buckets
+        .bucketInfo(bucketName)
+        .then((res) => {
          dispatch(setBucketDetailsLoad(false));
-          dispatch(setBucketInfo(res));
+          dispatch(setBucketInfo(res.data));
        })
-        .catch((err: ErrorResponseHandler) => {
+        .catch((err) => {
          dispatch(setBucketDetailsLoad(false));
-          dispatch(setErrorSnackMessage(err));
+          dispatch(setErrorSnackMessage(errorToHandler(err)));
        });
    }
  }, [bucketName, loadingBucket, dispatch]);
@@ -269,7 +268,7 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
                  className={classes.capitalize}
                  style={{ fontWeight: 600, fontSize: 15 }}
                >
-                  {bucketInfo?.access.toLowerCase()}
+                  {bucketInfo?.access?.toLowerCase()}
                </span>
              </SecureComponent>
            }
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
@@ -152,7 +152,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
  let accessPolicy = "n/a";
  let policyDefinition = "";

-  if (bucketInfo !== null) {
+  if (bucketInfo !== null && bucketInfo.access && bucketInfo.definition) {
    accessPolicy = bucketInfo.access;
    policyDefinition = bucketInfo.definition;
  }
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/bucketDetailsSlice.ts
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/bucketDetailsSlice.ts
@@ -15,13 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { BucketInfo } from "../types";
 import { AppState } from "../../../../store";
+import { Bucket } from "api/consoleApi";

 export interface BucketDetailsState {
  selectedTab: string;
  loadingBucket: boolean;
-  bucketInfo: BucketInfo | null;
+  bucketInfo: Bucket | null;
 }

 const initialState: BucketDetailsState = {
@@ -40,7 +40,7 @@ export const bucketDetailsSlice = createSlice({
    setBucketDetailsLoad: (state, action: PayloadAction<boolean>) => {
      state.loadingBucket = action.payload;
    },
-    setBucketInfo: (state, action: PayloadAction<BucketInfo | null>) => {
+    setBucketInfo: (state, action: PayloadAction<Bucket | null>) => {
      state.bucketInfo = action.payload;
    },
  },
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteMultipleObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteMultipleObjects.tsx
@@ -24,7 +24,7 @@ import { AppState, useAppDispatch } from "../../../../../../store";
 import { hasPermission } from "../../../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import { useSelector } from "react-redux";
-import { BucketVersioningInfo } from "../../../types";
+import { BucketVersioningResponse } from "api/consoleApi";

 interface IDeleteObjectProps {
  closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -32,7 +32,7 @@ interface IDeleteObjectProps {
  selectedObjects: string[];
  selectedBucket: string;

-  versioning: BucketVersioningInfo;
+  versioning: BucketVersioningResponse;
 }

 const DeleteObject = ({
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx
@@ -25,8 +25,8 @@ import { AppState, useAppDispatch } from "../../../../../../store";
 import { hasPermission } from "../../../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import { useSelector } from "react-redux";
-import { BucketVersioningInfo } from "../../../types";
 import { isVersionedMode } from "../../../../../../utils/validationFunctions";
+import { BucketVersioningResponse } from "api/consoleApi";

 interface IDeleteObjectProps {
  closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -34,7 +34,7 @@ interface IDeleteObjectProps {
  selectedObject: string;
  selectedBucket: string;

-  versioningInfo: BucketVersioningInfo | undefined;
+  versioningInfo: BucketVersioningResponse | undefined;
  selectedVersion?: string;
 }

--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -44,7 +44,6 @@ import { DateTime } from "luxon";
 import createStyles from "@mui/styles/createStyles";
 import Grid from "@mui/material/Grid";
 import get from "lodash/get";
-import api from "../../../../../../common/api";
 import {
  decodeURLString,
  encodeURLString,
@@ -62,11 +61,7 @@ import {
 import { Badge } from "@mui/material";
 import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
 import { extensionPreview } from "../utils";
-import { BucketInfo, BucketQuota } from "../../../types";
-import {
-  ErrorResponseHandler,
-  IRetentionConfig,
-} from "../../../../../../common/types";
+import { ErrorResponseHandler } from "../../../../../../common/types";

 import { AppState, useAppDispatch } from "../../../../../../store";
 import {
@@ -141,6 +136,9 @@ import {
 import FilterObjectsSB from "../../../../ObjectBrowser/FilterObjectsSB";
 import AddAccessRule from "../../../BucketDetails/AddAccessRule";
 import { isVersionedMode } from "../../../../../../utils/validationFunctions";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { BucketQuota } from "api/consoleApi";

 const DeleteMultipleObjects = withSuspense(
  React.lazy(() => import("./DeleteMultipleObjects"))
@@ -389,19 +387,22 @@ const ListObjects = () => {

  useEffect(() => {
    if (!quota && !anonymousMode) {
-      api
-        .invoke("GET", `/api/v1/buckets/${bucketName}/quota`)
-        .then((res: BucketQuota) => {
+      api.buckets
+        .getBucketQuota(bucketName)
+        .then((res) => {
          let quotaVals = null;

-          if (res.quota) {
-            quotaVals = res;
+          if (res.data.quota) {
+            quotaVals = res.data;
          }

          setQuota(quotaVals);
        })
        .catch((err) => {
-          console.error("Error Getting Quota Status: ", err.detailedError);
+          console.error(
+            "Error Getting Quota Status: ",
+            err.error.detailedMessage
+          );
          setQuota(null);
        });
    }
@@ -432,16 +433,16 @@ const ListObjects = () => {
  // bucket info
  useEffect(() => {
    if ((loadingObjects || loadingBucket) && !anonymousMode) {
-      api
-        .invoke("GET", `/api/v1/buckets/${bucketName}`)
-        .then((res: BucketInfo) => {
+      api.buckets
+        .bucketInfo(bucketName)
+        .then((res) => {
          dispatch(setBucketDetailsLoad(false));
-          dispatch(setBucketInfo(res));
+          dispatch(setBucketInfo(res.data));
          dispatch(setSelectedBucket(bucketName));
        })
-        .catch((err: ErrorResponseHandler) => {
+        .catch((err) => {
          dispatch(setBucketDetailsLoad(false));
-          dispatch(setErrorSnackMessage(err));
+          dispatch(setErrorSnackMessage(errorToHandler(err)));
        });
    }
  }, [bucketName, loadingBucket, dispatch, anonymousMode, loadingObjects]);
@@ -450,12 +451,12 @@ const ListObjects = () => {

  useEffect(() => {
    if (selectedBucket !== "") {
-      api
-        .invoke("GET", `/api/v1/buckets/${selectedBucket}/retention`)
-        .then((res: IRetentionConfig) => {
-          dispatch(setRetentionConfig(res));
+      api.buckets
+        .getBucketRetentionConfig(selectedBucket)
+        .then((res) => {
+          dispatch(setRetentionConfig(res.data));
        })
-        .catch((err: ErrorResponseHandler) => {
+        .catch(() => {
          dispatch(setRetentionConfig(null));
        });
    }
@@ -970,7 +971,10 @@ const ListObjects = () => {
                          <Fragment>{niceBytesInt(bucketInfo.size)}</Fragment>
                        )}
                        {bucketInfo.size && quota && (
-                          <Fragment> / {niceBytesInt(quota.quota)}</Fragment>
+                          <Fragment>
+                            {" "}
+                            / {niceBytesInt(quota.quota || 0)}
+                          </Fragment>
                        )}
                        {bucketInfo.size && bucketInfo.objects ? " - " : ""}
                        {bucketInfo.objects && (
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
@@ -83,7 +83,7 @@ import {
 import RenameLongFileName from "../../../../ObjectBrowser/RenameLongFilename";
 import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
 import { downloadObject } from "../../../../ObjectBrowser/utils";
-import { BucketVersioningInfo } from "../../../types";
+import { BucketVersioningResponse } from "api/consoleApi";

 const styles = () =>
  createStyles({
@@ -130,8 +130,8 @@ interface IObjectDetailPanelProps {
  classes: any;
  internalPaths: string;
  bucketName: string;
-  versioningInfo: BucketVersioningInfo;
-  locking: boolean;
+  versioningInfo: BucketVersioningResponse;
+  locking: boolean | undefined;
  onClosePanel: (hardRefresh: boolean) => void;
 }

--- a/portal-ui/src/screens/Console/Buckets/types.tsx
+++ b/portal-ui/src/screens/Console/Buckets/types.tsx
@@ -91,16 +91,6 @@ export interface BucketQuota {
  type: string;
 }

-export interface ChangePasswordRequest {
-  current_secret_key: string;
-  new_secret_key: string;
-}
-
-export interface ChangeUserPasswordRequest {
-  selectedUser: string;
-  newSecretKey: string;
-}
-
 export interface BulkReplicationResponse {
  replicationState: BulkReplicationItem[];
 }
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -32,8 +32,6 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../store";
 import { snackBarCommon } from "./Common/FormComponents/common/styleLibrary";
-import { ErrorResponseHandler } from "../../common/types";
-import api from "../../common/api";
 import MainError from "./Common/MainError/MainError";
 import {
  CONSOLE_UI_RESOURCE,
@@ -54,6 +52,7 @@ import {
  setSnackBarMessage,
 } from "../../systemSlice";
 import { selFeatures, selSession } from "./consoleSlice";
+import { api } from "api";
 import MenuWrapper from "./Menu/MenuWrapper";

 const Trace = React.lazy(() => import("./Trace/Trace"));
@@ -211,20 +210,20 @@ const Console = ({ classes }: IConsoleProps) => {

  const restartServer = () => {
    dispatch(serverIsLoading(true));
-    api
-      .invoke("POST", "/api/v1/service/restart", {})
-      .then((res) => {
+    api.service
+      .restartService({})
+      .then(() => {
        console.log("success restarting service");
        dispatch(serverIsLoading(false));
        dispatch(setServerNeedsRestart(false));
      })
-      .catch((err: ErrorResponseHandler) => {
-        if (err.errorMessage === "Error 502") {
+      .catch((err) => {
+        if (err.error.errorMessage === "Error 502") {
          dispatch(setServerNeedsRestart(false));
        }
        dispatch(serverIsLoading(false));
        console.log("failure restarting service");
-        console.error(err);
+        console.error(err.error);
      });
  };

--- a/portal-ui/src/screens/Console/ObjectBrowser/objectBrowserSlice.ts
+++ b/portal-ui/src/screens/Console/ObjectBrowser/objectBrowserSlice.ts
@@ -20,8 +20,10 @@ import {
  BucketObjectItem,
  IRestoreLocalObjectList,
 } from "../Buckets/ListBuckets/Objects/ListObjects/types";
-import { IRetentionConfig } from "../../../common/types";
-import { BucketVersioningInfo } from "../Buckets/types";
+import {
+  BucketVersioningResponse,
+  GetBucketRetentionConfig,
+} from "api/consoleApi";

 const defaultRewind = {
  rewindEnabled: false,
@@ -70,8 +72,8 @@ const initialState: ObjectBrowserState = {
  isOpeningObjectDetail: false,
  anonymousAccessOpen: false,
  retentionConfig: {
-    mode: "",
-    unit: "",
+    mode: undefined,
+    unit: undefined,
    validity: 0,
  },
  longFileOpen: false,
@@ -293,10 +295,13 @@ export const objectBrowserSlice = createSlice({
    setLoadingVersioning: (state, action: PayloadAction<boolean>) => {
      state.loadingVersioning = action.payload;
    },
-    setIsVersioned: (state, action: PayloadAction<BucketVersioningInfo>) => {
+    setIsVersioned: (
+      state,
+      action: PayloadAction<BucketVersioningResponse>
+    ) => {
      state.versionInfo = action.payload;
    },
-    setLockingEnabled: (state, action: PayloadAction<boolean>) => {
+    setLockingEnabled: (state, action: PayloadAction<boolean | undefined>) => {
      state.lockingEnabled = action.payload;
    },
    setLoadingLocking: (state, action: PayloadAction<boolean>) => {
@@ -353,7 +358,7 @@ export const objectBrowserSlice = createSlice({
    },
    setRetentionConfig: (
      state,
-      action: PayloadAction<IRetentionConfig | null>
+      action: PayloadAction<GetBucketRetentionConfig | null>
    ) => {
      state.retentionConfig = action.payload;
    },
--- a/portal-ui/src/screens/Console/ObjectBrowser/types.ts
+++ b/portal-ui/src/screens/Console/ObjectBrowser/types.ts
@@ -15,8 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import { BucketObjectItem } from "../Buckets/ListBuckets/Objects/ListObjects/types";
-import { IRetentionConfig } from "../../../common/types";
-import { BucketVersioningInfo } from "../Buckets/types";
+import {
+  BucketVersioningResponse,
+  GetBucketRetentionConfig,
+} from "api/consoleApi";

 export const REWIND_SET_ENABLE = "REWIND/SET_ENABLE";
 export const REWIND_RESET_REWIND = "REWIND/RESET_REWIND";
@@ -84,8 +86,8 @@ export interface ObjectBrowserState {
  records: BucketObjectItem[];
  loadRecords: boolean;
  loadingVersioning: boolean;
-  versionInfo: BucketVersioningInfo;
-  lockingEnabled: boolean;
+  versionInfo: BucketVersioningResponse;
+  lockingEnabled: boolean | undefined;
  loadingLocking: boolean;
  selectedObjects: string[];
  downloadRenameModal: BucketObjectItem | null;
@@ -93,7 +95,7 @@ export interface ObjectBrowserState {
  previewOpen: boolean;
  shareFileModalOpen: boolean;
  isOpeningObjectDetail: boolean;
-  retentionConfig: IRetentionConfig | null;
+  retentionConfig: GetBucketRetentionConfig | null;
  longFileOpen: boolean;
  anonymousAccessOpen: boolean;
  connectionError: boolean;