[WIP] Policy editor & builder (#21)

* display policy info

* formatting json string

portal-ui/package.json

@@ -9,6 +9,7 @@
     "@material-ui/icons": "^4.9.1",
     "@types/history": "^4.7.3",
     "@types/jest": "24.0.23",
+    "@types/lodash": "^4.14.149",
     "@types/node": "12.12.8",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
@@ -21,7 +22,9 @@
     "codemirror": "^5.52.2",
     "history": "^4.10.1",
     "local-storage-fallback": "^4.1.1",
+    "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "npm": "^6.14.4",
     "react": "^16.13.1",
     "react-codemirror2": "^7.1.0",
     "react-dom": "^16.12.0",

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

@@ -31,6 +31,8 @@ import Title from "../../../common/Title";
 import api from "../../../common/api";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material.css";
+import PolicyBuilder from "./PolicyBuilder";
+import {Policy} from "./types";
 require("codemirror/mode/javascript/javascript");
 
 const styles = (theme: Theme) =>
@@ -51,6 +53,7 @@ interface IAddPolicyProps {
   classes: any;
   open: boolean;
   closeModalAndRefresh: () => void;
+  policyEdit: Policy;
 }
 
 interface IAddPolicyState {
@@ -99,7 +102,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
     });
   }
   render() {
-    const { classes, open } = this.props;
+    const { classes, open, policyEdit } = this.props;
     const { addLoading, addError, policyName, policyDefinition } = this.state;
     return (
       <Dialog
@@ -114,7 +117,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
         aria-describedby="alert-dialog-description"
       >
         <DialogTitle id="alert-dialog-title">
-          <Title>Create Policy</Title>
+          <Title>{policyEdit ? "Info" : "Create"} Policy</Title>
         </DialogTitle>
         <DialogContent>
           <form
@@ -141,6 +144,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
                   id="standard-basic"
                   fullWidth
                   label="Policy Name"
+                  value={policyEdit ? policyEdit.name : ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     this.setState({ policyName: e.target.value });
                   }}
@@ -152,7 +156,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
               <Grid item xs={12}>
                 <CodeMirror
                   className={classes.codeMirror}
-                  value=""
+                  value={policyEdit ? JSON.stringify(policyEdit, null, 4) : ""}
                   options={{
                     mode: "javascript",
                     theme: "material",
@@ -166,7 +170,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
               <Grid item xs={12}>
                 <br />
               </Grid>
-              <Grid item xs={12}>
+              {!policyEdit && <Grid item xs={12}>
                 <Button
                   type="submit"
                   variant="contained"
@@ -176,7 +180,7 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
                 >
                   Save
                 </Button>
-              </Grid>
+              </Grid>}
               {addLoading && (
                 <Grid item xs={12}>
                   <LinearProgress />

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

@@ -104,6 +104,7 @@ interface IPoliciesState {
   deleteOpen: boolean;
   selectedPolicy: string;
   filterPolicies: string;
+  policyEdit: any;
 }
 
 class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
@@ -118,7 +119,8 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
     rowsPerPage: 10,
     deleteOpen: false,
     selectedPolicy: "",
-    filterPolicies: ""
+    filterPolicies: "",
+    policyEdit: null,
   };
 
   fetchRecords() {
@@ -184,7 +186,8 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
       rowsPerPage,
       deleteOpen,
       selectedPolicy,
-      filterPolicies
+      filterPolicies,
+      policyEdit,
     } = this.state;
 
     const offset = page * rowsPerPage;
@@ -211,6 +214,7 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
           closeModalAndRefresh={() => {
             this.closeAddModalAndRefresh();
           }}
+          policyEdit={policyEdit}
         />
         <Grid container>
           <Grid item xs={12}>
@@ -245,7 +249,8 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
               startIcon={<CreateIcon />}
               onClick={() => {
                 this.setState({
-                  addScreenOpen: true
+                  addScreenOpen: true,
+                  policyEdit: null,
                 });
               }}
             >
@@ -287,7 +292,10 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
                             <IconButton
                               aria-label="view"
                               onClick={() => {
-                                confirmDeletePolicy(row.name);
+                                this.setState({
+                                  addScreenOpen: true,
+                                  policyEdit: row,
+                                });
                               }}
                             >
                               <VisibilityIcon />