Display user access type for each group

Also adds unit tests for this

2 files changed, 5 insertions, 0 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 593061a45c6..82eb354d9e0 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/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>
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index c8f2f161b16..67ee7d140ce 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/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: {},
     };
   }