Add search box to issue board switcher

ee/app/assets/javascripts/boards/components/boards_selector.vue

 <script>
 import $ from 'jquery';
 import { throttle } from 'underscore';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSearchBox } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import boardsStore from '~/boards/stores/boards_store';
 import BoardForm from './board_form.vue';
@@ -14,6 +14,7 @@ export default {
     Icon,
     BoardForm,
     GlLoadingIcon,
+    GlSearchBox,
   },
   props: {
     currentBoard: {
@@ -79,12 +80,18 @@ export default {
       contentClientHeight: 0,
       maxPosition: 0,
       store: boardsStore,
+      filterTerm: '',
     };
   },
   computed: {
     currentPage() {
       return this.state.currentPage;
     },
+    filteredBoards() {
+      return this.boards.filter(board =>
+        board.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
+      );
+    },
     reload: {
       get() {
         return this.state.reload;
@@ -123,6 +130,12 @@ export default {
     $('#js-add-list').on('hide.bs.dropdown', this.handleDropdownHide);
     $('.js-new-board-list-tabs').on('click', this.handleDropdownTabClick);
   },
+  mounted() {
+    // prevent dropdown from closing when search box is clicked
+    $(this.$el)
+      .find('.dropdown-header')
+      .on('click', event => event.stopPropagation());
+  },
   methods: {
     showPage(page) {
       this.state.reload = false;
@@ -207,6 +220,10 @@ export default {
           {{ board.name }} <icon name="chevron-down" />
         </button>
         <div class="dropdown-menu" :class="{ 'is-loading': loading }">
+          <div class="dropdown-header position-relative">
+            <gl-search-box v-if="!loading" ref="searchBox" v-model="filterTerm" />
+          </div>
+
           <div class="dropdown-content-faded-mask js-scroll-fade" :class="scrollFadeClass">
             <ul
               v-if="!loading"
@@ -214,7 +231,11 @@ export default {
               class="dropdown-list js-dropdown-list"
               @scroll.passive="throttledSetScrollFade"
             >
-              <li v-for="otherBoard in boards" :key="otherBoard.id" class="js-dropdown-item">
+              <li
+                v-for="otherBoard in filteredBoards"
+                :key="otherBoard.id"
+                class="js-dropdown-item"
+              >
                 <a :href="`${boardBaseUrl}/${otherBoard.id}`"> {{ otherBoard.name }} </a>
               </li>
               <li v-if="hasMissingBoards" class="small unclickable">

ee/changelogs/unreleased/winh-board-switcher-search-ee.yml

+---
+title: Add search field to issue board switcher
+merge_request: 8862
+author:
+type: changed