Add elipsis to overflowing tag name

- add tooltip
- add tests

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -104,9 +104,15 @@ export default {
     },
     fields() {
       const tagClass = this.isDesktop ? 'w-25' : '';
+      const tagInnerClass = this.isDesktop ? 'mw-m' : 'gl-justify-content-end';
       return [
         { key: LIST_KEY_CHECKBOX, label: '', class: 'gl-w-16' },
-        { key: LIST_KEY_TAG, label: LIST_LABEL_TAG, class: `${tagClass} js-tag-column` },
+        {
+          key: LIST_KEY_TAG,
+          label: LIST_LABEL_TAG,
+          class: `${tagClass} js-tag-column`,
+          innerClass: tagInnerClass,
+        },
         { key: LIST_KEY_IMAGE_ID, label: LIST_LABEL_IMAGE_ID },
         { key: LIST_KEY_SIZE, label: LIST_LABEL_SIZE },
         { key: LIST_KEY_LAST_UPDATED, label: LIST_LABEL_LAST_UPDATED },
@@ -329,8 +335,14 @@ export default {
           @change="updateSelectedItems(index)"
         />
       </template>
-      <template #cell(name)="{item}">
-        <span ref="rowName">
+      <template #cell(name)="{item, field}">
+        <div ref="rowName" :class="[field.innerClass, 'gl-display-flex']">
+          <span
+            v-gl-tooltip
+            data-testid="rowNameText"
+            :title="item.name"
+            class="gl-text-overflow-ellipsis gl-overflow-hidden gl-white-space-nowrap"
+          >
             {{ item.name }}
           </span>
           <clipboard-button
@@ -340,6 +352,7 @@ export default {
             :text="item.location"
             css-class="btn-default btn-transparent btn-clipboard"
           />
+        </div>
       </template>
       <template #cell(short_revision)="{value}">
         <span ref="rowShortRevision">

changelogs/unreleased/212816-container-registry-missing-elipsis-on-tag-name.yml

+---
+title: Add elipsis to container registry tag name
+merge_request: 31584
+author:
+type: fixed

spec/frontend/registry/explorer/pages/details_spec.js

@@ -37,6 +37,7 @@ describe('Details Page', () => {
   const findAllCheckboxes = () => wrapper.findAll('.js-row-checkbox');
   const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked'));
   const findFirsTagColumn = () => wrapper.find('.js-tag-column');
+  const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]');
   const findAlert = () => wrapper.find(GlAlert);
 
   const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' }));
@@ -248,15 +249,24 @@ describe('Details Page', () => {
       });
     });
 
-    describe('tag cell', () => {
+    describe('name cell', () => {
+      it('tag column has a tooltip with the tag name', () => {
+        mountComponent();
+        expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name);
+      });
+
       describe('on desktop viewport', () => {
         beforeEach(() => {
           mountComponent();
         });
 
-        it('has class w-25', () => {
+        it('table header has class w-25', () => {
           expect(findFirsTagColumn().classes()).toContain('w-25');
         });
+
+        it('tag column has the mw-m class', () => {
+          expect(findFirstRowItem('rowName').classes()).toContain('mw-m');
+        });
       });
 
       describe('on mobile viewport', () => {
@@ -268,9 +278,13 @@ describe('Details Page', () => {
           });
         });
 
-        it('does not has class w-25', () => {
+        it('table header does not have class w-25', () => {
           expect(findFirsTagColumn().classes()).not.toContain('w-25');
         });
+
+        it('tag column has the gl-justify-content-end class', () => {
+          expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end');
+        });
       });
     });