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"
|
:key="i"
|
||||||
>
|
>
|
||||||
<job-component
|
<job-component
|
||||||
|
:dropdown-length="job.size"
|
||||||
:job="item"
|
:job="item"
|
||||||
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
||||||
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
||||||
|
|
|
@ -46,6 +46,11 @@ export default {
|
||||||
required: false,
|
required: false,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
dropdownLength: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: Infinity,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
status() {
|
status() {
|
||||||
|
@ -70,6 +75,10 @@ export default {
|
||||||
return textBuilder.join(' ');
|
return textBuilder.join(' ');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
tooltipBoundary() {
|
||||||
|
return this.dropdownLength < 5 ? 'viewport' : null;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Verifies if the provided job has an action path
|
* Verifies if the provided job has an action path
|
||||||
*
|
*
|
||||||
|
@ -94,9 +103,9 @@ export default {
|
||||||
:href="status.details_path"
|
:href="status.details_path"
|
||||||
:title="tooltipText"
|
:title="tooltipText"
|
||||||
:class="cssClassJobName"
|
:class="cssClassJobName"
|
||||||
|
:data-boundary="tooltipBoundary"
|
||||||
data-container="body"
|
data-container="body"
|
||||||
data-html="true"
|
data-html="true"
|
||||||
data-boundary="viewport"
|
|
||||||
class="js-pipeline-graph-job-link"
|
class="js-pipeline-graph-job-link"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|
|
@ -186,32 +186,27 @@ export default {
|
||||||
</i>
|
</i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul
|
<div
|
||||||
class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
|
class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
|
||||||
aria-labelledby="stageDropdown"
|
aria-labelledby="stageDropdown"
|
||||||
>
|
>
|
||||||
|
<loading-icon v-if="isLoading"/>
|
||||||
<li
|
<ul
|
||||||
|
v-else
|
||||||
class="js-builds-dropdown-list scrollable-menu"
|
class="js-builds-dropdown-list scrollable-menu"
|
||||||
>
|
>
|
||||||
|
<li
|
||||||
<loading-icon v-if="isLoading"/>
|
v-for="job in dropdownContent"
|
||||||
|
:key="job.id"
|
||||||
<ul
|
|
||||||
v-else
|
|
||||||
>
|
>
|
||||||
<li
|
<job-component
|
||||||
v-for="job in dropdownContent"
|
:dropdown-length="dropdownContent.length"
|
||||||
:key="job.id"
|
:job="job"
|
||||||
>
|
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
||||||
<job-component
|
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
||||||
:job="job"
|
/>
|
||||||
css-class-job-name="mini-pipeline-graph-dropdown-item"
|
</li>
|
||||||
@pipelineActionRequestComplete="pipelineActionRequestComplete"
|
</ul>
|
||||||
/>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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');
|
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