Commit fb770344 authored by Mike Greiling's avatar Mike Greiling

Merge branch '47516-pipe-scroll' into 'master'

Resolve "Tooltips scroll along the list within Pipeline jobs dropdown on MR widget"

Closes #47516

See merge request gitlab-org/gitlab-ce!20171
parents 906e07fb e64d4fd3
......@@ -109,6 +109,7 @@ export default {
:key="i"
>
<job-component
:dropdown-length="job.size"
:job="item"
css-class-job-name="mini-pipeline-graph-dropdown-item"
@pipelineActionRequestComplete="pipelineActionRequestComplete"
......
......@@ -46,6 +46,11 @@ export default {
required: false,
default: '',
},
dropdownLength: {
type: Number,
required: false,
default: Infinity,
},
},
computed: {
status() {
......@@ -70,6 +75,10 @@ export default {
return textBuilder.join(' ');
},
tooltipBoundary() {
return this.dropdownLength < 5 ? 'viewport' : null;
},
/**
* Verifies if the provided job has an action path
*
......@@ -94,9 +103,9 @@ export default {
:href="status.details_path"
:title="tooltipText"
:class="cssClassJobName"
:data-boundary="tooltipBoundary"
data-container="body"
data-html="true"
data-boundary="viewport"
class="js-pipeline-graph-job-link"
>
......
......@@ -186,32 +186,27 @@ export default {
</i>
</button>
<ul
<div
class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
aria-labelledby="stageDropdown"
>
<li
class="js-builds-dropdown-list scrollable-menu"
>
<loading-icon v-if="isLoading"/>
<ul
v-else
class="js-builds-dropdown-list scrollable-menu"
>
<li
v-for="job in dropdownContent"
:key="job.id"
>
<job-component
:dropdown-length="dropdownContent.length"
:job="job"
css-class-job-name="mini-pipeline-graph-dropdown-item"
@pipelineActionRequestComplete="pipelineActionRequestComplete"
/>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
---
title: Prevent pipeline job tooltip from scrolling off dropdown container
merge_request:
author:
type: fixed
......@@ -135,4 +135,34 @@ describe('pipeline graph job component', () => {
expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test - success');
});
});
describe('tooltip placement', () => {
const tooltipBoundary = 'a[data-boundary="viewport"]';
it('does not set tooltip boundary by default', () => {
component = mountComponent(JobComponent, {
job: mockJob,
});
expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
});
it('sets tooltip boundary to viewport for small dropdowns', () => {
component = mountComponent(JobComponent, {
job: mockJob,
dropdownLength: 1,
});
expect(component.$el.querySelector(tooltipBoundary)).not.toBeNull();
});
it('does not set tooltip boundary for large lists', () => {
component = mountComponent(JobComponent, {
job: mockJob,
dropdownLength: 7,
});
expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
});
});
});
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