Predefined list (#452)

Added predefined list component
2020-11-30 11:27:37 -06:00
parent 9136c2a167
commit 219fe55356
9 changed files with 98 additions and 96 deletions
--- 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}>
--- a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
+++ 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);
--- 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 = {
--- 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>
--- 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>
--- 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}>
--- 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}
--- 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>
--- 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"