From cdadb055518af3a7ee6d68b7ae3a3820e6747b0a Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Wed, 10 Feb 2021 15:41:07 -0800 Subject: [PATCH] Move Tenant from Modal to Page (#596) * Move Tenant from Modal to Page * Address comments * Small margin tweak --- pkg/acl/endpoints.go | 2 + pkg/acl/endpoints_test.go | 8 +- .../Common/GenericWizard/GenericWizard.tsx | 84 +++++++++++++------ .../Common/GenericWizard/WizardPage.tsx | 1 - portal-ui/src/screens/Console/Console.tsx | 5 ++ .../Console/Tenants/ListTenants/AddTenant.tsx | 53 +++++++----- .../Tenants/ListTenants/ListTenants.tsx | 6 +- 7 files changed, 103 insertions(+), 56 deletions(-) diff --git a/pkg/acl/endpoints.go b/pkg/acl/endpoints.go index 06d61e9f3..f09ccd112 100644 --- 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, } diff --git a/pkg/acl/endpoints_test.go b/pkg/acl/endpoints_test.go index 697855832..df1e8cf97 100644 --- 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, }, } diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx index 56de211e7..4f38b52d0 100644 --- 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 ( -
-
-
    - {wizardSteps.map((step, index) => { - return ( -
  • - -
    • - ); - })} -
-
-
- -
-
+ + + +
+
    + {wizardSteps.map((step, index) => { + return ( +
  • + +
    • + ); + })} +
+
+ + + + + + + + ); }; diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx index 90f840b26..101967b3f 100644 --- 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, }, diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index b0a429dce..7ca28a33b 100644 --- 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", diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx index 8296a1d71..7331b8fef 100644 --- 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(false); const [tenantName, setTenantName] = useState(""); @@ -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 ( - { - closeModalAndRefresh(false, null); - }} - aria-labelledby="alert-dialog-title" - aria-describedby="alert-dialog-description" - wideLimit={false} - > + {addSending && ( )} - - + + + + + + + ); }; diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx index 8c2ee1ed7..a62623cce 100644 --- 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={} - onClick={() => { - setCreateTenantOpen(true); - }} + component={Link} + to="/add-tenant" > Create Tenant