UX Notification endpoints (#1257)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2021-11-26 05:27:24 +00:00
parent 62fe583a21
commit b9873fa471
6 changed files with 143 additions and 169 deletions
--- a/portal-ui/src/common/BackLink.tsx
+++ b/portal-ui/src/common/BackLink.tsx
@@ -55,7 +55,7 @@ const BackLink = ({ to, label, classes }: IBackLink) => {
      <div className={classes.icon}>
        <BackSettingsIcon />
      </div>
-      <div>{label}</div>
+      <div className={classes.label}>{label}</div>
    </Link>
  );
 };
--- a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
@@ -40,10 +40,11 @@ import { ErrorResponseHandler } from "../../../common/types";

 import { IElementValue } from "../Configurations/types";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { BackSettingsIcon } from "../../../icons";
 import history from "../../../history";

 import withSuspense from "../Common/Components/withSuspense";
+import BackLink from "../../../common/BackLink";
+import PageLayout from "../Common/Layout/PageLayout";

 const ConfMySql = withSuspense(
  React.lazy(() => import("./CustomForms/ConfMySql"))
@@ -61,23 +62,6 @@ const styles = (theme: Theme) =>
  createStyles({
    ...modalBasic,
    ...settingsCommon,
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    lambdaFormIndicator: {
-      display: "flex",
-      marginBottom: 40,
-    },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
    lambdaNotif: {
      background:
        "linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
@@ -88,7 +72,6 @@ const styles = (theme: Theme) =>
      alignItems: "center",
      justifyContent: "start",
      marginBottom: 16,
-      marginRight: 8,
      cursor: "pointer",
      padding: 0,
      overflow: "hidden",
@@ -112,13 +95,9 @@ const styles = (theme: Theme) =>
      fontFamily: "Lato,sans-serif",
      paddingLeft: 18,
    },
-    mainCont: {
-      maxWidth: 1180,
-      paddingLeft: 38,
-      paddingRight: 38,
-    },
-    backTo: {
-      margin: "20px 0px 0",
+    formBox: {
+      border: "1px solid #EAEAEA",
+      padding: 15,
    },
  });

@@ -208,20 +187,13 @@ const AddNotificationEndpoint = ({
  return (
    <Fragment>
      <PageHeader label="Notification Endpoints" />
-      <form noValidate onSubmit={submitForm}>
-        <Grid container className={classes.mainCont}>
-          <Grid item xs={12} className={classes.backTo}>
-            <button
-              onClick={() => {
-                history.push("/notification-endpoints/add");
-              }}
-              className={classes.backButton}
-            >
-              <BackSettingsIcon />
-              Back To Supported Services
-            </button>
-          </Grid>
+      <BackLink
+        to="/notification-endpoints/add"
+        label={" Back To Supported Services"}
+      />

+      <PageLayout>
+        <form noValidate onSubmit={submitForm}>
          {service !== "" && (
            <Fragment>
              <Grid item xs={12}>
@@ -247,23 +219,25 @@ const AddNotificationEndpoint = ({
                  </div>
                )}
              </Grid>
-              <Grid item xs={12}>
-                {srvComponent}
-              </Grid>
-              <Grid item xs={12} className={classes.settingsButtonContainer}>
-                <Button
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  disabled={saving}
-                >
-                  Save Notification Target
-                </Button>
-              </Grid>
+              <div className={classes.formBox}>
+                <Grid item xs={12} className={classes.configForm}>
+                  {srvComponent}
+                </Grid>
+                <Grid item xs={12} className={classes.settingsButtonContainer}>
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                    disabled={saving}
+                  >
+                    Save Notification Target
+                  </Button>
+                </Grid>
+              </div>
            </Fragment>
          )}
-        </Grid>
-      </form>
+        </form>
+      </PageLayout>
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
@@ -22,7 +22,10 @@ import Grid from "@mui/material/Grid";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { IElementValue } from "../../Configurations/types";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+} from "../../Common/FormComponents/common/styleLibrary";
 import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
@@ -35,6 +38,7 @@ interface IConfMySqlProps {
 const styles = (theme: Theme) =>
  createStyles({
    ...modalBasic,
+    ...formFieldStyles,
  });

 const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
@@ -146,7 +150,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
      </Grid>
      {useDsnString ? (
        <React.Fragment>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
            <InputBoxWrapper
              id="dsn-string"
              name="dsn_string"
@@ -162,7 +166,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
        <React.Fragment>
          <Grid item xs={12}>
            <Grid item xs={12} className={classes.configureString}>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="host"
                  name="host"
@@ -174,7 +178,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="db-name"
                  name="db-name"
@@ -186,7 +190,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="port"
                  name="port"
@@ -199,7 +203,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
                />
              </Grid>

-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="user"
                  name="user"
@@ -211,7 +215,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="password"
                  name="password"
@@ -232,7 +236,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          </Grid>
        </React.Fragment>
      )}
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="table"
          name="table"
@@ -245,7 +249,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <RadioGroupSelector
          currentSelection={format}
          id="format"
@@ -261,7 +265,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          ]}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="queue-dir"
          name="queue_dir"
@@ -274,7 +278,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="queue-limit"
          name="queue_limit"
@@ -288,7 +292,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <CommentBoxWrapper
          id="comment"
          name="comment"
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
@@ -23,7 +23,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import { IElementValue } from "../../Configurations/types";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+} from "../../Common/FormComponents/common/styleLibrary";
 import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
@@ -36,6 +39,7 @@ interface IConfPostgresProps {
 const styles = (theme: Theme) =>
  createStyles({
    ...modalBasic,
+    ...formFieldStyles,
  });

 const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
@@ -218,7 +222,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
      </Grid>
      {useConnectionString ? (
        <React.Fragment>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
            <InputBoxWrapper
              id="connection-string"
              name="connection_string"
@@ -234,7 +238,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
        <React.Fragment>
          <Grid item xs={12}>
            <Grid item xs={12} className={classes.configureString}>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="host"
                  name="host"
@@ -246,7 +250,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="db-name"
                  name="db-name"
@@ -258,7 +262,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="port"
                  name="port"
@@ -270,7 +274,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <SelectWrapper
                  value={sslMode}
                  label=""
@@ -290,7 +294,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
                  ]}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="user"
                  name="user"
@@ -302,7 +306,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
                  }}
                />
              </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                <InputBoxWrapper
                  id="password"
                  name="password"
@@ -326,7 +330,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
          </Grid>
        </React.Fragment>
      )}
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="table"
          name="table"
