Add Tenant page refactor (#617)

Refactored add tenant page to be working with reducers & settings styles

Author: bexsoft

pkg/acl/endpoints.go

@@ -32,7 +32,6 @@ var (
 	bucketsDetail       = "/buckets/:bucketName"
 	serviceAccounts     = "/account"
 	tenants             = "/tenants"
-	addTenant           = "/add-tenant"
 	tenantsDetail       = "/namespaces/:tenantNamespace/tenants/:tenantName"
 	remoteBuckets       = "/remote-buckets"
 	replication         = "/replication"
@@ -282,7 +281,6 @@ 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: 4,
+			want: 3,
 		},
 		{
 			name: "Operator Only - all s3 endpoints",
@@ -125,7 +125,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 3,
 		},
 		{
 			name: "Operator Only - all admin and s3 endpoints",
@@ -135,14 +135,14 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 3,
 		},
 		{
 			name: "Operator Only - default endpoints",
 			args: args{
 				[]string{},
 			},
-			want: 4,
+			want: 3,
 		},
 	}
 

portal-ui/bindata_assetfs.go

@@ -452,3 +452,55 @@ export const snackBarCommon = {
     maxWidth: "calc(100% - 140px)",
   },
 };
+
+export const wizardCommon = {
+  multiContainer: {
+    display: "flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "flex-start" as const,
+  },
+  sizeFactorContainer: {
+    marginLeft: 8,
+    alignSelf: "flex-start" as const,
+  },
+  headerElement: {
+    position: "sticky" as const,
+    top: 0,
+    paddingTop: 5,
+    marginBottom: 10,
+    zIndex: 500,
+    backgroundColor: "#fff",
+  },
+  tableTitle: {
+    fontWeight: 700,
+    width: "30%",
+  },
+  poolError: {
+    color: "#dc1f2e",
+    fontSize: "0.75rem",
+    paddingLeft: 120,
+  },
+  error: {
+    color: "#dc1f2e",
+    fontSize: "0.75rem",
+  },
+  h3Section: {
+    marginTop: 0,
+  },
+  descriptionText: {
+    fontSize: 13,
+    color: "#777777",
+  },
+  container: {
+    padding: "77px 0 0 0",
+    "& h6": {
+      color: "#777777",
+      fontSize: 14,
+    },
+    "& p": {
+      "& span:not(*[class*='smallUnit'])": {
+        fontSize: 16,
+      },
+    },
+  },
+};

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -18,23 +18,31 @@ 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";
+import { Grid } from "@material-ui/core";
 
 const styles = (theme: Theme) =>
   createStyles({
     wizardMain: {
       display: "flex",
       width: "100%",
+      height: "100%",
       flexGrow: 1,
     },
     wizFromContainer: {
-      marginTop: "32px",
+      height: "calc(100vh - 365px)",
+      minHeight: 450,
+      padding: "0 30px",
     },
     wizardSteps: {
       minWidth: 180,
       marginRight: 10,
+      borderRight: "#eaeaea 1px solid",
+      display: "flex",
+      flexGrow: 1,
+      flexDirection: "column",
+      height: "100%",
       "& ul": {
-        padding: "0px 15px 0 30px",
+        padding: "0 15px 0 40px",
         marginTop: "0px",
 
         "& li": {
@@ -56,15 +64,14 @@ const styles = (theme: Theme) =>
         boxShadow: "none",
       },
     },
-    paddedGridItem: {
-      padding: "0px 10px 0px 10px",
+    paddedContentGrid: {
+      padding: "0 10px",
     },
-    menuPaper: {
-      padding: "20px",
-    },
-    paperContainer: {
-      padding: "10px",
-      maxWidth: "900px",
+    stepsLabel: {
+      fontSize: 20,
+      color: "#393939",
+      fontWeight: 600,
+      margin: "15px 12px",
     },
   });
 
@@ -114,34 +121,25 @@ const GenericWizard = ({ classes, wizardSteps }: IWizardMain) => {
 
   return (
     <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 item xs={12} sm={3} md={3} lg={3} xl={2}>
+        <div className={classes.wizardSteps}>
+          <span className={classes.stepsLabel}>Steps</span>
+          <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>
       </Grid>
       <Grid
         item
@@ -150,11 +148,9 @@ const GenericWizard = ({ classes, wizardSteps }: IWizardMain) => {
         md={9}
         lg={9}
         xl={10}
-        className={classes.paddedGridItem}
+        className={classes.paddedContentGrid}
       >
-        <Paper className={classes.paperContainer}>
-          <WizardPage page={wizardSteps[currentStep]} pageChange={pageChange} />
-        </Paper>
+        <WizardPage page={wizardSteps[currentStep]} pageChange={pageChange} />
       </Grid>
     </Grid>
   );

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

@@ -28,11 +28,14 @@ const styles = (theme: Theme) =>
     wizardComponent: {
       overflowY: "auto",
       marginBottom: 10,
+      height: "calc(100vh - 435px)",
     },
     buttonsContainer: {
       display: "flex",
       flexDirection: "row",
       justifyContent: "flex-end" as const,
+      padding: "10px 0",
+      borderTop: "#EAEAEA 1px solid",
       "& button": {
         marginLeft: 10,
       },

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

@@ -45,7 +45,7 @@ import Users from "./Users/Users";
 import Groups from "./Groups/Groups";
 import ConfigurationMain from "./Configurations/ConfigurationMain";
 import WebhookPanel from "./Configurations/ConfigurationPanels/WebhookPanel";
-import ListTenants from "./Tenants/ListTenants/ListTenants";
+import TenantsMain from "./Tenants/TenantsMain";
 import TenantDetails from "./Tenants/TenantDetails/TenantDetails";
 import ObjectBrowser from "./ObjectBrowser/ObjectBrowser";
 import ObjectRouting from "./Buckets/ListBuckets/Objects/ListObjects/ObjectRouting";
@@ -55,7 +55,6 @@ 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;
 
@@ -291,13 +290,9 @@ const Console = ({
       path: "/webhook/audit",
     },
     {
-      component: ListTenants,
+      component: TenantsMain,
       path: "/tenants",
     },
-    {
-      component: AddTenant,
-      path: "/add-tenant",
-    },
     {
       component: TenantDetails,
       path: "/namespaces/:tenantNamespace/tenants/:tenantName",