UX Tiers screen (#1258)

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -112,9 +112,9 @@ const FileSelector = ({
       <Grid
         item
         xs={12}
-        className={`${classes.fieldBottom} ${classes.fieldContainer} ${
-          error !== "" ? classes.errorInField : ""
-        }`}
+        className={`${classes.fileInputField} ${classes.fieldBottom} ${
+          classes.fieldContainer
+        } ${error !== "" ? classes.errorInField : ""}`}
       >
         {label !== "" && (
           <InputLabel

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

@@ -1120,6 +1120,25 @@ export const formFieldStyles = {
   },
 };
 
+export const fileInputStyles = {
+  fieldBottom: {
+    borderBottom: 0,
+  },
+  fileReselect: {
+    border: "1px solid #EAEAEA",
+    width: "100%",
+    paddingLeft: 10,
+  },
+  textBoxContainer: {
+    border: "1px solid #EAEAEA",
+    padding: 5,
+    "& input": {
+      width: "100%",
+      margin: "auto",
+    },
+  },
+};
+
 export const deleteDialogStyles = {
   root: {
     "& .MuiPaper-root": {

portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx

@@ -24,6 +24,8 @@ import withStyles from "@mui/styles/withStyles";
 import { Button } from "@mui/material";
 import { setErrorSnackMessage } from "../../../../actions";
 import {
+  fileInputStyles,
+  formFieldStyles,
   modalBasic,
   settingsCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
@@ -31,7 +33,6 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
-import BackSettingsIcon from "../../../../icons/BackSettingsIcon";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import {
   azureServiceName,
@@ -40,11 +41,14 @@ import {
   s3ServiceName,
   tierTypes,
 } from "./utils";
+import BackLink from "../../../../common/BackLink";
+import PageLayout from "../../Common/Layout/PageLayout";
 
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
     ...settingsCommon,
+    ...formFieldStyles,
     strongText: {
       fontWeight: 700,
     },
@@ -72,7 +76,6 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       justifyContent: "start",
       marginBottom: 16,
-      marginRight: 8,
       cursor: "pointer",
       padding: 0,
       overflow: "hidden",
@@ -104,6 +107,11 @@ const styles = (theme: Theme) =>
     backTo: {
       margin: "20px 0px 0",
     },
+    formBox: {
+      border: "1px solid #EAEAEA",
+      padding: 15,
+    },
+    ...fileInputStyles,
   });
 
 interface IAddNotificationEndpointProps {
@@ -340,22 +348,15 @@ const AddTierConfiguration = ({
     setName(e.target.value.toUpperCase());
   };
 
-  const backClick = () => {
-    history.push("/tiers/add");
-  };
-
   const targetElement = tierTypes.find((item) => item.serviceName === type);
 
   return (
     <Fragment>
       <PageHeader label="Tiers" />
-      <Grid container className={classes.mainCont}>
-        <Grid item xs={12} className={classes.backTo}>
-          <button onClick={backClick} className={classes.backButton}>
-            <BackSettingsIcon />
-            Back To Tier Type Selection
-          </button>
-        </Grid>
+
+      <BackLink to="/tiers/add" label="Back To Tier Type Selection" />
+
+      <PageLayout>
         {type !== "" && (
           <Fragment>
             <Grid item xs={12}>
@@ -383,62 +384,71 @@ const AddTierConfiguration = ({
           </Fragment>
         )}
         <Grid item xs={12}>
-          <form noValidate onSubmit={submitForm}>
-            <Grid item xs={12}>
-              <Grid container>
+          <div className={classes.formBox}>
+            <form noValidate onSubmit={submitForm}>
+              <Grid item xs={12}>
                 {type !== "" && (
                   <Fragment>
-                    <InputBoxWrapper
-                      id="name"
-                      name="name"
-                      label="Name"
-                      placeholder="Enter Name (Eg. REMOTE-TIER)"
-                      value={name}
-                      onChange={updateTierName}
-                      error={nameInputError}
-                    />
-                    <InputBoxWrapper
-                      id="endpoint"
-                      name="endpoint"
-                      label="Endpoint"
-                      placeholder="Enter Endpoint"
-                      value={endpoint}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setEndpoint(e.target.value);
-                      }}
-                    />
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        id="name"
+                        name="name"
+                        label="Name"
+                        placeholder="Enter Name (Eg. REMOTE-TIER)"
+                        value={name}
+                        onChange={updateTierName}
+                        error={nameInputError}
+                      />
+                    </div>
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        id="endpoint"
+                        name="endpoint"
+                        label="Endpoint"
+                        placeholder="Enter Endpoint"
+                        value={endpoint}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setEndpoint(e.target.value);
+                        }}
+                      />
+                    </div>
                     {(type === s3ServiceName || type === minioServiceName) && (
                       <Fragment>
-                        <InputBoxWrapper
-                          id="accessKey"
-                          name="accessKey"
-                          label="Access Key"
-                          placeholder="Enter Access Key"
-                          value={accessKey}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setAccessKey(e.target.value);
-                          }}
-                        />
-                        <InputBoxWrapper
-                          id="secretKey"
-                          name="secretKey"
-                          label="Secret Key"
-                          placeholder="Enter Secret Key"
-                          value={secretKey}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setSecretKey(e.target.value);
-                          }}
-                        />
+                        <div className={classes.formFieldRow}>
+                          <InputBoxWrapper
+                            id="accessKey"
+                            name="accessKey"
+                            label="Access Key"
+                            placeholder="Enter Access Key"
+                            value={accessKey}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              setAccessKey(e.target.value);
+                            }}
+                          />
+                        </div>
+                        <div className={classes.formFieldRow}>
+                          <InputBoxWrapper
+                            id="secretKey"
+                            name="secretKey"
+                            label="Secret Key"
+                            placeholder="Enter Secret Key"
+                            value={secretKey}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              setSecretKey(e.target.value);
+                            }}
+                          />
+                        </div>
                       </Fragment>
                     )}
                     {type === gcsServiceName && (
-                      <Fragment>
+                      <div className={classes.formFieldRow}>
                         <FileSelector
                           accept=".json"
+                          classes={classes}
                           id="creds"
                           label="Credentials"
                           name="creds"
@@ -448,98 +458,110 @@ const AddTierConfiguration = ({
                           }}
                           value={creds}
                         />
-                      </Fragment>
+                      </div>
                     )}
                     {type === azureServiceName && (
                       <Fragment>
-                        <InputBoxWrapper
-                          id="accountName"
-                          name="accountName"
-                          label="Account Name"
-                          placeholder="Enter Account Name"
-                          value={accountName}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setAccountName(e.target.value);
-                          }}
-                        />
-                        <InputBoxWrapper
-                          id="accountKey"
-                          name="accountKey"
-                          label="Account Key"
-                          placeholder="Enter Account Key"
-                          value={accountKey}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setAccountKey(e.target.value);
-                          }}
-                        />
+                        <div className={classes.formFieldRow}>
+                          <InputBoxWrapper
+                            id="accountName"
+                            name="accountName"
+                            label="Account Name"
+                            placeholder="Enter Account Name"
+                            value={accountName}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              setAccountName(e.target.value);
+                            }}
+                          />
+                        </div>
+                        <div className={classes.formFieldRow}>
+                          <InputBoxWrapper
+                            id="accountKey"
+                            name="accountKey"
+                            label="Account Key"
+                            placeholder="Enter Account Key"
+                            value={accountKey}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              setAccountKey(e.target.value);
+                            }}
+                          />
+                        </div>
                       </Fragment>
                     )}
