Allow roles to be revoked many times

js/components/forms/edit_environment_role.js

@@ -31,14 +31,21 @@ export default {
 
   methods: {
     change: function (e) {
-      e.preventDefault()
-      this.new_role = this.revoke ? "" : e.target.value
+      this.new_role = e.target.value
     },
     cancel: function () {
       this.new_role = this.initialData
     },
   },
 
+  watch: {
+    revoke: function (val) {
+      if (val) {
+        this.new_role = ""
+      }
+    }
+  },
+
   computed: {
     displayName: function () {
       const newRole = this.newRole
@@ -53,7 +60,7 @@ export default {
         "label" : "label label--success"
     },
     newRole: function () {
-      return this.revoke ? "" : this.new_role
+      return this.new_role
     }
   },
 }

js/components/forms/edit_project_roles.js

@@ -18,6 +18,15 @@ export default {
   },
 
   data: function() {
-      return { revoke: false }
+    return { revoke: false }
+  },
+
+  methods: {
+    doRevoke: function () {
+      // This is being used to send an event to the edit-environment-role child component.
+      // We'll toggle this back on the next line so that it can be used again.
+      this.revoke = true
+      setTimeout(() => { this.revoke = false }, 25)
+    }
   }
 }

templates/workspaces/members/edit.html

@@ -70,7 +70,7 @@
                 Confirming will revoke access for {{ member.user.full_name }} to any environments associated with {{ project.name }}.
               </p>
               <div class='action-group'>
-                <a v-on:click="revoke = true; closeModal('{{ revoke_modal_name }}')" class='action-group__action usa-button'>Confirm</a>
+                <a v-on:click="doRevoke(); closeModal('{{ revoke_modal_name }}')" class='action-group__action usa-button'>Confirm</a>
                 <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ revoke_modal_name }}'); cancel();">Cancel</a>
               </div>
             </div>
@@ -106,11 +106,11 @@
 
                             <input
                               name='radio_input_{{ env.id }}'
-                              v-on:change='change'
+                              v-on:change.prevent='change'
                               type='radio'
                               id="env_{{ env.id }}_{{ choice[0] }}"
                               value='{{ choice[0] }}'
-                              {% if role == choice[0] %}
+                              {% if "!{new_role}" == choice[0] %}
                                 checked='checked'
                               {% endif %}
                             />