Move Tenant from Modal to Page (#596)

* Move Tenant from Modal to Page * Address comments * Small margin tweak
2021-02-10 15:41:07 -08:00
parent 1dcdc61ce8
commit cdadb05551
7 changed files with 103 additions and 56 deletions
--- a/pkg/acl/endpoints.go
+++ b/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,
 }

--- a/pkg/acl/endpoints_test.go
+++ b/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,
 		},
 	}

--- a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
+++ b/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>
  );
 };

--- a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx
+++ b/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,
    },
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/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",
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
+++ b/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>
  );
 };

--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/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>