Updated styles & behavior for settings page (#334)

Updated styles & behavior for settings page, also implemented a couple of performance improvements on some fields

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/bindata_assetfs.go

@@ -0,0 +1,34 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { SvgIcon } from "@material-ui/core";
+class AddIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 12 12">
+        <path
+          fill="#081c42"
+          className="a"
+          d="M-13160.269,1885.114h-3.235v-4.381h-4.382V1877.5h4.382v-4.381h3.235v4.381h4.383v3.238h-4.383v4.38Z"
+          transform="translate(13167.886 -1873.114)"
+        />
+      </SvgIcon>
+    );
+  }
+}
+
+export default AddIcon;

portal-ui/src/icons/AddIcon.tsx

@@ -0,0 +1,33 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { SvgIcon } from "@material-ui/core";
+class RemoveIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 11.656 3.101">
+        <path
+          fill="#081c42"
+          d="M-13157.172,1879.551h-11.656v-3.1h11.656v3.1Z"
+          transform="translate(13168.828 -1876.449)"
+        />
+      </SvgIcon>
+    );
+  }
+}
+
+export default RemoveIcon;

portal-ui/src/icons/RemoveIcon.tsx

@@ -1,5 +1,5 @@
 // This file is part of MinIO Console Server
-// Copyright (c) 2019 MinIO, Inc.
+// Copyright (c) 2020 MinIO, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -13,38 +13,46 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-import React, { useState, useEffect, createRef, ChangeEvent } from "react";
+import React, {
+  useState,
+  useEffect,
+  createRef,
+  useLayoutEffect,
+  ChangeEvent,
+  useRef,
+} from "react";
+import get from "lodash/get";
+import debounce from "lodash/debounce";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import get from "lodash/get";
-import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
+import HelpIcon from "@material-ui/icons/Help";
 import { InputLabel, Tooltip } from "@material-ui/core";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-import HelpIcon from "@material-ui/icons/Help";
