Commit 04e8de42 authored by Natalia Tepluhina's avatar Natalia Tepluhina

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

Add tooltips for icons in pipelines table

See merge request gitlab-org/gitlab!79763
parents 75a244bc bf22bf79
......@@ -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
......
......@@ -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',
......
This diff is collapsed.
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);
},
);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment