Move Tenant from Modal to Page (#596)

* Move Tenant from Modal to Page

* Address comments

* Small margin tweak

Author: dvaldivia

pkg/acl/endpoints.go

@@ -32,6 +32,7 @@ var (
 	bucketsDetail       = "/buckets/:bucketName"
 	serviceAccounts     = "/account"
 	tenants             = "/tenants"
+	addTenant           = "/add-tenant"
 	tenantsDetail       = "/namespaces/:tenantNamespace/tenants/:tenantName"
 	remoteBuckets       = "/remote-buckets"
 	replication         = "/replication"
@@ -270,6 +271,7 @@ var endpointRules = map[string]ConfigurationActionSet{
 var operatorRules = map[string]ConfigurationActionSet{
 	tenants:       tenantsActionSet,
 	tenantsDetail: tenantsActionSet,
+	addTenant:     tenantsActionSet,
 	license:       licenseActionSet,
 }
 

pkg/acl/endpoints_test.go

@@ -116,7 +116,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"admin:*",
 				},
 			},
-			want: 3,
+			want: 4,
 		},
 		{
 			name: "Operator Only - all s3 endpoints",
@@ -125,7 +125,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 3,
+			want: 4,
 		},
 		{
 			name: "Operator Only - all admin and s3 endpoints",
@@ -135,14 +135,14 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 3,
+			want: 4,
 		},
 		{
 			name: "Operator Only - default endpoints",
 			args: args{
 				[]string{},
 			},
-			want: 3,
+			want: 4,
 		},
 	}
 

portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx

@@ -18,6 +18,7 @@ import React, { useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { IWizardMain } from "./types";
 import WizardPage from "./WizardPage";
+import { Grid, Paper } from "@material-ui/core";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -26,11 +27,15 @@ const styles = (theme: Theme) =>
       width: "100%",
       flexGrow: 1,
     },
+    wizFromContainer: {
+      marginTop: "32px",
+    },
     wizardSteps: {
       minWidth: 180,
       marginRight: 10,
       "& ul": {
-        padding: "0 15px 0 0",
+        padding: "0px 15px 0 30px",
+        marginTop: "0px",
 
         "& li": {
           listStyle: "lower-roman",
@@ -51,8 +56,15 @@ const styles = (theme: Theme) =>
         boxShadow: "none",
       },
     },
-    wizardContainer: {
-      flexGrow: 1,
+    paddedGridItem: {
+      padding: "0px 10px 0px 10px",
+    },
+    menuPaper: {
+      padding: "20px",
+    },
+    paperContainer: {
+      padding: "10px",
+      maxWidth: "900px",
     },
   });
 
