Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

3 files changed, 33 insertions, 18 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index d41fa0b2410..9d46fcec09b 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,29 +1,36 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlLoadingIcon, GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { visitUrl } from '../../lib/utils/url_utility';
-import identicon from '../../vue_shared/components/identicon.vue';
+import {
+  GlLoadingIcon,
+  GlBadge,
+  GlIcon,
+  GlTooltipDirective,
+  GlSafeHtmlDirective,
+} from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
+import identicon from '~/vue_shared/components/identicon.vue';
+import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
 import eventHub from '../event_hub';
 
 import itemActions from './item_actions.vue';
 import itemCaret from './item_caret.vue';
 import itemStats from './item_stats.vue';
-import itemStatsValue from './item_stats_value.vue';
 import itemTypeIcon from './item_type_icon.vue';
 
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   components: {
     GlBadge,
     GlLoadingIcon,
+    GlIcon,
+    UserAccessRoleBadge,
     identicon,
     itemCaret,
     itemTypeIcon,
     itemStats,
-    itemStatsValue,
     itemActions,
   },
   props: {
@@ -91,6 +98,7 @@ export default {
       }
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -140,28 +148,31 @@ export default {
               data-testid="group-name"
               :href="group.relativePath"
               :title="group.fullName"
-              class="no-expand gl-mt-3 gl-mr-3 gl-text-gray-900!"
+              class="no-expand gl-mr-3 gl-mt-3 gl-text-gray-900!"
               :itemprop="microdata.nameItemprop"
-              >{{
+            >
+              {{
                 // ending bracket must be by closing tag to prevent
                 // link hover text-decoration from over-extending
                 group.name
-              }}</a
-            >
-            <item-stats-value
-              :icon-name="visibilityIcon"
+              }}
+            </a>
+            <gl-icon
+              v-gl-tooltip.hover.bottom
+              class="gl-display-inline-flex gl-align-items-center gl-mr-3 gl-mt-3 gl-text-gray-500"
+              :name="visibilityIcon"
               :title="visibilityTooltip"
-              css-class="item-visibility d-inline-flex align-items-center gl-mt-3 gl-mr-2 text-secondary"
+              data-testid="group-visibility-icon"
             />
-            <span v-if="group.permission" class="user-access-role gl-mt-3">
+            <user-access-role-badge v-if="group.permission" class="gl-mt-3">
               {{ group.permission }}
-            </span>
+            </user-access-role-badge>
           </div>
           <div v-if="group.description" class="description">
             <span
+              v-safe-html:[$options.safeHtmlConfig]="group.description"
               :itemprop="microdata.descriptionItemprop"
               data-testid="group-description"
-              v-html="group.description"
             >
             </span>
           </div>
diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue
index 81c5e3ce85d..747cea6a46e 100644
--- a/app/assets/javascripts/groups/components/invite_members_banner.vue
+++ b/app/assets/javascripts/groups/components/invite_members_banner.vue
@@ -35,7 +35,9 @@ export default {
       this.track(this.$options.dismissEvent);
     },
     trackOnShow() {
-      if (!this.isDismissed) this.track(this.$options.displayEvent);
+      this.$nextTick(() => {
+        if (!this.isDismissed) this.track(this.$options.displayEvent);
+      });
     },
     addTrackingAttributesToButton() {
       if (this.$refs.banner === undefined) return;
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index e23b0fa7413..9c379d7bf9b 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -21,5 +21,7 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret gl-mr-2"> <gl-icon :size="10" :name="iconClass" /> </span>
+  <span class="folder-caret gl-mr-2">
+    <gl-icon :size="10" :name="iconClass" use-deprecated-sizes />
+  </span>
 </template>