Use global events to revoke env access

js/components/forms/edit_environment_role.js

@@ -20,7 +20,7 @@ export default {
   props: {
     choices: Array,
     initialData: String,
-    revoke: Boolean,
+    projectId: String
   },
 
   data: function () {
@@ -29,6 +29,10 @@ export default {
     }
   },
 
+  mounted: function() {
+    this.$root.$on('revoke-' + this.projectId, this.revoke)
+  },
+
   methods: {
     change: function (e) {
       this.new_role = e.target.value
@@ -36,14 +40,9 @@ export default {
     cancel: function () {
       this.new_role = this.initialData
     },
-  },
-
-  watch: {
-    revoke: function (val) {
-      if (val) {
+    revoke: function () {
       this.new_role = ""
     }
-    }
   },
 
   computed: {

js/components/forms/edit_project_roles.js

@@ -14,19 +14,13 @@ export default {
   },
 
   props: {
-      name: String
-  },
-
-  data: function() {
-    return { revoke: false }
+    name: String,
+    id: String
   },
 
   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)
+      this.$root.$emit('revoke-' + this.id)
     }
   }
 }

templates/workspaces/members/edit.html

@@ -52,7 +52,7 @@
 
   {% for project in projects %}
   {% set revoke_modal_name = project.name + 'RevokeModal' %}
-  <edit-project-roles inline-template v-bind:name="'{{ project.name }}'">
+  <edit-project-roles inline-template v-bind:name="'{{ project.name }}'" v-bind:id="'{{ project.id }}'">
     <div is='toggler' default-visible class='block-list project-list-item'>
       <template slot-scope='props'>
         <header class='block-list__header'>
@@ -81,7 +81,7 @@
             {% set role = EnvironmentRoles.get(member.user_id, env.id).role %}
 
           <li class='block-list__item'>
-            <edit-environment-role inline-template initial-data='{{ role or "" }}' v-bind:choices='{{ choices | tojson }}' v-bind:revoke='revoke'>
+            <edit-environment-role inline-template initial-data='{{ role or "" }}' v-bind:choices='{{ choices | tojson }}' v-bind:project-id="'{{ project.id }}'">
             <div class='project-list-item__environment'>
               <span class='project-list-item__environment__link'>
                 {{ env.name }}