Fix deep linking into settings panels

Previously deep linking into settings panels didn't work consistently.
This commit does some refactoring to fix this.

Changelog: fixed

app/assets/javascripts/settings_panels.js

@@ -18,8 +18,6 @@ export function expandSection(sectionArg) {
   const $section = $(sectionArg);
 
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
-  // eslint-disable-next-line @gitlab/no-global-event-off
-  $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
   $section.addClass('expanded');
   if (!$section.hasClass('no-animate')) {
     $section
@@ -32,7 +30,6 @@ export function closeSection(sectionArg) {
   const $section = $(sectionArg);
 
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Expand'));
-  $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
   if (!$section.hasClass('no-animate')) {
     $section
@@ -55,18 +52,16 @@ export default function initSettingsPanels() {
     const $section = $(elm);
     $section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
 
-    if (!isExpanded($section)) {
-      $section.find('.settings-content').on('scroll.expandSection', () => {
-        $section.removeClass('no-animate');
+    if (window.location.hash) {
+      const $target = $(window.location.hash);
+      if (
+        $target.length &&
+        !isExpanded($section) &&
+        ($section.is($target) || $section.find($target).length)
+      ) {
+        $section.addClass('no-animate');
         expandSection($section);
-      });
+      }
     }
   });
-
-  if (window.location.hash) {
-    const $target = $(window.location.hash);
-    if ($target.length && $target.hasClass('settings')) {
-      expandSection($target);
-    }
-  }
 }

spec/frontend/settings_panels_spec.js

@@ -24,6 +24,20 @@ describe('Settings Panels', () => {
 
       expect(isExpanded(panel)).toBe(true);
     });
+
+    it('should expand panel containing linked hash', () => {
+      window.location.hash = '#group_description';
+
+      const panel = document.querySelector('#js-general-settings');
+      // Our test environment automatically expands everything so we need to clear that out first
+      panel.classList.remove('expanded');
+
+      expect(isExpanded(panel)).toBe(false);
+
+      initSettingsPanels();
+
+      expect(isExpanded(panel)).toBe(true);
+    });
   });
 
   it('does not change the text content of triggers', () => {