Added Prettier test to workflow (#2159)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2022-06-30 23:40:23 -05:00
parent a8bc58a420
commit 9371c027f3
23 changed files with 770 additions and 677 deletions
--- a/.github/workflows/jobs.yaml
+++ b/.github/workflows/jobs.yaml
@@ -276,7 +276,7 @@ jobs:
          semgrep --config semgrep.yaml $(pwd)/portal-ui --error

  no-warnings-and-make-assets:
-    name: "React Code Has No Warnings and then Make Assets"
+    name: "React Code Has No Warning & Prettified and then Make Assets"
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
@@ -329,6 +329,11 @@ jobs:
        continue-on-error: false
        run: |
          ./check-warnings.sh
+      - name: Check if Files are Prettified
+        working-directory: ./portal-ui
+        continue-on-error: false
+        run: |
+          ./check-prettier.sh

  reuse-golang-dependencies:
    name: reuse golang dependencies
--- a/portal-ui/Makefile
+++ b/portal-ui/Makefile
@@ -6,3 +6,9 @@ build-static:

 test-warnings:
 	./check-warnings.sh
+
+test-prettier:
+	./check-prettier.sh
+
+prettify:
+	yarn prettier --write . --loglevel warn
--- a/portal-ui/check-prettier.sh
+++ b/portal-ui/check-prettier.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+yarn install
+yarn prettier --check .
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -73,7 +73,7 @@
    "@types/react-window": "^1.8.5",
    "@types/react-window-infinite-loader": "^1.0.6",
    "@types/recharts": "^1.8.22",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
    "react-scripts": "5.0.1",
    "testcafe": "^1.18.6",
    "typescript": "^4.4.3"
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -170,10 +170,12 @@ const AddReplicationModal = ({
          setAddLoading(false);

          if (itemVal.errorString && itemVal.errorString !== "") {
-            dispatch(setModalErrorSnackMessage({
-              errorMessage: itemVal.errorString,
-              detailedError: "",
-            }));
+            dispatch(
+              setModalErrorSnackMessage({
+                errorMessage: itemVal.errorString,
+                detailedError: "",
+              })
+            );
            return;
          }

@@ -181,10 +183,12 @@ const AddReplicationModal = ({

          return;
        }
-        dispatch(setModalErrorSnackMessage({
-          errorMessage: "No changes applied",
-          detailedError: "",
-        }));
+        dispatch(
+          setModalErrorSnackMessage({
+            errorMessage: "No changes applied",
+            detailedError: "",
+          })
+        );
      })
      .catch((err: ErrorResponseHandler) => {
        setAddLoading(false);
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -796,8 +796,8 @@ export const wizardCommon = {
    justifyContent: "flex-start" as const,
  },
  multiContainerStackNarrow: {
-    display: "flex" ,
-    alignItems: "center" ,
+    display: "flex",
+    alignItems: "center",
    justifyContent: "flex-start",
    gap: "8px",
    "@media (max-width: 750px)": {
--- a/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx
+++ b/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx
@@ -33,7 +33,6 @@ const Marketplace = () => {
  const displayMarketplace = useSelector(selShowMarketplace);
  const [isMPMode, setMPMode] = useState<boolean>(true);

-
  useEffect(() => {
    let mpMode = false;
    if (features && features.length !== 0) {
@@ -49,17 +48,20 @@ const Marketplace = () => {

  const getTargetPath = () => {
    let targetPath = "/";
-    if (localStorage.getItem("redirect-path") && localStorage.getItem("redirect-path") !== "") {
+    if (
+      localStorage.getItem("redirect-path") &&
+      localStorage.getItem("redirect-path") !== ""
+    ) {
      targetPath = `${localStorage.getItem("redirect-path")}`;
      localStorage.setItem("redirect-path", "");
    }
    return targetPath;
-  }
+  };

  const closeModal = () => {
    dispatch(showMarketplace(false));
    navigate(getTargetPath());
-  }
+  };

  if (!displayMarketplace || !isMPMode) {
    return <Navigate to={{ pathname: getTargetPath() }} />;
@@ -70,10 +72,7 @@ const Marketplace = () => {
      <Fragment>
        <PageHeader label="Operator Marketplace" />
        <PageLayout>
-        <SetEmailModal
-          open={true}
-          closeModal={closeModal}
-        />
+          <SetEmailModal open={true} closeModal={closeModal} />
        </PageLayout>
      </Fragment>
    );
--- a/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
+++ b/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
@@ -42,8 +42,9 @@ const styles = (theme: Theme) =>
    ...containerForHeader(theme.spacing(4)),
  });

-// eslint-disable-next-line
-const reEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const reEmail =
+  // eslint-disable-next-line
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

 const SetEmailModal = ({ open, closeModal }: ISetEmailModalProps) => {
  const dispatch = useAppDispatch();
@@ -52,7 +53,7 @@ const SetEmailModal = ({ open, closeModal }: ISetEmailModalProps) => {
    dispatch(setErrorSnackMessage(err));
    closeModal();
  };
-  
+
  const onSuccess = (res: any) => {
    let msg = `Email ${email} has been saved`;
    dispatch(setSnackBarMessage(msg));
@@ -62,7 +63,6 @@ const SetEmailModal = ({ open, closeModal }: ISetEmailModalProps) => {
  const [isLoading, invokeApi] = useApi(onSuccess, onError);
  const [email, setEmail] = useState<string>("");
  const [isEmailSet, setIsEmailSet] = useState<boolean>(false);
-  

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let v = event.target.value;
@@ -72,13 +72,13 @@ const SetEmailModal = ({ open, closeModal }: ISetEmailModalProps) => {

  const onConfirm = () => {
    const isInEU = isEU();
-    invokeApi("POST", "/api/v1/mp-integration", { email,  isInEU});
+    invokeApi("POST", "/api/v1/mp-integration", { email, isInEU });
  };

  const isEU = () => {
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return euTimezones.includes(tz.toLocaleLowerCase());
-  }
+  };

  return open ? (
    <ConfirmDialog
@@ -101,25 +101,27 @@ const SetEmailModal = ({ open, closeModal }: ISetEmailModalProps) => {
            <a
              href="https://min.io/product/subnet"
              target="_blank"
-              rel="noreferrer">
-                MinIO Subscription Network (SUBNET)
-            </a>.
+              rel="noreferrer"
+            >
+              MinIO Subscription Network (SUBNET)
+            </a>
+            .
            <br />
            Enter your email to register now.
          </p>
          <p>
-            To register later, contact <a href="mailto: support@min.io">support@min.io</a>.
+            To register later, contact{" "}
+            <a href="mailto: support@min.io">support@min.io</a>.
          </p>
          <InputBoxWrapper
-              id="set-mp-email"
-              name="set-mp-email"
-              onChange={handleInputChange}
-              label={""}
-              placeholder="Enter email"
-              type={"email"}
-              value={email}
-              />
-
+            id="set-mp-email"
+            name="set-mp-email"
+            onChange={handleInputChange}
+            label={""}
+            placeholder="Enter email"
+            type={"email"}
+            value={email}
+          />
        </Fragment>
      }
    />
--- a/portal-ui/src/screens/Console/Marketplace/euTimezones.ts
+++ b/portal-ui/src/screens/Console/Marketplace/euTimezones.ts
@@ -15,64 +15,64 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 export const euTimezones = [
-    "europe/amsterdam",
-    "europe/andorra",
-    "europe/astrakhan",
-    "europe/athens",
-    "europe/belgrade",
-    "europe/berlin",
-    "europe/bratislava",
-    "europe/brussels",
-    "europe/bucharest",
-    "europe/budapest",
-    "europe/busingen",
-    "europe/chisinau",
-    "europe/copenhagen",
-    "europe/dublin",
-    "europe/gibraltar",
-    "europe/guernsey",
-    "europe/helsinki",
-    "europe/isle_of_man",
-    "europe/istanbul",
-    "europe/jersey",
-    "europe/kaliningrad",
-    "europe/kiev",
-    "europe/kirov",
-    "europe/lisbon",
-    "europe/ljubljana",
-    "europe/london",
-    "europe/luxembourg",
-    "europe/madrid",
-    "europe/malta",
-    "europe/mariehamn",
-    "europe/minsk",
-    "europe/monaco",
-    "europe/moscow",
-    "europe/oslo",
-    "europe/paris",
-    "europe/podgorica",
-    "europe/prague",
-    "europe/riga",
-    "europe/rome",
-    "europe/samara",
-    "europe/san_marino",
-    "europe/sarajevo",
-    "europe/saratov",
-    "europe/simferopol",
-    "europe/skopje",
-    "europe/sofia",
-    "europe/stockholm",
-    "europe/tallinn",
-    "europe/tirane",
-    "europe/ulyanovsk",
-    "europe/uzhgorod",
-    "europe/vaduz",
-    "europe/vatican",
-    "europe/vienna",
-    "europe/vilnius",
-    "europe/volgograd",
-    "europe/warsaw",
-    "europe/zagreb",
-    "europe/zaporozhye",
-    "europe/zurich"
-  ];
+  "europe/amsterdam",
+  "europe/andorra",
+  "europe/astrakhan",
+  "europe/athens",
+  "europe/belgrade",
+  "europe/berlin",
+  "europe/bratislava",
+  "europe/brussels",
+  "europe/bucharest",
+  "europe/budapest",
+  "europe/busingen",
+  "europe/chisinau",
+  "europe/copenhagen",
+  "europe/dublin",
+  "europe/gibraltar",
+  "europe/guernsey",
+  "europe/helsinki",
+  "europe/isle_of_man",
+  "europe/istanbul",
+  "europe/jersey",
+  "europe/kaliningrad",
+  "europe/kiev",
+  "europe/kirov",
+  "europe/lisbon",
+  "europe/ljubljana",
+  "europe/london",
+  "europe/luxembourg",
+  "europe/madrid",
+  "europe/malta",
+  "europe/mariehamn",
+  "europe/minsk",
+  "europe/monaco",
+  "europe/moscow",
+  "europe/oslo",
+  "europe/paris",
+  "europe/podgorica",
+  "europe/prague",
+  "europe/riga",
+  "europe/rome",
+  "europe/samara",
+  "europe/san_marino",
+  "europe/sarajevo",
+  "europe/saratov",
+  "europe/simferopol",
+  "europe/skopje",
+  "europe/sofia",
+  "europe/stockholm",
+  "europe/tallinn",
+  "europe/tirane",
+  "europe/ulyanovsk",
+  "europe/uzhgorod",
+  "europe/vaduz",
+  "europe/vatican",
+  "europe/vienna",
+  "europe/vilnius",
+  "europe/volgograd",
+  "europe/warsaw",
+  "europe/zagreb",
+  "europe/zaporozhye",
+  "europe/zurich",
+];
--- a/portal-ui/src/screens/Console/ObjectBrowser/objectBrowserSlice.ts
+++ b/portal-ui/src/screens/Console/ObjectBrowser/objectBrowserSlice.ts
@@ -120,7 +120,10 @@ export const objectBrowserSlice = createSlice({
        false;
      state.objectManager.objectsToManage[objectToComplete].done = true;
    },
-    failObject: (state, action: PayloadAction<{instanceID: string; msg: string}>) => {
+    failObject: (
+      state,
+      action: PayloadAction<{ instanceID: string; msg: string }>
+    ) => {
      const objectToFail = state.objectManager.objectsToManage.findIndex(
        (item) => item.instanceID === action.payload.instanceID
      );
@@ -128,7 +131,8 @@ export const objectBrowserSlice = createSlice({
      state.objectManager.objectsToManage[objectToFail].failed = true;
      state.objectManager.objectsToManage[objectToFail].waitingForFile = false;
      state.objectManager.objectsToManage[objectToFail].done = true;
-      state.objectManager.objectsToManage[objectToFail].errorMessage = action.payload.msg;
+      state.objectManager.objectsToManage[objectToFail].errorMessage =
+        action.payload.msg;
    },
    cancelObjectInList: (state, action: PayloadAction<string>) => {
      const objectToCancel = state.objectManager.objectsToManage.findIndex(
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
@@ -164,10 +164,12 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
                    id="storage_type"
                    name="storage_type"
                    onChange={(e: SelectChangeEvent<string>) => {
-                      dispatch(setStorageType({
-                        storageType: e.target.value as string,
-                        features: features,
-                      }));
+                      dispatch(
+                        setStorageType({
+                          storageType: e.target.value as string,
+                          features: features,
+                        })
+                      );
                    }}
                    label={get(
                      mkPanelConfigurations,
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/types.ts
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/types.ts
@@ -281,4 +281,4 @@ export interface ITenantAuditLogs {
  labels: IKeyValue[];
  annotations: IKeyValue[];
  nodeSelector: IKeyValue[];
-}
+}
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
@@ -44,18 +44,17 @@ import {
 import { IKeyValue, ITenantAuditLogs } from "../ListTenants/types";
 import KeyPairEdit from "./KeyPairEdit";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
-import {    
-    setDBImage,
-    setDBInitImage,
-    setDBCPURequest,
-    setDBMemRequest,
-    setDBRunAsUser, 
-    setDBFSGroup, 
-    setDBRunAsGroup, 
-    setDBRunAsNonRoot,
-    setRefreshLoggingInfo,
-  } from "../TenantDetails/tenantAuditLogSlice";
-
+import {
+  setDBImage,
+  setDBInitImage,
+  setDBCPURequest,
+  setDBMemRequest,
+  setDBRunAsUser,
+  setDBFSGroup,
+  setDBRunAsGroup,
+  setDBRunAsNonRoot,
+  setRefreshLoggingInfo,
+} from "../TenantDetails/tenantAuditLogSlice";

 import SecurityContextSelector from "../securityContextSelector";

@@ -85,7 +84,12 @@ const styles = (theme: Theme) =>
    ...wizardCommon,
  });

-const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenantAuditLogs) => {
+const LoggingDBDetails = ({
+  classes,
+  labels,
+  annotations,
+  nodeSelector,
+}: ITenantAuditLogs) => {
  const dispatch = useAppDispatch();
  const { tenantName, tenantNamespace } = useParams();
  const dbImage = useSelector(
@@ -109,18 +113,28 @@ const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenan
  );
  const dbRunAsUser = useSelector(
    (state: AppState) => state.editTenantLogging.dbSecurityContext.runAsUser
-  )
+  );
  const dbFSGroup = useSelector(
    (state: AppState) => state.editTenantLogging.dbSecurityContext.fsGroup
-  )
+  );
  const dbRunAsNonRoot = useSelector(
    (state: AppState) => state.editTenantLogging.dbSecurityContext.runAsNonRoot
-  )
+  );
  const [validationErrors, setValidationErrors] = useState<any>({});

-  const [dbLabels, setDBLabels] = useState<IKeyValue[]>((labels != null && labels.length > 0) ? labels : [{ key: "", value: "" }]);
-  const [dbAnnotations, setDBAnnotations] = useState<IKeyValue[]>((annotations != null && annotations.length > 0)? annotations : [{ key: "", value: "" }]);
-  const [dbNodeSelector, setDBNodeSelector] = useState<IKeyValue[]>((nodeSelector != null && nodeSelector.length > 0)? nodeSelector :[{ key: "", value: "" }]);
+  const [dbLabels, setDBLabels] = useState<IKeyValue[]>(
+    labels != null && labels.length > 0 ? labels : [{ key: "", value: "" }]
+  );
+  const [dbAnnotations, setDBAnnotations] = useState<IKeyValue[]>(
+    annotations != null && annotations.length > 0
+      ? annotations
+      : [{ key: "", value: "" }]
+  );
+  const [dbNodeSelector, setDBNodeSelector] = useState<IKeyValue[]>(
+    nodeSelector != null && nodeSelector.length > 0
+      ? nodeSelector
+      : [{ key: "", value: "" }]
+  );

  const [dbLabelsError, setDBLabelsError] = useState<any>({});
  const [dbAnnotationsError, setDBAnnotationsError] = useState<any>({});
@@ -130,8 +144,6 @@ const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenan
    setValidationErrors(clearValidationError(validationErrors, fieldName));
  };

-  
-
  const trim = (x: IKeyValue[]): IKeyValue[] => {
    let retval: IKeyValue[] = [];
    for (let i = 0; i < x.length; i++) {
@@ -147,7 +159,7 @@ const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenan
      Object.keys(validationErrors).length !== 0 ||
      Object.keys(dbNodeSelectorError).length !== 0 ||
      Object.keys(dbAnnotationsError).length !== 0 ||
-      Object.keys(dbLabelsError).length !== 0 
+      Object.keys(dbLabelsError).length !== 0
    ) {
      let err: ErrorResponseHandler = {
        errorMessage: "Invalid entry",
@@ -160,32 +172,30 @@ const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenan
    }
  };

- 
-
  const submitLoggingInfo = () => {
-    if (checkValid()) {      
+    if (checkValid()) {
      const dbSecurityContext = {
        runAsGroup: dbRunAsGroup != null ? dbRunAsGroup : "",
        runAsUser: dbRunAsUser != null ? dbRunAsUser : "",
        fsGroup: dbFSGroup != null ? dbFSGroup : "",
        runAsNonRoot: dbRunAsNonRoot != null ? dbRunAsNonRoot : true,
-      }
+      };
      api
-      .invoke(
-        "PUT",
-        `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`,
-        {      
-          dbLabels: trim(dbLabels),
-          dbAnnotations: trim(dbAnnotations),
-          dbNodeSelector: trim(dbNodeSelector),
-          dbImage: dbImage,
-          dbInitImage: dbInitImage,
-          dbServiceAccountName: dbServiceAccountName,          
-          logDBCPURequest: dbCpuRequest,
-          logDBMemRequest: dbMemRequest,          
-          dbSecurityContext: dbSecurityContext,
-        }
-      )
+        .invoke(
+          "PUT",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`,
+          {
+            dbLabels: trim(dbLabels),
+            dbAnnotations: trim(dbAnnotations),
+            dbNodeSelector: trim(dbNodeSelector),
+            dbImage: dbImage,
+            dbInitImage: dbInitImage,
+            dbServiceAccountName: dbServiceAccountName,
+            logDBCPURequest: dbCpuRequest,
+            logDBMemRequest: dbMemRequest,
+            dbSecurityContext: dbSecurityContext,
+          }
+        )
        .then(() => {
          setRefreshLoggingInfo(true);
          dispatch(setSnackBarMessage(`Audit Log DB configuration updated.`));
@@ -196,149 +206,150 @@ const LoggingDBDetails = ({ classes, labels, annotations, nodeSelector }: ITenan
    }
  };

-  
  return (
    <Fragment>
-        <Fragment>
-          
-           <Grid item xs={12} paddingBottom={2}>
-              <InputBoxWrapper
-                id={`dbImage`}
-                label={"DB Postgres Image"}
-                placeholder={"library/postgres:13"}
-                name={`dbImage`}
-                value={dbImage}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    if (event.target.validity.valid) {
-                      dispatch(setDBImage(event.target.value));
-                    }
-                    cleanValidation(`dbImage`);
-                  }}
-                key={`dbImage`}
-                pattern={"^[a-zA-Z0-9-./:]{1,253}$"}
-                error={validationErrors[`dbImage`] || ""}
-              />
-            </Grid>
-          <Grid item xs={12} paddingBottom={2}>
-            <InputBoxWrapper
-              id={`dbInitImage`}
-              label={"DB Init Image"}
-              placeholder={"library/busybox:1.33.1"}
-              name={`dbInitImage`}
-              value={dbInitImage}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                if (event.target.validity.valid) {
-                  dispatch(setDBInitImage(event.target.value));
-                }
-                cleanValidation(`dbInitImage`);
-              }}
-              key={`dbInitImage`}
-              pattern={"^[a-zA-Z0-9-./:]{1,253}$"}
-              error={validationErrors[`dbInitImage`] || ""}
-            />
-          </Grid>
-          <Grid item xs={12} paddingBottom={2}>
-            <InputBoxWrapper
-              id={`dbCPURequest`}
-              label={"DB CPU Request"}
-              placeholder={"DB CPU Request"}
-              name={`dbCPURequest`}
-              value={dbCpuRequest}
-              pattern={"[0-9]*"}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                if (event.target.validity.valid) {
-                  dispatch(setDBCPURequest(event.target.value));
-                }
-                cleanValidation(`dbCPURequest`);
-              }}
-              key={`dbCPURequest`}
-              error={validationErrors[`dbCPURequest`] || ""}
-            />
-          </Grid>
-          <Grid item xs={12} paddingBottom={2}>
-            <InputBoxWrapper
-              id={`dbMemRequest`}
-              label={"DB Memory Request"}
-              placeholder={"DB Memory request"}
-              name={`dbMemRequest`}
-              value={dbMemRequest}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                if (event.target.validity.valid) {
-                  dispatch(setDBMemRequest(event.target.value));
-                }
-                cleanValidation(`dbMemRequest`);
-              }}
-              pattern={"[0-9]*"}
-              key={`dbMemRequest`}
-              error={validationErrors[`dbMemRequest`] || ""}
-              overlayObject={
-                <InputUnitMenu
-                  id={"size-unit"}
-                  onUnitChange={() => {}}
-                  unitSelected={"Gi"}
-                  unitsList={[{ label: "Gi", value: "Gi" }]}
-                  disabled={true}
-                />
+      <Fragment>
+        <Grid item xs={12} paddingBottom={2}>
+          <InputBoxWrapper
+            id={`dbImage`}
+            label={"DB Postgres Image"}
+            placeholder={"library/postgres:13"}
+            name={`dbImage`}
+            value={dbImage}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.validity.valid) {
+                dispatch(setDBImage(event.target.value));
              }
-            />
-          </Grid>
-          
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>DB Labels</span>
-              <KeyPairEdit
-                newValues={dbLabels}
-                setNewValues={setDBLabels}
-                paramName={"dbLabels"}
-                error={dbLabelsError}
-                setError={setDBLabelsError}
+              cleanValidation(`dbImage`);
+            }}
+            key={`dbImage`}
+            pattern={"^[a-zA-Z0-9-./:]{1,253}$"}
+            error={validationErrors[`dbImage`] || ""}
+          />
+        </Grid>
+        <Grid item xs={12} paddingBottom={2}>
+          <InputBoxWrapper
+            id={`dbInitImage`}
+            label={"DB Init Image"}
+            placeholder={"library/busybox:1.33.1"}
+            name={`dbInitImage`}
+            value={dbInitImage}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.validity.valid) {
+                dispatch(setDBInitImage(event.target.value));
+              }
+              cleanValidation(`dbInitImage`);
+            }}
+            key={`dbInitImage`}
+            pattern={"^[a-zA-Z0-9-./:]{1,253}$"}
+            error={validationErrors[`dbInitImage`] || ""}
+          />
+        </Grid>
+        <Grid item xs={12} paddingBottom={2}>
+          <InputBoxWrapper
+            id={`dbCPURequest`}
+            label={"DB CPU Request"}
+            placeholder={"DB CPU Request"}
+            name={`dbCPURequest`}
+            value={dbCpuRequest}
+            pattern={"[0-9]*"}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.validity.valid) {
+                dispatch(setDBCPURequest(event.target.value));
+              }
+              cleanValidation(`dbCPURequest`);
+            }}
+            key={`dbCPURequest`}
+            error={validationErrors[`dbCPURequest`] || ""}
+          />
+        </Grid>
+        <Grid item xs={12} paddingBottom={2}>
+          <InputBoxWrapper
+            id={`dbMemRequest`}
+            label={"DB Memory Request"}
+            placeholder={"DB Memory request"}
+            name={`dbMemRequest`}
+            value={dbMemRequest}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.validity.valid) {
+                dispatch(setDBMemRequest(event.target.value));
+              }
+              cleanValidation(`dbMemRequest`);
+            }}
+            pattern={"[0-9]*"}
+            key={`dbMemRequest`}
+            error={validationErrors[`dbMemRequest`] || ""}
+            overlayObject={
+              <InputUnitMenu
+                id={"size-unit"}
+                onUnitChange={() => {}}
+                unitSelected={"Gi"}
+                unitsList={[{ label: "Gi", value: "Gi" }]}
+                disabled={true}
              />
-            </Grid>         
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>DB Annotations</span>
-              <KeyPairEdit
-                newValues={dbAnnotations}
-                setNewValues={setDBAnnotations}
-                paramName={"dbAnnotations"}
-                error={dbAnnotationsError}
-                setError={setDBAnnotationsError}
-              />
-            </Grid>
-         
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>DB Node Selector</span>
-              <KeyPairEdit
-                newValues={dbNodeSelector}
-                setNewValues={setDBNodeSelector}
-                paramName={"DB Node Selector"}
-                error={dbNodeSelectorError}
-                setError={setDBNodeSelectorError}
-              />
-            </Grid>
-          
-           <Grid item xs={12} className={classes.formFieldRow}>
-            <SecurityContextSelector classes={classes} 
+            }
+          />
+        </Grid>
+
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <span className={classes.inputLabel}>DB Labels</span>
+          <KeyPairEdit
+            newValues={dbLabels}
+            setNewValues={setDBLabels}
+            paramName={"dbLabels"}
+            error={dbLabelsError}
+            setError={setDBLabelsError}
+          />
+        </Grid>
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <span className={classes.inputLabel}>DB Annotations</span>
+          <KeyPairEdit
+            newValues={dbAnnotations}
+            setNewValues={setDBAnnotations}
+            paramName={"dbAnnotations"}
+            error={dbAnnotationsError}
+            setError={setDBAnnotationsError}
+          />
+        </Grid>
+
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <span className={classes.inputLabel}>DB Node Selector</span>
+          <KeyPairEdit
+            newValues={dbNodeSelector}
+            setNewValues={setDBNodeSelector}
+            paramName={"DB Node Selector"}
+            error={dbNodeSelectorError}
+            setError={setDBNodeSelectorError}
+          />
+        </Grid>
+
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <SecurityContextSelector
+            classes={classes}
            runAsGroup={dbRunAsGroup}
            runAsUser={dbRunAsUser}
            fsGroup={dbFSGroup}
            runAsNonRoot={dbRunAsNonRoot}
-            setFSGroup={(value : string)=>dispatch(setDBFSGroup(value))}
-            setRunAsUser={(value : string)=>dispatch(setDBRunAsUser(value))}
-           setRunAsGroup={(value : string)=>dispatch(setDBRunAsGroup(value))}
-            setRunAsNonRoot={(value : boolean)=>dispatch(setDBRunAsNonRoot(value))}
-            /></Grid>
-          <Grid item xs={12} textAlign={"right"}>
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              disabled={!checkValid()}
-              onClick={() => submitLoggingInfo()}
-            >
-              Save
-            </Button>
-          </Grid>
-        </Fragment>
-
+            setFSGroup={(value: string) => dispatch(setDBFSGroup(value))}
+            setRunAsUser={(value: string) => dispatch(setDBRunAsUser(value))}
+            setRunAsGroup={(value: string) => dispatch(setDBRunAsGroup(value))}
+            setRunAsNonRoot={(value: boolean) =>
+              dispatch(setDBRunAsNonRoot(value))
+            }
+          />
+        </Grid>
+        <Grid item xs={12} textAlign={"right"}>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={!checkValid()}
+            onClick={() => submitLoggingInfo()}
+          >
+            Save
+          </Button>
+        </Grid>
+      </Fragment>
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
@@ -45,18 +45,18 @@ import KeyPairEdit from "./KeyPairEdit";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import SecurityContextSelector from "../securityContextSelector";
 import { clearValidationError } from "../utils";
-import { 
-      setImage,
-      setDiskCapacityGB,
-      setServiceAccountName,
-      setCPURequest,
-      setMemRequest,
-      setRunAsUser, 
-      setFSGroup, 
-      setRunAsGroup, 
-      setRunAsNonRoot,
-      setRefreshLoggingInfo,
-  } from "../TenantDetails/tenantAuditLogSlice";
+import {
+  setImage,
+  setDiskCapacityGB,
+  setServiceAccountName,
+  setCPURequest,
+  setMemRequest,
+  setRunAsUser,
+  setFSGroup,
+  setRunAsGroup,
+  setRunAsNonRoot,
+  setRefreshLoggingInfo,
+} from "../TenantDetails/tenantAuditLogSlice";

 const styles = (theme: Theme) =>
  createStyles({
@@ -82,15 +82,18 @@ const styles = (theme: Theme) =>
    ...wizardCommon,
  });

-const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITenantAuditLogs) => {
+const TenantAuditLogging = ({
+  classes,
+  labels,
+  annotations,
+  nodeSelector,
+}: ITenantAuditLogs) => {
  const dispatch = useAppDispatch();
  const { tenantName, tenantNamespace } = useParams();
  const auditLoggingEnabled = useSelector(
    (state: AppState) => state.editTenantLogging.auditLoggingEnabled
  );
-  const image = useSelector(
-    (state: AppState) => state.editTenantLogging.image
-  );
+  const image = useSelector((state: AppState) => state.editTenantLogging.image);
  const diskCapacityGB = useSelector(
    (state: AppState) => state.editTenantLogging.diskCapacityGB
  );
@@ -108,21 +111,31 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
  );
  const runAsUser = useSelector(
    (state: AppState) => state.editTenantLogging.securityContext.runAsUser
-  )
+  );
  const fsGroup = useSelector(
    (state: AppState) => state.editTenantLogging.securityContext.fsGroup
-  )
+  );
  const runAsNonRoot = useSelector(
    (state: AppState) => state.editTenantLogging.securityContext.runAsNonRoot
-  )
-  
+  );
+
  const [validationErrors, setValidationErrors] = useState<any>({});
  const [loading, setLoading] = useState<boolean>(false);

-  const [logLabels, setLabels] = useState<IKeyValue[]>((labels != null && labels.length > 0) ? labels : [{ key: "", value: "" }]);
-  const [logAnnotations, setAnnotations] = useState<IKeyValue[]>((annotations != null && annotations.length > 0)? annotations : [{ key: "", value: "" }]);
-  const [logNodeSelector, setNodeSelector] = useState<IKeyValue[]>((nodeSelector != null && nodeSelector.length > 0)? nodeSelector :[{ key: "", value: "" }]);
-  
+  const [logLabels, setLabels] = useState<IKeyValue[]>(
+    labels != null && labels.length > 0 ? labels : [{ key: "", value: "" }]
+  );
+  const [logAnnotations, setAnnotations] = useState<IKeyValue[]>(
+    annotations != null && annotations.length > 0
+      ? annotations
+      : [{ key: "", value: "" }]
+  );
+  const [logNodeSelector, setNodeSelector] = useState<IKeyValue[]>(
+    nodeSelector != null && nodeSelector.length > 0
+      ? nodeSelector
+      : [{ key: "", value: "" }]
+  );
+
  const [labelsError, setLabelsError] = useState<any>({});
  const [annotationsError, setAnnotationsError] = useState<any>({});
  const [nodeSelectorError, setNodeSelectorError] = useState<any>({});
@@ -146,7 +159,7 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
      Object.keys(validationErrors).length !== 0 ||
      Object.keys(labelsError).length !== 0 ||
      Object.keys(annotationsError).length !== 0 ||
-      Object.keys(nodeSelectorError).length !== 0 
+      Object.keys(nodeSelectorError).length !== 0
    ) {
      let err: ErrorResponseHandler = {
        errorMessage: "Invalid entry",
@@ -160,32 +173,31 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
  };

  const submitLoggingInfo = () => {
-   
    if (checkValid()) {
-       setLoading(true);
-       const securityContext = {
+      setLoading(true);
+      const securityContext = {
        runAsGroup: runAsGroup != null ? runAsGroup : "",
        runAsUser: runAsUser != null ? runAsUser : "",
        fsGroup: fsGroup != null ? fsGroup : "",
        runAsNonRoot: runAsNonRoot != null ? runAsNonRoot : true,
-      }
-      
+      };
+
      api
-      .invoke(
-        "PUT",
-        `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`,
-        {
-          labels: trim(logLabels),
-          annotations: trim(logAnnotations),
-          nodeSelector: trim(logNodeSelector),
-          image: image,
-          diskCapacityGB: diskCapacityGB.toString(),
-          serviceAccountName: serviceAccountName,
-          logCPURequest: cpuRequest,
-          logMemRequest: memRequest,
-          securityContext: securityContext,
-        }
-      )
+        .invoke(
+          "PUT",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`,
+          {
+            labels: trim(logLabels),
+            annotations: trim(logAnnotations),
+            nodeSelector: trim(logNodeSelector),
+            image: image,
+            diskCapacityGB: diskCapacityGB.toString(),
+            serviceAccountName: serviceAccountName,
+            logCPURequest: cpuRequest,
+            logMemRequest: memRequest,
+            securityContext: securityContext,
+          }
+        )
        .then(() => {
          setRefreshLoggingInfo(true);
          dispatch(setSnackBarMessage(`Audit Log configuration updated.`));
@@ -197,9 +209,9 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
        });
    }
  };
-  
+
  return (
-    <Fragment>      
+    <Fragment>
      {auditLoggingEnabled && (
        <Fragment>
          <Grid item xs={12} paddingBottom={2}>
@@ -220,7 +232,7 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
              error={validationErrors[`image`] || ""}
            />
          </Grid>
-         
+
          <Grid item xs={12} paddingBottom={2}>
            <InputBoxWrapper
              id={`diskCapacityGB`}
@@ -266,7 +278,7 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
              error={validationErrors[`cpuRequest`] || ""}
            />
          </Grid>
-          
+
          <Grid item xs={12} paddingBottom={2}>
            <InputBoxWrapper
              id={`memRequest`}
@@ -294,7 +306,7 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
              }
            />
          </Grid>
-         
+
          <Grid item xs={12} paddingBottom={2}>
            <InputBoxWrapper
              id={`serviceAccountName`}
@@ -314,51 +326,54 @@ const TenantAuditLogging = ({ classes, labels, annotations, nodeSelector }: ITen
            />
          </Grid>
          <Grid item xs={12} className={classes.formFieldRow}>
-            <SecurityContextSelector classes={classes} 
-            runAsGroup={runAsGroup}
-            runAsUser={runAsUser}
-            fsGroup={fsGroup}
-            runAsNonRoot={runAsNonRoot}
-            setFSGroup={(value : string)=>dispatch(setFSGroup(value))}
-            setRunAsUser={(value : string)=>dispatch(setRunAsUser(value))}
-           setRunAsGroup={(value : string)=>dispatch(setRunAsGroup(value))}
-            setRunAsNonRoot={(value : boolean)=>dispatch(setRunAsNonRoot(value))}
+            <SecurityContextSelector
+              classes={classes}
+              runAsGroup={runAsGroup}
+              runAsUser={runAsUser}
+              fsGroup={fsGroup}
+              runAsNonRoot={runAsNonRoot}
+              setFSGroup={(value: string) => dispatch(setFSGroup(value))}
+              setRunAsUser={(value: string) => dispatch(setRunAsUser(value))}
+              setRunAsGroup={(value: string) => dispatch(setRunAsGroup(value))}
+              setRunAsNonRoot={(value: boolean) =>
+                dispatch(setRunAsNonRoot(value))
+              }
            />
-            </Grid>
-          
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>Labels</span>
-              <KeyPairEdit
-                newValues={logLabels}
-                setNewValues={setLabels}
-                paramName={"Labels"}
-                error={labelsError}
-                setError={setLabelsError}
-              />
-            </Grid>
-        
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>Annotations</span> 
-              <KeyPairEdit
-                newValues={logAnnotations }
-                setNewValues={setAnnotations}
-                paramName={"Annotations"}
-                error={annotationsError}
-                setError={setAnnotationsError}
-              />
-            </Grid>
-          
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <span className={classes.inputLabel}>Node Selector</span>
-              <KeyPairEdit
-                newValues={logNodeSelector}
-                setNewValues={setNodeSelector}
-                paramName={"Node Selector"}
-                error={nodeSelectorError}
-                setError={setNodeSelectorError}
-              />
-            </Grid>
- 
+          </Grid>
+
+          <Grid item xs={12} className={classes.formFieldRow}>
+            <span className={classes.inputLabel}>Labels</span>
+            <KeyPairEdit
+              newValues={logLabels}
+              setNewValues={setLabels}
+              paramName={"Labels"}
+              error={labelsError}
+              setError={setLabelsError}
+            />
+          </Grid>
+
+          <Grid item xs={12} className={classes.formFieldRow}>
+            <span className={classes.inputLabel}>Annotations</span>
+            <KeyPairEdit
+              newValues={logAnnotations}
+              setNewValues={setAnnotations}
+              paramName={"Annotations"}
+              error={annotationsError}
+              setError={setAnnotationsError}
+            />
+          </Grid>
+
+          <Grid item xs={12} className={classes.formFieldRow}>
+            <span className={classes.inputLabel}>Node Selector</span>
+            <KeyPairEdit
+              newValues={logNodeSelector}
+              setNewValues={setNodeSelector}
+              paramName={"Node Selector"}
+              error={nodeSelectorError}
+              setError={setNodeSelectorError}
+            />
+          </Grid>
+
          <Grid item xs={12} textAlign={"right"}>
            <Button
              type="submit"
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
@@ -1,4 +1,3 @@
-
 // This file is part of MinIO Console Server
 // Copyright (c) 2021 MinIO, Inc.
 //
@@ -30,34 +29,34 @@ import api from "../../../../common/api";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../../../store";
 import { ErrorResponseHandler } from "../../../../common/types";
-import { setErrorSnackMessage} from "../../../../systemSlice";
+import { setErrorSnackMessage } from "../../../../systemSlice";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { ITenantLogsStruct } from "../ListTenants/types";
 import { IKeyValue } from "../ListTenants/types";

 import LoggingDetails from "./LoggingDetails";
 import LoggingDBDetails from "./LoggingDBDetails";
-import { 
+import {
  setAuditLoggingEnabled,
  setDBImage,
  setDBInitImage,
  setDBServiceAccountName,
  setDBCPURequest,
  setDBMemRequest,
-  setDBRunAsUser, 
-  setDBFSGroup, 
-  setDBRunAsGroup, 
+  setDBRunAsUser,
+  setDBFSGroup,
+  setDBRunAsGroup,
  setDBRunAsNonRoot,
-    setImage,
-    setDiskCapacityGB,
-    setServiceAccountName,
-    setCPURequest,
-    setMemRequest,
-    setRunAsUser, 
-    setFSGroup, 
-    setRunAsGroup, 
-    setRunAsNonRoot,
-    resetAuditLogForm,
+  setImage,
+  setDiskCapacityGB,
+  setServiceAccountName,
+  setCPURequest,
+  setMemRequest,
+  setRunAsUser,
+  setFSGroup,
+  setRunAsGroup,
+  setRunAsNonRoot,
+  resetAuditLogForm,
 } from "../TenantDetails/tenantAuditLogSlice";

 interface ILoggingScreenProps {
@@ -79,12 +78,22 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
  const [loading, setLoading] = useState<boolean>(true);
  const [toggleConfirmOpen, setToggleConfirmOpen] = useState<boolean>(false);
  const [refreshLoggingInfo, setRefreshLoggingInfo] = useState<boolean>(true);
-  const [dbLabels, setDBLabels] = useState<IKeyValue[]>([{ key: "", value: "" }]);
-  const [dbAnnotations, setDBAnnotations] = useState<IKeyValue[]>([{ key: "", value: "" }]);
-  const [dbNodeSelector, setDBNodeSelector] = useState<IKeyValue[]>([{ key: "", value: "" }]);
+  const [dbLabels, setDBLabels] = useState<IKeyValue[]>([
+    { key: "", value: "" },
+  ]);
+  const [dbAnnotations, setDBAnnotations] = useState<IKeyValue[]>([
+    { key: "", value: "" },
+  ]);
+  const [dbNodeSelector, setDBNodeSelector] = useState<IKeyValue[]>([
+    { key: "", value: "" },
+  ]);
  const [labels, setLabels] = useState<IKeyValue[]>([{ key: "", value: "" }]);
-  const [annotations, setAnnotations] = useState<IKeyValue[]>([{ key: "", value: "" }]);
-  const [nodeSelector, setNodeSelector] = useState<IKeyValue[]>([{ key: "", value: "" }]);
+  const [annotations, setAnnotations] = useState<IKeyValue[]>([
+    { key: "", value: "" },
+  ]);
+  const [nodeSelector, setNodeSelector] = useState<IKeyValue[]>([
+    { key: "", value: "" },
+  ]);
  const dispatch = useAppDispatch();
  const auditLoggingEnabled = useSelector(
    (state: AppState) => state.editTenantLogging.auditLoggingEnabled
@@ -97,61 +106,83 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
  }

  const setLoggingInfo = (res: ITenantLogsStruct) => {
-    if (res !== null)  {
-    dispatch(setAuditLoggingEnabled(res !== null && !res.disabled));
-    res.dbServiceAccountName != null && dispatch(setDBServiceAccountName(res.dbServiceAccountName));
-    res.dbImage != null && dispatch(setDBImage(res.dbImage));
-    res.dbInitImage != null && dispatch(setDBInitImage(res.dbInitImage));
-    res.logDBCPURequest != null && dispatch(setDBCPURequest(res.logDBCPURequest));    
+    if (res !== null) {
+      dispatch(setAuditLoggingEnabled(res !== null && !res.disabled));
+      res.dbServiceAccountName != null &&
+        dispatch(setDBServiceAccountName(res.dbServiceAccountName));
+      res.dbImage != null && dispatch(setDBImage(res.dbImage));
+      res.dbInitImage != null && dispatch(setDBInitImage(res.dbInitImage));
+      res.logDBCPURequest != null &&
+        dispatch(setDBCPURequest(res.logDBCPURequest));
      if (res.logDBMemRequest) {
-        dispatch(setDBMemRequest(Math.floor(parseInt(res.logDBMemRequest, 10)).toString()));
+        dispatch(
+          setDBMemRequest(
+            Math.floor(parseInt(res.logDBMemRequest, 10)).toString()
+          )
+        );
      } else {
        dispatch(setDBMemRequest("0"));
-      }  
-      if (res.dbSecurityContext) {     
+      }
+      if (res.dbSecurityContext) {
        dispatch(setDBRunAsGroup(res.dbSecurityContext.runAsGroup));
        dispatch(setDBRunAsUser(res.dbSecurityContext.runAsUser));
        dispatch(setDBFSGroup(res.dbSecurityContext.fsGroup));
-        dispatch(setDBRunAsNonRoot(res.dbSecurityContext.runAsNonRoot)); 
-      }   
-        res.image != null && dispatch(setImage(res.image));
-        res.serviceAccountName != null && dispatch(setServiceAccountName(res.serviceAccountName));
-        res.logCPURequest != null && dispatch(setCPURequest(res.logCPURequest));
-        if (res.logMemRequest) {
-            dispatch(setMemRequest(Math.floor(parseInt(res.logMemRequest, 10)).toString()));
-          } else {
-            dispatch(setMemRequest("0"));
-          }
-          if (res.securityContext) {       
-            dispatch(setRunAsGroup(res.securityContext.runAsGroup));
-            dispatch(setRunAsUser(res.securityContext.runAsUser));
-            dispatch(setFSGroup(res.securityContext.fsGroup));
-            dispatch(setRunAsNonRoot(res.securityContext.runAsNonRoot));       
-          }
-         
-        res.diskCapacityGB != null && dispatch(setDiskCapacityGB(res.diskCapacityGB));    
-        res.labels != null ? setLabels(res.labels) : setLabels([{ key: "", value: "" }]);
-        res.annotations != null ? setAnnotations(res.annotations) : setAnnotations([{ key: "", value: "" }]);
-        res.nodeSelector != null ? setNodeSelector(res.nodeSelector) : setNodeSelector([{ key: "", value: "" }]);        
-        res.dbLabels != null ? setDBLabels(res.dbLabels) : setDBLabels([{ key: "", value: "" }]);
-        res.dbAnnotations != null ? setDBAnnotations(res.dbAnnotations) : setDBAnnotations([{ key: "", value: "" }]);
-        res.dbNodeSelector != null ? setDBNodeSelector(res.dbNodeSelector) : setDBNodeSelector([{ key: "", value: "" }]);
-        setRefreshLoggingInfo(false); 
-     }
+        dispatch(setDBRunAsNonRoot(res.dbSecurityContext.runAsNonRoot));
+      }
+      res.image != null && dispatch(setImage(res.image));
+      res.serviceAccountName != null &&
+        dispatch(setServiceAccountName(res.serviceAccountName));
+      res.logCPURequest != null && dispatch(setCPURequest(res.logCPURequest));
+      if (res.logMemRequest) {
+        dispatch(
+          setMemRequest(Math.floor(parseInt(res.logMemRequest, 10)).toString())
+        );
+      } else {
+        dispatch(setMemRequest("0"));
+      }
+      if (res.securityContext) {
+        dispatch(setRunAsGroup(res.securityContext.runAsGroup));
+        dispatch(setRunAsUser(res.securityContext.runAsUser));
+        dispatch(setFSGroup(res.securityContext.fsGroup));
+        dispatch(setRunAsNonRoot(res.securityContext.runAsNonRoot));
+      }
+
+      res.diskCapacityGB != null &&
+        dispatch(setDiskCapacityGB(res.diskCapacityGB));
+      res.labels != null
+        ? setLabels(res.labels)
+        : setLabels([{ key: "", value: "" }]);
+      res.annotations != null
+        ? setAnnotations(res.annotations)
+        : setAnnotations([{ key: "", value: "" }]);
+      res.nodeSelector != null
+        ? setNodeSelector(res.nodeSelector)
+        : setNodeSelector([{ key: "", value: "" }]);
+      res.dbLabels != null
+        ? setDBLabels(res.dbLabels)
+        : setDBLabels([{ key: "", value: "" }]);
+      res.dbAnnotations != null
+        ? setDBAnnotations(res.dbAnnotations)
+        : setDBAnnotations([{ key: "", value: "" }]);
+      res.dbNodeSelector != null
+        ? setDBNodeSelector(res.dbNodeSelector)
+        : setDBNodeSelector([{ key: "", value: "" }]);
+      setRefreshLoggingInfo(false);
+    }
  };

  useEffect(() => {
    if (refreshLoggingInfo) {
      api
-      .invoke(
-        "GET",
-        `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`
-      )
+        .invoke(
+          "GET",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/log`
+        )
        .then((res: ITenantLogsStruct) => {
-          if (res !== null)  {
-          dispatch(setAuditLoggingEnabled(res.auditLoggingEnabled));
-          setLoggingInfo(res);
-          setRefreshLoggingInfo(false);
+          if (res !== null) {
+            dispatch(setAuditLoggingEnabled(res.auditLoggingEnabled));
+            setLoggingInfo(res);
+            setRefreshLoggingInfo(false);
          }
        })
        .catch((err: ErrorResponseHandler) => {
@@ -170,8 +201,8 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {

  const toggleLogging = () => {
    dispatch(resetAuditLogForm());
-    if(!auditLoggingEnabled) {
-        api
+    if (!auditLoggingEnabled) {
+      api
        .invoke(
          "POST",
          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/enable-logging`
@@ -179,7 +210,7 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
        .then(() => {
          setRefreshLoggingInfo(true);
          setToggleConfirmOpen(false);
-          setAuditLoggingEnabled(true);          
+          setAuditLoggingEnabled(true);
        })
        .catch((err: ErrorResponseHandler) => {
          dispatch(
@@ -189,61 +220,59 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
            })
          );
        });
-  } else {
-    api
-    .invoke(
-      "POST",
-      `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/disable-logging`
-    )
-    .then(() => {
-        setAuditLoggingEnabled(false);
-        setRefreshLoggingInfo(true);
-        setToggleConfirmOpen(false);
-        dispatch(resetAuditLogForm());
-    })
-    .catch((err: ErrorResponseHandler) => {
-      dispatch(
-        setErrorSnackMessage({
-          errorMessage: "Error disabling logging",
-          detailedError: err.detailedError,
+    } else {
+      api
+        .invoke(
+          "POST",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/disable-logging`
+        )
+        .then(() => {
+          setAuditLoggingEnabled(false);
+          setRefreshLoggingInfo(true);
+          setToggleConfirmOpen(false);
+          dispatch(resetAuditLogForm());
        })
-      );
-    });
-  };
+        .catch((err: ErrorResponseHandler) => {
+          dispatch(
+            setErrorSnackMessage({
+              errorMessage: "Error disabling logging",
+              detailedError: err.detailedError,
+            })
+          );
+        });
+    }
  };

  return (
-    <Fragment> 
-      
-        <Grid item xs>
-        {toggleConfirmOpen && (
-          
-        <ConfirmDialog
-          isOpen={toggleConfirmOpen}
-          title={
-            !auditLoggingEnabled
-              ? "Enable Audit Logging for this tenant?"
-              : "Disable Audit Logging for this tenant?"
-          }
-          confirmText={!auditLoggingEnabled ? "Enable" : "Disable"}
-          cancelText="Cancel"
-          onClose={() => setToggleConfirmOpen(false)}
-          onConfirm={toggleLogging}
-          confirmationContent={
-            <DialogContentText>
-              {!auditLoggingEnabled
-                ? "A small Postgres server will be started per the configuration provided, which will collect the audit logs for your tenant."
-                : " Current configuration will be lost, and defaults reset if reenabled."}
-            </DialogContentText>
-          }
-        />
-      )}
-      </Grid>
-      <Grid container >
+    <Fragment>
      <Grid item xs>
+        {toggleConfirmOpen && (
+          <ConfirmDialog
+            isOpen={toggleConfirmOpen}
+            title={
+              !auditLoggingEnabled
+                ? "Enable Audit Logging for this tenant?"
+                : "Disable Audit Logging for this tenant?"
+            }
+            confirmText={!auditLoggingEnabled ? "Enable" : "Disable"}
+            cancelText="Cancel"
+            onClose={() => setToggleConfirmOpen(false)}
+            onConfirm={toggleLogging}
+            confirmationContent={
+              <DialogContentText>
+                {!auditLoggingEnabled
+                  ? "A small Postgres server will be started per the configuration provided, which will collect the audit logs for your tenant."
+                  : " Current configuration will be lost, and defaults reset if reenabled."}
+              </DialogContentText>
+            }
+          />
+        )}
+      </Grid>
+      <Grid container>
+        <Grid item xs>
          <h1 className={classes.sectionTitle}>Audit Logs</h1>
        </Grid>
-        <Grid  >
+        <Grid>
          <FormSwitchWrapper
            label={""}
            indicatorLabels={["Enabled", "Disabled"]}
@@ -257,48 +286,48 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
            description=""
          />
        </Grid>
-       
-          </Grid> 
+      </Grid>
      <Grid container>
-     {auditLoggingEnabled && (
-      <Fragment>
-        <Grid item xs={9}>
-          <Tabs
-            value={curTab}
-            onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
-              setCurTab(newValue);
-            }}
-            indicatorColor="primary"
-            textColor="primary"
-            aria-label="cluster-tabs"
-            variant="scrollable"
-            scrollButtons="auto"
-          >
-            <Tab label="Configuration" {...a11yProps(0)} />
-            <Tab label="DB Configuration" {...a11yProps(1)} />
-          </Tabs>
-        </Grid>
-        <Grid item xs={12}>
-         <hr className={classes.hrClass} />
-        </Grid>
-        {curTab === 0 && (
-          <LoggingDetails 
-            classes={classes}
-            labels={labels}
-            annotations={annotations}
-            nodeSelector={nodeSelector}
-            />
+        {auditLoggingEnabled && (
+          <Fragment>
+            <Grid item xs={9}>
+              <Tabs
+                value={curTab}
+                onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
+                  setCurTab(newValue);
+                }}
+                indicatorColor="primary"
+                textColor="primary"
+                aria-label="cluster-tabs"
+                variant="scrollable"
+                scrollButtons="auto"
+              >
+                <Tab label="Configuration" {...a11yProps(0)} />
+                <Tab label="DB Configuration" {...a11yProps(1)} />
+              </Tabs>
+            </Grid>
+            <Grid item xs={12}>
+              <hr className={classes.hrClass} />
+            </Grid>
+            {curTab === 0 && (
+              <LoggingDetails
+                classes={classes}
+                labels={labels}
+                annotations={annotations}
+                nodeSelector={nodeSelector}
+              />
+            )}
+            {curTab === 1 && (
+              <LoggingDBDetails
+                classes={classes}
+                labels={dbLabels}
+                annotations={dbAnnotations}
+                nodeSelector={dbNodeSelector}
+              />
+            )}
+          </Fragment>
        )}
-        {curTab === 1 && (
-          <LoggingDBDetails classes={classes}  
-          labels={dbLabels}
-          annotations={dbAnnotations}
-          nodeSelector={dbNodeSelector}
-          />
-        )}
-        </Fragment>
-    )}
-    </Grid>
+      </Grid>
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -59,7 +59,9 @@ const TenantSummary = withSuspense(React.lazy(() => import("./TenantSummary")));
 const TenantLicense = withSuspense(React.lazy(() => import("./TenantLicense")));
 const PoolsSummary = withSuspense(React.lazy(() => import("./PoolsSummary")));
 const PodsSummary = withSuspense(React.lazy(() => import("./PodsSummary")));
-const TenantLogging = withSuspense(React.lazy(() => import("./TenantAuditLogsScreen")));
+const TenantLogging = withSuspense(
+  React.lazy(() => import("./TenantAuditLogsScreen"))
+);
 const TenantEvents = withSuspense(React.lazy(() => import("./TenantEvents")));
 const TenantCSR = withSuspense(React.lazy(() => import("./TenantCSR")));
 const VolumesSummary = withSuspense(
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/tenantAuditLogSlice.ts
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/tenantAuditLogSlice.ts
@@ -35,7 +35,7 @@ export interface IEditTenantAuditLogging {
  memRequest: string;
  dbCPURequest: string;
  dbMemRequest: string;
-  securityContext: ISecurityContext;  
+  securityContext: ISecurityContext;
  dbSecurityContext: ISecurityContext;
  refreshLoggingInfo: boolean;
 }
@@ -59,18 +59,18 @@ const initialState: IEditTenantAuditLogging = {
  cpuRequest: "",
  memRequest: "",
  securityContext: {
-  runAsUser: "1000",
-  runAsGroup: "1000",
-  fsGroup: "1000",
-  runAsNonRoot: false,
+    runAsUser: "1000",
+    runAsGroup: "1000",
+    fsGroup: "1000",
+    runAsNonRoot: false,
  },
  dbSecurityContext: {
-  runAsUser: "1000",
-  runAsGroup: "1000",
-  fsGroup: "1000",
-  runAsNonRoot: false,
+    runAsUser: "1000",
+    runAsGroup: "1000",
+    fsGroup: "1000",
+    runAsNonRoot: false,
  },
-  refreshLoggingInfo: true
+  refreshLoggingInfo: true,
 };

 export const editTenantAuditLoggingSlice = createSlice({
@@ -84,7 +84,7 @@ export const editTenantAuditLoggingSlice = createSlice({
      state.image = action.payload;
    },
    setDBImage: (state, action: PayloadAction<string>) => {
-    state.dbImage = action.payload;
+      state.dbImage = action.payload;
    },
    setDBInitImage: (state, action: PayloadAction<string>) => {
      state.dbInitImage = action.payload;
@@ -99,13 +99,13 @@ export const editTenantAuditLoggingSlice = createSlice({
      state.nodeSelector = action.payload;
    },
    setDBLabels: (state, action: PayloadAction<IKeyValue[]>) => {
-        state.dbLabels = action.payload;
+      state.dbLabels = action.payload;
    },
    setDBAnnotations: (state, action: PayloadAction<IKeyValue[]>) => {
-        state.dbAnnotations = action.payload;
+      state.dbAnnotations = action.payload;
    },
-      setDBNodeSelector: (state, action: PayloadAction<IKeyValue[]>) => {
-        state.dbNodeSelector = action.payload;
+    setDBNodeSelector: (state, action: PayloadAction<IKeyValue[]>) => {
+      state.dbNodeSelector = action.payload;
    },
    setDiskCapacityGB: (state, action: PayloadAction<number>) => {
      state.diskCapacityGB = action.payload;
@@ -123,10 +123,10 @@ export const editTenantAuditLoggingSlice = createSlice({
      state.memRequest = action.payload;
    },
    setDBCPURequest: (state, action: PayloadAction<string>) => {
-        state.dbCPURequest = action.payload;
+      state.dbCPURequest = action.payload;
    },
    setDBMemRequest: (state, action: PayloadAction<string>) => {
-        state.dbMemRequest = action.payload;
+      state.dbMemRequest = action.payload;
    },
    setRunAsUser: (state, action: PayloadAction<string>) => {
      state.securityContext.runAsUser = action.payload;
@@ -135,10 +135,10 @@ export const editTenantAuditLoggingSlice = createSlice({
      state.securityContext.runAsGroup = action.payload;
    },
    setFSGroup: (state, action: PayloadAction<string>) => {
-        state.securityContext.fsGroup = action.payload;
+      state.securityContext.fsGroup = action.payload;
    },
    setRunAsNonRoot: (state, action: PayloadAction<boolean>) => {
-        state.securityContext.runAsNonRoot = action.payload;
+      state.securityContext.runAsNonRoot = action.payload;
    },
    setDBRunAsUser: (state, action: PayloadAction<string>) => {
      state.dbSecurityContext.runAsUser = action.payload;
@@ -147,10 +147,10 @@ export const editTenantAuditLoggingSlice = createSlice({
      state.dbSecurityContext.runAsGroup = action.payload;
    },
    setDBFSGroup: (state, action: PayloadAction<string>) => {
-        state.dbSecurityContext.fsGroup = action.payload;
+      state.dbSecurityContext.fsGroup = action.payload;
    },
    setDBRunAsNonRoot: (state, action: PayloadAction<boolean>) => {
-        state.dbSecurityContext.runAsNonRoot = action.payload;
+      state.dbSecurityContext.runAsNonRoot = action.payload;
    },
    setRefreshLoggingInfo: (state, action: PayloadAction<boolean>) => {
      state.refreshLoggingInfo = action.payload;
@@ -160,33 +160,33 @@ export const editTenantAuditLoggingSlice = createSlice({
 });

 export const {
-    setAuditLoggingEnabled,
-      setImage,
-      setDBImage,
-      setDBInitImage,
-      setLabels,
-      setAnnotations,
-      setNodeSelector,
-      setDBLabels,
-      setDBAnnotations,
-      setDBNodeSelector,
-      setDiskCapacityGB,
-      setServiceAccountName,
-      setDBServiceAccountName,
-      setCPURequest,
-      setMemRequest,
-      setDBCPURequest,
-      setDBMemRequest,
-      setRunAsUser, 
-      setFSGroup, 
-      setRunAsGroup, 
-      setRunAsNonRoot,
-      setDBRunAsUser, 
-      setDBFSGroup, 
-      setDBRunAsGroup, 
-      setDBRunAsNonRoot,
-      setRefreshLoggingInfo,
-      resetAuditLogForm,
+  setAuditLoggingEnabled,
+  setImage,
+  setDBImage,
+  setDBInitImage,
+  setLabels,
+  setAnnotations,
+  setNodeSelector,
+  setDBLabels,
+  setDBAnnotations,
+  setDBNodeSelector,
+  setDiskCapacityGB,
+  setServiceAccountName,
+  setDBServiceAccountName,
+  setCPURequest,
+  setMemRequest,
+  setDBCPURequest,
+  setDBMemRequest,
+  setRunAsUser,
+  setFSGroup,
+  setRunAsGroup,
+  setRunAsNonRoot,
+  setDBRunAsUser,
+  setDBFSGroup,
+  setDBRunAsGroup,
+  setDBRunAsNonRoot,
+  setRefreshLoggingInfo,
+  resetAuditLogForm,
 } = editTenantAuditLoggingSlice.actions;

 export default editTenantAuditLoggingSlice.reducer;
--- a/portal-ui/src/screens/Console/Tenants/securityContextSelector.tsx
+++ b/portal-ui/src/screens/Console/Tenants/securityContextSelector.tsx
@@ -21,90 +21,96 @@ import { Grid } from "@mui/material";
 import { useDispatch } from "react-redux";

 interface IEditSecurityContextProps {
-    classes: any;
-    runAsUser: string;
-    runAsGroup: string;
-    fsGroup: string;
-    runAsNonRoot: boolean;
-    setRunAsUser: any;
-    setRunAsGroup: any;
-    setFSGroup: any;
-    setRunAsNonRoot: any;
+  classes: any;
+  runAsUser: string;
+  runAsGroup: string;
+  fsGroup: string;
+  runAsNonRoot: boolean;
+  setRunAsUser: any;
+  setRunAsGroup: any;
+  setFSGroup: any;
+  setRunAsNonRoot: any;
 }
-const SecurityContextSelector = ({ classes, runAsGroup, runAsUser, fsGroup, runAsNonRoot, setRunAsUser, setRunAsGroup, setFSGroup, setRunAsNonRoot }: IEditSecurityContextProps ) => {
-    const dispatch = useDispatch();
-    return (
-        <Fragment>
-          <fieldset
-              className={`${classes.fieldGroup} ${classes.fieldSpaceTop} `}
-            >
-              <legend className={classes.descriptionText}>
-                Security Context 
-              </legend>
+const SecurityContextSelector = ({
+  classes,
+  runAsGroup,
+  runAsUser,
+  fsGroup,
+  runAsNonRoot,
+  setRunAsUser,
+  setRunAsGroup,
+  setFSGroup,
+  setRunAsNonRoot,
+}: IEditSecurityContextProps) => {
+  const dispatch = useDispatch();
+  return (
+    <Fragment>
+      <fieldset className={`${classes.fieldGroup} ${classes.fieldSpaceTop} `}>
+        <legend className={classes.descriptionText}>Security Context</legend>

-              <Grid item xs={12}>
-                <div
-                  className={`${classes.multiContainerStackNarrow} `}
-                >
-                  <div className={classes.configSectionItem}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="securityContext_runAsUser"
-                      name="securityContext_runAsUser"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        dispatch(setRunAsUser(e.target.value));
-                      }}          
-                      label="Run As User"
-                      value={runAsUser}
-                      required                
-                      min="0"
-                    />
-                  </div>
-                  <div className={classes.configSectionItem}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="securityContext_runAsGroup"
-                      name="securityContext_runAsGroup"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => { dispatch(setRunAsGroup(e.target.value));
-                      }}
-                      label="Run As Group"
-                      value={runAsGroup}
-                      required
-                      min="0"
-                    />
-                  </div>
-                  <div className={classes.configSectionItem}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="securityContext_fsGroup"
-                      name="securityContext_fsGroup"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {dispatch(setFSGroup(e.target.value)); }}
-                      label="FsGroup"
-                      value={fsGroup}
-                      required
-                      min="0"
-                    />
-                  </div>
-                </div>
-              </Grid>
-              <br />
-              <Grid item xs={12}>
-                <div className={classes.multiContainer} >
-                  <FormSwitchWrapper
-                    value="prometheusSecurityContextRunAsNonRoot"
-                    id="prometheus_securityContext_runAsNonRoot"
-                    name="prometheus_securityContext_runAsNonRoot"
-                    checked={runAsNonRoot}
-                    onChange={() => {
-                      dispatch(setRunAsNonRoot(!runAsNonRoot));
-                      }
-                    }
-                    label={"Do not run as Root"}
-                  />
-                </div>
-              </Grid>
-            </fieldset>
-        </Fragment>
-        );
+        <Grid item xs={12}>
+          <div className={`${classes.multiContainerStackNarrow} `}>
+            <div className={classes.configSectionItem}>
+              <InputBoxWrapper
+                type="number"
+                id="securityContext_runAsUser"
+                name="securityContext_runAsUser"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  dispatch(setRunAsUser(e.target.value));
+                }}
+                label="Run As User"
+                value={runAsUser}
+                required
+                min="0"
+              />
+            </div>
+            <div className={classes.configSectionItem}>
+              <InputBoxWrapper
+                type="number"
+                id="securityContext_runAsGroup"
+                name="securityContext_runAsGroup"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  dispatch(setRunAsGroup(e.target.value));
+                }}
+                label="Run As Group"
+                value={runAsGroup}
+                required
+                min="0"
+              />
+            </div>
+            <div className={classes.configSectionItem}>
+              <InputBoxWrapper
+                type="number"
+                id="securityContext_fsGroup"
+                name="securityContext_fsGroup"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  dispatch(setFSGroup(e.target.value));
+                }}
+                label="FsGroup"
+                value={fsGroup}
+                required
+                min="0"
+              />
+            </div>
+          </div>
+        </Grid>
+        <br />
+        <Grid item xs={12}>
+          <div className={classes.multiContainer}>
+            <FormSwitchWrapper
+              value="prometheusSecurityContextRunAsNonRoot"
+              id="prometheus_securityContext_runAsNonRoot"
+              name="prometheus_securityContext_runAsNonRoot"
+              checked={runAsNonRoot}
+              onChange={() => {
+                dispatch(setRunAsNonRoot(!runAsNonRoot));
+              }}
+              label={"Do not run as Root"}
+            />
+          </div>
+        </Grid>
+      </fieldset>
+    </Fragment>
+  );
 };
-export default SecurityContextSelector;
+export default SecurityContextSelector;
--- a/portal-ui/src/screens/Console/Tenants/types.ts
+++ b/portal-ui/src/screens/Console/Tenants/types.ts
@@ -338,4 +338,3 @@ export interface ITenantIdentityProviderResponse {
    user_dn_search_filter: string;
  };
 }
-
--- a/portal-ui/src/screens/LoginPage/LoginPage.tsx
+++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx
@@ -51,7 +51,11 @@ import { SupportMenuIcon } from "../../icons/SidebarMenus";
 import GithubIcon from "../../icons/GithubIcon";
 import clsx from "clsx";
 import Loader from "../Console/Common/Loader/Loader";
-import { setErrorSnackMessage, userLogged, showMarketplace } from "../../systemSlice";
+import {
+  setErrorSnackMessage,
+  userLogged,
+  showMarketplace,
+} from "../../systemSlice";
 import { useAppDispatch } from "../../store";

 const styles = (theme: Theme) =>
@@ -331,11 +335,11 @@ const Login = ({ classes }: ILoginProps) => {
      localStorage.setItem("redirect-path", "");
    }
    return targetPath;
-  }
+  };

  const redirectAfterLogin = () => {
    navigate(getTargetPath());
-  }
+  };

  const redirectToMarketplace = () => {
    api
@@ -347,11 +351,12 @@ const Login = ({ classes }: ILoginProps) => {
        if (err.statusCode === 404) {
          dispatch(showMarketplace(true));
          navigate("/marketplace");
-        } else { // Unexpected error, continue with normal flow
+        } else {
+          // Unexpected error, continue with normal flow
          redirectAfterLogin();
        }
      });
-  }
+  };

  const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
--- a/portal-ui/src/store.ts
+++ b/portal-ui/src/store.ts
@@ -34,7 +34,6 @@ import editPoolReducer from "./screens/Console/Tenants/TenantDetails/Pools/EditP
 import editTenantMonitoringReducer from "./screens/Console/Tenants/TenantDetails/tenantMonitoringSlice";
 import editTenantAuditLoggingReducer from "./screens/Console/Tenants/TenantDetails/tenantAuditLogSlice";

-
 const rootReducer = combineReducers({
  system: systemReducer,
  trace: traceReducer,
--- a/portal-ui/src/systemSlice.ts
+++ b/portal-ui/src/systemSlice.ts
@@ -171,6 +171,7 @@ export const {
 export const selDistSet = (state: AppState) => state.system.distributedSetup;
 export const selSiteRep = (state: AppState) => state.system.siteReplicationInfo;
 export const selOpMode = (state: AppState) => state.system.operatorMode;
-export const selShowMarketplace = (state: AppState) => state.system.showMarketplace;
+export const selShowMarketplace = (state: AppState) =>
+  state.system.showMarketplace;

 export default systemSlice.reducer;
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -9132,10 +9132,10 @@ prelude-ls@~1.1.2:
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==

-prettier@2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
-  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+prettier@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==

 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
  version "5.6.0"