Merge branch 'bulk-edit-scroll-fix' into 'master'

Bulk edit scroll fix

Closes #33870

See merge request !12219

4 files changed, 29 insertions, 5 deletions

diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index 84bd2e092e6..a8856120c5e 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -22,6 +22,7 @@ export default class IssuableBulkUpdateSidebar {
   initDomElements() {
     this.$page = $('.page-with-sidebar');
     this.$sidebar = $('.right-sidebar');
+    this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
     this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');
     this.$bulkEditSubmitBtn = $('.update-selected-issues');
     this.$bulkUpdateEnableBtn = $('.js-bulk-update-toggle');
@@ -113,6 +114,7 @@ export default class IssuableBulkUpdateSidebar {
   toggleSidebarDisplay(show) {
     this.$page.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
     this.$page.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
+    this.$sidebarInnerContainer.toggleClass(HIDDEN_CLASS, !show);
     this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
     this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d4421e3af74..5cf9330b8f8 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -97,17 +97,19 @@
 
 .issues-bulk-update.right-sidebar {
   @include maintain-sidebar-dimensions;
-  transition: right $sidebar-transition-duration;
-  right: -$gutter-width;
+  width: 0;
+  padding: 0;
+  transition: width $sidebar-transition-duration;
 
   &.right-sidebar-expanded {
     @include maintain-sidebar-dimensions;
-    right: 0;
+    width: $gutter-width;
   }
 
   &.right-sidebar-collapsed {
     @include maintain-sidebar-dimensions;
-    right: -$gutter-width;
+    width: 0;
+    padding: 0;
 
     .block {
       padding: 16px 0;
@@ -118,5 +120,6 @@
 
   .issuable-sidebar {
     padding: 0 3px;
+    width: calc(100% + 35px);
   }
 }
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index a8a6d84128d..7cfdfb6e6ee 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -1,7 +1,7 @@
 - type = local_assigns.fetch(:type)
 
 %aside.issues-bulk-update.js-right-sidebar.right-sidebar.affix-top{ data: { "offset-top" => "50", "spy" => "affix" }, "aria-live" => "polite" }
-  .issuable-sidebar
+  .issuable-sidebar.hidden
     = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: "bulk-update"  do
       .block
         .filter-item.inline.update-issues-btn.pull-left
diff --git a/spec/features/issues/bulk_assignment_labels_spec.rb b/spec/features/issues/bulk_assignment_labels_spec.rb
index 2eb04df3cb3..a99c19cb787 100644
--- a/spec/features/issues/bulk_assignment_labels_spec.rb
+++ b/spec/features/issues/bulk_assignment_labels_spec.rb
@@ -16,6 +16,21 @@ feature 'Issues > Labels bulk assignment', feature: true do
       gitlab_sign_in user
     end
 
+    context 'sidebar' do
+      before do
+        enable_bulk_update
+      end
+
+      it 'is present when bulk edit is enabled' do
+        expect(page).to have_css('.issuable-sidebar')
+      end
+
+      it 'is not present when bulk edit is disabled' do
+        disable_bulk_update
+        expect(page).not_to have_css('.issuable-sidebar')
+      end
+    end
+
     context 'can bulk assign' do
       before do
         enable_bulk_update
@@ -398,4 +413,8 @@ feature 'Issues > Labels bulk assignment', feature: true do
     visit namespace_project_issues_path(project.namespace, project)
     click_button 'Edit Issues'
   end
+
+  def disable_bulk_update
+    click_button 'Cancel'
+  end
 end