Improved policy create policy screen

Signed-off-by: Benjamin Perez <[email protected]>

Author: Benjamin Perez

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

@@ -56,7 +56,7 @@ const CodeMirrorWrapper = ({
 }: ICodeWrapper) => {
   return (
     <React.Fragment>
-      <Grid item xs={12}>
+      <Grid item xs={12} sx={{ marginBottom: "10px" }}>
         <InputLabel className={classes.inputLabel}>
           <span>{label}</span>
           {tooltip !== "" && (
@@ -71,7 +71,15 @@ const CodeMirrorWrapper = ({
         </InputLabel>
       </Grid>
 
-      <Grid item xs={12} style={{ maxHeight: editorHeight, overflow: "auto" }}>
+      <Grid
+        item
+        xs={12}
+        style={{
+          maxHeight: editorHeight,
+          overflow: "auto",
+          border: "1px solid #eaeaea",
+        }}
+      >
         <CodeEditor
           value={value}
           language={mode}
@@ -85,15 +93,18 @@ const CodeMirrorWrapper = ({
             backgroundColor: "#fefefe",
             fontFamily:
               "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+            minHeight: editorHeight || "initial",
+            color: "#000000",
           }}
         />
       </Grid>
       <Grid
         item
         xs={12}
         sx={{
-          borderTop: "1px solid #eaeaea",
           background: "#f7f7f7",
+          border: "1px solid #eaeaea",
+          borderTop: 0,
         }}
       >
         <Box

portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx

@@ -31,14 +31,15 @@ import FormLayout from "../Common/FormLayout";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
+import { emptyPolicy } from "./utils";
 
 const AddPolicyScreen = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [policyName, setPolicyName] = useState<string>("");
-  const [policyDefinition, setPolicyDefinition] = useState<string>("");
+  const [policyDefinition, setPolicyDefinition] = useState<string>(emptyPolicy);
 
   const addRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -72,7 +73,10 @@ const AddPolicyScreen = () => {
     } else return "";
   };
 
-  const validSave = policyName.trim() !== "" && policyName.indexOf(" ") === -1;
+  const validSave =
+    policyName.trim() !== "" &&
+    policyName.indexOf(" ") === -1 &&
+    policyDefinition.trim() !== "";
 
   return (
     <Fragment>

portal-ui/src/screens/Console/Policies/utils.ts

@@ -0,0 +1,23 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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/>.
+
+export const emptyPolicy =
+  "{\n" +
+  '    "Version": "2012-10-17",\n' +
+  '    "Statement": [\n' +
+  "        \n" +
+  "    ]\n" +
+  "}";