diff options
Diffstat (limited to 'app/assets/javascripts/search/topbar')
4 files changed, 80 insertions, 16 deletions
diff --git a/app/assets/javascripts/search/topbar/components/app.vue b/app/assets/javascripts/search/topbar/components/app.vue index d0fcbb0d83b..0629bea3239 100644 --- a/app/assets/javascripts/search/topbar/components/app.vue +++ b/app/assets/javascripts/search/topbar/components/app.vue @@ -1,9 +1,11 @@ <script> -import { GlSearchBoxByClick } from '@gitlab/ui'; +import { GlSearchBoxByClick, GlButton } 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 MarkdownDrawer from '~/vue_shared/components/markdown_drawer/markdown_drawer.vue'; +import { SYNTAX_OPTIONS_DOCUMENT } from '../constants'; import GroupFilter from './group_filter.vue'; import ProjectFilter from './project_filter.vue'; @@ -12,24 +14,45 @@ export default { i18n: { searchPlaceholder: s__(`GlobalSearch|Search for projects, issues, etc.`), searchLabel: s__(`GlobalSearch|What are you searching for?`), + documentFetchErrorMessage: s__( + 'GlobalSearch|There was an error fetching the "Syntax Options" document.', + ), + searchFieldLabel: s__('GlobalSearch|What are you searching for?'), + syntaxOptionsLabel: s__('GlobalSearch|Syntax options'), + groupFieldLabel: s__('GlobalSearch|Group'), + projectFieldLabel: s__('GlobalSearch|Project'), + searchButtonLabel: s__('GlobalSearch|Search'), + closeButtonLabel: s__('GlobalSearch|Close'), }, components: { + GlButton, GlSearchBoxByClick, GroupFilter, ProjectFilter, + MarkdownDrawer, }, mixins: [glFeatureFlagsMixin()], props: { - groupInitialData: { + groupInitialJson: { type: Object, required: false, default: () => ({}), }, - projectInitialData: { + projectInitialJson: { type: Object, required: false, default: () => ({}), }, + elasticsearchEnabled: { + type: Boolean, + required: false, + default: false, + }, + defaultBranchName: { + type: String, + required: false, + default: '', + }, }, computed: { ...mapState(['query']), @@ -44,16 +67,26 @@ export default { showFilters() { return !parseBoolean(this.query.snippets); }, + showSyntaxOptions() { + return this.elasticsearchEnabled && this.isDefaultBranch; + }, hasVerticalNav() { return this.glFeatures.searchPageVerticalNav; }, + isDefaultBranch() { + return !this.query.repository_ref || this.query.repository_ref === this.defaultBranchName; + }, }, created() { this.preloadStoredFrequentItems(); }, methods: { ...mapActions(['applyQuery', 'setQuery', 'preloadStoredFrequentItems']), + onToggleDrawer() { + this.$refs.markdownDrawer.toggleDrawer(); + }, }, + SYNTAX_OPTIONS_DOCUMENT, }; </script> @@ -61,7 +94,25 @@ export default { <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> + <div + class="gl-sm-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mb-4 gl-md-mb-0" + > + <label>{{ $options.i18n.searchLabel }}</label> + <template v-if="showSyntaxOptions"> + <gl-button + category="tertiary" + variant="link" + size="small" + button-text-classes="gl-font-sm!" + @click="onToggleDrawer" + >{{ $options.i18n.syntaxOptionsLabel }} + </gl-button> + <markdown-drawer + ref="markdownDrawer" + :document-path="$options.SYNTAX_OPTIONS_DOCUMENT" + /> + </template> + </div> <gl-search-box-by-click id="dashboard_search" v-model="search" @@ -70,13 +121,13 @@ export default { @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 v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-3"> + <label class="gl-display-block">{{ $options.i18n.groupFieldLabel }}</label> + <group-filter :initial-data="groupInitialJson" /> </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 v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-ml-3"> + <label class="gl-display-block">{{ $options.i18n.projectFieldLabel }}</label> + <project-filter :initial-data="projectInitialJson" /> </div> </div> <hr v-if="hasVerticalNav" class="gl-mt-5 gl-mb-0 gl-border-gray-100" /> diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue index 70156142365..c1e33df3c42 100644 --- a/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue +++ b/app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue @@ -1,5 +1,6 @@ <script> -import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import { GlDropdownItem, GlAvatar } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; diff --git a/app/assets/javascripts/search/topbar/constants.js b/app/assets/javascripts/search/topbar/constants.js index dc040fdef34..121c15199dd 100644 --- a/app/assets/javascripts/search/topbar/constants.js +++ b/app/assets/javascripts/search/topbar/constants.js @@ -19,3 +19,5 @@ export const PROJECT_DATA = { name: 'name', fullName: 'name_with_namespace', }; + +export const SYNTAX_OPTIONS_DOCUMENT = 'drawers/user/search/advanced_search.md'; diff --git a/app/assets/javascripts/search/topbar/index.js b/app/assets/javascripts/search/topbar/index.js index 87316e10e8d..d6e16085c28 100644 --- a/app/assets/javascripts/search/topbar/index.js +++ b/app/assets/javascripts/search/topbar/index.js @@ -11,10 +11,18 @@ export const initTopbar = (store) => { return false; } - let { groupInitialData, projectInitialData } = el.dataset; + const { + groupInitialJson, + projectInitialJson, + elasticsearchEnabled, + defaultBranchName, + } = el.dataset; - groupInitialData = JSON.parse(groupInitialData); - projectInitialData = JSON.parse(projectInitialData); + const groupInitialJsonParsed = JSON.parse(groupInitialJson); + const projectInitialJsonParsed = JSON.parse(projectInitialJson); + const elasticsearchEnabledParsed = elasticsearchEnabled + ? JSON.parse(elasticsearchEnabled) + : false; return new Vue({ el, @@ -22,8 +30,10 @@ export const initTopbar = (store) => { render(createElement) { return createElement(GlobalSearchTopbar, { props: { - groupInitialData, - projectInitialData, + groupInitialJson: groupInitialJsonParsed, + projectInitialJson: projectInitialJsonParsed, + elasticsearchEnabled: elasticsearchEnabledParsed, + defaultBranchName, }, }); }, |