Display user access type for each group

app/assets/javascripts/groups/components/group_item.vue

@@ -190,6 +190,8 @@ export default {
         class="title">
         <a
           :href="group.webUrl">{{fullPath}}</a>
+        as
+        <span class="access-type">{{group.permissions.humanGroupAccess}}</span>
       </div>
       <div
         class="description">{{group.description}}</div>

app/assets/javascripts/groups/stores/groups_store.js

@@ -130,6 +130,9 @@ export default class GroupsStore {
       isOrphan: false,
       numberProjects: rawGroup.number_projects_with_delimiter,
       numberUsers: rawGroup.number_users_with_delimiter,
+      permissions: {
+        humanGroupAccess: rawGroup.permissions.human_group_access,
+      },
       subGroups: {},
     };
   }

spec/javascripts/groups/group_item_spec.js

@@ -38,6 +38,7 @@ describe('Groups Component', () => {
       expect(component.$el.querySelector('.group-visibility')).toBeDefined();
       expect(component.$el.querySelector('.avatar-container')).toBeDefined();
       expect(component.$el.querySelector('.title').textContent).toContain(group.name);
+      expect(component.$el.querySelector('.access-type').textContent).toContain(group.permissions.humanGroupAccess);
       expect(component.$el.querySelector('.description').textContent).toContain(group.description);
       expect(component.$el.querySelector('.edit-group')).toBeDefined();
       expect(component.$el.querySelector('.leave-group')).toBeDefined();

spec/javascripts/groups/mock_data.js

@@ -15,7 +15,7 @@ const group1 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };
 
@@ -37,7 +37,7 @@ const group14 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 30,
+    human_group_access: 'Master',
   },
 };
 
@@ -58,7 +58,7 @@ const group2 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };
 
@@ -79,7 +79,7 @@ const group21 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };