Remove isEnabled for model, adapter and enforcer, improve UI

web/src/AdapterEditPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, InputNumber, Row, Select, Switch} from "antd";
+import {Button, Card, Col, Input, InputNumber, Row, Select} from "antd";
 import * as AdapterBackend from "./backend/AdapterBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
@@ -246,16 +246,6 @@ class AdapterEditPage extends React.Component {
             }>{i18next.t("syncer:Test DB Connection")}</Button>
           </Col>
         </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
-            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
-          </Col>
-          <Col span={1} >
-            <Switch checked={this.state.adapter.isEnabled} onChange={checked => {
-              this.updateAdapterField("isEnabled", checked);
-            }} />
-          </Col>
-        </Row>
       </Card>
     );
   }

web/src/AdapterListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Switch, Table} from "antd";
+import {Button, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as AdapterBackend from "./backend/AdapterBackend";
@@ -38,7 +38,6 @@ class AdapterListPage extends BaseListPage {
       databaseType: "mysql",
       database: "dbName",
       table: "tableName",
-      isEnabled: false,
     };
   }
 
@@ -183,18 +182,6 @@ class AdapterListPage extends BaseListPage {
         width: "120px",
         sorter: true,
       },
-      {
-        title: i18next.t("general:Is enabled"),
-        dataIndex: "isEnabled",
-        key: "isEnabled",
-        width: "120px",
-        sorter: true,
-        render: (text, record, index) => {
-          return (
-            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
-          );
-        },
-      },
       {
         title: i18next.t("general:Action"),
         dataIndex: "",

web/src/EnforcerEditPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row, Select, Switch} from "antd";
+import {Button, Card, Col, Input, Row, Select} from "antd";
 import * as AdapterBackend from "./backend/AdapterBackend";
 import * as EnforcerBackend from "./backend/EnforcerBackend";
 import * as ModelBackend from "./backend/ModelBackend";
@@ -194,16 +194,6 @@ class EnforcerEditPage extends React.Component {
             <PolicyTable enforcer={this.state.enforcer} modelCfg={this.state.enforcer?.modelCfg} mode={this.state.mode} />
           </Col>
         </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
-            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
-          </Col>
-          <Col span={1} >
-            <Switch checked={this.state.enforcer.isEnabled} onChange={checked => {
-              this.updateEnforcerField("isEnabled", checked);
-            }} />
-          </Col>
-        </Row>
       </Card>
     );
   }

web/src/EnforcerListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Switch, Table} from "antd";
+import {Button, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as EnforcerBackend from "./backend/EnforcerBackend";
@@ -31,7 +31,6 @@ class EnforcerListPage extends BaseListPage {
       name: `enforcer_${randomName}`,
       createdTime: moment().format(),
       displayName: `New Enforcer - ${randomName}`,
-      isEnabled: true,
     };
   }
 
@@ -152,18 +151,6 @@ class EnforcerListPage extends BaseListPage {
           );
         },
       },
-      {
-        title: i18next.t("general:Is enabled"),
-        dataIndex: "isEnabled",
-        key: "isEnabled",
-        width: "120px",
-        sorter: true,
-        render: (text, record, index) => {
-          return (
-            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
-          );
-        },
-      },
       {
         title: i18next.t("general:Action"),
         dataIndex: "",

web/src/ModelEditPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row, Select, Switch} from "antd";
+import {Button, Card, Col, Input, Row, Select} from "antd";
 import * as ModelBackend from "./backend/ModelBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
@@ -161,16 +161,6 @@ class ModelEditPage extends React.Component {
             </div>
           </Col>
         </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
-            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
-          </Col>
-          <Col span={1} >
-            <Switch checked={this.state.model.isEnabled} onChange={checked => {
-              this.updateModelField("isEnabled", checked);
-            }} />
-          </Col>
-        </Row>
       </Card>
     );
   }

web/src/ModelListPage.js

@@ -13,8 +13,9 @@
 // limitations under the License.
 
 import React from "react";
+import {Controlled as CodeMirror} from "react-codemirror2";
 import {Link} from "react-router-dom";
-import {Button, Switch, Table} from "antd";
+import {Button, Popover, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ModelBackend from "./backend/ModelBackend";
@@ -47,7 +48,6 @@ class ModelListPage extends BaseListPage {
       createdTime: moment().format(),
       displayName: `New Model - ${randomName}`,
       modelText: rbacModel,
-      isEnabled: true,
     };
   }
 