@@ -101,28 +113,50 @@ const GenericWizard = ({ classes, wizardSteps }: IWizardMain) => {
   }
 
   return (
-    <div className={classes.wizardMain}>
-      <div className={classes.wizardSteps}>
-        <ul>
-          {wizardSteps.map((step, index) => {
-            return (
-              <li key={`wizard-${index.toString()}`}>
-                <button
-                  onClick={() => pageChange(index)}
-                  disabled={index > currentStep}
-                  className={classes.buttonList}
-                >
-                  {step.label}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-      <div className={classes.wizardContainer}>
-        <WizardPage page={wizardSteps[currentStep]} pageChange={pageChange} />
-      </div>
-    </div>
+    <Grid container className={classes.wizFromContainer}>
+      <Grid
+        item
+        xs={12}
+        sm={3}
+        md={3}
+        lg={3}
+        xl={2}
+        className={classes.paddedGridItem}
+      >
+        <Paper className={classes.menuPaper}>
+          <div className={classes.wizardSteps}>
+            <ul>
+              {wizardSteps.map((step, index) => {
+                return (
+                  <li key={`wizard-${index.toString()}`}>
+                    <button
+                      onClick={() => pageChange(index)}
+                      disabled={index > currentStep}
+                      className={classes.buttonList}
+                    >
+                      {step.label}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </Paper>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        sm={9}
+        md={9}
+        lg={9}
+        xl={10}
+        className={classes.paddedGridItem}
+      >
+        <Paper className={classes.paperContainer}>
+          <WizardPage page={wizardSteps[currentStep]} pageChange={pageChange} />
+        </Paper>
+      </Grid>
+    </Grid>
   );
 };
 

portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx

@@ -26,7 +26,6 @@ const styles = (theme: Theme) =>
       flexDirection: "column",
     },
     wizardComponent: {
-      height: 375,
       overflowY: "auto",
       marginBottom: 10,
     },

portal-ui/src/screens/Console/Console.tsx

@@ -55,6 +55,7 @@ import LogsMain from "./Logs/LogsMain";
 import Heal from "./Heal/Heal";
 import Watch from "./Watch/Watch";
 import HealthInfo from "./HealthInfo/HealthInfo";
+import AddTenant from "./Tenants/ListTenants/AddTenant";
 
 const drawerWidth = 245;
 
@@ -289,6 +290,10 @@ const Console = ({
       component: WebhookPanel,
       path: "/webhook/audit",
     },
+    {
+      component: AddTenant,
+      path: "/add-tenant",
+    },
     {
       component: ListTenants,
       path: "/tenants",

portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

@@ -20,14 +20,17 @@ import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { Button, LinearProgress, Typography } from "@material-ui/core";
+import { Button, LinearProgress, Paper, Typography } from "@material-ui/core";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import api from "../../../../common/api";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  containerForHeader,
+  modalBasic,
+} from "../../Common/FormComponents/common/styleLibrary";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import {
@@ -67,6 +70,8 @@ import Divider from "@material-ui/core/Divider";
 import { connect } from "react-redux";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { getHardcodedAffinity } from "../TenantDetails/utils";
+import history from "../../../../history";
+import PageHeader from "../../Common/PageHeader/PageHeader";
 
 interface IAddTenantProps {
   open: boolean;
@@ -97,7 +102,6 @@ const styles = (theme: Theme) =>
       top: 0,
       paddingTop: 5,
       marginBottom: 10,
-      backgroundColor: "#fff",
       zIndex: 500,
     },
     tableTitle: {
@@ -121,14 +125,21 @@ const styles = (theme: Theme) =>
       color: "#777777",
     },
     ...modalBasic,
+    container: {
+      padding: "77px 0 0 0",
+      "& h6": {
+        color: "#777777",
+        fontSize: 14,
+      },
+      "& p": {
+        "& span:not(*[class*='smallUnit'])": {
+          fontSize: 16,
+        },
+      },
+    },
   });
 
-const AddTenant = ({
-  open,
-  closeModalAndRefresh,
-  setModalErrorSnackMessage,
-  classes,
-}: IAddTenantProps) => {
+const AddTenant = ({ classes }: IAddTenantProps) => {
   // Fields
   const [addSending, setAddSending] = useState<boolean>(false);
   const [tenantName, setTenantName] = useState<string>("");
@@ -1179,7 +1190,7 @@ const AddTenant = ({
           };
 
           setAddSending(false);
-          closeModalAndRefresh(true, newSrvAcc);
+          history.push("/tenants");
         })
         .catch((err) => {
           setAddSending(false);
@@ -1202,7 +1213,7 @@ const AddTenant = ({
     type: "other",
     enabled: true,
     action: () => {
-      closeModalAndRefresh(false, null);
+      history.push("/tenants");
     },
   };
 
@@ -2711,23 +2722,19 @@ const AddTenant = ({
   }
 
   return (
-    <ModalWrapper
-      title="Create Tenant"
-      modalOpen={open}
-      onClose={() => {
-        closeModalAndRefresh(false, null);
-      }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-      wideLimit={false}
-    >
+    <React.Fragment>
       {addSending && (
         <Grid item xs={12}>
           <LinearProgress />
         </Grid>
       )}
-      <GenericWizard wizardSteps={filteredWizardSteps} />
-    </ModalWrapper>
+      <PageHeader label={"Add Tenant"} />
+      <Grid container>
+        <Grid item xs={12} className={classes.container}>
+          <GenericWizard wizardSteps={filteredWizardSteps} />
+        </Grid>
+      </Grid>
+    </React.Fragment>
   );
 };
 

portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

@@ -40,6 +40,7 @@ import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt"
 import history from "../../../../history";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import PageHeader from "../../Common/PageHeader/PageHeader";
+import { Link } from "react-router-dom";
 
 interface ITenantsList {
   classes: any;
@@ -242,9 +243,8 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
               variant="contained"
               color="primary"
               startIcon={<CreateIcon />}
-              onClick={() => {
-                setCreateTenantOpen(true);
-              }}
+              component={Link}
+              to="/add-tenant"
             >
               Create Tenant
             </Button>