diff options
Diffstat (limited to 'app/assets/javascripts/groups/components/group_item.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/group_item.vue | 43 |
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> |