Add tooltips for pipeline icons

Add tooltip meaning for icon seen on pipeline table view for icons. Changelog: changed

Add tooltips for pipeline icons
Add tooltip meaning for icon seen on pipeline table view for icons. Changelog: changed
bf22bf79 · PaytonBurdette · 032df049 · bf22bf79 · bf22bf79 · bf22bf79
Commit bf22bf79 authored Feb 02, 2022 by PaytonBurdette
4 changed files
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/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

--- a/app/assets/javascripts/pipelines/constants.js
+++ b/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',

--- a/spec/frontend/pipelines/mock_data.js
+++ b/spec/frontend/pipelines/mock_data.js
@@ -711,3 +711,433 @@ export const mockPipeline = (projectPath) => {
    viewType: 'root',
  };
 };
+
+export const mockPipelineTag = () => {
+  return {
+    pipeline: {
+      id: 311,
+      iid: 37,
+      user: {
+        id: 1,
+        username: 'root',
+        name: 'Administrator',
+        state: 'active',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        web_url: 'http://gdk.test:3000/root',
+        show_status: false,
+        path: '/root',
+      },
+      active: false,
+      source: 'push',
+      created_at: '2022-02-02T15:39:04.012Z',
+      updated_at: '2022-02-02T15:40:59.573Z',
+      path: '/root/mr-widgets/-/pipelines/311',
+      flags: {
+        stuck: false,
+        auto_devops: false,
+        merge_request: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: false,
+        failure_reason: false,
+        detached_merge_request_pipeline: false,
+        merge_request_pipeline: false,
+        merge_train_pipeline: false,
+        latest: true,
+      },
+      details: {
+        status: {
+          icon: 'status_warning',
+          text: 'passed',
+          label: 'passed with warnings',
+          group: 'success-with-warnings',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/root/mr-widgets/-/pipelines/311',
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        stages: [
+          {
+            name: 'accessibility',
+            title: 'accessibility: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#accessibility',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#accessibility',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=accessibility',
+          },
+          {
+            name: 'validate',
+            title: 'validate: passed with warnings',
+            status: {
+              icon: 'status_warning',
+              text: 'passed',
+              label: 'passed with warnings',
+              group: 'success-with-warnings',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#validate',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#validate',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=validate',
+          },
+          {
+            name: 'test',
+            title: 'test: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#test',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#test',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=test',
+          },
+          {
+            name: 'build',
+            title: 'build: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#build',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#build',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=build',
+          },
+        ],
+        duration: 93,
+        finished_at: '2022-02-02T15:40:59.384Z',
+        name: 'Pipeline',
+        manual_actions: [],
+        scheduled_actions: [],
+      },
+      ref: {
+        name: 'test',
+        path: '/root/mr-widgets/-/commits/test',
+        tag: true,
+        branch: false,
+        merge_request: false,
+      },
+      commit: {
+        id: '9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        short_id: '9b92b4f7',
+        created_at: '2022-01-13T13:59:03.000+00:00',
+        parent_ids: ['0ba763634114e207dc72c65c8e9459556b1204fb'],
+        title: 'Update hello_world.js',
+        message: 'Update hello_world.js',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        authored_date: '2022-01-13T13:59:03.000+00:00',
+        committer_name: 'Administrator',
+        committer_email: 'admin@example.com',
+        committed_date: '2022-01-13T13:59:03.000+00:00',
+        trailers: {},
+        web_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        author: {
+          id: 1,
+          username: 'root',
+          name: 'Administrator',
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+          web_url: 'http://gdk.test:3000/root',
+          show_status: false,
+          path: '/root',
+        },
+        author_gravatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        commit_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        commit_path: '/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+      },
+      retry_path: '/root/mr-widgets/-/pipelines/311/retry',
+      delete_path: '/root/mr-widgets/-/pipelines/311',
+      failed_builds: [
+        {
+          id: 1696,
+          name: 'fmt',
+          started: '2022-02-02T15:39:45.192Z',
+          complete: true,
+          archived: false,
+          build_path: '/root/mr-widgets/-/jobs/1696',
+          retry_path: '/root/mr-widgets/-/jobs/1696/retry',
+          playable: false,
+          scheduled: false,
+          created_at: '2022-02-02T15:39:04.136Z',
+          updated_at: '2022-02-02T15:39:57.969Z',
+          status: {
+            icon: 'status_warning',
+            text: 'failed',
+            label: 'failed (allowed to fail)',
+            group: 'failed-with-warnings',
+            tooltip: 'failed - (script failure) (allowed to fail)',
+            has_details: true,
+            details_path: '/root/mr-widgets/-/jobs/1696',
+            illustration: {
+              image:
+                '/assets/illustrations/skipped-job_empty-29a8a37d8a61d1b6f68cf3484f9024e53cd6eb95e28eae3554f8011a1146bf27.svg',
+              size: 'svg-430',
+              title: 'This job does not have a trace.',
+            },
+            favicon:
+              '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png',
+            action: {
+              icon: 'retry',
+              title: 'Retry',
+              path: '/root/mr-widgets/-/jobs/1696/retry',
+              method: 'post',
+              button_title: 'Retry this job',
+            },
+          },
+          recoverable: false,
+        },
+      ],
+      project: {
+        id: 23,
+        name: 'mr-widgets',
+        full_path: '/root/mr-widgets',
+        full_name: 'Administrator / mr-widgets',
+      },
+      triggered_by: null,
+      triggered: [],
+    },
+    pipelineScheduleUrl: 'foo',
+    pipelineKey: 'id',
+    viewType: 'root',
+  };
+};
+
+export const mockPipelineBranch = () => {
+  return {
+    pipeline: {
+      id: 268,
+      iid: 34,
+      user: {
+        id: 1,
+        username: 'root',
+        name: 'Administrator',
+        state: 'active',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        web_url: 'http://gdk.test:3000/root',
+        show_status: false,
+        path: '/root',
+      },
+      active: false,
+      source: 'push',
+      created_at: '2022-01-14T17:40:27.866Z',
+      updated_at: '2022-01-14T18:02:35.850Z',
+      path: '/root/mr-widgets/-/pipelines/268',
+      flags: {
+        stuck: false,
+        auto_devops: false,
+        merge_request: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: false,
+        failure_reason: false,
+        detached_merge_request_pipeline: false,
+        merge_request_pipeline: false,
+        merge_train_pipeline: false,
+        latest: true,
+      },
+      details: {
+        status: {
+          icon: 'status_warning',
+          text: 'passed',
+          label: 'passed with warnings',
+          group: 'success-with-warnings',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/root/mr-widgets/-/pipelines/268',
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        stages: [
+          {
+            name: 'validate',
+            title: 'validate: passed with warnings',
+            status: {
+              icon: 'status_warning',
+              text: 'passed',
+              label: 'passed with warnings',
+              group: 'success-with-warnings',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#validate',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#validate',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=validate',
+          },
+          {
+            name: 'test',
+            title: 'test: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#test',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#test',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=test',
+          },
+          {
+            name: 'build',
+            title: 'build: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#build',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#build',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=build',
+          },
+        ],
+        duration: 75,
+        finished_at: '2022-01-14T18:02:35.842Z',
+        name: 'Pipeline',
+        manual_actions: [],
+        scheduled_actions: [],
+      },
+      ref: {
+        name: 'update-ci',
+        path: '/root/mr-widgets/-/commits/update-ci',
+        tag: false,
+        branch: true,
+        merge_request: false,
+      },
+      commit: {
+        id: '96aef9ecec5752c09371c1ade5fc77860aafc863',
+        short_id: '96aef9ec',
+        created_at: '2022-01-14T17:40:26.000+00:00',
+        parent_ids: ['06860257572d4cf84b73806250b78169050aed83'],
+        title: 'Update main.tf',
+        message: 'Update main.tf',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        authored_date: '2022-01-14T17:40:26.000+00:00',
+        committer_name: 'Administrator',
+        committer_email: 'admin@example.com',
+        committed_date: '2022-01-14T17:40:26.000+00:00',
+        trailers: {},
+        web_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+        author: {
+          id: 1,
+          username: 'root',
+          name: 'Administrator',
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+          web_url: 'http://gdk.test:3000/root',
+          show_status: false,
+          path: '/root',
+        },
+        author_gravatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        commit_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+        commit_path: '/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+      },
+      retry_path: '/root/mr-widgets/-/pipelines/268/retry',
+      delete_path: '/root/mr-widgets/-/pipelines/268',
+      failed_builds: [
+        {
+          id: 1260,
+          name: 'fmt',
+          started: '2022-01-14T17:40:36.435Z',
+          complete: true,
+          archived: false,
+          build_path: '/root/mr-widgets/-/jobs/1260',
+          retry_path: '/root/mr-widgets/-/jobs/1260/retry',
+          playable: false,
+          scheduled: false,
+          created_at: '2022-01-14T17:40:27.879Z',
+          updated_at: '2022-01-14T17:40:42.129Z',
+          status: {
+            icon: 'status_warning',
+            text: 'failed',
+            label: 'failed (allowed to fail)',
+            group: 'failed-with-warnings',
+            tooltip: 'failed - (script failure) (allowed to fail)',
+            has_details: true,
+            details_path: '/root/mr-widgets/-/jobs/1260',
+            illustration: {
+              image:
+                '/assets/illustrations/skipped-job_empty-29a8a37d8a61d1b6f68cf3484f9024e53cd6eb95e28eae3554f8011a1146bf27.svg',
+              size: 'svg-430',
+              title: 'This job does not have a trace.',
+            },
+            favicon:
+              '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png',
+            action: {
+              icon: 'retry',
+              title: 'Retry',
+              path: '/root/mr-widgets/-/jobs/1260/retry',
+              method: 'post',
+              button_title: 'Retry this job',
+            },
+          },
+          recoverable: false,
+        },
+      ],
+      project: {
+        id: 23,
+        name: 'mr-widgets',
+        full_path: '/root/mr-widgets',
+        full_name: 'Administrator / mr-widgets',
+      },
+      triggered_by: null,
+      triggered: [],
+    },
+    pipelineScheduleUrl: 'foo',
+    pipelineKey: 'id',
+    viewType: 'root',
+  };
+};
--- a/spec/frontend/pipelines/pipeline_url_spec.js
+++ b/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);
+      },
+    );
  });
 });