1 files changed, 27 insertions, 16 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>