diff options
Diffstat (limited to 'app/assets/javascripts/search')
-rw-r--r-- | app/assets/javascripts/search/index.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/search/sidebar/components/app.vue | 25 | ||||
-rw-r--r-- | app/assets/javascripts/search/sidebar/index.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/search/topbar/components/app.vue | 47 |
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> |