1 files changed, 61 insertions, 10 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" />