-                    <InputBoxWrapper
-                      id="bucket"
-                      name="bucket"
-                      label="Bucket"
-                      placeholder="Enter Bucket"
-                      value={bucket}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setBucket(e.target.value);
-                      }}
-                    />
-                    <InputBoxWrapper
-                      id="prefix"
-                      name="prefix"
-                      label="Prefix"
-                      placeholder="Enter Prefix"
-                      value={prefix}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setPrefix(e.target.value);
-                      }}
-                    />
-                    <InputBoxWrapper
-                      id="region"
-                      name="region"
-                      label="Region"
-                      placeholder="Enter Region"
-                      value={region}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setRegion(e.target.value);
-                      }}
-                    />
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        id="bucket"
+                        name="bucket"
+                        label="Bucket"
+                        placeholder="Enter Bucket"
+                        value={bucket}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setBucket(e.target.value);
+                        }}
+                      />
+                    </div>
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        id="prefix"
+                        name="prefix"
+                        label="Prefix"
+                        placeholder="Enter Prefix"
+                        value={prefix}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setPrefix(e.target.value);
+                        }}
+                      />
+                    </div>
+                    <div className={classes.formFieldRow}>
+                      <InputBoxWrapper
+                        id="region"
+                        name="region"
+                        label="Region"
+                        placeholder="Enter Region"
+                        value={region}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setRegion(e.target.value);
+                        }}
+                      />
+                    </div>
                     {type === s3ServiceName ||
                       (type === minioServiceName && (
-                        <InputBoxWrapper
-                          id="storageClass"
-                          name="storageClass"
-                          label="Storage Class"
-                          placeholder="Enter Storage Class"
-                          value={storageClass}
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setStorageClass(e.target.value);
-                          }}
-                        />
+                        <div className={classes.formFieldRow}>
+                          <InputBoxWrapper
+                            id="storageClass"
+                            name="storageClass"
+                            label="Storage Class"
+                            placeholder="Enter Storage Class"
+                            value={storageClass}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
+                              setStorageClass(e.target.value);
+                            }}
+                          />
+                        </div>
                       ))}
                   </Fragment>
                 )}
               </Grid>
