Improved policy create policy screen (#2268)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx

@@ -35,6 +35,7 @@ import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/Cod
 
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import { emptyPolicy } from "../../Policies/utils";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -76,7 +77,7 @@ const SetAccessPolicy = ({
   const dispatch = useAppDispatch();
   const [addLoading, setAddLoading] = useState<boolean>(false);
   const [accessPolicy, setAccessPolicy] = useState<string>("");
-  const [policyDefinition, setPolicyDefinition] = useState<string>("");
+  const [policyDefinition, setPolicyDefinition] = useState<string>(emptyPolicy);
   const addRecord = (event: React.FormEvent) => {
     event.preventDefault();
     if (addLoading) {
@@ -103,7 +104,7 @@ const SetAccessPolicy = ({
     setPolicyDefinition(
       actualDefinition
         ? JSON.stringify(JSON.parse(actualDefinition), null, 4)
-        : ""
+        : emptyPolicy
     );
   }, [setAccessPolicy, actualPolicy, setPolicyDefinition, actualDefinition]);
 

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,6 +93,8 @@ const CodeMirrorWrapper = ({
             backgroundColor: "#fefefe",
             fontFamily:
               "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+            minHeight: editorHeight || "initial",
+            color: "#000000",
           }}
         />
       </Grid>
@@ -92,8 +102,9 @@ const CodeMirrorWrapper = ({
         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,6 +31,7 @@ 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();
@@ -38,7 +39,7 @@ const AddPolicyScreen = () => {
 
   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" +
+  "}";

portal-ui/tests/permissions-1/iamPolicies.ts

@@ -79,6 +79,7 @@ test("Create Policy modal can be submitted after inputs are entered", async (t)
     .typeText(elements.createPolicyName, constants.TEST_IAM_POLICY_NAME)
     .typeText(elements.createPolicyTextfield, constants.TEST_IAM_POLICY, {
       paste: true,
+      replace: true,
     })
     .click(elements.saveButton);
 }).after(async (t) => {
@@ -98,6 +99,7 @@ test("Created Policy can be viewed and deleted", async (t) => {
     .typeText(elements.createPolicyName, constants.TEST_IAM_POLICY_NAME)
     .typeText(elements.createPolicyTextfield, constants.TEST_IAM_POLICY, {
       paste: true,
+      replace: true,
     })
     .click(elements.saveButton)
     .typeText(elements.searchResourceInput, constants.TEST_IAM_POLICY_NAME)