Merge branch 'sidebar-expand-collapse' into 'master'

Fix right sidebar expand/collapse issue

Fixed branch name of the !4117


------------------

Fixes #15643 

- Fixed a typo in `toggleSidebar` method of `Sidebar` class.
- Fixed a minor styling issue to fix the sidebar to the top of the page.
- Added tests for Sidebar.


## Before
![before](/uploads/c4efe9a64e0ae35f423302753caa6dfd/sFBwnVEpQB.gif)

## After
![after](/uploads/23e6b80888dae475a385912c8c40bdbd/rerKiYC4dk.gif)


See merge request !4292

4 files changed, 117 insertions, 33 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index ff69e27bbcf..7c547ac843b 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -245,38 +245,6 @@ $ ->
         if $navIcon.hasClass('fa-angle-left')
           $navIconToggle.trigger('click')
 
-  $(document)
-    .off 'click', '.js-sidebar-toggle'
-    .on 'click', '.js-sidebar-toggle', (e, triggered) ->
-      e.preventDefault()
-      $this = $(this)
-      $thisIcon = $this.find 'i'
-      $allGutterToggleIcons = $('.js-sidebar-toggle i')
-      if $thisIcon.hasClass('fa-angle-double-right')
-        $allGutterToggleIcons
-          .removeClass('fa-angle-double-right')
-          .addClass('fa-angle-double-left')
-        $('aside.right-sidebar')
-          .removeClass('right-sidebar-expanded')
-          .addClass('right-sidebar-collapsed')
-        $('.page-with-sidebar')
-          .removeClass('right-sidebar-expanded')
-          .addClass('right-sidebar-collapsed')
-      else
-        $allGutterToggleIcons
-          .removeClass('fa-angle-double-left')
-          .addClass('fa-angle-double-right')
-        $('aside.right-sidebar')
-          .removeClass('right-sidebar-collapsed')
-          .addClass('right-sidebar-expanded')
-        $('.page-with-sidebar')
-          .removeClass('right-sidebar-collapsed')
-          .addClass('right-sidebar-expanded')
-      if not triggered
-        $.cookie("collapsed_gutter",
-          $('.right-sidebar')
-            .hasClass('right-sidebar-collapsed'), { path: '/' })
-
   fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
     bootstrapBreakpoint = bp.getBreakpointSize()
diff --git a/app/assets/javascripts/right_sidebar.js.coffee b/app/assets/javascripts/right_sidebar.js.coffee
index 2d084b76cfe..c9cb0f4bb32 100644
--- a/app/assets/javascripts/right_sidebar.js.coffee
+++ b/app/assets/javascripts/right_sidebar.js.coffee
@@ -10,6 +10,40 @@ class @Sidebar
     $('.dropdown').on('loading.gl.dropdown', @sidebarDropdownLoading)
     $('.dropdown').on('loaded.gl.dropdown', @sidebarDropdownLoaded)
 
+
+    $(document)
+      .off 'click', '.js-sidebar-toggle'
+      .on 'click', '.js-sidebar-toggle', (e, triggered) ->
+        e.preventDefault()
+        $this = $(this)
+        $thisIcon = $this.find 'i'
+        $allGutterToggleIcons = $('.js-sidebar-toggle i')
+        if $thisIcon.hasClass('fa-angle-double-right')
+          $allGutterToggleIcons
+            .removeClass('fa-angle-double-right')
+            .addClass('fa-angle-double-left')
+          $('aside.right-sidebar')
+            .removeClass('right-sidebar-expanded')
+            .addClass('right-sidebar-collapsed')
+          $('.page-with-sidebar')
+            .removeClass('right-sidebar-expanded')
+            .addClass('right-sidebar-collapsed')
+        else
+          $allGutterToggleIcons
+            .removeClass('fa-angle-double-left')
+            .addClass('fa-angle-double-right')
+          $('aside.right-sidebar')
+            .removeClass('right-sidebar-collapsed')
+            .addClass('right-sidebar-expanded')
+          $('.page-with-sidebar')
+            .removeClass('right-sidebar-collapsed')
+            .addClass('right-sidebar-expanded')
+        if not triggered
+          $.cookie("collapsed_gutter",
+            $('.right-sidebar')
+              .hasClass('right-sidebar-collapsed'), { path: '/' })
+
+
   sidebarDropdownLoading: (e) ->
     $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
     img = $sidebarCollapsedIcon.find('img')
