diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-08 21:14:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-08 21:14:31 +0300 |
commit | bb0d99269b1bee11939e6a3ddfcefed8c6fd4874 (patch) | |
tree | 58f5d3f64251e1847a1bfb77d76ead2abb16c899 /app/assets/javascripts/search/sidebar/components/project_filter.vue | |
parent | f1ce233e6ab6535afef76f10528e104672426710 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search/sidebar/components/project_filter.vue')
-rw-r--r-- | app/assets/javascripts/search/sidebar/components/project_filter.vue | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/project_filter.vue b/app/assets/javascripts/search/sidebar/components/project_filter.vue new file mode 100644 index 00000000000..76983644e60 --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/project_filter.vue @@ -0,0 +1,94 @@ +<script> +import { isEmpty } from 'lodash'; +// eslint-disable-next-line no-restricted-imports +import { mapState, mapActions, mapGetters } from 'vuex'; +import { s__ } from '~/locale'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/sidebar/constants'; +import SearchableDropdown from './searchable_dropdown.vue'; + +export default { + name: 'ProjectFilter', + i18n: { + projectFieldLabel: s__('GlobalSearch|Project'), + }, + components: { + SearchableDropdown, + }, + data() { + return { + search: '', + labelId: 'projects-filter-dropdown-id', + }; + }, + computed: { + ...mapState([ + 'query', + 'projects', + 'fetchingProjects', + 'projectInitialJson', + 'useSidebarNavigation', + ]), + ...mapGetters(['frequentProjects', 'currentScope']), + selectedProject() { + return isEmpty(this.projectInitialJson) ? ANY_OPTION : this.projectInitialJson; + }, + }, + watch: { + search() { + this.debounceSearch(); + }, + }, + created() { + // This tracks projects searched via the top nav search bar + if (this.query.nav_source === 'navbar' && this.projectInitialJson?.id) { + this.setFrequentProject(this.projectInitialJson); + } + }, + methods: { + ...mapActions(['fetchProjects', 'setFrequentProject', 'loadFrequentProjects']), + firstLoad() { + this.loadFrequentProjects(); + this.fetchProjects(); + }, + handleProjectChange(project) { + // If project.id is null we are clearing the filter and don't need to store that in LS. + if (project.id) { + this.setFrequentProject(project); + } + + // This determines if we need to update the group filter or not + const queryParams = { + ...(project.namespace?.id && { [GROUP_DATA.queryParam]: project.namespace.id }), + [PROJECT_DATA.queryParam]: project.id, + nav_source: null, + scope: this.currentScope, + }; + + visitUrl(setUrlParams(queryParams)); + }, + }, + PROJECT_DATA, +}; +</script> + +<template> + <div> + <h5 :id="labelId" class="gl-mt-0 gl-mb-5 gl-font-sm"> + {{ $options.i18n.projectFieldLabel }} + </h5> + <searchable-dropdown + data-testid="project-filter" + :header-text="$options.PROJECT_DATA.headerText" + :name="$options.PROJECT_DATA.name" + :loading="fetchingProjects" + :selected-item="selectedProject" + :items="projects" + :frequent-items="frequentProjects" + :search-handler="fetchProjects" + :label-id="labelId" + @first-open="firstLoad" + @change="handleProjectChange" + /> + </div> +</template> |