diff options
Diffstat (limited to 'app/assets/javascripts/search_settings')
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; |