Merge branch 'issuable-sidebar-bug' into 'master'

Fixed Issuable sidebar so it remains closed on mobile/smaller screen devices

See merge request !7466

5 files changed, 51 insertions, 9 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index f0615481ed2..4849aab50f4 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -84,7 +84,6 @@
     var $sidebarGutterToggle = $('.js-sidebar-toggle');
     var $flash = $('.flash-container');
     var bootstrapBreakpoint = bp.getBreakpointSize();
-    var checkInitialSidebarSize;
     var fitSidebarForSize;
 
     // Set the default path for all cookies to GitLab's root directory
@@ -246,19 +245,11 @@
         return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
       }
     };
-    checkInitialSidebarSize = function () {
-      bootstrapBreakpoint = bp.getBreakpointSize();
-      if (bootstrapBreakpoint === 'xs' || 'sm') {
-        return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
-      }
-    };
     $window.off('resize.app').on('resize.app', function () {
       return fitSidebarForSize();
     });
     gl.awardsHandler = new AwardsHandler();
-    checkInitialSidebarSize();
     new Aside();
-
     // bind sidebar events
     new gl.Sidebar();
   });
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 9c53cdee58e..c77fbb6a1c7 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,5 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
 /* global UsersSelect */
+/* global Cookies */
+/* global bp */
 
 (function() {
   this.IssuableContext = (function() {
@@ -37,6 +39,13 @@
           }, 0);
         }
       });
+      window.addEventListener('beforeunload', function() {
+        // collapsed_gutter cookie hides the sidebar
+        var bpBreakpoint = bp.getBreakpointSize();
+        if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm') {
+          Cookies.set('collapsed_gutter', true);
+        }
+      });
       $(".right-sidebar").niceScroll();
     }
 
diff --git a/changelogs/unreleased/issuable-sidebar-bug.yml b/changelogs/unreleased/issuable-sidebar-bug.yml
new file mode 100644
index 00000000000..4086292eb89
--- /dev/null
+++ b/changelogs/unreleased/issuable-sidebar-bug.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed Issuable sidebar not closing on smaller/mobile sized screens
+merge_request: 
+author: 
diff --git a/spec/features/issues/issue_sidebar_spec.rb b/spec/features/issues/issue_sidebar_spec.rb
index bc068b5e7e0..1eb981942ea 100644
--- a/spec/features/issues/issue_sidebar_spec.rb
+++ b/spec/features/issues/issue_sidebar_spec.rb
@@ -2,6 +2,7 @@ require 'rails_helper'
 
 feature 'Issue Sidebar', feature: true do
   include WaitForAjax
+  include MobileHelpers
 
   let(:project) { create(:project, :public) }
   let(:issue) { create(:issue, project: project) }
@@ -59,6 +60,23 @@ feature 'Issue Sidebar', feature: true do
       end
     end
 
+    context 'sidebar', js: true do
+      it 'changes size when the screen size is smaller' do
+        sidebar_selector = 'aside.right-sidebar.right-sidebar-collapsed'
+        # Resize the window
+        resize_screen_sm
+        # Make sure the sidebar is collapsed
+        expect(page).to have_css(sidebar_selector)
+        # Once is collapsed let's open the sidebard and reload
+        open_issue_sidebar
+        refresh
+        expect(page).to have_css(sidebar_selector)
+        # Restore the window size as it was including the sidebar
+        restore_window_size
+        open_issue_sidebar
+      end
+    end
+
     context 'creating a new label', js: true do
       it 'shows option to crate a new label is present' do
         page.within('.block.labels') do
@@ -109,4 +127,11 @@ feature 'Issue Sidebar', feature: true do
   def visit_issue(project, issue)
     visit namespace_project_issue_path(project.namespace, project, issue)
   end
+
+  def open_issue_sidebar
+    page.within('aside.right-sidebar.right-sidebar-collapsed') do
+      find('.js-sidebar-toggle').click
+      sleep 1
+    end
+  end
 end
diff --git a/spec/support/mobile_helpers.rb b/spec/support/mobile_helpers.rb
new file mode 100644
index 00000000000..20d5849bcab
--- /dev/null
+++ b/spec/support/mobile_helpers.rb
@@ -0,0 +1,13 @@
+module MobileHelpers
+  def resize_screen_sm
+    resize_window(900, 768)
+  end
+
+  def restore_window_size
+    resize_window(1366, 768)
+  end
+
+  def resize_window(width, height)
+    page.driver.resize_window width, height
+  end
+end