From 219fe5535694af3502b8920e1d661ec557f639c3 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Mon, 30 Nov 2020 11:27:37 -0600
Subject: [PATCH] Predefined list (#452)

Added predefined list component
---
 .../Objects/ObjectDetails/ShareFile.tsx       | 12 ++---
 .../PredefinedList/PredefinedList.tsx         | 46 +++++++++++++++++++
 .../FormComponents/common/styleLibrary.ts     | 13 +++++-
 .../Configurations/CustomForms/ConfMySql.tsx  | 14 ++----
 .../CustomForms/ConfPostgres.tsx              | 17 +++----
 .../src/screens/Console/Groups/AddGroup.tsx   | 14 ++----
 .../screens/Console/Policies/SetPolicy.tsx    | 24 +++-------
 .../src/screens/Console/Users/AddToGroup.tsx  | 35 +++++---------
 .../src/screens/Console/Users/AddUser.tsx     | 19 +++-----
 9 files changed, 98 insertions(+), 96 deletions(-)
 create mode 100644 portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
index 257c2fad8..6f42abce1 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
@@ -5,16 +5,13 @@ import Typography from "@material-ui/core/Typography";
 import Snackbar from "@material-ui/core/Snackbar";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
-import {
-  modalBasic,
-  predefinedList,
-} from "../../../../Common/FormComponents/common/styleLibrary";
+import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import DateSelector from "../../../../Common/FormComponents/DateSelector/DateSelector";
 import { CopyIcon } from "../../../../../../icons";
 import api from "../../../../../../common/api";
-import get from "lodash/get";
 import { IFileInfo } from "./types";
+import PredefinedList from "../../../../Common/FormComponents/PredefinedList/PredefinedList";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -28,7 +25,6 @@ const styles = (theme: Theme) =>
       color: "red",
     },
     ...modalBasic,