@@ -339,7 +343,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <RadioGroupSelector
          currentSelection={format}
          id="format"
@@ -355,7 +359,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
          ]}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="queue-dir"
          name="queue_dir"
@@ -368,7 +372,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <InputBoxWrapper
          id="queue-limit"
          name="queue_limit"
@@ -382,7 +386,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
          }}
        />
      </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={12} className={classes.formFieldRow}>
        <CommentBoxWrapper
          id="comment"
          name="comment"
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -19,12 +19,11 @@ 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 { red } from "@mui/material/colors";
 import Grid from "@mui/material/Grid";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 import Button from "@mui/material/Button";
-import InputAdornment from "@mui/material/InputAdornment";
 import {
  NotificationEndpointItem,
  NotificationEndpointsList,
@@ -39,15 +38,17 @@ import {
  containerForHeader,
  searchField,
  settingsCommon,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
 import RefreshIcon from "../../../icons/RefreshIcon";
-import SearchIcon from "../../../icons/SearchIcon";
 import history from "../../../history";
 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";

 interface IListNotificationEndpoints {
  classes: any;
@@ -75,6 +76,19 @@ const styles = (theme: Theme) =>
    lambdaContainer: {
      padding: "15px 0",
    },
+    searchField: {
+      ...searchField.searchField,
+      maxWidth: 380,
+    },
+    tableBlock: {
+      ...tableStyles.tableBlock,
+    },
+    rightActionItems: {
+      display: "flex",
+      "& button": {
+        whiteSpace: "nowrap",
+      },
+    },
  });

 const ListNotificationEndpoints = ({
@@ -139,56 +153,42 @@ const ListNotificationEndpoints = ({

  return (
    <Fragment>
-      <Grid container className={classes.container}>
+      <PageLayout>
        <Grid item xs={12} className={classes.actionsTray}>
-          <TextField
-            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"
+          <SearchBox
+            classes={classes}
+            placeholder="Search target"
+            onChange={setFilter}
          />
-          <BoxIconButton
-            color="primary"
-            aria-label="Refresh List"
-            onClick={() => {
-              setIsLoading(true);
-            }}
-            size="large"
-          >
-            <RefreshIcon />
-          </BoxIconButton>
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
-            onClick={() => {
-              history.push("/notification-endpoints/add");
-            }}
-          >
-            Add Notification Target
-          </Button>
-        </Grid>
-        <Grid item xs={12}>
-          <br />
+          <div className={classes.rightActionItems}>
+            <BoxIconButton
+              color="primary"
+              aria-label="Refresh List"
+              onClick={() => {
+                setIsLoading(true);
+              }}
+              size="large"
+            >
+              <RefreshIcon />
+            </BoxIconButton>
+            <Button
+              variant="contained"
+              color="primary"
+              endIcon={<AddIcon />}
+              onClick={() => {
+                history.push("/notification-endpoints/add");
+              }}
+            >
+              Add Notification Target
+            </Button>
+          </div>
        </Grid>
        {isLoading && <LinearProgress />}
        {!isLoading && (
          <Fragment>
            {records.length > 0 && (
              <Fragment>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.tableBlock}>
                  <TableWrapper
                    itemActions={[]}
                    columns={[
@@ -272,7 +272,7 @@ const ListNotificationEndpoints = ({
            )}
          </Fragment>
        )}
-      </Grid>
+      </PageLayout>
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Fragment } from "react";
-import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -27,6 +26,7 @@ import {
 import PageHeader from "../Common/PageHeader/PageHeader";
 import history from "../../../history";
 import BackLink from "../../../common/BackLink";
+import PageLayout from "../Common/Layout/PageLayout";

 interface INotificationTypeSelector {
  classes: any;
@@ -38,13 +38,8 @@ const styles = (theme: Theme) =>
  createStyles({
    ...settingsCommon,
    ...typesSelection,
-    mainCont: {
-      ...settingsCommon.mainCont,
-      maxWidth: 1180,
-    },
    link: {
-      textDecoration: "none",
-      color: theme.palette.primary.main,
+      maxWidth: 300,
    },
  });

@@ -52,43 +47,40 @@ const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
  return (
    <Fragment>
      <PageHeader label="Notification Endpoints" />
-      <Grid container className={classes.mainCont}>
-        <Grid item xs={12} className={classes.mainTitle}>
-          <BackLink
-            to="/notification-endpoints"
-            label="Return to Configured Endpoints"
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.centerElements}>
-          <div className={classes.iconContainer}>
-            {withLogos.map((item) => {
-              return (
-                <button
-                  key={`icon-${item.targetTitle}`}
-                  className={classes.lambdaNotif}
-                  onClick={() => {
-                    history.push(
-                      `/notification-endpoints/add/${item.actionTrigger}`
-                    );
-                  }}
-                >
-                  <div className={classes.lambdaNotifIcon}>
-                    <img
-                      src={item.logo}
-                      className={classes.logoButton}
-                      alt={item.targetTitle}
-                    />
-                  </div>
+      <BackLink
+        classes={classes}
+        to="/notification-endpoints"
+        label="Return to Configured Endpoints"
+      />
+      <PageLayout>
+        <div className={classes.iconContainer}>
+          {withLogos.map((item) => {
+            return (
+              <button
+                key={`icon-${item.targetTitle}`}
+                className={classes.lambdaNotif}
+                onClick={() => {
+                  history.push(
+                    `/notification-endpoints/add/${item.actionTrigger}`
+                  );
+                }}
+              >
+                <div className={classes.lambdaNotifIcon}>
+                  <img
+                    src={item.logo}
+                    className={classes.logoButton}
+                    alt={item.targetTitle}
+                  />
+                </div>

-                  <div className={classes.lambdaNotifTitle}>
-                    <b>{item.targetTitle}</b>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        </Grid>
-      </Grid>
+                <div className={classes.lambdaNotifTitle}>
+                  <b>{item.targetTitle}</b>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </PageLayout>
    </Fragment>
  );
 };