diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
index 6075d4521e8b4658b685a596125da644ee445629..c72866435c0432850cf877b4b4da73f4d552a323 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
@@ -98,24 +98,28 @@ export default {
/>
</template>
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
+ <div
+ class="gl-display-flex gl-align-items-center gl-gap-3 gl-mr-5 gl-min-w-0"
+ data-testid="package-name"
+ >
<gl-link
v-if="containsWebPathLink"
- class="gl-text-body gl-min-w-0"
+ class="gl-text-body gl-min-w-0 gl-word-break-all"
:class="errorPackageStyle"
:href="packageLink"
>
- <gl-truncate :text="packageEntity.name" />
+ {{ packageEntity.name }}
</gl-link>
- <gl-truncate v-else :class="errorPackageStyle" :text="packageEntity.name" />
+ <span v-else :class="errorPackageStyle">
+ {{ packageEntity.name }}
+ </span>
- <package-tags
+ <div
v-if="packageEntity.tags.nodes && packageEntity.tags.nodes.length"
- class="gl-ml-3"
- :tags="packageEntity.tags.nodes"
- hide-label
- :tag-display-limit="1"
- />
+ class="gl-display-flex gl-gap-2"
+ >
+ <package-tags :tags="packageEntity.tags.nodes" hide-label :tag-display-limit="1" />
+ </div>
</div>
</template>
<template #left-secondary>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index 892e8ac79f5ea7edd41e59af73a5af4f893c8b3e..364ecbf4434853ef0c7bb5dff52b6e409c1bda73 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -144,35 +144,40 @@ export default {
/>
</template>
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
+ <div
+ class="gl-display-flex gl-align-items-center gl-gap-3 gl-mr-5 gl-min-w-0"
+ data-testid="package-name"
+ >
<router-link
v-if="containsWebPathLink"
:class="errorPackageStyle"
- class="gl-text-body gl-min-w-0"
+ class="gl-text-body gl-min-w-0 gl-word-break-all"
data-testid="details-link"
:to="{ name: 'details', params: { id: packageId } }"
>
- <gl-truncate :text="packageEntity.name" />
+ {{ packageEntity.name }}
</router-link>
- <gl-truncate v-else :class="errorPackageStyle" :text="packageEntity.name" />
+ <span v-else :class="errorPackageStyle">
+ {{ packageEntity.name }}
+ </span>
- <package-tags
- v-if="showTags"
- class="gl-ml-3"
- :tags="packageEntity.tags.nodes"
- hide-label
- :tag-display-limit="1"
- />
+ <div v-if="showTags || showBadgeProtected" class="gl-display-flex gl-gap-2">
+ <package-tags
+ v-if="showTags"
+ :tags="packageEntity.tags.nodes"
+ hide-label
+ :tag-display-limit="1"
+ />
- <gl-badge
- v-if="showBadgeProtected"
- v-gl-tooltip="{ title: $options.i18n.badgeProtectedTooltipText }"
- class="gl-ml-3"
- icon-size="sm"
- size="sm"
- variant="neutral"
- >{{ __('protected') }}</gl-badge
- >
+ <gl-badge
+ v-if="showBadgeProtected"
+ v-gl-tooltip="{ title: $options.i18n.badgeProtectedTooltipText }"
+ icon-size="sm"
+ size="sm"
+ variant="neutral"
+ >{{ __('protected') }}</gl-badge
+ >
+ </div>
</div>
</template>
<template #left-secondary>
diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
index 868e348adc023141ab0b5582159fd6ae465c2ded..1366c564255d3d7b27be5caa9d3d7679c8de9b0b 100644
--- a/app/assets/javascripts/vue_shared/components/registry/list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
@@ -79,7 +79,7 @@ export default {
v-if="
$slots['left-primary'] /* eslint-disable-line @gitlab/vue-prefer-dollar-scopedslots */
"
- class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
+ class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-semibold gl-min-h-6 gl-min-w-0"
>
<slot name="left-primary"></slot>
<gl-button
@@ -101,13 +101,13 @@ export default {
'left-secondary'
]
"
- class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
+ class="gl-display-flex gl-align-items-center gl-text-secondary gl-font-sm gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
>
<slot name="left-secondary"></slot>
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
+ class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-secondary gl-flex-shrink-0"
>
<div
v-if="
@@ -115,7 +115,7 @@ export default {
'right-primary'
]
"
- class="gl-display-flex gl-align-items-center gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
+ class="gl-display-flex gl-align-items-center gl-sm-text-body gl-sm-font-weight-semibold gl-min-h-6"
>
<slot name="right-primary"></slot>
</div>
@@ -125,7 +125,7 @@ export default {
'right-secondary'
]
"
- class="gl-display-flex gl-align-items-center gl-min-h-6"
+ class="gl-display-flex gl-align-items-center gl-font-sm gl-min-h-6"
>
<slot name="right-secondary"></slot>
</div>
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
index de979132133b69121d0c415cfb15ad8bab7cb61d..3fcd7371960c9eb55e737ac2f4af8a09c87fafad 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
@@ -15,7 +15,7 @@ exports[`packages_list_row renders 1`] = `
class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mb-3 gl-min-w-0 gl-sm-mb-0"
>
<div
- class="gl-align-items-center gl-display-flex gl-font-weight-bold gl-min-h-6 gl-min-w-0 gl-text-body"
+ class="gl-align-items-center gl-display-flex gl-font-weight-semibold gl-min-h-6 gl-min-w-0 gl-text-body"
>
<div
class="gl-align-items-center gl-display-flex gl-min-w-0 gl-mr-3"
@@ -33,7 +33,7 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-min-h-6 gl-min-w-0 gl-text-gray-500"
+ class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-font-sm gl-min-h-6 gl-min-w-0 gl-text-secondary"
>
<div
class="gl-display-flex"
@@ -49,17 +49,17 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-gray-500"
+ class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-secondary"
>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-font-weight-bold gl-sm-text-body"
+ class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-font-weight-semibold gl-sm-text-body"
>
<publish-method-stub
packageentity="[object Object]"
/>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6"
+ class="gl-align-items-center gl-display-flex gl-font-sm gl-min-h-6"
>
<span>
Created
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
index a019f64232c5dd94b98452b238f8f70ed7f068ca..9a2d92c1a15e07a0cd35645f16b8cbde7d393ae2 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
@@ -29,7 +29,7 @@ describe('VersionRow', () => {
const findPackageTags = () => wrapper.findComponent(PackageTags);
const findPublishMethod = () => wrapper.findComponent(PublishMethod);
const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
- const findPackageName = () => wrapper.findComponent(GlTruncate);
+ const findPackageName = () => wrapper.findByTestId('package-name');
const findWarningIcon = () => wrapper.findComponent(GlIcon);
const findBulkDeleteAction = () => wrapper.findComponent(GlFormCheckbox);
const findDeleteDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
@@ -162,7 +162,7 @@ describe('VersionRow', () => {
});
it('lists the package name', () => {
- expect(findPackageName().props('text')).toBe('@gitlab-org/package-15');
+ expect(findPackageName().text()).toBe('@gitlab-org/package-15');
});
it('does not have a link to navigate to the details page', () => {
@@ -194,7 +194,7 @@ describe('VersionRow', () => {
});
it('lists the package name', () => {
- expect(findPackageName().props('text')).toBe('@gitlab-org/package-15');
+ expect(findPackageName().text()).toBe('@gitlab-org/package-15');
});
it('does not have a link to navigate to the details page', () => {
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
index f8b9c1cb4f34bcc9658d041be07f1202908a4b69..42a800b6317ceccad734d7e79afe0e876177e2b0 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
@@ -23,24 +23,22 @@ exports[`packages_list_row renders 1`] = `
class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mb-3 gl-min-w-0 gl-sm-mb-0"
>
<div
- class="gl-align-items-center gl-display-flex gl-font-weight-bold gl-min-h-6 gl-min-w-0 gl-text-body"
+ class="gl-align-items-center gl-display-flex gl-font-weight-semibold gl-min-h-6 gl-min-w-0 gl-text-body"
>
<div
- class="gl-align-items-center gl-display-flex gl-min-w-0 gl-mr-3"
+ class="gl-align-items-center gl-display-flex gl-gap-3 gl-min-w-0 gl-mr-5"
+ data-testid="package-name"
>
<a
- class="gl-min-w-0 gl-text-body"
+ class="gl-min-w-0 gl-text-body gl-word-break-all"
data-testid="details-link"
>
- <gl-truncate-stub
- position="end"
- text="@gitlab-org/package-15"
- />
+ @gitlab-org/package-15
</a>
</div>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-min-h-6 gl-min-w-0 gl-text-gray-500"
+ class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-font-sm gl-min-h-6 gl-min-w-0 gl-text-secondary"
>
<div
class="gl-align-items-center gl-display-flex"
@@ -62,15 +60,15 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-gray-500"
+ class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-secondary"
>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-font-weight-bold gl-sm-text-body"
+ class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-font-weight-semibold gl-sm-text-body"
>
<publish-method-stub />
</div>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6"
+ class="gl-align-items-center gl-display-flex gl-font-sm gl-min-h-6"
>
<span
data-testid="right-secondary"
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
index 7c742326a6b815baff76123fab82c91a82d87017..5a551d2eb4193146fc6c0d71a226316d47e2873f 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
@@ -46,7 +46,7 @@ describe('packages_list_row', () => {
const findRightSecondary = () => wrapper.findByTestId('right-secondary');
const findListItem = () => wrapper.findComponent(ListItem);
const findBulkDeleteAction = () => wrapper.findComponent(GlFormCheckbox);
- const findPackageName = () => wrapper.findComponent(GlTruncate);
+ const findPackageName = () => wrapper.findByTestId('package-name');
const mountComponent = ({
packageEntity = packageWithoutTags,
@@ -88,9 +88,7 @@ describe('packages_list_row', () => {
it('lists the package name', () => {
mountComponent();
- expect(findPackageName().props()).toMatchObject({
- text: '@gitlab-org/package-15',
- });
+ expect(findPackageName().text()).toBe('@gitlab-org/package-15');
});
describe('tags', () => {
@@ -168,9 +166,7 @@ describe('packages_list_row', () => {
});
it('lists the package name', () => {
- expect(findPackageName().props()).toMatchObject({
- text: '@gitlab-org/package-15',
- });
+ expect(findPackageName().text()).toBe('@gitlab-org/package-15');
});
it('does not have a link to navigate to the details page', () => {