diff options
Diffstat (limited to 'app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue')
-rw-r--r-- | app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue index 5bbf11e541f..504d3d38275 100644 --- a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue +++ b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue @@ -3,6 +3,7 @@ import { GlAvatar, GlBadge, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from import { s__ } from '~/locale'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { formatDate, getTimeago } from '~/lib/utils/datetime_utility'; +import { cleanLeadingSeparator } from '~/lib/utils/url_utility'; import { CI_RESOURCE_DETAILS_PAGE_NAME } from '../../router/constants'; export default { @@ -45,6 +46,9 @@ export default { starCount() { return this.resource?.starCount || 0; }, + starIcon() { + return this.starCount > 0 ? 'star' : 'star-o'; + }, hasReleasedVersion() { return Boolean(this.latestVersion?.releasedAt); }, @@ -57,12 +61,12 @@ export default { releasedAt() { return getTimeago().format(this.latestVersion?.releasedAt); }, - resourcePath() { - return `${this.resource.rootNamespace?.name} / ${this.resource.rootNamespace?.fullPath} / `; - }, tagName() { return this.latestVersion?.tagName || this.$options.i18n.unreleased; }, + webPath() { + return cleanLeadingSeparator(this.resource?.webPath); + }, }, methods: { navigateToDetailsPage(e) { @@ -98,20 +102,21 @@ export default { @click="navigateToDetailsPage" /> <div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1"> - <div class="gl-display-flex gl-flex-wrap gl-gap-2 gl-mb-2"> + <span class="gl-font-sm gl-mb-1">{{ webPath }}</span> + <div class="gl-display-flex gl-flex-wrap gl-gap-2 gl-mb-1"> <gl-link class="gl-text-gray-900! gl-mr-1" :href="detailsPageHref" data-testid="ci-resource-link" @click="navigateToDetailsPage" > - {{ resourcePath }} <b> {{ resource.name }}</b> + <b> {{ resource.name }}</b> </gl-link> <div class="gl-display-flex gl-flex-grow-1 gl-md-justify-content-space-between"> - <gl-badge size="sm">{{ tagName }}</gl-badge> + <gl-badge size="sm" class="gl-h-5 gl-align-self-center">{{ tagName }}</gl-badge> <span class="gl-display-flex gl-align-items-center gl-ml-5"> <span class="gl--flex-center" data-testid="stats-favorites"> - <gl-icon name="star" :size="14" class="gl-mr-1" /> + <gl-icon :name="starIcon" :size="14" class="gl-mr-2" /> <span class="gl-mr-3">{{ starCount }}</span> </span> </span> |