Display 'no access' when role is revoked

js/components/forms/edit_environment_role.js

@@ -4,6 +4,7 @@ import Selector from '../selector'
 import Modal from '../../mixins/modal'
 import toggler from '../toggler'
 
+
 export default {
   name: 'edit-environment-role',
 
@@ -36,23 +37,27 @@ export default {
     cancel: function () {
       this.new_role = this.initialData
     },
+    actualRole: function () {
+      return this.revoke ? null : this.new_role
+    }
   },
 
   computed: {
     displayName: function () {
+      const roleName = this.actualRole()
       for (var arr in this.choices) {
-        if (this.choices[arr][0] == this.new_role) {
+        if (this.choices[arr][0] == roleName) {
           return this.choices[arr][1].name
         }
       }
-      return this.new_role ? this.new_role : "no access"
+      return roleName ? roleName : "no access"
     },
     label_class: function () {
       return this.displayName === "no access" ?
         "label" : "label label--success"
     },
+    newRole: function () {
+      return this.actualRole()
+    }
   },
-  newRole: function () {
-    return this.revoke ? "" : this.new_role
-  }
 }

templates/workspaces/members/edit.html

@@ -130,7 +130,7 @@
                       </li>
                       {% endfor %}
                     </ul>
-                    <input type='hidden' name='env_{{ env.id }}' v-bind:value='new_role'/>
+                    <input type='hidden' name='env_{{ env.id }}' v-bind:value='newRole'/>
                     <div class='block-list__footer'>
                       <div class='action-group'>
                         <button type='button' v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</button>