Fix permalink discussion note being collapsed27089-26860-27151-fix-discussion-note-permalink-collapsed

3 files changed, 49 insertions, 10 deletions

diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 6a49715590c..a7181904ac9 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -1,6 +1,19 @@
 /* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
 (function(w) {
   $(function() {
+    var toggleContainer = function(container, /* optional */toggleState) {
+      var $container = $(container);
+
+      $container
+        .find('.js-toggle-button .fa')
+        .toggleClass('fa-chevron-up', toggleState)
+        .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+
+      $container
+        .find('.js-toggle-content')
+        .toggle(toggleState);
+    };
+
     // Toggle button. Show/hide content inside parent container.
     // Button does not change visibility. If button has icon - it changes chevron style.
     //
@@ -10,14 +23,7 @@
     //
     $('body').on('click', '.js-toggle-button', function(e) {
       e.preventDefault();
-      $(this)
-        .find('.fa')
-          .toggleClass('fa-chevron-down fa-chevron-up')
-        .end()
-        .closest('.js-toggle-container')
-          .find('.js-toggle-content')
-            .toggle()
-      ;
+      toggleContainer($(this).closest('.js-toggle-container'));
     });
 
     // If we're accessing a permalink, ensure it is not inside a
@@ -26,8 +32,8 @@
     var anchor = hash && document.getElementById(hash);
     var container = anchor && $(anchor).closest('.js-toggle-container');
 
-    if (container && container.find('.js-toggle-content').is(':hidden')) {
-      container.find('.js-toggle-button').trigger('click');
+    if (container) {
+      toggleContainer(container, true);
       anchor.scrollIntoView();
     }
   });
diff --git a/changelogs/unreleased/27089-26860-27151-fix-discussion-note-permalink-collapsed.yml b/changelogs/unreleased/27089-26860-27151-fix-discussion-note-permalink-collapsed.yml
new file mode 100644
index 00000000000..ddd454da376
--- /dev/null
+++ b/changelogs/unreleased/27089-26860-27151-fix-discussion-note-permalink-collapsed.yml
@@ -0,0 +1,4 @@
+---
+title: Fix permalink discussion note being collapsed
+merge_request:
+author:
diff --git a/spec/features/merge_requests/toggler_behavior_spec.rb b/spec/features/merge_requests/toggler_behavior_spec.rb
new file mode 100644
index 00000000000..6958f6a2c9f
--- /dev/null
+++ b/spec/features/merge_requests/toggler_behavior_spec.rb
@@ -0,0 +1,29 @@
+require 'spec_helper'
+
+feature 'toggler_behavior', js: true, feature: true do
+  let(:user) { create(:user) }
+  let(:project) { create(:project) }
+  let(:merge_request) { create(:merge_request, source_project: project, author: user) }
+  let(:note) { create(:diff_note_on_merge_request, noteable: merge_request, project: project) }
+  let(:fragment_id) { "#note_#{note.id}" }
+
+  before do
+    login_as :admin
+    project = merge_request.source_project
+    visit "#{namespace_project_merge_request_path(project.namespace, project, merge_request)}#{fragment_id}"
+    page.current_window.resize_to(1000, 300)
+  end
+
+  describe 'scroll position' do
+    it 'should be scrolled down to fragment' do
+      page_height = page.current_window.size[1]
+      page_scroll_y = page.evaluate_script("window.scrollY")
+      fragment_position_top = page.evaluate_script("document.querySelector('#{fragment_id}').getBoundingClientRect().top")
+
+      expect(find('.js-toggle-content').visible?).to eq true
+      expect(find(fragment_id).visible?).to eq true
+      expect(fragment_position_top).to be > page_scroll_y
+      expect(fragment_position_top).to be < (page_scroll_y + page_height)
+    end
+  end
+end