UX Create New Tenant (#1266)

minio · Nov 30, 2021 · 9db0c35 · 9db0c35
1 parent eefc6a7
commit 9db0c35
Show file tree

Hide file tree

Showing 15 changed files with 1,335 additions and 810 deletions.
diff --git a/...al-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/...al-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
@@ -125,7 +125,7 @@ export const RadioGroupSelector = ({
           )}
         </InputLabel>
       </Grid>
-      <Grid item xs>
+      <Grid item xs className={classes.radioOptionsLayout}>
         <RadioGroup
           aria-label={id}
           id={id}

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -732,6 +732,7 @@ export const wizardCommon = {
   },
   h3Section: {
     marginTop: 0,
+    margin: 0,
   },
   descriptionText: {
     fontSize: 13,
@@ -751,6 +752,7 @@ export const wizardCommon = {
   },
   paperWrapper: {
     padding: 12,
+    border: 0,
   },
 };
 
@@ -874,6 +876,9 @@ export const inputFieldStyles = {
       borderColor: "#07193E",
       borderWidth: 1,
     },
+    "&.Mui-error + p": {
+      marginLeft: 3,
+    },
   },
   disabled: {
     "&.MuiOutlinedInput-root::before": {
@@ -1202,3 +1207,10 @@ export const advancedFilterToggleStyles: any = {
     transform: "rotateZ(90deg)",
   },
 };
+
+export const createTenantCommon: any = {
+  fieldGroup: {
+    border: "1px solid #EAEAEA",
+    paddingTop: 5,
+  },
+};
diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
@@ -69,6 +69,7 @@ const styles = (theme: Theme) =>
     paddedContentGrid: {
       marginTop: 8,
       padding: "0 10px",
+      minHeight: 400,
     },
     stepsLabel: {
       fontSize: 20,
@@ -89,6 +90,21 @@ const styles = (theme: Theme) =>
       width: "100%",
       maxHeight: 90,
     },
+    verticalSteps: {
+      borderRight: "1px solid #EAEAEA",
+      background: "#FBFAFA",
+    },
+    stepsContainer: {
+      paddingTop: 0,
+      "& .MuiButtonBase-root.Mui-selected": {
+        background: "#EAEAEA",
+      },
+    },
+    stepItem: {
+      "&:hover": {
+        background: "rgba(247,247,247,0.7)",
+      },
+    },
   });
 
 const GenericWizard = ({
@@ -143,14 +159,24 @@ const GenericWizard = ({
   const stepsList = () => {
     return (
       <Fragment>
-        <List component="nav" dense={true}>
+        <List
+          component="nav"
+          dense={true}
+          classes={{
+            root: classes.stepsContainer,
+          }}
+        >
           {wizardSteps.map((step, index) => {
             return (
               <ListItem
                 button
+                disableRipple
                 onClick={() => pageChange(index)}
                 key={`wizard-${index.toString()}`}
                 selected={currentStep === index}
+                classes={{
+                  root: classes.stepItem,
+                }}
               >
                 <ListItemText primary={step.label} />
               </ListItem>
@@ -194,7 +220,15 @@ const GenericWizard = ({
         </Fragment>
       ) : (
         <Fragment>
-          <Grid item xs={12} sm={2} md={2} lg={2} xl={2}>
+          <Grid
+            item
+            xs={12}
+            sm={2}
+            md={2}
+            lg={2}
+            xl={2}
+            className={classes.verticalSteps}
+          >
             {stepsList()}
           </Grid>
         </Fragment>

diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx
@@ -26,12 +26,14 @@ const styles = (theme: Theme) =>
     wizardStepContainer: {
       display: "flex",
       flexDirection: "column",
+      flex: 1,
     },
     wizardComponent: {
       overflowY: "auto",
       marginBottom: 10,
       height: "calc(100vh - 100px - 80px)",
-      maxWidth: 840,
+      minHeight: 400,
+      flex: 1,
       width: "100%",
     },
     wizardModal: {
@@ -53,9 +55,9 @@ const styles = (theme: Theme) =>
       },
     },
     buttonInnerContainer: {
-      maxWidth: 840,
       width: "100%",
       textAlign: "right" as const,
+      marginRight: 15,
     },
   });
 

diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -51,6 +51,8 @@ import Affinity from "./Steps/Affinity";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import history from "../../../../history";
 import Images from "./Steps/Images";
+import PageLayout from "../../Common/Layout/PageLayout";
+import BackLink from "../../../../common/BackLink";
 
 interface IAddTenantProps {
   setErrorSnackMessage: typeof setErrorSnackMessage;
@@ -69,6 +71,9 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
+    pageBox: {
+      border: "1px solid #EAEAEA",
+    },
     ...modalBasic,
     ...wizardCommon,
     ...settingsCommon,
@@ -728,16 +733,17 @@ const AddTenant = ({
         />
       )}
       <PageHeader label={"Create New Tenant"} />
-      <Grid container>
+      <BackLink to={"/tenants"} label={"Return to Tenant List"} />
+      <PageLayout>
         {addSending && (
           <Grid item xs={12}>
             <LinearProgress />
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.pageBox}>
           <GenericWizard wizardSteps={filteredWizardSteps} />
         </Grid>
-      </Grid>
+      </PageLayout>
     </Fragment>
   );
 };

diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -56,12 +56,62 @@ const styles = (theme: Theme) =>
       textAlign: "right",
     },
     overlayAction: {
-      lineHeight: "50px",
-      float: "left",
+      marginLeft: 10,
       "& svg": {
         maxWidth: 15,
         maxHeight: 15,
       },
+      "& button": {
+        background: "#EAEAEA",
+      },
+    },
+    radioOptionsLayout: {
+      "& div": {
+        display: "flex",
+        flexFlow: "column",
+      },
+    },
+    affinityConfigField: {
+      display: "flex",
+    },
+
+    affinityFieldLabel: {
+      display: "flex",
+      flexFlow: "column",
+      flex: 1,
+    },
+    radioField: {
+      display: "flex",
+      alignItems: "flex-start",
+      marginTop: 10,
+      "& div:first-child": {
+        display: "flex",
+        flexFlow: "column",
+        alignItems: "baseline",
+        textAlign: "left !important",
+      },
+    },
+    affinityLabelKey: {
+      "& div:first-child": {
+        marginBottom: 0,
+      },
+    },
+    affinityLabelValue: {
+      marginLeft: 10,
+      "& div:first-child": {
+        marginBottom: 0,
+      },
+    },
+    rowActions: {
+      display: "flex",
+      alignItems: "center",
+    },
+    fieldContainer: {
+      marginBottom: 0,
+    },
+    affinityRow: {
+      marginBottom: 10,
+      display: "flex",
     },
     ...modalBasic,
     ...wizardCommon,
@@ -196,22 +246,32 @@ const Affinity = ({
           Configure how pods will be assigned to nodes
         </span>
       </div>
-      <Grid item xs={12}>
-        <RadioGroupSelector
-          currentSelection={podAffinity}
-          id="affinity-options"
-          name="affinity-options"
-          label="Type"
-          onChange={(e) => {
-            updateField("podAffinity", e.target.value);
-          }}
-          selectorOptions={[
-            { label: "None", value: "none" },
-            { label: "Default (Pod Anti-Affinnity)", value: "default" },
-            { label: "Node Selector", value: "nodeSelector" },
-          ]}
-        />
-        MinIO supports multiple configurations for Pod Affinity
+      <Grid xs={12} className={classes.affinityConfigField}>
+        <Grid item className={classes.affinityFieldLabel}>
+          <div className={classes.label}>Type</div>
+          <div
+            className={`${classes.descriptionText} ${classes.affinityHelpText}`}
+          >
+            MinIO supports multiple configurations for Pod Affinity
+          </div>
+          <Grid item className={classes.radioField}>
+            <RadioGroupSelector
+              classes={classes}
+              currentSelection={podAffinity}
+              id="affinity-options"
+              name="affinity-options"
+              label={" "}
+              onChange={(e) => {
+                updateField("podAffinity", e.target.value);
+              }}
+              selectorOptions={[
+                { label: "None", value: "none" },
+                { label: "Default (Pod Anti-Affinnity)", value: "default" },
+                { label: "Node Selector", value: "nodeSelector" },
+              ]}
+            />
+          </Grid>
+        </Grid>
       </Grid>
       {podAffinity === "nodeSelector" && (
         <Fragment>
@@ -238,8 +298,8 @@ const Affinity = ({
               {keyValuePairs &&
                 keyValuePairs.map((kvp, i) => {
                   return (
-                    <React.Fragment>
-                      <Grid item xs={5}>
+                    <Grid item xs={12} className={classes.affinityRow}>
+                      <Grid item xs={5} className={classes.affinityLabelKey}>
                         {keyOptions.length > 0 && (
                           <SelectWrapper
                             onChange={(e: SelectChangeEvent<string>) => {
@@ -258,6 +318,7 @@ const Affinity = ({
                             label={""}
                             value={kvp.key}
                             options={keyOptions}
+                            classes={classes.fieldContainer}
                           />
                         )}
                         {keyOptions.length === 0 && (
@@ -276,10 +337,11 @@ const Affinity = ({
                             }}
                             index={i}
                             placeholder={"Key"}
+                            classes={classes.fieldContainer}
                           />
                         )}
                       </Grid>
-                      <Grid item xs={5}>
+                      <Grid item xs={5} className={classes.affinityLabelValue}>
                         {keyOptions.length > 0 && (
                           <SelectWrapper
                             onChange={(e: SelectChangeEvent<string>) => {
@@ -301,6 +363,7 @@ const Affinity = ({
                                   })
                                 : []
                             }
+                            classes={classes.fieldContainer}
                           />
                         )}
                         {keyOptions.length === 0 && (
@@ -319,10 +382,11 @@ const Affinity = ({
                             }}
                             index={i}
                             placeholder={"value"}
+                            classes={classes.fieldContainer}
                           />
                         )}
                       </Grid>
-                      <Grid item xs={2}>
+                      <Grid item xs={2} className={classes.rowActions}>
                         <div className={classes.overlayAction}>
                           <IconButton
                             size={"small"}
@@ -359,7 +423,7 @@ const Affinity = ({
                           </div>
                         )}
                       </Grid>
-                    </React.Fragment>
+                    </Grid>
                   );
                 })}
             </Grid>