Merge branch 'package-registry-list-fixes' into 'master'

Package registry list: Change metadata appearance

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149834



Merged-by: Mireya Andres <mandres@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Rahul Chanila <rchanila@gitlab.com>
Approved-by: Mireya Andres <mandres@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: Rahul Chanila <rchanila@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

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>

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>

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>

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

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', () => {

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"

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', () => {