-            </Grid>
-            <Grid item xs={12} className={classes.settingsButtonContainer}>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                disabled={saving || !isFormValid}
-              >
-                Save
-              </Button>
-            </Grid>
-          </form>
+              <Grid item xs={12} className={classes.settingsButtonContainer}>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  disabled={saving || !isFormValid}
+                >
+                  Save
+                </Button>
+              </Grid>
+            </form>
+          </div>
         </Grid>
-      </Grid>
+      </PageLayout>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx

@@ -20,15 +20,15 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { LinearProgress, TextField } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
-import InputAdornment from "@mui/material/InputAdornment";
 import {
   actionsTray,
   containerForHeader,
   searchField,
   settingsCommon,
+  tableStyles,
   typesSelection,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { AddIcon, TiersIcon } from "../../../../icons";
@@ -38,13 +38,19 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 
-import UpdateTierCredentiasModal from "./UpdateTierCredentiasModal";
 import RefreshIcon from "../../../../icons/RefreshIcon";
-import SearchIcon from "../../../../icons/SearchIcon";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import HelpBox from "../../../../common/HelpBox";
 import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import AButton from "../../Common/AButton/AButton";
+import PageLayout from "../../Common/Layout/PageLayout";
+import SearchBox from "../../Common/SearchBox";
+
+import withSuspense from "../../Common/Components/withSuspense";
+
+const UpdateTierCredentialsModal = withSuspense(
+  React.lazy(() => import("./UpdateTierCredentialsModal"))
+);
 
 interface IListTiersConfig {
   classes: any;
@@ -59,25 +65,25 @@ const styles = (theme: Theme) =>
     ...settingsCommon,
     ...typesSelection,
     ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
     customConfigurationPage: {
       minHeight: 400,
     },
     actionsTray: {
       ...actionsTray.actionsTray,
     },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
+    searchField: {
+      ...searchField.searchField,
+      marginRight: "auto",
+      maxWidth: 380,
     },
+
+    rightActionButtons: {
+      display: "flex",
+      "& button": {
+        whiteSpace: "nowrap",
+      },
+    },
+    ...tableStyles,
   });
 
 const ListTiersConfiguration = ({
@@ -183,61 +189,48 @@ const ListTiersConfiguration = ({
   return (
     <Fragment>
       {updateCredentialsOpen && (
-        <UpdateTierCredentiasModal
+        <UpdateTierCredentialsModal
           open={updateCredentialsOpen}
           tierData={selectedTier}
           closeModalAndRefresh={closeTierCredentials}
         />
       )}
       <PageHeader label="Tiers" />
-      <Grid container className={classes.container}>
+      <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
-          <TextField
+          <SearchBox
             placeholder="Filter"
-            className={classes.searchField}
-            id="search-resource"
-            label=""
-            onChange={(event) => {
-              setFilter(event.target.value);
-            }}
-            InputProps={{
-              disableUnderline: true,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-            variant="standard"
+            onChange={setFilter}
+            classes={classes}
           />
-          <BoxIconButton
-            color="primary"
-            aria-label="Refresh List"
-            onClick={() => {
-              setIsLoading(true);
-            }}
-            size="large"
-          >
-            <RefreshIcon />
-          </BoxIconButton>
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
-            onClick={addTier}
-          >
-            Add Tier
-          </Button>
-        </Grid>
-        <Grid item xs={12}>
-          <br />
+
+          <div className={classes.rightActionButtons}>
+            <BoxIconButton
+              color="primary"
+              aria-label="Refresh List"
+              onClick={() => {
+                setIsLoading(true);
+              }}
+              size="large"
+            >
+              <RefreshIcon />
+            </BoxIconButton>
+            <Button
+              variant="contained"
+              color="primary"
+              endIcon={<AddIcon />}
+              onClick={addTier}
+            >
+              Add Tier
+            </Button>
+          </div>
         </Grid>
         {isLoading && <LinearProgress />}
         {!isLoading && (
           <Fragment>
             {records.length > 0 && (
               <Fragment>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.tableBlock}>
                   <TableWrapper
                     itemActions={[
                       {
@@ -350,7 +343,7 @@ const ListTiersConfiguration = ({
             )}
           </Fragment>
         )}
-      </Grid>
+      </PageLayout>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx

@@ -29,6 +29,7 @@ import {
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import { tierTypes } from "./utils";
 import BackLink from "../../../../common/BackLink";
+import PageLayout from "../../Common/Layout/PageLayout";
 
 interface ITypeTiersConfig {
   classes: any;
@@ -87,14 +88,13 @@ const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {
   return (
     <Fragment>
       <PageHeader label="Tier Configuration" />
-      <Grid container className={classes.mainCont}>
-        <Grid item xs={12}>
-          <Grid item xs={12} className={classes.mainTitle}>
-            <BackLink to="/tiers" label="Return to Configured Tiers" />
-          </Grid>
+      <BackLink to="/tiers" label="Return to Configured Tiers" />
+
+      <PageLayout>
+        <Grid>
           <Grid item xs={12}>
             <Grid item xs={12}>
-              <Grid item xs={12} className={classes.centerElements}>
+              <Grid item xs={12}>
                 <div className={classes.iconContainer}>
                   {tierTypes.map((tierType, index) => (
                     <button
@@ -122,7 +122,7 @@ const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {
             </Grid>
           </Grid>
         </Grid>
-      </Grid>
+      </PageLayout>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx

@@ -22,7 +22,10 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
@@ -53,6 +56,7 @@ const styles = (theme: Theme) =>
       textAlign: "right",
     },
     ...modalBasic,
+    ...formFieldStyles,
   });
 
 const UpdateTierCredentialsModal = ({
@@ -143,34 +147,39 @@ const UpdateTierCredentialsModal = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
+          <Grid item xs={12}>
             {type === "s3" && (
               <Fragment>
-                <InputBoxWrapper
-                  id="accessKey"
-                  name="accessKey"
-                  label="Access Key"
-                  placeholder="Enter Access Key"
-                  value={accessKey}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setAccessKey(e.target.value);
-                  }}
-                />
-                <InputBoxWrapper
-                  id="secretKey"
-                  name="secretKey"
-                  label="Secret Key"
-                  placeholder="Enter Secret Key"
-                  value={secretKey}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setSecretKey(e.target.value);
-                  }}
-                />
+                <div className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="accessKey"
+                    name="accessKey"
+                    label="Access Key"
+                    placeholder="Enter Access Key"
+                    value={accessKey}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setAccessKey(e.target.value);
+                    }}
+                  />
+                </div>
+                <div className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="secretKey"
+                    name="secretKey"
+                    label="Secret Key"
+                    placeholder="Enter Secret Key"
+                    value={secretKey}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setSecretKey(e.target.value);
+                    }}
+                  />
+                </div>
               </Fragment>
             )}
             {type === "gcs" && (
               <Fragment>
                 <FileSelector
+                  classes={classes}
                   accept=".json"
                   id="creds"
                   label="Credentials"
@@ -185,26 +194,30 @@ const UpdateTierCredentialsModal = ({
             )}
             {type === "azure" && (
               <Fragment>
-                <InputBoxWrapper
-                  id="accountName"
-                  name="accountName"
-                  label="Account Name"
-                  placeholder="Enter Account Name"
-                  value={accountName}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setAccountName(e.target.value);
-                  }}
-                />
-                <InputBoxWrapper
-                  id="accountKey"
-                  name="accountKey"
-                  label="Account Key"
-                  placeholder="Enter Account Key"
-                  value={accountKey}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setAccountKey(e.target.value);
-                  }}
-                />
+                <div className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="accountName"
+                    name="accountName"
+                    label="Account Name"
+                    placeholder="Enter Account Name"
+                    value={accountName}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setAccountName(e.target.value);
+                    }}
+                  />
+                </div>
+                <div className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="accountKey"
+                    name="accountKey"
+                    label="Account Key"
+                    placeholder="Enter Account Key"
+                    value={accountKey}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setAccountKey(e.target.value);
+                    }}
+                  />
+                </div>
               </Fragment>
             )}
           </Grid>