3 files changed, 69 insertions, 33 deletions

diff --git a/app/assets/javascripts/search_settings/components/search_settings.vue b/app/assets/javascripts/search_settings/components/search_settings.vue
index 820055dc656..116967a62c8 100644
--- a/app/assets/javascripts/search_settings/components/search_settings.vue
+++ b/app/assets/javascripts/search_settings/components/search_settings.vue
@@ -3,20 +3,37 @@ import { GlSearchBoxByType } from '@gitlab/ui';
 import { uniq } from 'lodash';
 import { EXCLUDED_NODES, HIDE_CLASS, HIGHLIGHT_CLASS, TYPING_DELAY } from '../constants';
 
+const origExpansions = new Map();
+
 const findSettingsSection = (sectionSelector, node) => {
   return node.parentElement.closest(sectionSelector);
 };
 
-const resetSections = ({ sectionSelector, expandSection, collapseSection }) => {
-  document.querySelectorAll(sectionSelector).forEach((section, index) => {
-    section.classList.remove(HIDE_CLASS);
-
-    if (index === 0) {
+const restoreExpansionState = ({ expandSection, collapseSection }) => {
+  origExpansions.forEach((isExpanded, section) => {
+    if (isExpanded) {
       expandSection(section);
     } else {
       collapseSection(section);
     }
   });
+
+  origExpansions.clear();
+};
+
+const saveExpansionState = (sections, { isExpanded }) => {
+  // If we've saved expansions before, don't override it.
+  if (origExpansions.size > 0) {
+    return;
+  }
+
+  sections.forEach((section) => origExpansions.set(section, isExpanded(section)));
+};
+
+const resetSections = ({ sectionSelector }) => {
+  document.querySelectorAll(sectionSelector).forEach((section) => {
+    section.classList.remove(HIDE_CLASS);
+  });
 };
 
 const clearHighlights = () => {
@@ -85,6 +102,12 @@ export default {
       type: String,
       required: true,
     },
+    isExpandedFn: {
+      type: Function,
+      required: false,
+      // default to a function that returns false
+      default: () => () => false,
+    },
   },
   data() {
     return {
@@ -97,6 +120,7 @@ export default {
         sectionSelector: this.sectionSelector,
         expandSection: this.expandSection,
         collapseSection: this.collapseSection,
+        isExpanded: this.isExpandedFn,
       };
 
       this.searchTerm = value;
@@ -104,7 +128,11 @@ export default {
       clearResults(displayOptions);
 
       if (value.length) {
+        saveExpansionState(document.querySelectorAll(this.sectionSelector), displayOptions);
+
         displayResults(displayOptions, search(this.searchRoot, value));
+      } else {
+        restoreExpansionState(displayOptions);
       }
     },
     expandSection(section) {
@@ -118,12 +146,10 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mt-5">
-    <gl-search-box-by-type
-      :value="searchTerm"
-      :debounce="$options.TYPING_DELAY"
-      :placeholder="__('Search settings')"
-      @input="search"
-    />
-  </div>
+  <gl-search-box-by-type
+    :value="searchTerm"
+    :debounce="$options.TYPING_DELAY"
+    :placeholder="__('Search settings')"
+    @input="search"
+  />
 </template>
diff --git a/app/assets/javascripts/search_settings/index.js b/app/assets/javascripts/search_settings/index.js
index 1fb1a378ffb..676c43c5631 100644
--- a/app/assets/javascripts/search_settings/index.js
+++ b/app/assets/javascripts/search_settings/index.js
@@ -1,23 +1,10 @@
-import Vue from 'vue';
-import $ from 'jquery';
-import { expandSection, closeSection } from '~/settings_panels';
-import SearchSettings from '~/search_settings/components/search_settings.vue';
+const initSearch = async () => {
+  const el = document.querySelector('.js-search-settings-app');
 
-const initSearch = ({ el }) =>
-  new Vue({
-    el,
-    render: (h) =>
-      h(SearchSettings, {
-        ref: 'searchSettings',
-        props: {
-          searchRoot: document.querySelector('#content-body'),
-          sectionSelector: 'section.settings',
-        },
-        on: {
-          collapse: (section) => closeSection($(section)),
-          expand: (section) => expandSection($(section)),
-        },
-      }),
-  });
+  if (el) {
+    const { default: mount } = await import(/* webpackChunkName: 'search_settings' */ './mount');
+    mount({ el });
+  }
+};
 
 export default initSearch;
diff --git a/app/assets/javascripts/search_settings/mount.js b/app/assets/javascripts/search_settings/mount.js
new file mode 100644
index 00000000000..b1086f9ca1f
--- /dev/null
+++ b/app/assets/javascripts/search_settings/mount.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import SearchSettings from '~/search_settings/components/search_settings.vue';
+import { expandSection, closeSection, isExpanded } from '~/settings_panels';
+
+const mountSearch = ({ el }) =>
+  new Vue({
+    el,
+    render: (h) =>
+      h(SearchSettings, {
+        ref: 'searchSettings',
+        props: {
+          searchRoot: document.querySelector('#content-body'),
+          sectionSelector: '.js-search-settings-section, section.settings',
+          isExpandedFn: isExpanded,
+        },
+        on: {
+          collapse: closeSection,
+          expand: expandSection,
+        },
+      }),
+  });
+
+export default mountSearch;