Add latest changes from gitlab-org/gitlab@master

6 files changed, 82 insertions, 5 deletions

diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue
index 4b5d12b3a5f..ab7bc65075d 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),
     },
   ],
 };
@@ -77,6 +125,13 @@ 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>
diff --git a/app/assets/javascripts/admin/users/graphql/queries/get_users_group_counts.query.graphql b/app/assets/javascripts/admin/users/graphql/queries/get_users_group_counts.query.graphql
new file mode 100644
index 00000000000..0d8e199f16e
--- /dev/null
+++ b/app/assets/javascripts/admin/users/graphql/queries/get_users_group_counts.query.graphql
@@ -0,0 +1,8 @@
+query getUsersGroupCounts($usernames: [String!]) {
+  users(usernames: $usernames) {
+    nodes {
+      id
+      groupCount
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/users/index.js b/app/assets/javascripts/admin/users/index.js
index eceae8a8674..54c8edc080b 100644
--- a/app/assets/javascripts/admin/users/index.js
+++ b/app/assets/javascripts/admin/users/index.js
@@ -1,7 +1,15 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import AdminUsersApp from './components/app.vue';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+});
+
 export const initAdminUsersApp = (el = document.querySelector('#js-admin-users-app')) => {
   if (!el) {
     return false;
@@ -11,6 +19,7 @@ export const initAdminUsersApp = (el = document.querySelector('#js-admin-users-a
 
   return new Vue({
     el,
+    apolloProvider,
     render: (createElement) =>
       createElement(AdminUsersApp, {
         props: {
diff --git a/app/graphql/types/user_interface.rb b/app/graphql/types/user_interface.rb
index bc6e11d3ab9..e5abc033155 100644
--- a/app/graphql/types/user_interface.rb
+++ b/app/graphql/types/user_interface.rb
@@ -64,8 +64,7 @@ module Types
           description: 'Group memberships of the user.'
     field :group_count,
           resolver: Resolvers::Users::GroupCountResolver,
-          description: 'Group count for the user.',
-          feature_flag: :user_group_counts
+          description: 'Group count for the user.'
     field :status,
           type: Types::UserStatusType,
           null: true,
diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb
index 170e3c45a21..90b8a8e94b0 100644
--- a/app/helpers/webpack_helper.rb
+++ b/app/helpers/webpack_helper.rb
@@ -5,6 +5,10 @@ module WebpackHelper
     javascript_include_tag(*webpack_entrypoint_paths(bundle))
   end
 
+  def webpack_preload_asset_tag(asset, options = {})
+    preload_link_tag(Gitlab::Webpack::Manifest.asset_paths(asset).first, options)
+  end
+
   def webpack_controller_bundle_tags
     chunks = []
 
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 6694ad5968a..8aa163a26ec 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -32,6 +32,8 @@
   - if page_canonical_link
     %link{ rel: 'canonical', href: page_canonical_link }
 
+  = webpack_preload_asset_tag("monaco")
+
   = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
 
   = render 'layouts/startup_css'