Add latest changes from gitlab-org/gitlab@master

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) {