diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-06-29 20:27:15 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-07-04 11:31:30 +0100 |
commit | a9e0ecca0f140c5c06cee00c57ccde659fde2e70 (patch) | |
tree | 1fd787e817d59645e04de64b8851e99e466ac1c4 | |
parent | 5dd1c759796fe2c7d061cce36f3d3213c65cd12e (diff) | |
download | gitlab-ce-a9e0ecca0f140c5c06cee00c57ccde659fde2e70.tar.gz |
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
5 files changed, 62 insertions, 22 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index 1bc1f22ae92..f8c317a1c5c 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -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" diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index dc16d395bcb..9c56fd5f8c5 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -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" > diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index dd9517eb913..abd0a6b03e0 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -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> diff --git a/changelogs/unreleased/47516-pipe-scroll.yml b/changelogs/unreleased/47516-pipe-scroll.yml new file mode 100644 index 00000000000..3e283f649bd --- /dev/null +++ b/changelogs/unreleased/47516-pipe-scroll.yml @@ -0,0 +1,5 @@ +--- +title: Prevent pipeline job tooltip from scrolling off dropdown container +merge_request: +author: +type: fixed diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js index 073dae56c25..9c55a19ebc7 100644 --- a/spec/javascripts/pipelines/graph/job_component_spec.js +++ b/spec/javascripts/pipelines/graph/job_component_spec.js @@ -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(); + }); + }); }); |