From dec7b138e95204cf4ccab8ce0e9ab9d00bc41f0a Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Tue, 31 May 2022 17:28:50 -0700
Subject: [PATCH] Move New Credentials to separate component for Add Tenant
 (#2056)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Console/Tenants/AddTenant/AddTenant.tsx   | 26 +---------
 .../AddTenant/NewTenantCredentials.tsx        | 51 +++++++++++++++++++
 .../AddTenant/thunks/namespaceThunks.ts       |  2 +-
 3 files changed, 54 insertions(+), 25 deletions(-)
 create mode 100644 portal-ui/src/screens/Console/Tenants/AddTenant/NewTenantCredentials.tsx

diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
index 144bcd0bf..191634af8 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -32,7 +32,6 @@ import {
   IWizardButton,
   IWizardElement,
 } from "../../Common/GenericWizard/types";
-import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
 import { AppState } from "../../../../store";
 import Configure from "./Steps/Configure";
 import IdentityProvider from "./Steps/IdentityProvider";
@@ -57,6 +56,7 @@ import { selFeatures } from "../../consoleSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import { resetAddTenantForm } from "./createTenantSlice";
 import CreateTenantButton from "./CreateTenantButton";
+import NewTenantCredentials from "./NewTenantCredentials";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -75,14 +75,6 @@ const AddTenant = () => {
 
   const features = useSelector(selFeatures);
 
-  // Modals
-  const showNewCredentials = useSelector(
-    (state: AppState) => state.createTenant.showNewCredentials
-  );
-  const createdAccount = useSelector(
-    (state: AppState) => state.createTenant.createdAccount
-  );
-
   // Fields
   const addSending = useSelector(
     (state: AppState) => state.createTenant.addingTenant
@@ -181,23 +173,9 @@ const AddTenant = () => {
 
   let filteredWizardSteps = wizardSteps;
 
-  const closeCredentialsModal = () => {
-    dispatch(resetAddTenantForm());
-    history.push("/tenants");
-  };
-
   return (
     <Fragment>
-      {showNewCredentials && (
-        <CredentialsPrompt
-          newServiceAccount={createdAccount}
-          open={showNewCredentials}
-          closeModal={() => {
-            closeCredentialsModal();
-          }}
-          entity="Tenant"
-        />
-      )}
+      <NewTenantCredentials />
       <PageHeader
         label={
           <BackLink
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/NewTenantCredentials.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/NewTenantCredentials.tsx
new file mode 100644
index 000000000..c22c448ce
--- /dev/null
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/NewTenantCredentials.tsx
@@ -0,0 +1,51 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
+import { resetAddTenantForm } from "./createTenantSlice";
+import history from "../../../../history";
+import { useDispatch, useSelector } from "react-redux";
+import { AppState } from "../../../../store";
+
+const NewTenantCredentials = () => {
+  const dispatch = useDispatch();
+
+  const showNewCredentials = useSelector(
+    (state: AppState) => state.createTenant.showNewCredentials
+  );
+  const createdAccount = useSelector(
+    (state: AppState) => state.createTenant.createdAccount
+  );
+
+  return (
+    <Fragment>
+      {showNewCredentials && (
+        <CredentialsPrompt
+          newServiceAccount={createdAccount}
+          open={showNewCredentials}
+          closeModal={() => {
+            dispatch(resetAddTenantForm());
+            history.push("/tenants");
+          }}
+          entity="Tenant"
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export default NewTenantCredentials;
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/thunks/namespaceThunks.ts b/portal-ui/src/screens/Console/Tenants/AddTenant/thunks/namespaceThunks.ts
index 9e284978b..6cea72564 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/thunks/namespaceThunks.ts
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/thunks/namespaceThunks.ts
@@ -89,7 +89,7 @@ export const createNamespaceAsync = createAsyncThunk(
       .invoke("POST", "/api/v1/namespace", {
         name: namespace,
       })
-      .then((res) => {
+      .then((_) => {
         // revalidate the name to have the storage classes populated
         dispatch(validateNamespaceAsync());
         return true;