Improve add model initialization

web/src/ModelEditPage.js

@@ -18,7 +18,11 @@ import * as ModelBackend from "./backend/ModelBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import TextArea from "antd/es/input/TextArea";
+
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+
+require("codemirror/mode/properties/properties");
 
 const {Option} = Select;
 
@@ -135,9 +139,15 @@ class ModelEditPage extends React.Component {
             {Setting.getLabel(i18next.t("model:Model text"), i18next.t("model:Model text - Tooltip"))} :
           </Col>
           <Col span={22}>
-            <TextArea rows={10} value={this.state.model.modelText} onChange={e => {
-              this.updateModelField("modelText", e.target.value);
-            }} />
+            <div style={{width: "100%"}} >
+              <CodeMirror
+                value={this.state.model.modelText}
+                options={{mode: "properties", theme: "default"}}
+                onBeforeChange={(editor, data, value) => {
+                  this.updateModelField("modelText", value);
+                }}
+              />
+            </div>
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}} >

web/src/ModelListPage.js

@@ -22,6 +22,21 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 import PopconfirmModal from "./common/modal/PopconfirmModal";
 
+const rbacModel = `[request_definition]
+r = sub, obj, act
+
+[policy_definition]
+p = sub, obj, act
+
+[role_definition]
+g = _, _
+
+[policy_effect]
+e = some(where (p.eft == allow))
+
+[matchers]
+m = g(r.sub, p.sub) && r.obj == p.obj && r.act == p.act`;
+
 class ModelListPage extends BaseListPage {
   newModel() {
     const randomName = Setting.getRandomName();
@@ -30,7 +45,7 @@ class ModelListPage extends BaseListPage {
       name: `model_${randomName}`,
       createdTime: moment().format(),
       displayName: `New Model - ${randomName}`,
-      modelText: "",
+      modelText: rbacModel,
       isEnabled: true,
     };
   }