diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-12 15:11:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-12 15:11:33 +0300 |
commit | 0127158127cb4f21b06ea39cc243d8ac17fc3e41 (patch) | |
tree | fa430e57fd398272df6fda9bbf9a8dd19af063f9 /app/assets/javascripts/search | |
parent | fab43fda656e091104f79668db65f7c5e2a2e68c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search')
9 files changed, 119 insertions, 24 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue index eb7971a9d5a..da743f5c496 100644 --- a/app/assets/javascripts/search/sidebar/components/app.vue +++ b/app/assets/javascripts/search/sidebar/components/app.vue @@ -3,8 +3,11 @@ import { mapState, mapGetters } from 'vuex'; import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue'; import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue'; +import SmallScreenDrawerNavigation from '~/search/sidebar/components/small_screen_drawer_navigation.vue'; import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue'; +import { toggleSuperSidebarCollapsed } from '~/super_sidebar/super_sidebar_collapsed_state_manager'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS, @@ -21,12 +24,14 @@ export default { name: 'GlobalSearchSidebar', components: { IssuesFilters, - ScopeLegacyNavigation, - ScopeSidebarNavigation, - SidebarPortal, MergeRequestsFilters, BlobsFilters, ProjectsFilters, + ScopeLegacyNavigation, + ScopeSidebarNavigation, + SidebarPortal, + DomElementListener, + SmallScreenDrawerNavigation, }, mixins: [glFeatureFlagsMixin()], computed: { @@ -53,11 +58,17 @@ export default { return Boolean(this.currentScope); }, }, + methods: { + toggleFiltersFromSidebar() { + toggleSuperSidebarCollapsed(); + }, + }, }; </script> <template> <section v-if="useSidebarNavigation"> + <dom-element-listener selector="#js-open-mobile-filters" @click="toggleFiltersFromSidebar" /> <sidebar-portal> <scope-sidebar-navigation /> <issues-filters v-if="showIssuesFilters" /> @@ -66,14 +77,24 @@ export default { <projects-filters v-if="showProjectsFilters" /> </sidebar-portal> </section> + <section v-else-if="showScopeNavigation" - class="search-sidebar gl-display-flex gl-flex-direction-column gl-md-mr-5 gl-mb-6 gl-mt-5" + class="gl-display-flex gl-flex-direction-column gl-lg-mr-0 gl-md-mr-5 gl-lg-mb-6 gl-lg-mt-5" > - <scope-legacy-navigation /> - <issues-filters v-if="showIssuesFilters" /> - <merge-requests-filters v-if="showMergeRequestFilters" /> - <blobs-filters v-if="showBlobFilters" /> - <projects-filters v-if="showProjectsFilters" /> + <div class="search-sidebar gl-display-none gl-lg-display-block"> + <scope-legacy-navigation /> + <issues-filters v-if="showIssuesFilters" /> + <merge-requests-filters v-if="showMergeRequestFilters" /> + <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> + </div> + <small-screen-drawer-navigation class="gl-lg-display-none"> + <scope-legacy-navigation /> + <issues-filters v-if="showIssuesFilters" /> + <merge-requests-filters v-if="showMergeRequestFilters" /> + <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> + </small-screen-drawer-navigation> </section> </template> diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/data.js b/app/assets/javascripts/search/sidebar/components/archived_filter/data.js index 77efbdd9e60..d765a821116 100644 --- a/app/assets/javascripts/search/sidebar/components/archived_filter/data.js +++ b/app/assets/javascripts/search/sidebar/components/archived_filter/data.js @@ -7,6 +7,7 @@ export const TRACKING_LABEL_CHECKBOX = 'checkbox'; const scopes = { PROJECTS: 'projects', + ISSUES: 'issues', }; const filterParam = 'include_archived'; diff --git a/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue index 1984e3a36c4..c31c46f2e6a 100644 --- a/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue +++ b/app/assets/javascripts/search/sidebar/components/archived_filter/index.vue @@ -14,7 +14,7 @@ export default { GlFormCheckbox, }, computed: { - ...mapState(['urlQuery']), + ...mapState(['urlQuery', 'useSidebarNavigation']), selectedFilter: { get() { return [parseBoolean(this.urlQuery?.include_archived)]; @@ -41,7 +41,9 @@ export default { <template> <gl-form-checkbox-group v-model="selectedFilter"> - <h5>{{ $options.archivedFilterData.headerLabel }}</h5> + <h5 class="gl-mt-0 gl-mb-5" :class="{ 'gl-font-sm': useSidebarNavigation }"> + {{ $options.archivedFilterData.headerLabel }} + </h5> <gl-form-checkbox class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full" :class="$options.LABEL_DEFAULT_CLASSES" diff --git a/app/assets/javascripts/search/sidebar/components/filters_template.vue b/app/assets/javascripts/search/sidebar/components/filters_template.vue index 3dae05ccc69..0f68bf92048 100644 --- a/app/assets/javascripts/search/sidebar/components/filters_template.vue +++ b/app/assets/javascripts/search/sidebar/components/filters_template.vue @@ -21,9 +21,6 @@ export default { computed: { ...mapState(['sidebarDirty', 'useSidebarNavigation']), ...mapGetters(['currentScope']), - hrClasses() { - return [...HR_DEFAULT_CLASSES, 'gl-display-none', 'gl-md-display-block']; - }, }, methods: { ...mapActions(['applyQuery', 'resetQuery']), @@ -40,14 +37,15 @@ export default { this.resetQuery(); }, }, + HR_DEFAULT_CLASSES, }; </script> <template> <gl-form class="issue-filters gl-px-5 gl-pt-0" @submit.prevent="applyQueryWithTracking"> - <hr v-if="!useSidebarNavigation" :class="hrClasses" /> + <hr v-if="!useSidebarNavigation" :class="$options.HR_DEFAULT_CLASSES" /> <slot></slot> - <hr v-if="!useSidebarNavigation" :class="hrClasses" /> + <hr v-if="!useSidebarNavigation" :class="$options.HR_DEFAULT_CLASSES" /> <div class="gl-display-flex gl-align-items-center gl-mt-4"> <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty"> {{ __('Apply') }} diff --git a/app/assets/javascripts/search/sidebar/components/issues_filters.vue b/app/assets/javascripts/search/sidebar/components/issues_filters.vue index 919bd2b2e49..dbd52978163 100644 --- a/app/assets/javascripts/search/sidebar/components/issues_filters.vue +++ b/app/assets/javascripts/search/sidebar/components/issues_filters.vue @@ -2,13 +2,15 @@ // eslint-disable-next-line no-restricted-imports import { mapGetters, mapState } from 'vuex'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { HR_DEFAULT_CLASSES } from '../constants/index'; +import { HR_DEFAULT_CLASSES, SEARCH_TYPE_ADVANCED } from '../constants'; import { confidentialFilterData } from './confidentiality_filter/data'; import { statusFilterData } from './status_filter/data'; import ConfidentialityFilter from './confidentiality_filter/index.vue'; import { labelFilterData } from './label_filter/data'; +import { archivedFilterData } from './archived_filter/data'; import LabelFilter from './label_filter/index.vue'; import StatusFilter from './status_filter/index.vue'; +import ArchivedFilter from './archived_filter/index.vue'; import FiltersTemplate from './filters_template.vue'; @@ -19,11 +21,12 @@ export default { ConfidentialityFilter, LabelFilter, FiltersTemplate, + ArchivedFilter, }, mixins: [glFeatureFlagsMixin()], computed: { ...mapGetters(['currentScope']), - ...mapState(['useSidebarNavigation']), + ...mapState(['useSidebarNavigation', 'searchType']), showConfidentialityFilter() { return Object.values(confidentialFilterData.scopes).includes(this.currentScope); }, @@ -33,7 +36,15 @@ export default { showLabelFilter() { return ( Object.values(labelFilterData.scopes).includes(this.currentScope) && - this.glFeatures.searchIssueLabelAggregation + this.glFeatures.searchIssueLabelAggregation && + this.searchType === SEARCH_TYPE_ADVANCED + ); + }, + showArchivedFilter() { + return ( + Object.values(archivedFilterData.scopes).includes(this.currentScope) && + this.glFeatures.searchIssuesHideArchivedProjects && + this.searchType === SEARCH_TYPE_ADVANCED ); }, showDivider() { @@ -52,6 +63,8 @@ export default { <hr v-if="showConfidentialityFilter && showDivider" :class="hrClasses" /> <confidentiality-filter v-if="showConfidentialityFilter" class="gl-mb-5" /> <hr v-if="showLabelFilter && showDivider" :class="hrClasses" /> - <label-filter v-if="showLabelFilter" /> + <label-filter v-if="showLabelFilter" class="gl-mb-5" /> + <hr v-if="showArchivedFilter && showDivider" :class="hrClasses" /> + <archived-filter v-if="showArchivedFilter" class="gl-mb-5" /> </filters-template> </template> diff --git a/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue index e8d5de4d769..a4c1119736f 100644 --- a/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue +++ b/app/assets/javascripts/search/sidebar/components/scope_legacy_navigation.vue @@ -57,7 +57,7 @@ export default { </script> <template> - <nav data-testid="search-filter"> + <nav data-testid="search-filter" class="gl-border-none"> <gl-nav vertical pills> <gl-nav-item v-for="(item, scope) in navigation" @@ -81,6 +81,5 @@ export default { </span> </gl-nav-item> </gl-nav> - <hr class="gl-mt-5 gl-mx-5 gl-mb-0 gl-border-gray-100 gl-md-display-none" /> </nav> </template> diff --git a/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue b/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue new file mode 100644 index 00000000000..e966b8d877e --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/small_screen_drawer_navigation.vue @@ -0,0 +1,61 @@ +<script> +import { GlDrawer } from '@gitlab/ui'; +import { getContentWrapperHeight } from '~/lib/utils/dom_utils'; +import { DRAWER_Z_INDEX } from '~/lib/utils/constants'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; +import { s__ } from '~/locale'; + +export default { + name: 'SmallScreenDrawerNavigation', + components: { + GlDrawer, + DomElementListener, + }, + i18n: { + smallScreenFiltersDrawerHeader: s__('GlobalSearch|Filters'), + }, + data() { + return { + openSmallScreenFilters: false, + }; + }, + computed: { + getDrawerHeaderHeight() { + if (!this.openSmallScreenFilters) return '0'; + return getContentWrapperHeight(); + }, + }, + methods: { + closeSmallScreenFilters() { + this.openSmallScreenFilters = false; + }, + toggleSmallScreenFilters() { + this.openSmallScreenFilters = !this.openSmallScreenFilters; + }, + }, + DRAWER_Z_INDEX, +}; +</script> +<template> + <dom-element-listener selector="#js-open-mobile-filters" @click="toggleSmallScreenFilters"> + <gl-drawer + :header-height="getDrawerHeaderHeight" + :z-index="$options.DRAWER_Z_INDEX" + variant="sidebar" + class="small-screen-drawer-navigation" + :open="openSmallScreenFilters" + @close="closeSmallScreenFilters" + > + <template #title> + <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24"> + {{ $options.i18n.smallScreenFiltersDrawerHeader }} + </h2> + </template> + <template #default> + <div> + <slot></slot> + </div> + </template> + </gl-drawer> + </dom-element-listener> +</template> diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js index a68a0f75a2f..211bbaf82cd 100644 --- a/app/assets/javascripts/search/store/actions.js +++ b/app/assets/javascripts/search/store/actions.js @@ -138,7 +138,7 @@ export const setLabelFilterSearch = ({ commit }, { value }) => { export const fetchSidebarCount = ({ commit, state }) => { const promises = Object.values(state.navigation).map((navItem) => { // active nav item has count already so we skip it - if (!navItem.active) { + if (!navItem.active && navItem.count_link) { return axios .get(navItem.count_link) .then(({ data: { count } }) => { diff --git a/app/assets/javascripts/search/store/mutations.js b/app/assets/javascripts/search/store/mutations.js index 65bb21f1b8a..b248681f053 100644 --- a/app/assets/javascripts/search/store/mutations.js +++ b/app/assets/javascripts/search/store/mutations.js @@ -33,7 +33,7 @@ export default { state.frequentItems[key] = data; }, [types.RECEIVE_NAVIGATION_COUNT](state, { key, count }) { - const item = { ...state.navigation[key], count }; + const item = { ...state.navigation[key], count, count_link: null }; state.navigation = { ...state.navigation, [key]: item }; }, [types.REQUEST_AGGREGATIONS](state) { |