From abc9f2b4287dabcca9afde43e55f7db0804911a1 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Fri, 5 Mar 2021 14:30:01 -0600
Subject: [PATCH] Limited input width size for forms in wide screens (#628)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../FormSwitchWrapper/FormSwitchWrapper.tsx   |   2 +
 .../PredefinedList/PredefinedList.tsx         |  36 ++--
 .../FormComponents/common/styleLibrary.ts     |   9 +
 .../Configurations/CustomForms/ConfMySql.tsx  | 124 ++++++-------
 .../CustomForms/ConfPostgres.tsx              | 164 +++++++++---------
 5 files changed, 176 insertions(+), 159 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
index 16ca1805b..4fcbc761f 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -106,6 +106,8 @@ const styles = (theme: Theme) =>
       borderBottom: "#9c9c9c 1px solid",
       paddingBottom: 14,
       marginBottom: 20,
+      maxWidth: 840,
+      margin: "0px auto",
     },
     indicatorLabel: {
       fontSize: 12,
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx b/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
index ea285fe8a..d206ce658 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import Grid from "@material-ui/core/Grid";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { predefinedList } from "../common/styleLibrary";
@@ -22,24 +22,26 @@ const PredefinedList = ({
   multiLine = false,
 }: IPredefinedList) => {
   return (
-    <React.Fragment>
-      {label !== "" && (
-        <Grid item xs={12} className={classes.predefinedTitle}>
-          {label}
-        </Grid>
-      )}
-      <Grid item xs={12} className={classes.predefinedList}>
-        <Grid
-          item
-          xs={12}
-          className={
-            multiLine ? classes.innerContentMultiline : classes.innerContent
-          }
-        >
-          {content}
+    <Fragment>
+      <Grid className={classes.prefinedContainer}>
+        {label !== "" && (
+          <Grid item xs={12} className={classes.predefinedTitle}>
+            {label}
+          </Grid>
+        )}
+        <Grid item xs={12} className={classes.predefinedList}>
+          <Grid
+            item
+            xs={12}
+            className={
+              multiLine ? classes.innerContentMultiline : classes.innerContent
+            }
+          >
+            {content}
+          </Grid>
         </Grid>
       </Grid>
-    </React.Fragment>
+    </Fragment>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 108663d8a..c9c784ab0 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -36,6 +36,8 @@ export const fieldBasic = {
   fieldContainer: {
     marginBottom: 20,
     position: "relative" as const,
+    maxWidth: 840,
+    margin: "0px auto",
   },
   tooltipContainer: {
     marginLeft: 5,
@@ -77,6 +79,8 @@ export const modalBasic = {
     padding: "24px 50px",
     overflowY: "auto" as const,
     height: 170,
+    maxWidth: 840,
+    margin: "0 auto",
   },
 };
 
@@ -184,6 +188,11 @@ export const searchField = {
 };
 
 export const predefinedList = {
+  prefinedContainer: {
+    maxWidth: 840,
+    width: "100%",
+    margin: "0 auto",
+  },
   predefinedTitle: {
     fontSize: 16,
     fontWeight: 600,
diff --git a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
index 87f7263d1..64064c76a 100644
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
@@ -159,68 +159,70 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <Grid item xs={12} className={classes.configureString}>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="host"
-                name="host"
-                label=""
-                placeholder="Enter Host"
-                value={host}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setHostname(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="db-name"
-                name="db-name"
-                label=""
-                placeholder="Enter DB Name"
-                value={dbName}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setDbName(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="port"
-                name="port"
-                label=""
-                placeholder="Enter Port"
-                value={port}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPort(e.target.value);
-                }}
-              />
-            </Grid>
+          <Grid item xs={12}>
+            <Grid item xs={12} className={classes.configureString}>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="host"
+                  name="host"
+                  label=""
+                  placeholder="Enter Host"
+                  value={host}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setHostname(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="db-name"
+                  name="db-name"
+                  label=""
+                  placeholder="Enter DB Name"
+                  value={dbName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setDbName(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="port"
+                  name="port"
+                  label=""
+                  placeholder="Enter Port"
+                  value={port}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPort(e.target.value);
+                  }}
+                />
+              </Grid>
 
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="user"
-                name="user"
-                label=""
-                placeholder="Enter User"
-                value={user}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setUser(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="password"
-                name="password"
-                label=""
-                placeholder="Enter Password"
-                type="password"
-                value={password}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPassword(e.target.value);
-                }}
-              />
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="user"
+                  name="user"
+                  label=""
+                  placeholder="Enter User"
+                  value={user}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setUser(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="password"
+                  name="password"
+                  label=""
+                  placeholder="Enter Password"
+                  type="password"
+                  value={password}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPassword(e.target.value);
+                  }}
+                />
+              </Grid>
             </Grid>
           </Grid>
           <PredefinedList label={"Connection String"} content={dsnString} />
diff --git a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
index d49ac8385..8d1e5119b 100644
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
@@ -232,87 +232,89 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <Grid item xs={12} className={classes.configureString}>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="host"
-                name="host"
-                label=""
-                placeholder="Enter Host"
-                value={host}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setHostname(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="db-name"
-                name="db-name"
-                label=""
-                placeholder="Enter DB Name"
-                value={dbName}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setDbName(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="port"
-                name="port"
-                label=""
-                placeholder="Enter Port"
-                value={port}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPort(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <SelectWrapper
-                value={sslMode}
-                label=""
-                id="sslmode"
-                name="sslmode"
-                onChange={(e): void => {
-                  if (e.target.value !== undefined) {
-                    setSslMode(e.target.value + "");
-                  }
-                }}
-                options={[
-                  { label: "Enter SSL Mode", value: " " },
-                  { label: "Require", value: "require" },
-                  { label: "Disable", value: "disable" },
-                  { label: "Verify CA", value: "verify-ca" },
-                  { label: "Verify Full", value: "verify-full" },
-                ]}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="user"
-                name="user"
-                label=""
-                placeholder="Enter User"
-                value={user}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setUser(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="password"
-                name="password"
-                label=""
-                type="password"
-                placeholder="Enter Password"
-                value={password}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPassword(e.target.value);
-                }}
-              />
+          <Grid item xs={12}>
+            <Grid item xs={12} className={classes.configureString}>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="host"
+                  name="host"
+                  label=""
+                  placeholder="Enter Host"
+                  value={host}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setHostname(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="db-name"
+                  name="db-name"
+                  label=""
+                  placeholder="Enter DB Name"
+                  value={dbName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setDbName(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="port"
+                  name="port"
+                  label=""
+                  placeholder="Enter Port"
+                  value={port}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPort(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <SelectWrapper
+                  value={sslMode}
+                  label=""
+                  id="sslmode"
+                  name="sslmode"
+                  onChange={(e): void => {
+                    if (e.target.value !== undefined) {
+                      setSslMode(e.target.value + "");
+                    }
+                  }}
+                  options={[
+                    { label: "Enter SSL Mode", value: " " },
+                    { label: "Require", value: "require" },
+                    { label: "Disable", value: "disable" },
+                    { label: "Verify CA", value: "verify-ca" },
+                    { label: "Verify Full", value: "verify-full" },
+                  ]}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="user"
+                  name="user"
+                  label=""
+                  placeholder="Enter User"
+                  value={user}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setUser(e.target.value);
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="password"
+                  name="password"
+                  label=""
+                  type="password"
+                  placeholder="Enter Password"
+                  value={password}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPassword(e.target.value);
+                  }}
+                />
+              </Grid>
             </Grid>
           </Grid>
           <PredefinedList