From 1da9d25d2a33d7e36a494c1448cd3ea6c5d7166a Mon Sep 17 00:00:00 2001
From: Phillip Wang <phillip@checkr.com>
Date: Fri, 20 Oct 2017 16:02:19 -0700
Subject: [PATCH] Add ability to delete variant. Halt user if the variant is
 currently being used by a distribution by some segment

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

diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index ba655442..36ea0e23 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -134,6 +134,9 @@
                     <el-button slot="append" size="small" @click="putVariant(variant)">
                       Save
                     </el-button>
+                    <el-button @click="deleteVariant(variant)" type="danger" size="mini">
+                      <span class="el-icon-delete2"/>
+                    </el-button>
                   </div>
                 </div>
 
@@ -487,6 +490,29 @@ export default {
           this.flag.variants.push(variant)
         })
     },
+    deleteVariant (variant) {
+      const {flagId} = this.$route.params
+
+      const isVariantInUse = this.flag.segments.some(segment => (
+        segment.distributions.some(distribution => distribution.variantID === variant.id)
+      ))
+
+      if (isVariantInUse) {
+        alert('This variant is being used by a segment distribution. Please remove the segment or edit the distribution in order to remove this variant.')
+        return
+      }
+
+      if (!confirm(`Are you sure you want to delete variant #${variant.id} [${variant.key}]`)) {
+        return
+      }
+
+      fetch(
+        `${API_URL}/flags/${flagId}/variants/${variant.id}`,
+        {method: 'delete'}
+      ).then(() => {
+        this.fetchFlag()
+      })
+    },
     putVariant (variant) {
       const flagId = this.$route.params.flagId
       variant.attachment = JSON.parse(variant.attachmentStr)
@@ -555,17 +581,19 @@ export default {
           this.$message('You created a new segment')
           this.dialogCreateSegmentOpen = false
         })
+    },
+    fetchFlag () {
+      const flagId = this.$route.params.flagId
+      getJson(`${API_URL}/flags/${flagId}`).then(flag => {
+        flag.segments.forEach(segment => processSegment(segment))
+        flag.variants.forEach(variant => processVariant(variant))
+        this.flag = flag
+        this.loaded = true
+      })
     }
   },
   created () {
-    const flagId = this.$route.params.flagId
-
-    getJson(`${API_URL}/flags/${flagId}`).then(flag => {
-      flag.segments.forEach(segment => processSegment(segment))
-      flag.variants.forEach(variant => processVariant(variant))
-      this.flag = flag
-      this.loaded = true
-    })
+    this.fetchFlag()
   }
 }
 </script>