-    ...predefinedList,
   });
 
 interface IShareFileProps {
@@ -174,8 +170,8 @@ const ShareFile = ({
             />
           </Grid>
           <Grid container item xs={12}>
-            <Grid item xs={10} className={classes.predefinedList}>
-              {shareURL}
+            <Grid item xs={10}>
+              <PredefinedList content={shareURL} />
             </Grid>
             <Grid item xs={2} className={classes.copyButtonContainer}>
               <CopyToClipboard text={shareURL}>
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx b/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
new file mode 100644
index 000000000..ea285fe8a
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { predefinedList } from "../common/styleLibrary";
+
+interface IPredefinedList {
+  classes: any;
+  label?: string;
+  content: any;
+  multiLine?: boolean;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...predefinedList,
+  });
+
+const PredefinedList = ({
+  classes,
+  label = "",
+  content,
+  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}
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(PredefinedList);
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 779058a23..f174920b8 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -184,7 +184,9 @@ export const predefinedList = {
     fontSize: 12,
     fontWeight: 600,
     minHeight: 41,
-    height: 41,
+  },
+  innerContent: {
+    width: "100%",
     overflowX: "auto" as const,
     whiteSpace: "nowrap" as const,
     scrollbarWidth: "none" as const,
@@ -192,6 +194,15 @@ export const predefinedList = {
       display: "none",
     },
   },
+  innerContentMultiline: {
+    width: "100%",
+    maxHeight: 100,
+    overflowY: "auto" as const,
+    scrollbarWidth: "none" as const,
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
 };
 
 export const objectBrowserCommon = {
diff --git a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
index 175e024b3..59fce45d1 100644
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
@@ -20,12 +20,10 @@ import Grid from "@material-ui/core/Grid";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { IElementValue } from "../types";
-import {
-  modalBasic,
-  predefinedList,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { 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";
 
 interface IConfMySqlProps {
   onChange: (newValue: IElementValue[]) => void;
@@ -35,7 +33,6 @@ interface IConfMySqlProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
-    ...predefinedList,
   });
 
 const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
@@ -226,12 +223,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
               />
             </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.predefinedTitle}>
-            Connection String
-          </Grid>
-          <Grid item xs={12} className={classes.predefinedList}>
-            {dsnString}
-          </Grid>
+          <PredefinedList label={"Connection String"} content={dsnString} />
           <Grid item xs={12}>
             <br />
           </Grid>
diff --git a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
index c77e1e648..625457783 100644
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
@@ -21,12 +21,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 "../types";
-import {
-  modalBasic,
-  predefinedList,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { 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";
 
 interface IConfPostgresProps {
   onChange: (newValue: IElementValue[]) => void;
@@ -36,7 +34,6 @@ interface IConfPostgresProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
-    ...predefinedList,
   });
 
 const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
@@ -318,12 +315,10 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
               />
             </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.predefinedTitle}>
-            Connection String
-          </Grid>
-          <Grid item xs={12} className={classes.predefinedList}>
-            {connectionString}
-          </Grid>
+          <PredefinedList
+            label={"Connection String"}
+            content={connectionString}
+          />
           <Grid item xs={12}>
             <br />
           </Grid>
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index f7393d150..692865225 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -19,15 +19,13 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import {
-  modalBasic,
-  predefinedList,
-} from "../Common/FormComponents/common/styleLibrary";
+import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import UsersSelectors from "./UsersSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 
 interface IGroupProps {
   open: boolean;
@@ -57,7 +55,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
     },
     ...modalBasic,
-    ...predefinedList,
   });
 
 const AddGroup = ({
@@ -222,12 +219,7 @@ const AddGroup = ({
               </React.Fragment>
             ) : (
               <React.Fragment>
-                <Grid item xs={12} className={classes.predefinedTitle}>
-                  Group Name
-                </Grid>
-                <Grid item xs={12} className={classes.predefinedList}>
-                  {selectedGroup}
-                </Grid>
+                <PredefinedList label={"Group Name"} content={selectedGroup} />
               </React.Fragment>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
index 4a51f1a8f..44667f725 100644
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -19,14 +19,12 @@ import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import {
-  modalBasic,
-  predefinedList,
-} from "../Common/FormComponents/common/styleLibrary";
+import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import { User } from "../Users/types";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import api from "../../../common/api";
 import PolicySelectors from "./PolicySelectors";
+import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 
 interface ISetPolicyProps {
   classes: any;
@@ -39,7 +37,6 @@ interface ISetPolicyProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
-    ...predefinedList,
     buttonContainer: {
       textAlign: "right",
     },
@@ -134,20 +131,13 @@ const SetPolicy = ({
     >
       {error !== "" && <span className={classes.error}>{error}</span>}
       <Grid item xs={12}>
-        <Grid item xs={12} className={classes.predefinedTitle}>
-          Selected {selectedGroup !== null ? "Group" : "User"}
-        </Grid>
-        <Grid item xs={12} className={classes.predefinedList}>
-          {selectedGroup !== null ? selectedGroup : userName}
-        </Grid>
+        <PredefinedList
+          label={`Selected ${selectedGroup !== null ? "Group" : "User"}`}
+          content={selectedGroup !== null ? selectedGroup : userName}
+        />
       </Grid>
       <Grid item xs={12}>
-        <Grid item xs={12} className={classes.predefinedTitle}>
-          Current Policy
-        </Grid>
-        <Grid item xs={12} className={classes.predefinedList}>
-          {actualPolicy}
-        </Grid>
+        <PredefinedList label={"Current Policy"} content={actualPolicy} />
       </Grid>
       <PolicySelectors
         selectedPolicy={selectedPolicy}
diff --git a/portal-ui/src/screens/Console/Users/AddToGroup.tsx b/portal-ui/src/screens/Console/Users/AddToGroup.tsx
index e20e54f5e..615d8694f 100644
--- a/portal-ui/src/screens/Console/Users/AddToGroup.tsx
+++ b/portal-ui/src/screens/Console/Users/AddToGroup.tsx
@@ -18,13 +18,11 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import {
-  modalBasic,
-  predefinedList,
-} from "../Common/FormComponents/common/styleLibrary";
+import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import GroupsSelectors from "./GroupsSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
+import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 
 interface IAddToGroup {
   open: boolean;
@@ -48,7 +46,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
     },
     ...modalBasic,
-    ...predefinedList,
   });
 
 const AddToGroup = ({
@@ -121,18 +118,11 @@ const AddToGroup = ({
       {accepted ? (
         <React.Fragment>
           <Grid container>
-            <Grid item xs={12} className={classes.predefinedTitle}>
-              Groups
-            </Grid>
-            <Grid item xs={12} className={classes.predefinedList}>
-              {selectedGroups.join(", ")}
-            </Grid>
-            <Grid item xs={12} className={classes.predefinedTitle}>
-              Users
-            </Grid>
-            <Grid item xs={12} className={classes.predefinedList}>
-              {checkedUsers.join(", ")}
-            </Grid>
+            <PredefinedList
+              label={"Groups"}
+              content={selectedGroups.join(", ")}
+            />
+            <PredefinedList label={"Users"} content={checkedUsers.join(", ")} />
           </Grid>
           <br />
           <br />
@@ -153,13 +143,10 @@ const AddToGroup = ({
                   </Typography>
                 </Grid>
               )}
-
-              <Grid item xs={12} className={classes.predefinedTitle}>
-                Selected Users
-              </Grid>
-              <Grid item xs={12} className={classes.predefinedList}>
-                {checkedUsers.join(", ")}
-              </Grid>
+              <PredefinedList
+                label={"Selected Users"}
+                content={checkedUsers.join(", ")}
+              />
               <Grid item xs={12}>
                 <br />
               </Grid>
diff --git a/portal-ui/src/screens/Console/Users/AddUser.tsx b/portal-ui/src/screens/Console/Users/AddUser.tsx
index 80f3cec5c..1ee3b67d5 100644
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -19,16 +19,14 @@ import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import {
-  modalBasic,
-  predefinedList,
-} from "../Common/FormComponents/common/styleLibrary";
+import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import { User } from "./types";
 import api from "../../../common/api";
 import GroupsSelectors from "./GroupsSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -45,7 +43,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
     },
     ...modalBasic,
-    ...predefinedList,
   });
 
 interface IAddUserContentProps {
@@ -269,14 +266,10 @@ class AddUserContent extends React.Component<
                 />
 
                 {selectedUser !== null ? (
-                  <React.Fragment>
-                    <Grid item xs={12} className={classes.predefinedTitle}>
-                      Current Groups
-                    </Grid>
-                    <Grid item xs={12} className={classes.predefinedList}>
-                      {currentGroups.join(", ")}
-                    </Grid>
-                  </React.Fragment>
+                  <PredefinedList
+                    label={"Current Groups"}
+                    content={currentGroups.join(", ")}
+                  />
                 ) : (
                   <InputBoxWrapper
                     id="standard-multiline-static"