Vue function to display the environment role in a friendlier format

js/components/forms/edit_workspace_member.js

@@ -30,7 +30,9 @@ export default {
     change: function (e) {
       this.value = e.target.value
     },
-    // method to map ugly name to human readable name here
+    readableName: function (role) {
+      return role.replace(/[_]/g, " ")
+    },
   },
 
   mounted: function () {

templates/workspaces/members/edit.html

@@ -81,7 +81,7 @@
             <div class='project-list-item__environment__actions'>
               <div>{{ form.data["environment_role"] }}</div>
 
-              <span class="{{ label_class }}" v-html="value"></span>
+              <span class="{{ label_class }}" v-html:on=readableName(value)></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'>