All files / app/assets/javascripts/search/topbar/components app.vue

100% Statements 11/11
83.33% Branches 5/6
100% Functions 7/7
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77  2x 2x 2x 2x                             18x         18x             18x     1x       18x       18x               63x                                                    
<script>
import { GlForm, GlSearchBoxByType, GlButton } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import GroupFilter from './group_filter.vue';
import ProjectFilter from './project_filter.vue';
 
export default {
  name: 'GlobalSearchTopbar',
  components: {
    GlForm,
    GlSearchBoxByType,
    GroupFilter,
    ProjectFilter,
    GlButton,
  },
  props: {
    groupInitialData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    projectInitialData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  computed: {
    ...mapState(['query']),
    search: {
      get() {
        return this.query ? this.query.search : '';
      },
      set(value) {
        this.setQuery({ key: 'search', value });
      },
    },
    showFilters() {
      return !this.query.snippets || this.query.snippets === 'false';
    },
  },
  created() {
    this.preloadStoredFrequentItems();
  },
  methods: {
    ...mapActions(['applyQuery', 'setQuery', 'preloadStoredFrequentItems']),
  },
};
</script>
 
<template>
  <gl-form class="search-page-form" @submit.prevent="applyQuery">
    <section class="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>{{ __('What are you searching for?') }}</label>
        <gl-search-box-by-type
          id="dashboard_search"
          v-model="search"
          name="search"
          :placeholder="__(`Search for projects, issues, etc.`)"
        />
      </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>
      <gl-button class="btn-search gl-lg-ml-2" category="primary" variant="confirm" type="submit"
        >{{ __('Search') }}
      </gl-button>
    </section>
  </gl-form>
</template>