@@ -91,7 +91,7 @@ class ModelListPage extends BaseListPage {
         title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
-        width: "150px",
+        width: "180px",
         fixed: "left",
         sorter: true,
         ...this.getColumnSearchProps("name"),
@@ -107,7 +107,7 @@ class ModelListPage extends BaseListPage {
         title: i18next.t("general:Organization"),
         dataIndex: "owner",
         key: "owner",
-        width: "120px",
+        width: "180px",
         sorter: true,
         ...this.getColumnSearchProps("owner"),
         render: (text, record, index) => {
@@ -122,7 +122,7 @@ class ModelListPage extends BaseListPage {
         title: i18next.t("general:Created time"),
         dataIndex: "createdTime",
         key: "createdTime",
-        width: "160px",
+        width: "180px",
         sorter: true,
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -137,14 +137,26 @@ class ModelListPage extends BaseListPage {
         ...this.getColumnSearchProps("displayName"),
       },
       {
-        title: i18next.t("general:Is enabled"),
-        dataIndex: "isEnabled",
-        key: "isEnabled",
-        width: "120px",
+        title: i18next.t("model:Model text"),
+        dataIndex: "modelText",
+        key: "modelText",
+        // width: "180px",
         sorter: true,
         render: (text, record, index) => {
           return (
-            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+            <Popover placement="topRight" content={() => {
+              return (
+                <CodeMirror
+                  value={text}
+                  options={{mode: "properties", theme: "default"}}
+                  onBeforeChange={(editor, data, value) => {}}
+                />
+              );
+            }} title="" trigger="hover">
+              {
+                Setting.getShortText(text, 100)
+              }
+            </Popover>
           );
         },
       },
@@ -152,7 +164,7 @@ class ModelListPage extends BaseListPage {
         title: i18next.t("general:Action"),
         dataIndex: "",
         key: "op",
-        width: "170px",
+        width: "180px",
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (

web/src/table/PolicyTable.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
-import {Button, Input, Popconfirm, Select, Table, Tooltip} from "antd";
+import {Button, Input, Select, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import * as AdapterBackend from "../backend/AdapterBackend";
 import i18next from "i18next";
@@ -176,7 +176,7 @@ class PolicyTable extends React.Component {
           const editing = this.isEditing(index);
           return (
             editing ?
-              <Select options={Object.keys(this.props.modelCfg).map(item => Setting.getOption(item, item))} value={text} onChange={value => {
+              <Select size={"small"} style={{width: "60px"}} options={Object.keys(this.props.modelCfg).reverse().map(item => Setting.getOption(item, item))} value={text} onChange={value => {
                 this.updateField(table, index, "Ptype", value);
               }} />
               : text
@@ -196,7 +196,7 @@ class PolicyTable extends React.Component {
           const editing = this.isEditing(index);
           return (
             editing ?
-              <Input value={text} onChange={e => {
+              <Input size={"small"} value={text} onChange={e => {
                 this.updateField(table, index, columnKeys[i], e.target.value);
               }} />
               : text
@@ -209,17 +209,17 @@ class PolicyTable extends React.Component {
       title: i18next.t("general:Action"),
       dataIndex: "",
       key: "op",
-      width: "100px",
+      width: "130px",
       render: (text, record, index) => {
         const editable = this.isEditing(index);
         return editable ? (
           <span>
-            <Button style={{marginRight: 8}} onClick={() => this.save(table, index)}>
-              Save
+            <Button style={{marginRight: "10px"}} size={"small"} type={"primary"} onClick={() => this.save(table, index)}>
+              {i18next.t("general:Save")}
+            </Button>
+            <Button size={"small"} onClick={() => this.cancel(table, index)}>
+              {i18next.t("general:Cancel")}
             </Button>
-            <Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(table, index)}>
-              <a>Cancel</a>
-            </Popconfirm>
           </span>
         ) : (
           <div>
@@ -257,7 +257,7 @@ class PolicyTable extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <Button type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.getPolicies();}}>
+        <Button style={{marginBottom: "10px", width: "150px"}} type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.getPolicies();}}>
           {i18next.t("general:Sync")}
         </Button>
         {