+import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
+import AddIcon from "../../../../../icons/AddIcon";
 
 interface ICSVMultiSelector {
   elements: string;
   name: string;
   label: string;
   tooltip?: string;
+  commonPlaceholder?: string;
   classes: any;
+  withBorder?: boolean;
   onChange: (elements: string) => void;
 }
 
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
-    inputLabel: {
-      ...fieldBasic.inputLabel,
-      width: 116,
-    },
-    inputContainer: {
+    inputWithBorder: {
+      border: "1px solid #EAEAEA",
+      padding: 15,
       height: 150,
       overflowY: "auto",
-      padding: 15,
       position: "relative",
-      border: "1px solid #c4c4c4",
+      marginTop: 15,
     },
     labelContainer: {
       display: "flex",
@@ -56,7 +64,9 @@ const CSVMultiSelector = ({
   name,
   label,
   tooltip = "",
+  commonPlaceholder = "",
   onChange,
+  withBorder = false,
   classes,
 }: ICSVMultiSelector) => {
   const [currentElements, setCurrentElements] = useState<string[]>([""]);
@@ -75,29 +85,37 @@ const CSVMultiSelector = ({
 
       setCurrentElements(elementsSplit);
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elements, currentElements]);
 
   // Use effect to send new values to onChange
   useEffect(() => {
-    const elementsString = currentElements
-      .filter((element) => element.trim() !== "")
-      .join(",");
-    onChange(elementsString);
+    const refScroll = bottomList.current;
+    if (refScroll) {
+      refScroll.scrollIntoView(false);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentElements]);
 
+  // We avoid multiple re-renders / hang issue typing too fast
+  const firstUpdate = useRef(true);
+  useLayoutEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+
+    debouncedOnChange();
+  }, [currentElements]);
+
   // If the last input is not empty, we add a new one
   const addEmptyLine = (elementsUp: string[]) => {
     if (elementsUp[elementsUp.length - 1].trim() !== "") {
-      elementsUp.push("");
-      const refScroll = bottomList.current;
-
-      if (refScroll) {
-        refScroll.scrollIntoView(false);
-      }
+      const cpList = [...elementsUp];
+      cpList.push("");
+      setCurrentElements(cpList);
     }
-
-    return elementsUp;
   };
 
   // Onchange function for input box, we get the dataset-index & only update that value in the array
@@ -108,10 +126,18 @@ const CSVMultiSelector = ({
     const index = get(e.target, "dataset.index", 0);
     updatedElement[index] = e.target.value;
 
-    updatedElement = addEmptyLine(updatedElement);
     setCurrentElements(updatedElement);
   };
 
+  // Debounce for On Change
+  const debouncedOnChange = debounce(() => {
+    const elementsString = currentElements
+      .filter((element) => element.trim() !== "")
+      .join(",");
+
+    onChange(elementsString);
+  }, 500);
+
   const inputs = currentElements.map((element, index) => {
     return (
       <InputBoxWrapper
@@ -122,6 +148,11 @@ const CSVMultiSelector = ({
         onChange={onChangeElement}
         index={index}
         key={`csv-${name}-${index.toString()}`}
+        placeholder={commonPlaceholder}
+        overlayIcon={index === currentElements.length - 1 ? <AddIcon /> : null}
+        overlayAction={() => {
+          addEmptyLine(currentElements);
+        }}
       />
     );
   });
@@ -139,13 +170,16 @@ const CSVMultiSelector = ({
             </div>
           )}
         </InputLabel>
-        <Grid item xs={12} className={classes.inputContainer}>
+        <Grid
+          item
+          xs={12}
+          className={`${withBorder ? classes.inputWithBorder : ""}`}
+        >
           {inputs}
           <div ref={bottomList} />
         </Grid>
       </Grid>
     </React.Fragment>
   );
 };
-
 export default withStyles(styles)(CSVMultiSelector);

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -68,11 +68,13 @@ const styles = (theme: Theme) =>
     },
     cssOutlinedInput: {
       borderColor: "#9C9C9C",
+      padding: 16,
     },
-    rootTest: {
+    rootContainer: {
       "& .MuiOutlinedInput-inputMultiline": {
         ...fieldBasic.inputLabel,
         fontSize: 13,
+        minHeight: 150,
       },
     },
   });
@@ -142,7 +144,7 @@ const CommentBoxWrapper = ({
             InputProps={{
               classes: {
                 notchedOutline: classes.cssOutlinedInput,
-                root: classes.rootTest,
+                root: classes.rootContainer,
               },
             }}
             variant="outlined"

portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx

@@ -16,6 +16,7 @@
 import React from "react";
 import {
   Grid,
+  IconButton,
   InputLabel,
   TextField,
   TextFieldProps,
@@ -49,6 +50,8 @@ interface InputBoxProps {
   placeholder?: string;
   min?: string;
   max?: string;
+  overlayIcon?: any;
+  overlayAction?: () => void;
 }
 
 const styles = (theme: Theme) =>
@@ -57,7 +60,10 @@ const styles = (theme: Theme) =>
     ...tooltipHelper,
     textBoxContainer: {
       flexGrow: 1,
+    },
+    textBoxWithIcon: {
       position: "relative",
+      paddingRight: 25,
     },
     errorState: {
       color: "#b53b4b",
@@ -66,6 +72,15 @@ const styles = (theme: Theme) =>
       top: 7,
       right: 7,
     },
+    overlayAction: {
+      position: "absolute",
+      right: 0,
+      top: 15,
+      "& svg": {
+        maxWidth: 15,
+        maxHeight: 15,
+      },
+    },
   });
 
 const inputStyles = makeStyles((theme: Theme) =>
@@ -83,7 +98,7 @@ const inputStyles = makeStyles((theme: Theme) =>
       },
     },
     input: {
-      padding: "15px 5px 10px",
+      padding: "15px 30px 10px 5px",
       color: "#393939",
       fontSize: 13,
       fontWeight: 600,
@@ -127,6 +142,8 @@ const InputBoxWrapper = ({
   placeholder = "",
   min,
   max,
+  overlayIcon = null,
+  overlayAction,
   classes,
 }: InputBoxProps) => {
   let inputProps: any = { "data-index": index };
@@ -184,12 +201,28 @@ const InputBoxWrapper = ({
             error={error !== ""}
             helperText={error}
             placeholder={placeholder}
-            InputLabelProps={{
-              shrink: true,
-            }}
             className={classes.inputRebase}
           />
         </div>
+        {overlayIcon && (
+          <div className={classes.overlayAction}>
+            <IconButton
+              onClick={
+                overlayAction
+                  ? () => {
+                      overlayAction();
+                    }
+                  : () => null
+              }
+              size={"small"}
+              disableFocusRipple={false}
+              disableRipple={false}
+              disableTouchRipple={false}
+            >
+              {overlayIcon}
+            </IconButton>
+          </div>
+        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

@@ -35,6 +35,7 @@ export const fieldBasic = {
   },
   fieldContainer: {
     marginBottom: 20,
+    position: "relative" as const,
   },
   tooltipContainer: {
     marginLeft: 5,

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -123,6 +123,8 @@ const ConfTargetGeneric = ({
               setValueElement(field.name, value, item)
             }
             tooltip={field.tooltip}
+            commonPlaceholder={field.placeholder}
+            withBorder={!!field.withBorder}
           />
         );
       case "comment":

portal-ui/src/screens/Console/Configurations/ConfTargetGeneric.tsx

@@ -40,6 +40,7 @@ export interface KVField {
   options?: SelectorTypes[];
   multiline?: boolean;
   placeholder?: string;
+  withBorder?: boolean;
 }
 
 export interface IConfigurationElement {