Fixed inconsistences in create tenant modal (#349)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>
2020-10-27 13:43:12 -06:00
parent d6f97841d4
commit 078e09ba76
8 changed files with 167 additions and 166 deletions
--- a/portal-ui/bindata_assetfs.go
+++ b/portal-ui/bindata_assetfs.go
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
@@ -35,20 +35,20 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 const styles = (theme: Theme) =>
  createStyles({
    errorBlock: {
-      color: "red"
+      color: "red",
    },
    minTableHeader: {
      color: "#393939",
      "& tr": {
        "& th": {
-          fontWeight: "bold"
-        }
-      }
+          fontWeight: "bold",
+        },
+      },
    },
    buttonContainer: {
-      textAlign: "right"
+      textAlign: "right",
    },
-    ...modalBasic
+    ...modalBasic,
  });

 interface IEnableBucketEncryptionProps {
@@ -108,12 +108,7 @@ class EnableBucketEncryption extends React.Component<

  render() {
    const { classes, open } = this.props;
-    const {
-      loading,
-      encryptionError,
-      kmsKeyID,
-      encryptionType
-    } = this.state;
+    const { loading, encryptionError, kmsKeyID, encryptionType } = this.state;

    return (
      <ModalWrapper
@@ -162,7 +157,7 @@ class EnableBucketEncryption extends React.Component<
                    {
                      label: "SSE-KMS",
                      value: "sse-kms",
-                    }
+                    },
                  ]}
                />
              </Grid>
