diff --git a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue index b6fc8ae5d7da1cbb9bbb94f21f0ab1cf57e01113..a027363a0c2550415c11497b2dc9f91229a6b489 100644 --- a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue +++ b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue @@ -5,11 +5,13 @@ import { GlBadge, GlDisclosureDropdown, GlDisclosureDropdownItem, + GlLink, GlTooltipDirective, } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { cleanLeadingSeparator } from '~/lib/utils/url_utility'; +import { formatDate } from '~/lib/utils/datetime_utility'; import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue'; import CiVerificationBadge from '../shared/ci_verification_badge.vue'; import CiResourceAbout from './ci_resource_about.vue'; @@ -19,6 +21,8 @@ export default { i18n: { moreActionsLabel: __('More actions'), reportAbuse: __('Report abuse to administrator'), + lastRelease: s__('CiCatalog|Released %{date}'), + lastReleaseMissing: s__('CiCatalog|No release available'), }, components: { AbuseCategorySelector, @@ -27,9 +31,10 @@ export default { CiVerificationBadge, GlAvatar, GlAvatarLink, + GlBadge, GlDisclosureDropdown, GlDisclosureDropdownItem, - GlBadge, + GlLink, }, directives: { GlTooltip: GlTooltipDirective, @@ -79,6 +84,14 @@ export default { isVerified() { return this.resource?.verificationLevel !== 'UNVERIFIED'; }, + lastReleaseText() { + if (this.latestVersion?.createdAt) { + const date = formatDate(this.latestVersion.createdAt); + return sprintf(this.$options.i18n.lastRelease, { date }); + } + + return this.$options.i18n.lastReleaseMissing; + }, latestVersion() { return this.resource?.versions?.nodes[0] || {}; }, @@ -124,12 +137,19 @@ export default { {{ webPath }} </div> <span class="gl-display-flex"> - <div class="gl-font-lg gl-font-weight-bold">{{ resource.name }}</div> + <gl-link + class="gl-font-lg gl-font-weight-bold gl-text-gray-900 gl-hover-text-gray-900" + :href="resource.webPath" + > + {{ resource.name }} + </gl-link> <gl-badge v-if="hasLatestVersion" + v-gl-tooltip size="sm" class="gl-ml-3 gl-my-1" :href="latestVersion.path" + :title="lastReleaseText" > {{ versionBadgeText }} </gl-badge> @@ -166,6 +186,7 @@ export default { </div> </div> <ci-resource-about + v-if="false" :is-loading-details="isLoadingDetails" :is-loading-shared-data="isLoadingSharedData" :open-issues-count="openIssuesCount" @@ -177,7 +198,7 @@ export default { v-if="isLoadingSharedData" class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-20!" ></div> - <p v-else class="gl-mt-3"> + <p v-else class="gl-mt-2"> {{ resource.description }} </p> <abuse-category-selector diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 14a53a192e3ca35e4d2bd41aec7fe131b025bc94..1e9facaa8a9558690511d438fb7e8038a885131f 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -10861,6 +10861,9 @@ msgstr "" msgid "CiCatalog|Readme" msgstr "" +msgid "CiCatalog|Released %{date}" +msgstr "" + msgid "CiCatalog|Released %{timeAgo}" msgstr "" diff --git a/spec/features/explore/catalog/catalog_details_spec.rb b/spec/features/explore/catalog/catalog_details_spec.rb index 0103b972e60d3aab62d83d1bf5ddde3e0961e4c3..30e718967c0dae6271c02c70be5c69eb3b5459df 100644 --- a/spec/features/explore/catalog/catalog_details_spec.rb +++ b/spec/features/explore/catalog/catalog_details_spec.rb @@ -16,7 +16,7 @@ end it 'navigates to the details page' do - expect(page).to have_content('Go to the project') + expect(page).to have_content('Readme') end end diff --git a/spec/features/explore/catalog/catalog_spec.rb b/spec/features/explore/catalog/catalog_spec.rb index 7f5655e3169279d87b8381ff2fb588c2e22fafbf..26130f2561ccdbaeb3c5af2a8f41f7bd598c223c 100644 --- a/spec/features/explore/catalog/catalog_spec.rb +++ b/spec/features/explore/catalog/catalog_spec.rb @@ -50,7 +50,7 @@ end it 'navigates to the details page' do - expect(page).to have_content('Go to the project') + expect(page).to have_content('Readme') end end end diff --git a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js index 06e85f277a9930c31656b1f9c6d0f96ae17f19dd..c415843b2384ce5b5440872cb6dd128ce82bc4d1 100644 --- a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js +++ b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js @@ -67,16 +67,8 @@ describe('CiResourceHeader', () => { }); }); - it('renders the catalog about section and passes props', () => { - expect(findAboutComponent().exists()).toBe(true); - expect(findAboutComponent().props()).toEqual({ - isLoadingDetails: false, - isLoadingSharedData: false, - openIssuesCount: defaultProps.openIssuesCount, - openMergeRequestsCount: defaultProps.openMergeRequestsCount, - latestVersion: resource.versions.nodes[0], - webPath: resource.webPath, - }); + it('does not render the catalog about section', () => { + expect(findAboutComponent().exists()).toBe(false); }); });