From b9873fa4716d8a163336e53155a08ab4648054b5 Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Fri, 26 Nov 2021 05:27:24 +0000
Subject: [PATCH] UX Notification endpoints (#1257)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 portal-ui/src/common/BackLink.tsx             |  2 +-
 .../AddNotificationEndpoint.tsx               | 82 ++++++-----------
 .../CustomForms/ConfMySql.tsx                 | 28 +++---
 .../CustomForms/ConfPostgres.tsx              | 30 +++---
 .../ListNotificationEndpoints.tsx             | 92 +++++++++----------
 .../NotificationTypeSelector.tsx              | 78 +++++++---------
 6 files changed, 143 insertions(+), 169 deletions(-)

diff --git a/portal-ui/src/common/BackLink.tsx b/portal-ui/src/common/BackLink.tsx
index 0e67c9d60..668d399d0 100644
--- 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>
   );
 };
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
index 869eeec60..8179f9d4b 100644
--- 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>
   );
 };
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
index d6aa3c4f6..cea97b7cf 100644
--- 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"
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
index 9e1735fd1..a56d6a062 100644
--- 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"
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index 4022638d6..5349e374e 100644
--- 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>
   );
 };
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
index f51386721..7c5fc7111 100644
--- 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>
   );
 };