Modals UI style changes

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx

@@ -103,6 +103,7 @@ const AddBucket = ({
   const [bName, setBName] = useState<string>(bucketName);
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [addError, setAddError] = useState<string>("");
+  const [sendEnabled, setSendEnabled] = useState<boolean>(false);
 
   const addRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -141,10 +142,34 @@ const AddBucket = ({
   const [value] = useDebounce(bName, 1000);
 
   useEffect(() => {
-    console.log("called");
     addBucketName(value);
   }, [value]);
 
+  const resetForm = () => {
+    setBName("");
+    addBucketVersioned(false);
+    addBucketQuota(false);
+    addBucketQuotaType("hard");
+    addBucketQuotaSize("1");
+    addBucketQuotaUnit("TiB");
+  };
+
+  useEffect(() => {
+    let valid = false;
+
+    if (bName.trim() !== "") {
+      valid = true;
+    }
+
+    if (enableQuota && valid) {
+      if (quotaSize.trim() === "" || parseInt(quotaSize) === 0) {
+        valid = false;
+      }
+    }
+
+    setSendEnabled(valid);
+  }, [bName, versioned, quotaType, quotaSize, quotaUnit, enableQuota]);
+
   return (
     <ModalWrapper
       title="Create Bucket"
@@ -196,7 +221,8 @@ const AddBucket = ({
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   addBucketVersioned(event.target.checked);
                 }}
-                label={"Turn On Versioning"}
+                label={"Versioning"}
+                indicatorLabel={"On"}
               />
             </Grid>
             <Grid item xs={12}>
@@ -209,6 +235,7 @@ const AddBucket = ({
                   addBucketQuota(event.target.checked);
                 }}
                 label={"Enable Bucket Quota"}
+                indicatorLabel={"On"}
               />
             </Grid>
             {enableQuota && (
@@ -264,11 +291,19 @@ const AddBucket = ({
             )}
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
+            <button
+              type="button"
+              color="primary"
+              className={classes.clearButton}
+              onClick={resetForm}
+            >
+              Clear
+            </button>
             <Button
               type="submit"
               variant="contained"
               color="primary"
-              disabled={addLoading}
+              disabled={addLoading || !sendEnabled}
             >
               Save
             </Button>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -172,7 +172,7 @@ class ListObjects extends React.Component<
     xhr.setRequestHeader("Authorization", `Bearer ${token}`);
 
     xhr.withCredentials = false;
-    xhr.onload = function(event) {
+    xhr.onload = function (event) {
       // TODO: handle status
       if (xhr.status == 401 || xhr.status == 403) {
         listObjects.showSnackBarMessage(
@@ -227,7 +227,7 @@ class ListObjects extends React.Component<
     xhr.setRequestHeader("Authorization", `Bearer ${token}`);
     xhr.responseType = "blob";
 
-    xhr.onload = function(e) {
+    xhr.onload = function (e) {
       if (this.status == 200) {
         var blob = new Blob([this.response], {
           type: "octet/stream",

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

@@ -0,0 +1,83 @@
+// 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 HelpIcon from "@material-ui/icons/Help";
+import Grid from "@material-ui/core/Grid";
+import { Controlled as CodeMirror } from "react-codemirror2";
+import { InputLabel, Tooltip } from "@material-ui/core";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { fieldBasic } from "../common/styleLibrary";
+import "./ConsoleCodeMirror.css";
+
+require("codemirror/mode/javascript/javascript");
+
+interface ICodeWrapper {
+  value: string;
+  label?: string;
+  tooltip?: string;
+  classes: any;
+  onChange?: (editor: any, data: any, value: string) => any;
+  onBeforeChange: (editor: any, data: any, value: string) => any;
+  readOnly?: boolean;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+  });
+
+const CodeMirrorWrapper = ({
+  value,
+  label = "",
+  tooltip = "",
+  classes,
+  onChange = () => {},
+  onBeforeChange,
+  readOnly = false,
+}: ICodeWrapper) => {
+  return (
+    <React.Fragment>
+      <InputLabel className={classes.inputLabel}>
+        <span>{label}</span>
+        {tooltip !== "" && (
+          <div className={classes.tooltipContainer}>
+            <Tooltip title={tooltip} placement="top-start">
+              <HelpIcon className={classes.tooltip} />
+            </Tooltip>
+          </div>
+        )}
+      </InputLabel>
+      <Grid item xs={12}>
+        <br />
+      </Grid>
+      <Grid item xs={12}>
+        <CodeMirror
+          value={value}
+          options={{
+            mode: "javascript",
+            lineNumbers: true,
+            readOnly,
+          }}
+          onBeforeChange={onBeforeChange}
+          onChange={onChange}
+        />
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(CodeMirrorWrapper);