Merge branch 'ek-display-full-design-name-in-tooltip' into 'master'

Add tooltip to design filenames

See merge request gitlab-org/gitlab!51421

app/assets/javascripts/design_management/components/list/item.vue

 <script>
-import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { n__, __ } from '~/locale';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
@@ -11,6 +11,9 @@ export default {
     GlIcon,
     Timeago,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     id: {
       type: [Number, String],
@@ -130,7 +133,7 @@ export default {
     <div
       class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
     >
-      <div v-if="icon.name" data-testid="designEvent" class="design-event gl-absolute">
+      <div v-if="icon.name" data-testid="design-event" class="design-event gl-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
           <gl-icon
             :name="icon.name"
@@ -153,9 +156,10 @@ export default {
           v-show="showImage"
           :src="imageLink"
           :alt="filename"
-          class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+          class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
           data-qa-selector="design_image"
           :data-qa-filename="filename"
+          :data-testid="`design-img-${id}`"
           @load="onImageLoad"
           @error="onImageError"
         />
@@ -163,9 +167,14 @@ export default {
     </div>
     <div class="card-footer gl-display-flex gl-w-full">
       <div class="gl-display-flex gl-flex-direction-column str-truncated-100">
-        <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name">{{
-          filename
-        }}</span>
+        <span
+          v-gl-tooltip
+          class="gl-font-weight-bold str-truncated-100"
+          data-qa-selector="design_file_name"
+          :data-testid="`design-img-filename-${id}`"
+          :title="filename"
+          >{{ filename }}</span
+        >
         <span v-if="updatedAt" class="str-truncated-100">
           {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" />
         </span>

changelogs/unreleased/ek-display-full-design-name-in-tooltip.yml

+---
+title: Display full design name in tooltip
+merge_request: 51421
+author:
+type: changed

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -26,9 +26,10 @@ exports[`Design management list item component with notes renders item with mult
        
       <img
         alt="test"
-        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
         data-qa-filename="test"
         data-qa-selector="design_image"
+        data-testid="design-img-1"
         src=""
       />
     </gl-intersection-observer-stub>
@@ -43,6 +44,8 @@ exports[`Design management list item component with notes renders item with mult
       <span
         class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
+        data-testid="design-img-filename-1"
+        title="test"
       >
         test
       </span>
@@ -100,9 +103,10 @@ exports[`Design management list item component with notes renders item with sing
        
       <img
         alt="test"
-        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
         data-qa-filename="test"
         data-qa-selector="design_image"
+        data-testid="design-img-1"
         src=""
       />
     </gl-intersection-observer-stub>
@@ -117,6 +121,8 @@ exports[`Design management list item component with notes renders item with sing
       <span
         class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
+        data-testid="design-img-filename-1"
+        title="test"
       >
         test
       </span>

spec/frontend/design_management/components/list/item_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import VueRouter from 'vue-router';
 import Item from '~/design_management/components/list/item.vue';
 
@@ -17,8 +18,11 @@ const DESIGN_VERSION_EVENT = {
 
 describe('Design management list item component', () => {
   let wrapper;
+  const imgId = 1;
+  const imgFilename = 'test';
 
-  const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
+  const findDesignEvent = () => wrapper.findByTestId('design-event');
+  const findImgFilename = (id = imgId) => wrapper.findByTestId(`design-img-filename-${id}`);
   const findEventIcon = () => findDesignEvent().find(GlIcon);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
@@ -28,12 +32,13 @@ describe('Design management list item component', () => {
     isUploading = false,
     imageLoading = false,
   } = {}) {
-    wrapper = shallowMount(Item, {
+    wrapper = extendedWrapper(
+      shallowMount(Item, {
         localVue,
         router,
         propsData: {
-        id: 1,
-        filename: 'test',
+          id: imgId,
+          filename: imgFilename,
           image: 'http://via.placeholder.com/300',
           isUploading,
           event,
@@ -46,7 +51,8 @@ describe('Design management list item component', () => {
           };
         },
         stubs: ['router-link'],
-    });
+      }),
+    );
   }
 
   afterEach(() => {
@@ -75,6 +81,10 @@ describe('Design management list item component', () => {
       return wrapper.vm.$nextTick();
     });
 
+    it('renders a tooltip', () => {
+      expect(findImgFilename().attributes('title')).toEqual(imgFilename);
+    });
+
     describe('before image is loaded', () => {
       it('renders loading spinner', () => {
         expect(wrapper.find(GlLoadingIcon)).toExist();