Resolve "Tooltips scroll along the list within Pipeline jobs dropdown on MR widget"
This commit is contained in:
parent
906e07fbfa
commit
e64d4fd36f
|
@ -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
|
||||
<loading-icon v-if="isLoading"/>
|
||||
<ul
|
||||
v-else
|
||||
class="js-builds-dropdown-list scrollable-menu"
|
||||
>
|
||||
|
||||
<loading-icon v-if="isLoading"/>
|
||||
|
||||
<ul
|
||||
v-else
|
||||
<li
|
||||
v-for="job in dropdownContent"
|
||||
:key="job.id"
|
||||
>
|
||||
<li
|
||||
v-for="job in dropdownContent"
|
||||
:key="job.id"
|
||||
>
|
||||
<job-component
|
||||
:job="job"
|
||||
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
||||
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<job-component
|
||||
:dropdown-length="dropdownContent.length"
|
||||
:job="job"
|
||||
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
||||
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue