diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-09 16:03:08 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-03-09 16:10:35 +0300 |
commit | 429eb466ea910102cb402792ee12661dd9977215 (patch) | |
tree | f0f3c505a5155273b7e431df4bec2c77f4c0e4e4 | |
parent | 1df518ff2c3a22ff6088195f4ce5725b976d716e (diff) |
Prevent dropdown from closing when user clicks in a build.
-rw-r--r-- | app/assets/javascripts/mini_pipeline_graph_dropdown.js | 16 | ||||
-rw-r--r-- | spec/javascripts/mini_pipeline_graph_dropdown_spec.js | 15 |
2 files changed, 31 insertions, 0 deletions
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js index 2145e531331..483c201305a 100644 --- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js +++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js @@ -21,6 +21,8 @@ this.container = opts.container || ''; this.dropdownListSelector = '.js-builds-dropdown-container'; this.getBuildsList = this.getBuildsList.bind(this); + + this.stopDropdownClickPropagation(); } /** @@ -32,6 +34,20 @@ } /** + * When the user right clicks or cmd/ctrl + click in the job name + * the dropdown should not be closed and the link should open in another tab, + * so we stop propagation of the click event inside the dropdown. + * + * Since this component is rendered multiple times per page we need to guarantee we only + * target the click event of this component. + */ + stopDropdownClickPropagation() { + $(document).on('click', `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`, (e) => { + e.stopPropagation(); + }); + } + + /** * For the clicked stage, renders the given data in the dropdown list. * * @param {HTMLElement} stageContainer diff --git a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js index 7cdade01e00..f6b3dc87cd8 100644 --- a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js +++ b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js @@ -46,6 +46,21 @@ require('~/mini_pipeline_graph_dropdown'); document.querySelector('.js-builds-dropdown-button').click(); expect(ajaxSpy.calls.allArgs()[0][0].url).toEqual('foobar'); }); + + it('should not close when user uses cmd/ctrl + click', () => { + spyOn($, 'ajax').and.callFake(function (params) { + params.success({ + html: '\u003cli\u003e\n\u003ca class="mini-pipeline-graph-dropdown-item" href="#"\u003e\u003cspan class="ci-status-icon ci-status-icon-failed"\u003e\u003c/span\u003e\n\u003cspan class="ci-build-text"\u003ebuild\u003c/span\u003e\n\u003c/a\u003e\u003ca class="ci-action-icon-wrapper js-ci-action-icon" href="#"\u003e\u003c/a\u003e\n\u003c/li\u003e\n', + }); + }); + new gl.MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents(); + + document.querySelector('.js-builds-dropdown-button').click(); + + document.querySelector('a.mini-pipeline-graph-dropdown-item').click(); + + expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true); + }); }); }); })(); |