diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-30 12:08:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-30 12:08:12 +0300 |
commit | df2358a5f7a8fe32285ac62054314287fb871e49 (patch) | |
tree | 7f4da32a9df0128f82d415cfab38577a2ca438fb /app/assets/javascripts/header_search | |
parent | 9e83c35c6aecec7543d24d9386bd4821c97e5310 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/header_search')
6 files changed, 25 insertions, 10 deletions
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue index 36fc48a2ba8..4b9a87619aa 100644 --- a/app/assets/javascripts/header_search/components/app.vue +++ b/app/assets/javascripts/header_search/components/app.vue @@ -11,6 +11,7 @@ import { SEARCH_BOX_INDEX, SEARCH_INPUT_DESCRIPTION, SEARCH_RESULTS_DESCRIPTION, + SEARCH_SHORTCUTS_MIN_CHARACTERS, } from '../constants'; import HeaderSearchAutocompleteItems from './header_search_autocomplete_items.vue'; import HeaderSearchDefaultItems from './header_search_default_items.vue'; @@ -50,7 +51,7 @@ export default { }, computed: { ...mapState(['search', 'loading']), - ...mapGetters(['searchQuery', 'searchOptions']), + ...mapGetters(['searchQuery', 'searchOptions', 'autocompleteGroupedSearchOptions']), searchText: { get() { return this.search; @@ -66,14 +67,20 @@ export default { return this.currentFocusedOption?.html_id; }, isLoggedIn() { - return gon?.current_username; + return Boolean(gon?.current_username); }, showSearchDropdown() { - return this.showDropdown && this.isLoggedIn; + const hasResultsUnderMinCharacters = + this.searchText?.length === 1 ? this?.autocompleteGroupedSearchOptions?.length > 0 : true; + + return this.showDropdown && this.isLoggedIn && hasResultsUnderMinCharacters; }, showDefaultItems() { return !this.searchText; }, + showShortcuts() { + return this.searchText && this.searchText?.length >= SEARCH_SHORTCUTS_MIN_CHARACTERS; + }, defaultIndex() { if (this.showDefaultItems) { return SEARCH_BOX_INDEX; @@ -182,7 +189,10 @@ export default { :current-focused-option="currentFocusedOption" /> <template v-else> - <header-search-scoped-items :current-focused-option="currentFocusedOption" /> + <header-search-scoped-items + v-if="showShortcuts" + :current-focused-option="currentFocusedOption" + /> <header-search-autocomplete-items :current-focused-option="currentFocusedOption" /> </template> </div> diff --git a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue index c0e2c18bece..11b4f681b63 100644 --- a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue +++ b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue @@ -72,8 +72,8 @@ export default { <template> <div> <template v-if="!loading"> - <div v-for="option in autocompleteGroupedSearchOptions" :key="option.category"> - <gl-dropdown-divider /> + <div v-for="(option, index) in autocompleteGroupedSearchOptions" :key="option.category"> + <gl-dropdown-divider v-if="index > 0" /> <gl-dropdown-section-header>{{ option.category }}</gl-dropdown-section-header> <gl-dropdown-item v-for="data in option.data" diff --git a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue index 3aebee71509..34d1bd71399 100644 --- a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue +++ b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; import { mapState, mapGetters } from 'vuex'; import { __, sprintf } from '~/locale'; @@ -7,6 +7,7 @@ export default { name: 'HeaderSearchScopedItems', components: { GlDropdownItem, + GlDropdownDivider, }, props: { currentFocusedOption: { @@ -17,7 +18,7 @@ export default { }, computed: { ...mapState(['search']), - ...mapGetters(['scopedSearchOptions']), + ...mapGetters(['scopedSearchOptions', 'autocompleteGroupedSearchOptions']), }, methods: { isOptionFocused(option) { @@ -53,5 +54,6 @@ export default { <span v-if="option.scope" class="gl-font-style-italic">{{ option.scope }}</span> </span> </gl-dropdown-item> + <gl-dropdown-divider v-if="autocompleteGroupedSearchOptions.length > 0" /> </div> </template> diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js index b2e45fcd648..9cb08605444 100644 --- a/app/assets/javascripts/header_search/constants.js +++ b/app/assets/javascripts/header_search/constants.js @@ -28,6 +28,8 @@ export const FIRST_DROPDOWN_INDEX = 0; export const SEARCH_BOX_INDEX = -1; +export const SEARCH_SHORTCUTS_MIN_CHARACTERS = 2; + export const SEARCH_INPUT_DESCRIPTION = 'search-input-description'; export const SEARCH_RESULTS_DESCRIPTION = 'search-results-description'; diff --git a/app/assets/javascripts/header_search/store/actions.js b/app/assets/javascripts/header_search/store/actions.js index ee4c312fed0..3a86dcca409 100644 --- a/app/assets/javascripts/header_search/store/actions.js +++ b/app/assets/javascripts/header_search/store/actions.js @@ -5,7 +5,9 @@ export const fetchAutocompleteOptions = ({ commit, getters }) => { commit(types.REQUEST_AUTOCOMPLETE); return axios .get(getters.autocompleteQuery) - .then(({ data }) => commit(types.RECEIVE_AUTOCOMPLETE_SUCCESS, data)) + .then(({ data }) => { + commit(types.RECEIVE_AUTOCOMPLETE_SUCCESS, data); + }) .catch(() => { commit(types.RECEIVE_AUTOCOMPLETE_ERROR); }); diff --git a/app/assets/javascripts/header_search/store/getters.js b/app/assets/javascripts/header_search/store/getters.js index 87dec95153f..7d08aa859fb 100644 --- a/app/assets/javascripts/header_search/store/getters.js +++ b/app/assets/javascripts/header_search/store/getters.js @@ -190,7 +190,6 @@ export const autocompleteGroupedSearchOptions = (state) => { results.push(groupedOptions[option.category]); } }); - return results; }; |