Skip to content
Snippets Groups Projects

Move search bar to top nav to test usage changes

Merged Move search bar to top nav to test usage changes
480341-move-search-bar-to-top-nav-to-test-usage-changes into master
Merged Tomas Bulva requested to merge 480341-move-search-bar-to-top-nav-to-test-usage-changes into master
Compare
and
Show latest version
3 files
+ 114
− 111
Compare changes
  • Side-by-side
  • Inline
Files
3
app/assets/javascripts/super_sidebar/components/global_search/components/global_search.vue
+ 112
− 108
@@ -382,119 +382,123 @@ export default {
@@ -382,119 +382,123 @@ export default {
</script>
</script>
<template>
<template>
<gl-modal
<div>
ref="modal"
search-modal
:modal-id="$options.SEARCH_MODAL_ID"
hide-header
<gl-modal
hide-header-close
ref="modal"
scrollable
:modal-id="$options.SEARCH_MODAL_ID"
:title="$options.i18n.COMMAND_PALETTE"
hide-header
body-class="!gl-p-0 !gl-min-h-26"
hide-header-close
modal-class="global-search-modal"
scrollable
:centered="false"
:title="$options.i18n.COMMAND_PALETTE"
@shown="onSearchModalShown"
body-class="!gl-p-0 !gl-min-h-26"
@hide="onSearchModalHidden"
modal-class="global-search-modal"
>
:centered="false"
<form
@shown="onSearchModalShown"
role="search"
@hide="onSearchModalHidden"
:aria-label="$options.i18n.SEARCH_OR_COMMAND_MODE_PLACEHOLDER"
class="gl-relative gl-w-full gl-rounded-lg gl-pb-0"
>
>
<div class="input-box-wrapper gl-border-b -gl-mb-1 gl-bg-white gl-p-2">
<form
<gl-search-box-by-type
role="search"
id="search"
:aria-label="$options.i18n.SEARCH_OR_COMMAND_MODE_PLACEHOLDER"
ref="searchInput"
class="gl-relative gl-w-full gl-rounded-lg gl-pb-0"
v-model="searchText"
>
role="searchbox"
<div class="input-box-wrapper gl-border-b -gl-mb-1 gl-bg-white gl-p-2">
data-testid="global-search-input"
<gl-search-box-by-type
autocomplete="off"
id="search"
:placeholder="$options.i18n.SEARCH_OR_COMMAND_MODE_PLACEHOLDER"
ref="searchInput"
:aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
v-model="searchText"
borderless
role="searchbox"
@input="getAutocompleteOptions"
data-testid="global-search-input"
@keydown="onKeydown"
autocomplete="off"
/>
:placeholder="$options.i18n.SEARCH_OR_COMMAND_MODE_PLACEHOLDER"
<span :id="$options.SEARCH_INPUT_DESCRIPTION" role="region" class="gl-sr-only">
:aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
{{ $options.i18n.SEARCH_DESCRIBED_BY_WITH_RESULTS }}
borderless
 
@input="getAutocompleteOptions"
 
@keydown="onKeydown"
 
/>
 
<span :id="$options.SEARCH_INPUT_DESCRIPTION" role="region" class="gl-sr-only">
 
{{ $options.i18n.SEARCH_DESCRIBED_BY_WITH_RESULTS }}
 
</span>
 
 
<fake-search-input
 
v-if="isCommandMode"
 
:user-input="commandPaletteQuery"
 
:scope="commandChar"
 
class="fake-input-wrapper"
 
/>
 
</div>
 
<span
 
role="region"
 
:data-testid="$options.SEARCH_RESULTS_DESCRIPTION"
 
class="gl-sr-only"
 
aria-live="polite"
 
aria-atomic="true"
 
>
 
{{ searchResultsDescription }}
</span>
</span>
 
<div
 
ref="resultsList"
 
class="global-search-results gl-flex gl-w-full gl-grow gl-flex-col gl-overflow-hidden"
 
@keydown="onKeydown"
 
>
 
<scroll-scrim class="gl-grow !gl-overflow-x-hidden" data-testid="nav-container">
 
<div class="gl-pb-3">
 
<command-palette-items
 
v-if="isCommandMode"
 
:search-query="commandPaletteQuery"
 
:handle="commandChar"
 
@updated="highlightFirstCommand"
 
/>
<fake-search-input
<global-search-default-items v-else-if="showDefaultItems" />
v-if="isCommandMode"
:user-input="commandPaletteQuery"
<template v-else>
:scope="commandChar"
<global-search-autocomplete-items />
class="fake-input-wrapper"
<global-search-scoped-items v-if="showScopedSearchItems" />
/>
</template>
</div>
</div>
<span
</scroll-scrim>
role="region"
</div>
:data-testid="$options.SEARCH_RESULTS_DESCRIPTION"
<template v-if="searchContext">
class="gl-sr-only"
<input
aria-live="polite"
v-if="searchContext.group"
aria-atomic="true"
type="hidden"
>
name="group_id"
{{ searchResultsDescription }}
:value="searchContext.group.id"
</span>
/>
<div
<input
ref="resultsList"
v-if="searchContext.project"
class="global-search-results gl-flex gl-w-full gl-grow gl-flex-col gl-overflow-hidden"
type="hidden"
@keydown="onKeydown"
name="project_id"
>
:value="searchContext.project.id"
<scroll-scrim class="gl-grow !gl-overflow-x-hidden" data-testid="nav-container">
/>
<div class="gl-pb-3">
<command-palette-items
v-if="isCommandMode"
:search-query="commandPaletteQuery"
:handle="commandChar"
@updated="highlightFirstCommand"
/>
<global-search-default-items v-else-if="showDefaultItems" />
<template v-else>
<global-search-autocomplete-items />
<global-search-scoped-items v-if="showScopedSearchItems" />
</template>
</div>
</scroll-scrim>
</div>
<template v-if="searchContext">
<input
v-if="searchContext.group"
type="hidden"
name="group_id"
:value="searchContext.group.id"
/>
<input
v-if="searchContext.project"
type="hidden"
name="project_id"
:value="searchContext.project.id"
/>
<template v-if="searchContext.group || searchContext.project">
<input type="hidden" name="scope" :value="searchContext.scope" />
<input type="hidden" name="search_code" :value="searchContext.code_search" />
</template>
<input type="hidden" name="snippets" :value="searchContext.for_snippets" />
<template v-if="searchContext.group || searchContext.project">
<input type="hidden" name="repository_ref" :value="searchContext.ref" />
<input type="hidden" name="scope" :value="searchContext.scope" />
 
<input type="hidden" name="search_code" :value="searchContext.code_search" />
 
</template>
 
 
<input type="hidden" name="snippets" :value="searchContext.for_snippets" />
 
<input type="hidden" name="repository_ref" :value="searchContext.ref" />
 
</template>
 
</form>
 
<template #modal-footer>
 
<div class="gl-m-0 gl-flex gl-grow gl-justify-between gl-align-middle">
 
<span class="gl-text-gray-500"
 
>{{ $options.i18n.COMMAND_PALETTE_TIP }} <command-palette-lottery
 
/></span>
 
<span
 
><commands-overview-dropdown
 
ref="commandDropdown"
 
:items="commandPaletteDropdownItems"
 
@selected="handleCommandSelection"
 
@hidden="handleClosing"
 
/></span>
 
</div>
</template>
</template>
</form>
</gl-modal>
<template #modal-footer>
</div>
<div class="gl-m-0 gl-flex gl-grow gl-justify-between gl-align-middle">
<span class="gl-text-gray-500"
>{{ $options.i18n.COMMAND_PALETTE_TIP }} <command-palette-lottery
/></span>
<span
><commands-overview-dropdown
ref="commandDropdown"
:items="commandPaletteDropdownItems"
@selected="handleCommandSelection"
@hidden="handleClosing"
/></span>
</div>
</template>
</gl-modal>
</template>
</template>
<style scoped>
<style scoped>