diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 21:13:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 21:13:03 +0300 |
commit | 29f6c0bff81cae77435342e46d1f439ac16a57d1 (patch) | |
tree | 9e48603e2818e9c56ac937743fd23f1d0fcf6529 /app/assets/javascripts/search_settings | |
parent | b962adf4c32f2371ad0d8bfcdc444933943d3cd9 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search_settings')
-rw-r--r-- | app/assets/javascripts/search_settings/components/search_settings.vue | 41 | ||||
-rw-r--r-- | app/assets/javascripts/search_settings/mount.js | 1 |
2 files changed, 34 insertions, 8 deletions
diff --git a/app/assets/javascripts/search_settings/components/search_settings.vue b/app/assets/javascripts/search_settings/components/search_settings.vue index e9cc9616fd0..3fc279f363a 100644 --- a/app/assets/javascripts/search_settings/components/search_settings.vue +++ b/app/assets/javascripts/search_settings/components/search_settings.vue @@ -1,5 +1,5 @@ <script> -import { GlSearchBoxByType } from '@gitlab/ui'; +import { GlEmptyState, GlSearchBoxByType } from '@gitlab/ui'; import { escapeRegExp } from 'lodash'; import { EXCLUDED_NODES, @@ -96,6 +96,8 @@ const displayResults = ({ sectionSelector, expandSection, searchTerm }, matching hideSectionsExcept(sectionSelector, sections); sections.forEach(expandSection); highlightText(matchingTextNodes, searchTerm); + + return sections.length > 0; }; const clearResults = (params) => { @@ -126,6 +128,7 @@ const search = (root, searchTerm) => { export default { components: { + GlEmptyState, GlSearchBoxByType, }, props: { @@ -137,6 +140,11 @@ export default { type: String, required: true, }, + hideWhenEmptySelector: { + type: String, + required: true, + default: null, + }, isExpandedFn: { type: Function, required: false, @@ -147,8 +155,16 @@ export default { data() { return { searchTerm: '', + hasMatches: true, }; }, + watch: { + hasMatches(newHasMatches) { + document.querySelectorAll(this.hideWhenEmptySelector).forEach((section) => { + section.classList.toggle(HIDE_CLASS, !newHasMatches); + }); + }, + }, methods: { search(value) { this.searchTerm = value; @@ -161,11 +177,12 @@ export default { }; clearResults(displayOptions); + this.hasMatches = true; if (value.length) { saveExpansionState(document.querySelectorAll(this.sectionSelector), displayOptions); - displayResults(displayOptions, search(this.searchRoot, this.searchTerm)); + this.hasMatches = displayResults(displayOptions, search(this.searchRoot, this.searchTerm)); } else { restoreExpansionState(displayOptions); } @@ -181,10 +198,18 @@ export default { }; </script> <template> - <gl-search-box-by-type - :value="searchTerm" - :debounce="$options.TYPING_DELAY" - :placeholder="__('Search page')" - @input="search" - /> + <div> + <gl-search-box-by-type + :value="searchTerm" + :debounce="$options.TYPING_DELAY" + :placeholder="__('Search page')" + @input="search" + /> + + <gl-empty-state + v-if="!hasMatches" + :title="__('No results found')" + :description="__('Edit your search and try again')" + /> + </div> </template> diff --git a/app/assets/javascripts/search_settings/mount.js b/app/assets/javascripts/search_settings/mount.js index b1086f9ca1f..b727b55781a 100644 --- a/app/assets/javascripts/search_settings/mount.js +++ b/app/assets/javascripts/search_settings/mount.js @@ -11,6 +11,7 @@ const mountSearch = ({ el }) => props: { searchRoot: document.querySelector('#content-body'), sectionSelector: '.js-search-settings-section, section.settings', + hideWhenEmptySelector: '.js-hide-when-nothing-matches-search', isExpandedFn: isExpanded, }, on: { |