Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

5 files changed, 39 insertions, 13 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 2a95b242510..a1ec5942d64 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -136,7 +136,7 @@ export default {
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
     },
-    fetchPage(page, filterGroupsBy, sortBy, archived) {
+    fetchPage({ page, filterGroupsBy, sortBy, archived }) {
       this.isLoading = true;
 
       return this.fetchGroups({
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 59a37b2a1d5..18a6d487703 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -32,10 +32,10 @@ export default {
   },
   methods: {
     change(page) {
-      const filterGroupsParam = getParameterByName('filter');
-      const sortParam = getParameterByName('sort');
-      const archivedParam = getParameterByName('archived');
-      eventHub.$emit(`${this.action}fetchPage`, page, filterGroupsParam, sortParam, archivedParam);
+      const filterGroupsBy = getParameterByName('filter');
+      const sortBy = getParameterByName('sort');
+      const archived = getParameterByName('archived');
+      eventHub.$emit(`${this.action}fetchPage`, { page, filterGroupsBy, sortBy, archived });
     },
   },
 };
diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue
index 402d9a07c53..dfc1549fb4a 100644
--- a/app/assets/javascripts/groups/components/invite_members_banner.vue
+++ b/app/assets/javascripts/groups/components/invite_members_banner.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
-import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -12,10 +12,10 @@ export default {
     GlBanner,
   },
   mixins: [trackingMixin],
-  inject: ['svgPath', 'isDismissedKey', 'trackLabel'],
+  inject: ['svgPath', 'trackLabel', 'calloutsPath', 'calloutsFeatureId', 'groupId'],
   data() {
     return {
-      isDismissed: parseBoolean(getCookie(this.isDismissedKey)),
+      isDismissed: false,
       tracking: {
         label: this.trackLabel,
       },
@@ -26,7 +26,16 @@ export default {
   },
   methods: {
     handleClose() {
-      setCookie(this.isDismissedKey, true);
+      axios
+        .post(this.calloutsPath, {
+          feature_name: this.calloutsFeatureId,
+          group_id: this.groupId,
+        })
+        .catch((e) => {
+          // eslint-disable-next-line @gitlab/require-i18n-strings, no-console
+          console.error('Failed to dismiss banner.', e);
+        });
+
       this.isDismissed = true;
       this.track(this.$options.dismissEvent);
     },
@@ -61,6 +70,7 @@ export default {
   <gl-banner
     v-if="!isDismissed"
     ref="banner"
+    data-testid="invite-members-banner"
     :title="$options.i18n.title"
     :button-text="$options.i18n.button_text"
     :svg-path="svgPath"
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 7a37d1eb93d..46e9d2bec99 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -40,24 +40,31 @@ export default {
       return this.item.type === ITEM_TYPE.GROUP;
     },
   },
+  methods: {
+    displayValue(value) {
+      return this.isGroup && value !== undefined;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="stats gl-text-gray-500">
     <item-stats-value
-      v-if="isGroup"
+      v-if="displayValue(item.subgroupCount)"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
       css-class="number-subgroups gl-ml-5"
       icon-name="folder-o"
+      data-testid="subgroups-count"
     />
     <item-stats-value
-      v-if="isGroup"
+      v-if="displayValue(item.projectCount)"
       :title="__('Projects')"
       :value="item.projectCount"
       css-class="number-projects gl-ml-5"
       icon-name="bookmark"
+      data-testid="projects-count"
     />
     <item-stats-value
       v-if="isGroup"
diff --git a/app/assets/javascripts/groups/init_invite_members_banner.js b/app/assets/javascripts/groups/init_invite_members_banner.js
index 2052dd6ac8c..38ab4122dab 100644
--- a/app/assets/javascripts/groups/init_invite_members_banner.js
+++ b/app/assets/javascripts/groups/init_invite_members_banner.js
@@ -8,15 +8,24 @@ export default function initInviteMembersBanner() {
     return false;
   }
 
-  const { svgPath, inviteMembersPath, isDismissedKey, trackLabel } = el.dataset;
+  const {
+    svgPath,
+    inviteMembersPath,
+    trackLabel,
+    calloutsPath,
+    calloutsFeatureId,
+    groupId,
+  } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       svgPath,
       inviteMembersPath,
-      isDismissedKey,
       trackLabel,
+      calloutsPath,
+      calloutsFeatureId,
+      groupId,
     },
     render: (createElement) => createElement(InviteMembersBanner),
   });