From ca2a5ec2689d7638124d1ec6694d54021ac47b1f Mon Sep 17 00:00:00 2001
From: Yossi Yadgar <yosyad@gmail.com>
Date: Sun, 19 May 2019 18:26:01 +0300
Subject: [PATCH 1/4] set style as scoped

---
 browser/flagr-ui/src/components/DebugConsole.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/flagr-ui/src/components/DebugConsole.vue b/browser/flagr-ui/src/components/DebugConsole.vue
index ea0e024d..3c971b3a 100644
--- a/browser/flagr-ui/src/components/DebugConsole.vue
+++ b/browser/flagr-ui/src/components/DebugConsole.vue
@@ -128,7 +128,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .json-editor {
   margin-top: 3px;
   .jsoneditor {

From 42414ecfca7f845c64f7dd5a3c0a7b1319121c6c Mon Sep 17 00:00:00 2001
From: Yossi Yadgar <yosyad@gmail.com>
Date: Sun, 19 May 2019 18:27:45 +0300
Subject: [PATCH 2/4] replaced existing input with json-editor component

---
 browser/flagr-ui/src/components/Flag.vue | 44 ++++++++++++++++++------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index 25de7089..88a0cb4b 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -246,12 +246,12 @@
                             </el-input>
                           </el-col>
                           <el-col :span="12">
-                            <el-input
-                              size="small"
-                              placeholder="{}"
-                              v-model="variant.attachmentStr">
-                              <template slot="prepend">Attachment </template>
-                            </el-input>
+                            <vue-json-editor
+                              v-model="variant.attachment"
+                              :showBtns="false"
+                              :ref="'json-editor-' + variant.id"
+                              class="json-editor"
+                            ></vue-json-editor>
                           </el-col>
                         </el-row>
                       </el-form>
@@ -505,6 +505,7 @@ import Spinner from '@/components/Spinner'
 import DebugConsole from '@/components/DebugConsole'
 import FlagHistory from '@/components/FlagHistory'
 import MarkdownEditor from '@/components/MarkdownEditor.vue'
+import vueJsonEditor from 'vue-json-editor'
 import {operators} from '@/../config/operators.json'
 
 const OPERATOR_VALUE_TO_LABEL_MAP = operators.reduce((acc, el) => {
@@ -549,7 +550,9 @@ function processSegment (segment) {
 }
 
 function processVariant (variant) {
-  variant.attachmentStr = JSON.stringify(variant.attachment)
+  if (typeof variant.attachment === 'string') {
+    variant.attachment = JSON.parse(variant.attachment)
+  }
 }
 
 export default {
@@ -559,10 +562,12 @@ export default {
     debugConsole: DebugConsole,
     flagHistory: FlagHistory,
     draggable: draggable,
-    MarkdownEditor
+    MarkdownEditor,
+    vueJsonEditor
   },
   data () {
     return {
+      refsIntervalId: false,
       loaded: false,
       dialogDeleteFlagVisible: false,
       dialogEditDistributionOpen: false,
@@ -714,7 +719,6 @@ export default {
       }, handleErr.bind(this))
     },
     putVariant (variant) {
-      variant.attachment = JSON.parse(variant.attachmentStr)
       Axios.put(
         `${API_URL}/flags/${this.flagId}/variants/${variant.id}`,
         variant
@@ -835,15 +839,29 @@ export default {
     },
     toggleShowMdEditor () {
       this.showMdEditor = !this.showMdEditor
+    },
+    setJsonEdiorModeWhenMounted () {
+      if (!this.$refs) {
+        return
+      }
+
+      const jsonEditorRefs = Object.keys(this.$refs).filter(key => key.startsWith('json-editor'))
+
+      jsonEditorRefs.forEach(ref => {
+        this.$refs[ref][0].editor.setMode('code')
+      })
+
+      clearInterval(this.refsIntervalId)
     }
   },
   mounted () {
     this.fetchFlag()
+    this.refsIntervalId = setInterval(this.setJsonEdiorModeWhenMounted, 50)
   }
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 h5 {
   padding: 0;
   margin: 10px 0 5px;
@@ -959,4 +977,10 @@ ol.constraints-inner {
   }
 }
 
+.json-editor {
+  .jsoneditor {
+    height: 200px;
+  }
+}
+
 </style>

From dee65c4bab46781c24aa63817e73e2a8cc7f8291 Mon Sep 17 00:00:00 2001
From: Yossi Yadgar <yosyad@gmail.com>
Date: Wed, 29 May 2019 20:59:43 +0300
Subject: [PATCH 3/4] last design

---
 browser/flagr-ui/src/components/Flag.vue | 78 +++++++++++++-----------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index 88a0cb4b..d399b6c5 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -224,10 +224,15 @@
                     <el-card shadow="hover">
                       <el-form label-position="left" label-width="100px">
                         <div class="flex-row id-row">
-                          <div class="flex-row-left">
-                            <el-tag type="primary" :disable-transitions="true"> Variant ID: <b>{{ variant.id }}</b> </el-tag>
-                          </div>
-                          <div class="flex-row-right">
+                          <el-tag type="primary" :disable-transitions="true"> Variant ID: <b>{{ variant.id }}</b> </el-tag>
+                          <el-input
+                            class="variant-key-input"
+                            size="small"
+                            placeholder="Key"
+                            v-model="variant.key">
+                            <template slot="prepend">Key</template>
+                          </el-input>
+                          <div class="flex-row-right save-remove-variant-row">
                             <el-button slot="append" size="small" @click="putVariant(variant)">
                               Save Variant
                             </el-button>
@@ -236,24 +241,17 @@
                             </el-button>
                           </div>
                         </div>
-                        <el-row :gutter="10">
-                          <el-col :span="12">
-                            <el-input
-                              size="small"
-                              placeholder="Key"
-                              v-model="variant.key">
-                              <template slot="prepend">Key</template>
-                            </el-input>
-                          </el-col>
-                          <el-col :span="12">
+                        <el-collapse class="flex-row">
+                          <el-collapse-item title="Variant attachment" class="variant-attachment-collapsable-title">
+                            <p class="variant-attachment-title">You can add a key-value pair (string -> string)</p>
                             <vue-json-editor
                               v-model="variant.attachment"
                               :showBtns="false"
-                              :ref="'json-editor-' + variant.id"
-                              class="json-editor"
+                              :mode="'code'"
+                              class="variant-attachment-content"
                             ></vue-json-editor>
-                          </el-col>
-                        </el-row>
+                          </el-collapse-item>
+                        </el-collapse>
                       </el-form>
                     </el-card>
                   </div>
@@ -567,7 +565,6 @@ export default {
   },
   data () {
     return {
-      refsIntervalId: false,
       loaded: false,
       dialogDeleteFlagVisible: false,
       dialogEditDistributionOpen: false,
@@ -839,29 +836,15 @@ export default {
     },
     toggleShowMdEditor () {
       this.showMdEditor = !this.showMdEditor
-    },
-    setJsonEdiorModeWhenMounted () {
-      if (!this.$refs) {
-        return
-      }
-
-      const jsonEditorRefs = Object.keys(this.$refs).filter(key => key.startsWith('json-editor'))
-
-      jsonEditorRefs.forEach(ref => {
-        this.$refs[ref][0].editor.setMode('code')
-      })
-
-      clearInterval(this.refsIntervalId)
     }
   },
   mounted () {
     this.fetchFlag()
-    this.refsIntervalId = setInterval(this.setJsonEdiorModeWhenMounted, 50)
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 h5 {
   padding: 0;
   margin: 10px 0 5px;
@@ -977,10 +960,33 @@ ol.constraints-inner {
   }
 }
 
-.json-editor {
+.variant-attachment-content {
   .jsoneditor {
-    height: 200px;
+    height: 130px;
   }
 }
 
+.variant-attachment-collapsable-title {
+  margin: 0;
+  font-size: 13px;
+  color: #909399;
+  width: 100%;
+  text-align: center;
+}
+
+.variant-attachment-title {
+  margin: 0;
+  font-size: 13px;
+  color: #909399;
+}
+
+.variant-key-input {
+  margin-left: 10px;
+  width: 50%;
+}
+
+.save-remove-variant-row {
+  padding-bottom: 5px;
+}
+
 </style>

From c813a1e1873d7ae368ba6ad2f96560b3f85553c7 Mon Sep 17 00:00:00 2001
From: Yossi Yadgar <yosyad@gmail.com>
Date: Thu, 30 May 2019 08:02:07 +0300
Subject: [PATCH 4/4] last fix

---
 browser/flagr-ui/src/components/Flag.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index d399b6c5..f34ed9f1 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -243,7 +243,7 @@
                         </div>
                         <el-collapse class="flex-row">
                           <el-collapse-item title="Variant attachment" class="variant-attachment-collapsable-title">
-                            <p class="variant-attachment-title">You can add a key-value pair (string -> string)</p>
+                            <p class="variant-attachment-title">You can add JSON in key/value pairs format.</p>
                             <vue-json-editor
                               v-model="variant.attachment"
                               :showBtns="false"