Uses vanilla JS to listen to click event

Removes `:visible` from selector
Adds CHANGELOG entry
Removes iife

app/assets/javascripts/dispatcher.js

@@ -39,6 +39,7 @@ import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
+import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 const UserCallout = require('./user_callout');
@@ -181,7 +182,7 @@ const UserCallout = require('./user_callout');
           shortcut_handler = new ShortcutsNavigation();
           break;
         case 'projects:commit:pipelines':
-          new gl.MiniPipelineGraph({
+          new MiniPipelineGraph({
             container: '.js-pipeline-table',
           }).bindEvents();
           break;

app/assets/javascripts/merge_request_widget.js

@@ -4,6 +4,7 @@
 /* global merge_request_widget */
 
 require('./smart_interval');
+const MiniPipelineGraph = require('./mini_pipeline_graph_dropdown').default;
 
 ((global) => {
   var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
@@ -285,8 +286,8 @@ require('./smart_interval');
     };
 
     MergeRequestWidget.prototype.initMiniPipelineGraph = function() {
-      new gl.MiniPipelineGraph({
-        container: '.js-pipeline-inline-mr-widget-graph:visible',
+      new MiniPipelineGraph({
+        container: '.js-pipeline-inline-mr-widget-graph',
       }).bindEvents();
     };
 

app/assets/javascripts/mini_pipeline_graph_dropdown.js

@@ -15,14 +15,12 @@
  *   <div class="js-builds-dropdown-container dropdown-menu"></div>
  * </div>
  */
-(() => {
-  class MiniPipelineGraph {
+
+export default class MiniPipelineGraph {
   constructor(opts = {}) {
     this.container = opts.container || '';
     this.dropdownListSelector = '.js-builds-dropdown-container';
     this.getBuildsList = this.getBuildsList.bind(this);
-
-      this.stopDropdownClickPropagation();
   }
 
   /**
@@ -42,7 +40,7 @@
    * target the click event of this component.
    */
   stopDropdownClickPropagation() {
-      $(document).on('click', `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`, (e) => {
+    document.querySelector(`${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`).addEventListener('click', (e) => {
       e.stopPropagation();
     });
   }
@@ -85,6 +83,7 @@
       success: (data) => {
         this.toggleLoading(button);
         this.renderBuildsList(button, data.html);
+        this.stopDropdownClickPropagation();
       },
       error: () => {
         this.toggleLoading(button);
@@ -104,8 +103,4 @@
       `${this.dropdownListSelector} .js-builds-dropdown-loading`,
     ).classList.toggle('hidden');
   }
-  }
-
-  window.gl = window.gl || {};
-  window.gl.MiniPipelineGraph = MiniPipelineGraph;
-})();
+}

changelogs/unreleased/24166-close-builds-dropdown.yml

@@ -0,0 +1,4 @@
+---
+title: Prevent builds dropdown to close when the user clicks in a build
+merge_request:
+author:

spec/javascripts/mini_pipeline_graph_dropdown_spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
 
-require('~/flash');
-require('~/mini_pipeline_graph_dropdown');
+import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+import '~/flash';
 
 (() => {
   describe('Mini Pipeline Graph Dropdown', () => {
@@ -13,7 +13,7 @@ require('~/mini_pipeline_graph_dropdown');
 
     describe('When is initialized', () => {
       it('should initialize without errors when no options are given', () => {
-        const miniPipelineGraph = new window.gl.MiniPipelineGraph();
+        const miniPipelineGraph = new MiniPipelineGraph();
 
         expect(miniPipelineGraph.dropdownListSelector).toEqual('.js-builds-dropdown-container');
       });
@@ -21,7 +21,7 @@ require('~/mini_pipeline_graph_dropdown');
       it('should set the container as the given prop', () => {
         const container = '.foo';
 
-        const miniPipelineGraph = new window.gl.MiniPipelineGraph({ container });
+        const miniPipelineGraph = new MiniPipelineGraph({ container });
 
         expect(miniPipelineGraph.container).toEqual(container);
       });
@@ -29,9 +29,9 @@ require('~/mini_pipeline_graph_dropdown');
 
     describe('When dropdown is clicked', () => {
       it('should call getBuildsList', () => {
-        const getBuildsListSpy = spyOn(gl.MiniPipelineGraph.prototype, 'getBuildsList').and.callFake(function () {});
+        const getBuildsListSpy = spyOn(MiniPipelineGraph.prototype, 'getBuildsList').and.callFake(function () {});
 
-        new gl.MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
+        new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
         document.querySelector('.js-builds-dropdown-button').click();
 
@@ -41,7 +41,7 @@ require('~/mini_pipeline_graph_dropdown');
       it('should make a request to the endpoint provided in the html', () => {
         const ajaxSpy = spyOn($, 'ajax').and.callFake(function () {});
 
-        new gl.MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
+        new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
         document.querySelector('.js-builds-dropdown-button').click();
         expect(ajaxSpy.calls.allArgs()[0][0].url).toEqual('foobar');
@@ -53,7 +53,7 @@ require('~/mini_pipeline_graph_dropdown');
             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();
+        new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
         document.querySelector('.js-builds-dropdown-button').click();