Merge branch '239006-add-tooltip-for-icons' into 'master'

Add tooltips for icons in pipelines table

See merge request gitlab-org/gitlab!79763

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue

@@ -4,7 +4,7 @@ import { __, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import { SCHEDULE_ORIGIN } from '../../constants';
+import { SCHEDULE_ORIGIN, ICONS } from '../../constants';
 
 export default {
   components: {
@@ -117,15 +117,25 @@ export default {
       let name = '';
 
       if (this.commitTag) {
-        name = 'tag';
+        name = ICONS.TAG;
       } else if (this.mergeRequestRef) {
-        name = 'git-merge';
+        name = ICONS.MR;
       } else {
-        name = 'branch';
+        name = ICONS.BRANCH;
       }
 
       return name;
     },
+    commitIconTooltipTitle() {
+      switch (this.commitIcon) {
+        case ICONS.TAG:
+          return __('Tag');
+        case ICONS.MR:
+          return __('Merge Request');
+        default:
+          return __('Branch');
+      }
+    },
     commitTitle() {
       return this.pipeline?.commit?.title;
     },
@@ -172,7 +182,12 @@ export default {
         </gl-link>
         <!--Commit row-->
         <div class="icon-container gl-display-inline-block">
-          <gl-icon :name="commitIcon" />
+          <gl-icon
+            v-gl-tooltip
+            :name="commitIcon"
+            :title="commitIconTooltipTitle"
+            data-testid="commit-icon-type"
+          />
         </div>
         <tooltip-on-truncate :title="tooltipTitle" truncate-target="child" placement="top">
           <gl-link
@@ -186,7 +201,13 @@ export default {
             commitRef.name
           }}</gl-link>
         </tooltip-on-truncate>
-        <gl-icon name="commit" class="commit-icon" />
+        <gl-icon
+          v-gl-tooltip
+          name="commit"
+          class="commit-icon"
+          :title="__('Commit')"
+          data-testid="commit-icon"
+        />
 
         <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{
           commitShortSha

app/assets/javascripts/pipelines/constants.js

@@ -10,6 +10,12 @@ export const SCHEDULE_ORIGIN = 'schedule';
 export const NEEDS_PROPERTY = 'needs';
 export const EXPLICIT_NEEDS_PROPERTY = 'previousStageJobsOrNeeds';
 
+export const ICONS = {
+  TAG: 'tag',
+  MR: 'git-merge',
+  BRANCH: 'branch',
+};
+
 export const TestStatus = {
   FAILED: 'failed',
   SKIPPED: 'skipped',

spec/frontend/pipelines/pipeline_url_spec.js

 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
 import PipelineUrlComponent from '~/pipelines/components/pipelines_list/pipeline_url.vue';
-import { mockPipeline } from './mock_data';
+import { mockPipeline, mockPipelineBranch, mockPipelineTag } from './mock_data';
 
 const projectPath = 'test/test';
 
@@ -22,6 +22,8 @@ describe('Pipeline Url Component', () => {
   const findTrainTag = () => wrapper.findByTestId('pipeline-url-train');
   const findRefName = () => wrapper.findByTestId('merge-request-ref');
   const findCommitShortSha = () => wrapper.findByTestId('commit-short-sha');
+  const findCommitIcon = () => wrapper.findByTestId('commit-icon');
+  const findCommitIconType = () => wrapper.findByTestId('commit-icon-type');
 
   const findCommitTitleContainer = () => wrapper.findByTestId('commit-title-container');
   const findCommitTitle = (commitWrapper) => commitWrapper.find('[data-testid="commit-title"]');
@@ -203,11 +205,32 @@ describe('Pipeline Url Component', () => {
   describe('with the rearrangePipelinesTable feature flag turned on', () => {
     it('should render the commit title, commit reference and commit-short-sha', () => {
       createComponent({}, true);
+
       const commitWrapper = findCommitTitleContainer();
 
       expect(findCommitTitle(commitWrapper).exists()).toBe(true);
       expect(findRefName().exists()).toBe(true);
       expect(findCommitShortSha().exists()).toBe(true);
     });
+
+    it('should render commit icon tooltip', () => {
+      createComponent({}, true);
+
+      expect(findCommitIcon().attributes('title')).toBe('Commit');
+    });
+
+    it.each`
+      pipeline                | expectedTitle
+      ${mockPipelineTag()}    | ${'Tag'}
+      ${mockPipelineBranch()} | ${'Branch'}
+      ${mockPipeline()}       | ${'Merge Request'}
+    `(
+      'should render tooltip $expectedTitle for commit icon type',
+      ({ pipeline, expectedTitle }) => {
+        createComponent(pipeline, true);
+
+        expect(findCommitIconType().attributes('title')).toBe(expectedTitle);
+      },
+    );
   });
 });