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,13 +40,8 @@ export default {
     cancel: function () {
       this.new_role = this.initialData
     },
-  },
-
-  watch: {
-    revoke: function (val) {
-      if (val) {
-        this.new_role = ""
-      }
+    revoke: function () {
+      this.new_role = ""
     }
   },
 

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)
     }
   }
 }