--- a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
@@ -93,12 +93,7 @@ const CommentBoxWrapper = ({
        }`}
      >
        {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={`${error !== "" ? classes.fieldLabelError : ""} ${
-              classes.inputLabel
-            }`}
-          >
+          <InputLabel htmlFor={id} className={classes.inputLabel}>
            <span>
              {label}
              {required ? "*" : ""}
--- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -76,6 +76,12 @@ const styles = (theme: Theme) =>
      display: "flex",
      alignItems: "center",
    },
+    fieldBottom: {
+      borderBottom: "#9c9c9c 1px solid",
+    },
+    fileInputField: {
+      margin: "13px 0",
+    },
  });

 const FileSelector = ({
@@ -98,7 +104,7 @@ const FileSelector = ({
      <Grid
        item
        xs={12}
-        className={`${classes.fieldContainer} ${
+        className={`${classes.fieldBottom} ${classes.fieldContainer} ${
          error !== "" ? classes.errorInField : ""
        }`}
      >
@@ -137,6 +143,7 @@ const FileSelector = ({
              accept={accept}
              required={required}
              disabled={disabled}
+              className={classes.fileInputField}
            />

            {value !== "" && (
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
@@ -109,7 +109,6 @@ const inputStyles = makeStyles((theme: Theme) =>
    },
    error: {
      color: "#b53b4b",
-      boxShadow: "inset 0px 0px 1px 1px #b53b4b",
    },
  })
 );
@@ -166,12 +165,7 @@ const InputBoxWrapper = ({
        }`}
      >
        {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={`${error !== "" ? classes.fieldLabelError : ""} ${
-              classes.inputLabel
-            }`}
-          >
+          <InputLabel htmlFor={id} className={classes.inputLabel}>
            <span>
              {label}
              {required ? "*" : ""}
--- a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
+++ b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
@@ -30,7 +30,7 @@ const styles = (theme: Theme) =>
      minWidth: 180,
      marginRight: 10,
      "& ul": {
-        padding: 15,
+        padding: "0 15px 0 0",

        "& li": {
          listStyle: "lower-roman",
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
@@ -100,6 +100,13 @@ const styles = (theme: Theme) =>
      color: "#dc1f2e",
      fontSize: "0.75rem",
    },
+    h3Section: {
+      marginTop: 0,
+    },
+    descriptionText: {
+      fontSize: 13,
+      color: "#777777",
+    },
    ...modalBasic,
  });

@@ -949,8 +956,10 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Name Tenant</h3>
-            <span>How would you like to name this new tenant?</span>
+            <h3 className={classes.h3Section}>Name Tenant</h3>
+            <span className={classes.descriptionText}>
+              How would you like to name this new tenant?
+            </span>
          </div>
          <Grid item xs={12}>
            <InputBoxWrapper
@@ -996,7 +1005,7 @@ const AddTenant = ({
          </Grid>
          <Grid item xs={12}>
            <br />
-            <span>
+            <span className={classes.descriptionText}>
              Check 'Advanced Mode' for additional configuration options, such
              as IDP, Disk Encryption, and customized TLS/SSL Certificates.
              <br />
@@ -1032,8 +1041,10 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Configure</h3>
-            <span>Basic configurations for tenant management</span>
+            <h3 className={classes.h3Section}>Configure</h3>
+            <span className={classes.descriptionText}>
+              Basic configurations for tenant management
+            </span>
          </div>

          <Grid item xs={12}>
@@ -1115,8 +1126,8 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>IDP</h3>
-            <span>
+            <h3 className={classes.h3Section}>IDP</h3>
+            <span className={classes.descriptionText}>
              Access to the tenant can be controlled via an external Identity
              Manager.
            </span>
@@ -1303,7 +1314,7 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Security</h3>
+            <h3 className={classes.h3Section}>Security</h3>
          </div>
          <Grid item xs={12}>
            <FormSwitchWrapper
@@ -1425,8 +1436,10 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Encryption</h3>
-            <span>How would you like to encrypt the information at rest.</span>
+            <h3 className={classes.h3Section}>Encryption</h3>
+            <span className={classes.descriptionText}>
+              How would you like to encrypt the information at rest.
+            </span>
          </div>
          <Grid item xs={12}>
            <FormSwitchWrapper
@@ -1887,8 +1900,10 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Tenant Size</h3>
-            <span>Please select the desired capacity</span>
+            <h3 className={classes.h3Section}>Tenant Size</h3>
+            <span className={classes.descriptionText}>
+              Please select the desired capacity
+            </span>
          </div>
          <span className={classes.error}>{distribution.error}</span>
          <Grid item xs={12}>
@@ -1927,7 +1942,7 @@ const AddTenant = ({
              </div>
              <div className={classes.sizeFactorContainer}>
                <SelectWrapper
-                  label=""
+                  label={"Unit"}
                  id="size_factor"
                  name="size_factor"
                  value={sizeFactor}
@@ -1967,7 +1982,7 @@ const AddTenant = ({
                value={ecParity}
                options={ecParityChoices}
              />
-              <span>
+              <span className={classes.descriptionText}>
                Please select the desired parity. This setting will change the
                max usable capacity in the cluster
              </span>
@@ -2015,8 +2030,10 @@ const AddTenant = ({
      componentRender: (
        <React.Fragment>
          <div className={classes.headerElement}>
-            <h3>Review</h3>
-            <span>Review the details of the new tenant</span>
+            <h3 className={classes.h3Section}>Review</h3>
+            <span className={classes.descriptionText}>
+              Review the details of the new tenant
+            </span>
          </div>
          {addError !== "" && (
            <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -33,7 +33,11 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
 import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
 import history from "../../../../history";
 import RefreshIcon from "@material-ui/icons/Refresh";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";

 interface ITenantsList {
@@ -70,18 +74,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -248,17 +242,6 @@ const ListTenants = ({ classes }: ITenantsList) => {
      <Grid container>
        <Grid item xs={12} className={classes.container}>
          <Grid item xs={12} className={classes.actionsTray}>
-            <IconButton
-              color="primary"
-              aria-label="Refresh Tenant List"
-              component="span"
-              onClick={() => {
-                setIsLoading(true);
-              }}
-            >
-              <RefreshIcon />
-            </IconButton>
-
            <TextField
              placeholder="Search Tenants"
              className={classes.searchField}
@@ -276,6 +259,16 @@ const ListTenants = ({ classes }: ITenantsList) => {
                ),
              }}
            />
+            <IconButton
+              color="primary"
+              aria-label="Refresh Tenant List"
+              component="span"
+              onClick={() => {
+                setIsLoading(true);
+              }}
+            >
+              <RefreshIcon />
+            </IconButton>
            <Button
              variant="contained"
              color="primary"