dismiss sidebar on repo buttons click

make the selector more inclusive

spec for dashboard’s sidebar visibility

fix linting errors for project dashboard page

remove unused var: shouldBeCollapsed

use project with repo, so download button became available

use es6 style for testing project dashboard

un-aliased global reference at sidebar.js.es6

fix spec from linting errors

code improvement

add singleton to `this`

assign `singleton` to class

add space in between

remove `no-underscore-dangle`

add complete changelog

sidebar internal state test

remove on page change, not exist in master. rebase.

only nicescroll if the element is there

new require style

reference to sidebar content outside of timeout

4 files changed, 130 insertions, 11 deletions

diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index ee172f2fa6f..cbb2ae9f1bd 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -1,9 +1,7 @@
 /* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */
 /* global Cookies */
 
-((global) => {
-  let singleton;
-
+(() => {
   const pinnedStateCookie = 'pin_nav';
   const sidebarBreakpoint = 1024;
 
@@ -23,11 +21,12 @@
 
   class Sidebar {
     constructor() {
-      if (!singleton) {
-        singleton = this;
-        singleton.init();
+      if (!Sidebar.singleton) {
+        Sidebar.singleton = this;
+        Sidebar.singleton.init();
       }
-      return singleton;
+
+      return Sidebar.singleton;
     }
 
     init() {
@@ -39,7 +38,7 @@
       $(document)
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
-        .on('click', 'html, body', (e) => this.handleClickEvent(e))
+        .on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
         .on('DOMContentLoaded', () => this.renderState())
         .on('todo:toggle', (e, count) => this.updateTodoCount(count));
       this.renderState();
@@ -88,10 +87,12 @@
       $pinnedToggle.attr('title', tooltipText).tooltip('fixTitle').tooltip(tooltipState);
 
       if (this.isExpanded) {
-        setTimeout(() => $(sidebarContentSelector).niceScroll().updateScrollBar(), 200);
+        const sidebarContent = $(sidebarContentSelector);
+        setTimeout(() => { sidebarContent.niceScroll().updateScrollBar(); }, 200);
       }
     }
   }
 
-  global.Sidebar = Sidebar;
-})(window.gl || (window.gl = {}));
+  window.gl = window.gl || {};
+  gl.Sidebar = Sidebar;
+})();
diff --git a/changelogs/unreleased/no-sidebar-on-action-btn-click.yml b/changelogs/unreleased/no-sidebar-on-action-btn-click.yml
new file mode 100644
index 00000000000..09e0b3a12d8
--- /dev/null
+++ b/changelogs/unreleased/no-sidebar-on-action-btn-click.yml
@@ -0,0 +1,4 @@
+---
+title: dismiss sidebar on repo buttons click
+merge_request: 8798
+author: Adam Pahlevi
diff --git a/spec/javascripts/fixtures/projects.rb b/spec/javascripts/fixtures/projects.rb
new file mode 100644
index 00000000000..56513219e1e
--- /dev/null
+++ b/spec/javascripts/fixtures/projects.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe ProjectsController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('projects/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'projects/dashboard.html.raw' do |example|
+    get :show,
+      namespace_id: project.namespace.to_param,
+      id: project.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/project_dashboard_spec.js.es6 b/spec/javascripts/project_dashboard_spec.js.es6
new file mode 100644
index 00000000000..24833b4eb57
--- /dev/null
+++ b/spec/javascripts/project_dashboard_spec.js.es6
@@ -0,0 +1,86 @@
+require('~/sidebar');
+
+(() => {
+  describe('Project dashboard page', () => {
+    let $pageWithSidebar = null;
+    let $sidebarToggle = null;
+    let sidebar = null;
+    const fixtureTemplate = 'projects/dashboard.html.raw';
+
+    const assertSidebarStateExpanded = (shouldBeExpanded) => {
+      expect(sidebar.isExpanded).toBe(shouldBeExpanded);
+      expect($pageWithSidebar.hasClass('page-sidebar-expanded')).toBe(shouldBeExpanded);
+    };
+
+    preloadFixtures(fixtureTemplate);
+    beforeEach(() => {
+      loadFixtures(fixtureTemplate);
+
+      $pageWithSidebar = $('.page-with-sidebar');
+      $sidebarToggle = $('.toggle-nav-collapse');
+
+      // otherwise instantiating the Sidebar for the second time
+      // won't do anything, as the Sidebar is a singleton class
+      gl.Sidebar.singleton = null;
+      sidebar = new gl.Sidebar();
+    });
+
+    it('can show the sidebar when the toggler is clicked', () => {
+      assertSidebarStateExpanded(false);
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+    });
+
+    it('should dismiss the sidebar when clone button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const cloneButton = $('.project-clone-holder a.clone-dropdown-btn');
+      cloneButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when download button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const downloadButton = $('.project-action-button .btn:has(i.fa-download)');
+      downloadButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when add button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const addButton = $('.project-action-button .btn:has(i.fa-plus)');
+      addButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when notification button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const notifButton = $('.js-notification-toggle-btns .notifications-btn');
+      notifButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when clicking on the body', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      $('body').click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when clicking on the project description header', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      $('.project-home-panel').click();
+      assertSidebarStateExpanded(false);
+    });
+  });
+})();