Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

1 files changed, 63 insertions, 3 deletions

diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue
index 8b41a063abc..2fd96e38f8e 100644
--- a/app/assets/javascripts/admin/users/components/users_table.vue
+++ b/app/assets/javascripts/admin/users/components/users_table.vue
@@ -1,7 +1,10 @@
 <script>
-import { GlTable } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlSkeletonLoader, GlTable } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { convertNodeIdsFromGraphQLIds } from '~/graphql_shared/utils';
+import { s__, __ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
+import getUsersGroupCountsQuery from '../graphql/queries/get_users_group_counts.query.graphql';
 import UserActions from './user_actions.vue';
 import UserAvatar from './user_avatar.vue';
 
@@ -11,6 +14,7 @@ const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
 
 export default {
   components: {
+    GlSkeletonLoader,
     GlTable,
     UserAvatar,
     UserActions,
@@ -26,6 +30,45 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      groupCounts: [],
+    };
+  },
+  apollo: {
+    groupCounts: {
+      query: getUsersGroupCountsQuery,
+      variables() {
+        return {
+          usernames: this.users.map((user) => user.username),
+        };
+      },
+      update(data) {
+        const nodes = data?.users?.nodes || [];
+        const parsedIds = convertNodeIdsFromGraphQLIds(nodes);
+
+        return parsedIds.reduce((acc, { id, groupCount }) => {
+          acc[id] = groupCount || 0;
+          return acc;
+        }, {});
+      },
+      error(error) {
+        createFlash({
+          message: this.$options.i18n.groupCountFetchError,
+          captureError: true,
+          error,
+        });
+      },
+      skip() {
+        return !this.users.length;
+      },
+    },
+  },
+  i18n: {
+    groupCountFetchError: s__(
+      'AdminUsers|Could not load user group counts. Please refresh the page to try again.',
+    ),
+  },
   fields: [
     {
       key: 'name',
@@ -38,6 +81,11 @@ export default {
       thClass: thWidthClass(10),
     },
     {
+      key: 'groupCount',
+      label: __('Groups'),
+      thClass: thWidthClass(10),
+    },
+    {
       key: 'createdAt',
       label: __('Created on'),
       thClass: thWidthClass(15),
@@ -50,7 +98,7 @@ export default {
     {
       key: 'settings',
       label: '',
-      thClass: thWidthClass(20),
+      thClass: thWidthClass(10),
     },
   ],
 };
@@ -64,6 +112,7 @@ export default {
       :empty-text="s__('AdminUsers|No users found')"
       show-empty
       stacked="md"
+      data-qa-selector="user_row_content"
     >
       <template #cell(name)="{ item: user }">
         <user-avatar :user="user" :admin-user-path="paths.adminUser" />
@@ -77,6 +126,17 @@ export default {
         <user-date :date="lastActivityOn" show-never />
       </template>
 
+      <template #cell(groupCount)="{ item: { id } }">
+        <div :data-testid="`user-group-count-${id}`">
+          <gl-skeleton-loader v-if="$apollo.loading" :width="40" :lines="1" />
+          <span v-else>{{ groupCounts[id] }}</span>
+        </div>
+      </template>
+
+      <template #cell(projectsCount)="{ item: { id, projectsCount } }">
+        <div :data-testid="`user-project-count-${id}`">{{ projectsCount }}</div>
+      </template>
+
       <template #cell(settings)="{ item: user }">
         <user-actions :user="user" :paths="paths" />
       </template>