diff options
Diffstat (limited to 'app/assets/javascripts/ref')
| -rw-r--r-- | app/assets/javascripts/ref/components/ref_results_section.vue | 8 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/components/ref_selector.vue | 58 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/constants.js | 5 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/stores/actions.js | 17 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/stores/mutation_types.js | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/stores/mutations.js | 3 | ||||
| -rw-r--r-- | app/assets/javascripts/ref/stores/state.js | 25 |
7 files changed, 91 insertions, 27 deletions
diff --git a/app/assets/javascripts/ref/components/ref_results_section.vue b/app/assets/javascripts/ref/components/ref_results_section.vue index 87ce4f1a49c..4fa2a92ff03 100644 --- a/app/assets/javascripts/ref/components/ref_results_section.vue +++ b/app/assets/javascripts/ref/components/ref_results_section.vue @@ -11,6 +11,12 @@ export default { GlIcon, }, props: { + showHeader: { + type: Boolean, + required: false, + default: true, + }, + sectionTitle: { type: String, required: true, @@ -84,7 +90,7 @@ export default { <template> <div> - <gl-dropdown-section-header> + <gl-dropdown-section-header v-if="showHeader"> <div class="gl-display-flex align-items-center" data-testid="section-header"> <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span> <gl-badge variant="neutral">{{ totalCountText }}</gl-badge> diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue index 8f2805b36f6..36881552216 100644 --- a/app/assets/javascripts/ref/components/ref_selector.vue +++ b/app/assets/javascripts/ref/components/ref_selector.vue @@ -8,9 +8,16 @@ import { GlIcon, GlLoadingIcon, } from '@gitlab/ui'; -import { debounce } from 'lodash'; +import { debounce, isArray } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { SEARCH_DEBOUNCE_MS, DEFAULT_I18N } from '../constants'; +import { + ALL_REF_TYPES, + SEARCH_DEBOUNCE_MS, + DEFAULT_I18N, + REF_TYPE_BRANCHES, + REF_TYPE_TAGS, + REF_TYPE_COMMITS, +} from '../constants'; import createStore from '../stores'; import RefResultsSection from './ref_results_section.vue'; @@ -28,6 +35,20 @@ export default { RefResultsSection, }, props: { + enabledRefTypes: { + type: Array, + required: false, + default: () => ALL_REF_TYPES, + validator: (val) => + // It has to be an arrray + isArray(val) && + // with at least one item + val.length > 0 && + // and only "REF_TYPE_BRANCHES", "REF_TYPE_TAGS", and "REF_TYPE_COMMITS" are allowed + val.every((item) => ALL_REF_TYPES.includes(item)) && + // and no duplicates are allowed + val.length === new Set(val).size, + }, value: { type: String, required: false, @@ -62,17 +83,29 @@ export default { }; }, showBranchesSection() { - return Boolean(this.matches.branches.totalCount > 0 || this.matches.branches.error); + return ( + this.enabledRefTypes.includes(REF_TYPE_BRANCHES) && + Boolean(this.matches.branches.totalCount > 0 || this.matches.branches.error) + ); }, showTagsSection() { - return Boolean(this.matches.tags.totalCount > 0 || this.matches.tags.error); + return ( + this.enabledRefTypes.includes(REF_TYPE_TAGS) && + Boolean(this.matches.tags.totalCount > 0 || this.matches.tags.error) + ); }, showCommitsSection() { - return Boolean(this.matches.commits.totalCount > 0 || this.matches.commits.error); + return ( + this.enabledRefTypes.includes(REF_TYPE_COMMITS) && + Boolean(this.matches.commits.totalCount > 0 || this.matches.commits.error) + ); }, showNoResults() { return !this.showBranchesSection && !this.showTagsSection && !this.showCommitsSection; }, + showSectionHeaders() { + return this.enabledRefTypes.length > 1; + }, }, watch: { // Keep the Vuex store synchronized if the parent @@ -97,10 +130,18 @@ export default { }, SEARCH_DEBOUNCE_MS); this.setProjectId(this.projectId); - this.search(this.query); + + this.$watch( + 'enabledRefTypes', + () => { + this.setEnabledRefTypes(this.enabledRefTypes); + this.search(this.query); + }, + { immediate: true }, + ); }, methods: { - ...mapActions(['setProjectId', 'setSelectedRef', 'search']), + ...mapActions(['setEnabledRefTypes', 'setProjectId', 'setSelectedRef', 'search']), focusSearchBox() { this.$refs.searchBox.$el.querySelector('input').focus(); }, @@ -170,6 +211,7 @@ export default { :selected-ref="selectedRef" :error="matches.branches.error" :error-message="i18n.branchesErrorMessage" + :show-header="showSectionHeaders" data-testid="branches-section" @selected="selectRef($event)" /> @@ -185,6 +227,7 @@ export default { :selected-ref="selectedRef" :error="matches.tags.error" :error-message="i18n.tagsErrorMessage" + :show-header="showSectionHeaders" data-testid="tags-section" @selected="selectRef($event)" /> @@ -200,6 +243,7 @@ export default { :selected-ref="selectedRef" :error="matches.commits.error" :error-message="i18n.commitsErrorMessage" + :show-header="showSectionHeaders" data-testid="commits-section" @selected="selectRef($event)" /> diff --git a/app/assets/javascripts/ref/constants.js b/app/assets/javascripts/ref/constants.js index ca82b951377..44d0f50b832 100644 --- a/app/assets/javascripts/ref/constants.js +++ b/app/assets/javascripts/ref/constants.js @@ -1,5 +1,10 @@ import { __ } from '~/locale'; +export const REF_TYPE_BRANCHES = 'REF_TYPE_BRANCHES'; +export const REF_TYPE_TAGS = 'REF_TYPE_TAGS'; +export const REF_TYPE_COMMITS = 'REF_TYPE_COMMITS'; +export const ALL_REF_TYPES = Object.freeze([REF_TYPE_BRANCHES, REF_TYPE_TAGS, REF_TYPE_COMMITS]); + export const X_TOTAL_HEADER = 'x-total'; export const SEARCH_DEBOUNCE_MS = 250; diff --git a/app/assets/javascripts/ref/stores/actions.js b/app/assets/javascripts/ref/stores/actions.js index d9bdd64ace5..3832cc0c21d 100644 --- a/app/assets/javascripts/ref/stores/actions.js +++ b/app/assets/javascripts/ref/stores/actions.js @@ -1,17 +1,26 @@ import Api from '~/api'; +import { REF_TYPE_BRANCHES, REF_TYPE_TAGS, REF_TYPE_COMMITS } from '../constants'; import * as types from './mutation_types'; +export const setEnabledRefTypes = ({ commit }, refTypes) => + commit(types.SET_ENABLED_REF_TYPES, refTypes); + export const setProjectId = ({ commit }, projectId) => commit(types.SET_PROJECT_ID, projectId); export const setSelectedRef = ({ commit }, selectedRef) => commit(types.SET_SELECTED_REF, selectedRef); -export const search = ({ dispatch, commit }, query) => { +export const search = ({ state, dispatch, commit }, query) => { commit(types.SET_QUERY, query); - dispatch('searchBranches'); - dispatch('searchTags'); - dispatch('searchCommits'); + const dispatchIfRefTypeEnabled = (refType, action) => { + if (state.enabledRefTypes.includes(refType)) { + dispatch(action); + } + }; + dispatchIfRefTypeEnabled(REF_TYPE_BRANCHES, 'searchBranches'); + dispatchIfRefTypeEnabled(REF_TYPE_TAGS, 'searchTags'); + dispatchIfRefTypeEnabled(REF_TYPE_COMMITS, 'searchCommits'); }; export const searchBranches = ({ commit, state }) => { diff --git a/app/assets/javascripts/ref/stores/mutation_types.js b/app/assets/javascripts/ref/stores/mutation_types.js index 9f6195f5f3f..c26f4fa00c7 100644 --- a/app/assets/javascripts/ref/stores/mutation_types.js +++ b/app/assets/javascripts/ref/stores/mutation_types.js @@ -1,3 +1,5 @@ +export const SET_ENABLED_REF_TYPES = 'SET_ENABLED_REF_TYPES'; + export const SET_PROJECT_ID = 'SET_PROJECT_ID'; export const SET_SELECTED_REF = 'SET_SELECTED_REF'; export const SET_QUERY = 'SET_QUERY'; diff --git a/app/assets/javascripts/ref/stores/mutations.js b/app/assets/javascripts/ref/stores/mutations.js index 4dc73dabfe2..f91cbae8462 100644 --- a/app/assets/javascripts/ref/stores/mutations.js +++ b/app/assets/javascripts/ref/stores/mutations.js @@ -4,6 +4,9 @@ import { X_TOTAL_HEADER } from '../constants'; import * as types from './mutation_types'; export default { + [types.SET_ENABLED_REF_TYPES](state, refTypes) { + state.enabledRefTypes = refTypes; + }, [types.SET_PROJECT_ID](state, projectId) { state.projectId = projectId; }, diff --git a/app/assets/javascripts/ref/stores/state.js b/app/assets/javascripts/ref/stores/state.js index 65b9d6449d7..3affa8f8d03 100644 --- a/app/assets/javascripts/ref/stores/state.js +++ b/app/assets/javascripts/ref/stores/state.js @@ -1,23 +1,18 @@ +const createRefTypeState = () => ({ + list: [], + totalCount: 0, + error: null, +}); + export default () => ({ + enabledRefTypes: [], projectId: null, query: '', matches: { - branches: { - list: [], - totalCount: 0, - error: null, - }, - tags: { - list: [], - totalCount: 0, - error: null, - }, - commits: { - list: [], - totalCount: 0, - error: null, - }, + branches: createRefTypeState(), + tags: createRefTypeState(), + commits: createRefTypeState(), }, selectedRef: null, requestCount: 0, |