Skip to content

G
gitlab-ce
Commit 04e8de42 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 487 additions and 7 deletions
app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
View file @ 04e8de42
......@@ -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
View file @ 04e8de42
......@@ -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/mock_data.js
View file @ 04e8de42
......@@ -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',
};
};
spec/frontend/pipelines/pipeline_url_spec.js
View file @ 04e8de42
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7