Replace UI flag note markdown editor

openflagr · Sep 4, 2020 · e1ffe9e · e1ffe9e
1 parent 936e123
commit e1ffe9e
Show file tree

Hide file tree

Showing 9 changed files with 1,280 additions and 1,361 deletions.
diff --git a/browser/flagr-ui/package-lock.json b/browser/flagr-ui/package-lock.json
diff --git a/browser/flagr-ui/package.json b/browser/flagr-ui/package.json
@@ -9,24 +9,25 @@
     "watch": "vue-cli-service build --watch"
   },
   "dependencies": {
+    "@iktakahiro/markdown-it-katex": "^4.0.0",
     "axios": "^0.19.0",
     "core-js": "^3.4.4",
     "diff": "^3.4.0",
     "element-ui": "^2.4.6",
     "lodash.clone": "^4.5.0",
-    "mavon-editor": "^2.9.0",
+    "markdown-it": "^11.0.0",
     "vue": "^2.6.10",
     "vue-json-editor": "^1.2.0",
     "vue-router": "^2.7.0",
     "vuedraggable": "^2.14.1",
     "vuex": "^2.4.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.6",
-    "@vue/cli-plugin-eslint": "~4.4.6",
-    "@vue/cli-service": "~4.4.6",
+    "@vue/cli-plugin-babel": "~4.5.4",
+    "@vue/cli-plugin-eslint": "~4.5.4",
+    "@vue/cli-service": "~4.5.4",
     "babel-eslint": "^10.0.3",
-    "eslint": "^7.2.0",
+    "eslint": "^6.0.0",
     "eslint-plugin-vue": "^6.1.2",
     "less": "^3.11.3",
     "less-loader": "^5.0.0",

diff --git a/browser/flagr-ui/src/App.vue b/browser/flagr-ui/src/App.vue
@@ -63,16 +63,6 @@ ol {
   padding-left: 20px;
 }
 
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  li {
-    margin: 0;
-    padding: 0;
-  }
-}
-
 .width--full {
   width: 100%;
 }

diff --git a/browser/flagr-ui/src/components/DebugConsole.vue b/browser/flagr-ui/src/components/DebugConsole.vue
@@ -10,18 +10,33 @@
             <span>Request</span>
           </el-col>
           <el-col :span="7" class="evaluation-button-col">
-            <el-button size="mini" @click="postEvaluation(evalContext)" type="primary" plain>POST /api/v1/evaluation</el-button>
+            <el-button
+              size="mini"
+              @click="postEvaluation(evalContext)"
+              type="primary"
+              plain
+            >POST /api/v1/evaluation</el-button>
           </el-col>
           <el-col :span="6">
             <span>Response</span>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="12">
-            <vue-json-editor v-model="evalContext" :showBtns="false" ref="evalContextEditor" class="json-editor"></vue-json-editor>
+            <vue-json-editor
+              v-model="evalContext"
+              :showBtns="false"
+              ref="evalContextEditor"
+              class="json-editor"
+            ></vue-json-editor>
           </el-col>
           <el-col :span="12">
-            <vue-json-editor v-model="evalResult" :showBtns="false" ref="evalResultEditor" class="json-editor"></vue-json-editor>
+            <vue-json-editor
+              v-model="evalResult"
+              :showBtns="false"
+              ref="evalResultEditor"
+              class="json-editor"
+            ></vue-json-editor>
           </el-col>
         </el-row>
       </el-collapse-item>
@@ -32,18 +47,33 @@
             <span>Request</span>
           </el-col>
           <el-col :span="7" class="evaluation-button-col">
-            <el-button size="mini" @click="postEvaluationBatch(batchEvalContext)" type="primary" plain>POST /api/v1/evaluation/batch</el-button>
+            <el-button
+              size="mini"
+              @click="postEvaluationBatch(batchEvalContext)"
+              type="primary"
+              plain
+            >POST /api/v1/evaluation/batch</el-button>
           </el-col>
           <el-col :span="6">
             <span>Response</span>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="12">
-            <vue-json-editor v-model="batchEvalContext" :showBtns="false" ref="batchEvalContextEditor" class="json-editor"></vue-json-editor>
+            <vue-json-editor
+              v-model="batchEvalContext"
+              :showBtns="false"
+              ref="batchEvalContextEditor"
+              class="json-editor"
+            ></vue-json-editor>
           </el-col>
           <el-col :span="12">
-            <vue-json-editor v-model="batchEvalResult" :showBtns="false" ref="batchEvalResultEditor" class="json-editor"></vue-json-editor>
+            <vue-json-editor
+              v-model="batchEvalResult"
+              :showBtns="false"
+              ref="batchEvalResultEditor"
+              class="json-editor"
+            ></vue-json-editor>
           </el-col>
         </el-row>
       </el-collapse-item>
@@ -52,25 +82,23 @@
 </template>
 
 <script>
-import Axios from 'axios'
-import vueJsonEditor from 'vue-json-editor'
+import Axios from "axios";
+import vueJsonEditor from "vue-json-editor";
 
-import constants from '@/constants'
+import constants from "@/constants";
 
-const {
-  API_URL
-} = constants
+const { API_URL } = constants;
 
 export default {
-  name: 'debug-console',
-  props: ['flag'],
-  data () {
+  name: "debug-console",
+  props: ["flag"],
+  data() {
     return {
       evalContext: {
-        entityID: 'a1234',
-        entityType: 'report',
+        entityID: "a1234",
+        entityType: "report",
         entityContext: {
-          hello: 'world'
+          hello: "world"
         },
         enableDebug: true,
         flagID: this.flag.id,
@@ -80,52 +108,60 @@ export default {
       batchEvalContext: {
         entities: [
           {
-            entityID: 'a1234',
-            entityType: 'report',
+            entityID: "a1234",
+            entityType: "report",
             entityContext: {
-              hello: 'world'
+              hello: "world"
             }
           },
           {
-            entityID: 'a5678',
-            entityType: 'report',
+            entityID: "a5678",
+            entityType: "report",
             entityContext: {
-              hello: 'world'
+              hello: "world"
             }
           }
         ],
         enableDebug: true,
-        flagIDs: [
-          this.flag.id
-        ]
+        flagIDs: [this.flag.id]
       },
       batchEvalResult: {}
-    }
+    };
   },
   methods: {
-    postEvaluation (evalContext) {
-      Axios.post(`${API_URL}/evaluation`, evalContext).then((response) => {
-        this.$message.success(`evaluation success`)
-        this.evalResult = response.data
-      }, () => { this.$message.error(`evaluation error`) })
+    postEvaluation(evalContext) {
+      Axios.post(`${API_URL}/evaluation`, evalContext).then(
+        response => {
+          this.$message.success(`evaluation success`);
+          this.evalResult = response.data;
+        },
+        () => {
+          this.$message.error(`evaluation error`);
+        }
+      );
     },
-    postEvaluationBatch (batchEvalContext) {
-      Axios.post(`${API_URL}/evaluation/batch`, batchEvalContext).then((response) => {
-        this.$message.success(`evaluation success`)
-        this.batchEvalResult = response.data
-      }, () => { this.$message.error(`evaluation error`) })
+    postEvaluationBatch(batchEvalContext) {
+      Axios.post(`${API_URL}/evaluation/batch`, batchEvalContext).then(
+        response => {
+          this.$message.success(`evaluation success`);
+          this.batchEvalResult = response.data;
+        },
+        () => {
+          this.$message.error(`evaluation error`);
+        }
+      );
     }
   },
   components: {
     vueJsonEditor
   },
-  mounted () {
-    this.$refs.evalContextEditor.editor.setMode('code')
-    this.$refs.evalResultEditor.editor.setMode('code')
-    this.$refs.batchEvalContextEditor.editor.setMode('code')
-    this.$refs.batchEvalResultEditor.editor.setMode('code')
+  mounted() {
+    this.$refs.evalContextEditor.editor.setMode("code");
+    this.$refs.evalResultEditor.editor.setMode("code");
+    this.$refs.batchEvalContextEditor.editor.setMode("code");
+    this.$refs.batchEvalResultEditor.editor.setMode("code");
   }
-}
+};
 </script>
 
 <style lang="less" scoped>