@@ -76,7 +110,7 @@ class @Sidebar
       @triggerOpenSidebar() if not @isOpen()
 
     if action is 'hide'
-      @triggerOpenSidebar() is @isOpen()
+      @triggerOpenSidebar() if @isOpen()
 
   isOpen: ->
     @sidebar.is('.right-sidebar-expanded')
diff --git a/spec/javascripts/fixtures/right_sidebar.html.haml b/spec/javascripts/fixtures/right_sidebar.html.haml
new file mode 100644
index 00000000000..95efaff4b69
--- /dev/null
+++ b/spec/javascripts/fixtures/right_sidebar.html.haml
@@ -0,0 +1,13 @@
+%div
+  %div.page-gutter.page-with-sidebar
+
+  %aside.right-sidebar
+    %div.block.issuable-sidebar-header
+      %a.gutter-toggle.pull-right.js-sidebar-toggle
+        %i.fa.fa-angle-double-left
+
+    %form.issuable-context-form
+      %div.block.labels
+        %div.sidebar-collapsed-icon
+          %i.fa.fa-tags
+          %span 1
diff --git a/spec/javascripts/right_sidebar_spec.js.coffee b/spec/javascripts/right_sidebar_spec.js.coffee
new file mode 100644
index 00000000000..2075cacdb67
--- /dev/null
+++ b/spec/javascripts/right_sidebar_spec.js.coffee
@@ -0,0 +1,69 @@
+#= require right_sidebar
+#= require jquery
+#= require jquery.cookie
+
+@sidebar    = null
+$aside      = null
+$toggle     = null
+$icon       = null
+$page       = null
+$labelsIcon = null
+
+
+assertSidebarState = (state) ->
+
+  shouldBeExpanded  = state is 'expanded'
+  shouldBeCollapsed = state is 'collapsed'
+
+  expect($aside.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
+  expect($page.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
+  expect($icon.hasClass('fa-angle-double-right')).toBe shouldBeExpanded
+
+  expect($aside.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
+  expect($page.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
+  expect($icon.hasClass('fa-angle-double-left')).toBe shouldBeCollapsed
+
+
+describe 'RightSidebar', ->
+
+  fixture.preload 'right_sidebar.html'
+
+  beforeEach ->
+    fixture.load 'right_sidebar.html'
+
+    @sidebar    = new Sidebar
+    $aside      = $ '.right-sidebar'
+    $page       = $ '.page-with-sidebar'
+    $icon       = $aside.find 'i'
+    $toggle     = $aside.find '.js-sidebar-toggle'
+    $labelsIcon = $aside.find '.sidebar-collapsed-icon'
+
+
+  it 'should expand the sidebar when arrow is clicked', ->
+
+    $toggle.click()
+    assertSidebarState 'expanded'
+
+
+  it 'should collapse the sidebar when arrow is clicked', ->
+
+    $toggle.click()
+    assertSidebarState 'expanded'
+
+    $toggle.click()
+    assertSidebarState 'collapsed'
+
+
+  it 'should float over the page and when sidebar icons clicked', ->
+
+    $labelsIcon.click()
+    assertSidebarState 'expanded'
+
+
+  it 'should collapse when the icon arrow clicked while it is floating on page', ->
+
+    $labelsIcon.click()
+    assertSidebarState 'expanded'
+
+    $toggle.click()
+    assertSidebarState 'collapsed'