Display the environment role nicely

js/components/forms/edit_workspace_member.js

@@ -24,7 +24,6 @@ export default {
   data: function () {
     return {
       value: this.initialData,
-      label_class: this.initialData,
     }
   },
 
@@ -32,16 +31,25 @@ export default {
     change: function (e) {
       this.value = e.target.value
     },
-    displayName: function (role) {
-      this.label_class = role === "no_access" ?
-        "label" : "label label--success"
-
-      return role.replace(/[_]/g, " ")
-    },
     cancel: function (current_role, selected_role) {
       if (current_role != selected_role) {
         this.value = current_role
       }
     }
   },
+
+  computed: {
+    displayName: function () {
+      for (var arr in this.choices) {
+        if (this.choices[arr][0] == this.value) {
+          return this.choices[arr][1].name
+        }
+      }
+      return this.value
+    },
+    label_class: function () {
+      return this.value === "no_access" ?
+        "label" : "label label--success"
+    }
+  }
 }

templates/workspaces/members/edit.html

@@ -76,7 +76,7 @@
             <div class='project-list-item__environment__actions'>
               <div>{{ form.data["environment_role"] }}</div>
 
-              <span v-bind:class="label_class" v-html:on=displayName(value)></span>
+              <span v-bind:class="label_class" v-html:on=displayName></span>
               <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
               {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
                   <div class='block-list'>