From 7316e8e63286c6d34abe2d02f46904bc13b143a6 Mon Sep 17 00:00:00 2001
From: Phillip Wang <phillip@checkr.com>
Date: Fri, 13 Oct 2017 16:29:46 -0700
Subject: [PATCH] Add ability to delete constraints and also add indicator on
 flags collections page to show which flags are enabled or disabled

---
 browser/flagr-ui/src/components/Flag.vue  | 37 +++++++++++++++++++----
 browser/flagr-ui/src/components/Flags.vue | 24 +++++++++++++--
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index 15a7610a..a01a3e4a 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -20,7 +20,7 @@
             <el-checkbox
               @change="(e) => selectVariant(e, variant)"
               :checked="!!newDistributions[variant.id]"
-            >  
+            >
             </el-checkbox>
             <el-tag type="danger">
               {{ variant.key }}
@@ -138,10 +138,20 @@
                 <h4>Constraints ({{segment.constraints.length}})</h4>
                 <div class="constraints">
                   <ol class="constraints-inner" v-if="segment.constraints.length">
-                    <li v-for="constraint in segment.constraints" :key="constraint.id">
-                      <el-tag type="gray">{{ constraint.property }}</el-tag>
-                      <el-tag type="primary">{{ operatorValueToLabelMap[constraint.operator] }}</el-tag>
-                      <el-tag type="gray">{{ constraint.value }}</el-tag>
+                    <li
+                      class="flex-row"
+                      v-for="constraint in segment.constraints"
+                      :key="constraint.id">
+                      <div class="flex-row-left">
+                        <el-tag type="gray">{{ constraint.property }}</el-tag>
+                        <el-tag type="primary">{{ operatorValueToLabelMap[constraint.operator] }}</el-tag>
+                        <el-tag type="gray">{{ constraint.value }}</el-tag>
+                      </div>
+                      <div class="flex-row-right">
+                        <el-button @click="deleteConstraint(segment, constraint)">
+                          <span class="el-icon-delete2"/>
+                        </el-button>
+                      </div>
                     </li>
                   </ol>
                   <div class="card--empty" v-else>
@@ -387,7 +397,7 @@ export default {
         })
     },
     createConstraint (segment) {
-      const flagId = this.$route.params.flagId
+      const {flagId} = this.$route.params
       postJson(`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints`, segment.newConstraint)
         .then(constraint => {
           segment.constraints.push(constraint)
@@ -395,6 +405,21 @@ export default {
           this.$message('You created a new constraint')
         })
     },
+    deleteConstraint (segment, constraint) {
+      const {flagId} = this.$route.params
+
+      if (!confirm('Are you sure you want to delete this constraint?')) {
+        return
+      }
+
+      fetch(
+        `${API_URL}/flags/${flagId}/segments/${segment.id}/constraints/${constraint.id}`,
+        {method: 'delete'}
+      ).then(() => {
+        const index = segment.constraints.findIndex(constraint => constraint.id === constraint.id)
+        segment.constraints.splice(index, 1)
+      })
+    },
     createSegment () {
       const flagId = this.$route.params.flagId
       postJson(`${API_URL}/flags/${flagId}/segments`, this.newSegment)
diff --git a/browser/flagr-ui/src/components/Flags.vue b/browser/flagr-ui/src/components/Flags.vue
index 1f73baa4..8e0868b5 100644
--- a/browser/flagr-ui/src/components/Flags.vue
+++ b/browser/flagr-ui/src/components/Flags.vue
@@ -23,11 +23,18 @@
         <span v-if="flags.length">({{ flags.length }})</span>
       </h2>
       <ul v-if="flags.length">
-        <li v-for="flag in flags" class="flag" v-bind:class="{new: flag._new}">
+        <li
+          v-for="flag in flags" class="flag"
+          :class="{new: flag._new}">
           <router-link
-            class="flag-link"
+            class="flag-link flex-row"
             :to="{name: 'flag', params: {flagId: flag.id}}">
-            <el-tag>{{ flag.id }}</el-tag> {{ flag.description }}
+            <div class="flex-row-left">
+              <el-tag>{{ flag.id }}</el-tag> {{ flag.description }}
+            </div>
+            <div class="flex-row-right">
+              <span :class="{'flag-enabled-icon': true, enabled: flag.enabled}"></span>
+            </div>
           </router-link>
         </li>
       </ul>
@@ -145,6 +152,7 @@ export default {
       }
       .flag-link {
         display: inline-block;
+        box-sizing: border-box;
         padding: 8px 12px;
         font-size: 1.1em;
         width: 100%;
@@ -155,6 +163,16 @@ export default {
           color: white;
         }
       }
+      .flag-enabled-icon {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #ff4949;
+        &.enabled {
+          background-color: #13ce66;
+        }
+      }
     }
   }
 }