Add latest changes from gitlab-org/gitlab@master

4 files changed, 59 insertions, 32 deletions

diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js
index 446ab7f433c..ba12f31ef87 100644
--- a/app/assets/javascripts/search/index.js
+++ b/app/assets/javascripts/search/index.js
@@ -1,7 +1,7 @@
 import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result';
 import { queryToObject } from '~/lib/utils/url_utility';
 import refreshCounts from '~/pages/search/show/refresh_counts';
-import { initSidebar } from './sidebar';
+import { initSidebar, sidebarInitState } from './sidebar';
 import { initSearchSort } from './sort';
 import createStore from './store';
 import { initTopbar } from './topbar';
@@ -9,14 +9,18 @@ import { initBlobRefSwitcher } from './under_topbar';
 
 export const initSearchApp = () => {
   const query = queryToObject(window.location.search);
+  const navigation = sidebarInitState();
 
-  const store = createStore({ query });
+  const store = createStore({ query, navigation });
 
   initTopbar(store);
   initSidebar(store);
   initSearchSort(store);
 
   setHighlightClass(query.search); // Code Highlighting
-  refreshCounts(); // Other Scope Tab Counts
   initBlobRefSwitcher(); // Code Search Branch Picker
+
+  if (!gon.features?.searchPageVerticalNav) {
+    refreshCounts(); // Other Scope Tab Counts
+  }
 };
diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue
index 5c7cbeac5b2..789efc8f09d 100644
--- a/app/assets/javascripts/search/sidebar/components/app.vue
+++ b/app/assets/javascripts/search/sidebar/components/app.vue
@@ -17,6 +17,9 @@ export default {
     showReset() {
       return this.urlQuery.state || this.urlQuery.confidential;
     },
+    showSidebar() {
+      return this.urlQuery.scope === 'issues' || this.urlQuery.scope === 'merge_requests';
+    },
   },
   methods: {
     ...mapActions(['applyQuery', 'resetQuery']),
@@ -29,15 +32,17 @@ export default {
     class="search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4 gl-mb-6 gl-mt-5"
     @submit.prevent="applyQuery"
   >
-    <status-filter />
-    <confidentiality-filter />
-    <div class="gl-display-flex gl-align-items-center gl-mt-3">
-      <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty">
-        {{ __('Apply') }}
-      </gl-button>
-      <gl-link v-if="showReset" class="gl-ml-auto" @click="resetQuery">{{
-        __('Reset filters')
-      }}</gl-link>
-    </div>
+    <template v-if="showSidebar">
+      <status-filter />
+      <confidentiality-filter />
+      <div class="gl-display-flex gl-align-items-center gl-mt-3">
+        <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty">
+          {{ __('Apply') }}
+        </gl-button>
+        <gl-link v-if="showReset" class="gl-ml-auto" @click="resetQuery">{{
+          __('Reset filters')
+        }}</gl-link>
+      </div>
+    </template>
   </form>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/index.js b/app/assets/javascripts/search/sidebar/index.js
index 1414adcac27..c6b1257c4ef 100644
--- a/app/assets/javascripts/search/sidebar/index.js
+++ b/app/assets/javascripts/search/sidebar/index.js
@@ -4,6 +4,15 @@ import GlobalSearchSidebar from './components/app.vue';
 
 Vue.use(Translate);
 
+export const sidebarInitState = () => {
+  const el = document.getElementById('js-search-sidebar');
+
+  if (!el) return {};
+
+  const { navigation } = el.dataset;
+  return JSON.parse(navigation);
+};
+
 export const initSidebar = (store) => {
   const el = document.getElementById('js-search-sidebar');
 
diff --git a/app/assets/javascripts/search/topbar/components/app.vue b/app/assets/javascripts/search/topbar/components/app.vue
index f27dae8249d..d0fcbb0d83b 100644
--- a/app/assets/javascripts/search/topbar/components/app.vue
+++ b/app/assets/javascripts/search/topbar/components/app.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlSearchBoxByClick } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import GroupFilter from './group_filter.vue';
 import ProjectFilter from './project_filter.vue';
 
@@ -16,6 +18,7 @@ export default {
     GroupFilter,
     ProjectFilter,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     groupInitialData: {
       type: Object,
@@ -39,7 +42,10 @@ export default {
       },
     },
     showFilters() {
-      return !this.query.snippets || this.query.snippets === 'false';
+      return !parseBoolean(this.query.snippets);
+    },
+    hasVerticalNav() {
+      return this.glFeatures.searchPageVerticalNav;
     },
   },
   created() {
@@ -52,24 +58,27 @@ export default {
 </script>
 
 <template>
-  <section class="search-page-form gl-lg-display-flex gl-align-items-flex-end">
-    <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
-      <label>{{ $options.i18n.searchLabel }}</label>
-      <gl-search-box-by-click
-        id="dashboard_search"
-        v-model="search"
-        name="search"
-        :placeholder="$options.i18n.searchPlaceholder"
-        @submit="applyQuery"
-      />
-    </div>
-    <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
-      <label class="gl-display-block">{{ __('Group') }}</label>
-      <group-filter :initial-data="groupInitialData" />
-    </div>
-    <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
-      <label class="gl-display-block">{{ __('Project') }}</label>
-      <project-filter :initial-data="projectInitialData" />
+  <section class="search-page-form gl-lg-display-flex gl-flex-direction-column">
+    <div class="gl-lg-display-flex gl-flex-direction-row gl-align-items-flex-end">
+      <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
+        <label>{{ $options.i18n.searchLabel }}</label>
+        <gl-search-box-by-click
+          id="dashboard_search"
+          v-model="search"
+          name="search"
+          :placeholder="$options.i18n.searchPlaceholder"
+          @submit="applyQuery"
+        />
+      </div>
+      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
+        <label class="gl-display-block">{{ __('Group') }}</label>
+        <group-filter :initial-data="groupInitialData" />
+      </div>
+      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-2">
+        <label class="gl-display-block">{{ __('Project') }}</label>
+        <project-filter :initial-data="projectInitialData" />
+      </div>
     </div>
+    <hr v-if="hasVerticalNav" class="gl-mt-5 gl-mb-0 gl-border-gray-100" />
   </section>
 </template>