Merge branch 'winh-issue-board-switcher-gitlab-ui-ee' into 'master'

Convert issue board switcher to gitlab-ui dropdown components

Closes #9088 and #8855

See merge request gitlab-org/gitlab-ee!8591

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

 <script>
 import $ from 'jquery';
 import { throttle } from 'underscore';
-import { GlLoadingIcon, GlSearchBox } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlSearchBox,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownHeader,
+  GlDropdownItem,
+} from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import boardsStore from '~/boards/stores/boards_store';
 import BoardForm from './board_form.vue';
@@ -15,6 +22,10 @@ export default {
     BoardForm,
     GlLoadingIcon,
     GlSearchBox,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownHeader,
+    GlDropdownItem,
   },
   props: {
     currentBoard: {
@@ -68,7 +79,6 @@ export default {
   },
   data() {
     return {
-      open: false,
       loading: true,
       hasScrollFade: false,
       hasAssigneesListMounted: false,
@@ -134,46 +144,30 @@ 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;
       this.state.currentPage = page;
     },
-    toggleDropdown() {
-      this.open = !this.open;
-
-      if (this.open && !this.loading) {
-        this.$nextTick(this.focusSearchInput);
-      }
-    },
     loadBoards(toggleDropdown = true) {
-      if (toggleDropdown) {
-        this.toggleDropdown();
+      if (toggleDropdown && this.boards.length > 0) {
+        return;
       }
 
-      if (this.open && !this.boards.length) {
-        gl.boardService
-          .allBoards()
-          .then(res => res.data)
-          .then(json => {
-            this.loading = false;
-            this.boards = json;
-          })
-          .then(() => this.$nextTick()) // Wait for boards list in DOM
-          .then(() => {
-            this.setScrollFade();
-            this.focusSearchInput();
-          })
-          .catch(() => {
-            this.loading = false;
-          });
-      }
+      gl.boardService
+        .allBoards()
+        .then(res => res.data)
+        .then(json => {
+          this.loading = false;
+          this.boards = json;
+        })
+        .then(() => this.$nextTick()) // Wait for boards list in DOM
+        .then(() => {
+          this.setScrollFade();
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     isScrolledUp() {
       const { content } = this.$refs;
@@ -214,10 +208,6 @@ export default {
         this.hasMilestoneListMounted = true;
       }
     },
-    focusSearchInput() {
-      const { searchBox } = this.$refs;
-      searchBox.$el.querySelector('input').focus();
-    },
   },
 };
 </script>
@@ -225,69 +215,76 @@ export default {
 <template>
   <div class="boards-switcher js-boards-selector append-right-10">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <div class="dropdown">
-        <button
-          class="dropdown-menu-toggle js-dropdown-toggle"
-          type="button"
-          data-toggle="dropdown"
-          @click="loadBoards"
-        >
-          {{ 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" />
+      <gl-dropdown
+        toggle-class="dropdown-menu-toggle js-dropdown-toggle"
+        menu-class="flex-column dropdown-extended-height"
+        :text="board.name"
+        @show="loadBoards"
+      >
+        <div>
+          <div class="dropdown-title mb-0" @mousedown.prevent>
+            {{ s__('IssueBoards|Switch board') }}
           </div>
+        </div>
 
-          <div class="dropdown-content-faded-mask js-scroll-fade" :class="scrollFadeClass">
-            <ul
-              v-if="!loading"
-              ref="content"
-              class="dropdown-list js-dropdown-list"
-              @scroll.passive="throttledSetScrollFade"
-            >
-              <li
-                v-show="filteredBoards.length === 0"
-                class="dropdown-item no-pointer-events text-secondary"
-              >
-                {{ s__('IssueBoards|No matching boards found') }}
-              </li>
+        <gl-dropdown-header class="mt-0">
+          <gl-search-box ref="searchBox" v-model="filterTerm" />
+        </gl-dropdown-header>
 
-              <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">
-                {{
-                  s__(
-                    'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
-                  )
-                }}
-              </li>
-            </ul>
-          </div>
+        <div
+          v-if="!loading"
+          ref="content"
+          class="dropdown-content flex-fill"
+          @scroll.passive="throttledSetScrollFade"
+        >
+          <gl-dropdown-item
+            v-show="filteredBoards.length === 0"
+            class="no-pointer-events text-secondary"
+          >
+            {{ s__('IssueBoards|No matching boards found') }}
+          </gl-dropdown-item>
 
-          <gl-loading-icon v-if="loading" class="dropdown-loading" />
+          <gl-dropdown-item
+            v-for="otherBoard in filteredBoards"
+            :key="otherBoard.id"
+            class="js-dropdown-item"
+            :href="`${boardBaseUrl}/${otherBoard.id}`"
+          >
+            {{ otherBoard.name }}
+          </gl-dropdown-item>
+          <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+            {{
+              s__(
+                'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
+              )
+            }}
+          </gl-dropdown-item>
+        </div>
 
-          <div v-if="canAdminBoard" class="dropdown-footer">
-            <ul class="dropdown-footer-list">
-              <li v-if="multipleIssueBoardsAvailable">
-                <button type="button" @click.prevent="showPage('new')">
-                  {{ s__('IssueBoards|Create new board') }}
-                </button>
-              </li>
-              <li v-if="showDelete">
-                <button type="button" class="text-danger" @click.prevent="showPage('delete')">
-                  {{ s__('IssueBoards|Delete board') }}
-                </button>
-              </li>
-            </ul>
-          </div>
+        <div
+          v-show="filteredBoards.length > 0"
+          class="dropdown-content-faded-mask"
+          :class="scrollFadeClass"
+        ></div>
+
+        <gl-loading-icon v-if="loading" class="dropdown-loading" />
+
+        <div v-if="canAdminBoard">
+          <gl-dropdown-divider />
+
+          <gl-dropdown-item v-if="multipleIssueBoardsAvailable" @click.prevent="showPage('new')">
+            {{ s__('IssueBoards|Create new board') }}
+          </gl-dropdown-item>
+
+          <gl-dropdown-item
+            v-if="showDelete"
+            class="text-danger"
+            @click.prevent="showPage('delete')"
+          >
+            {{ s__('IssueBoards|Delete board') }}
+          </gl-dropdown-item>
         </div>
-      </div>
+      </gl-dropdown>
 
       <board-form
         v-if="currentPage"

ee/app/assets/stylesheets/pages/boards.scss

@@ -104,10 +104,10 @@
 }
 
 .boards-switcher {
-  .dropdown-content-faded-mask .dropdown-list {
-    // the following is no longer necessary after https://gitlab.com/gitlab-org/gitlab-ee/issues/8855
-    $search-box-height: 50px;
-    max-height: calc(#{$dropdown-max-height} - #{$search-box-height});
+  .dropdown-menu.show {
+    // we cannot use d-flex from Bootstrap because of !important
+    // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38
+    display: flex;
   }
 
   // the following is a workaround until we have it fixed in gitlab-ui

ee/changelogs/unreleased/winh-issue-board-switcher-gitlab-ui-ee.yml

+---
+title: Add keyboard navigation to issue board switcher and remove duplicate scroll
+  bar
+merge_request: 8591
+author:
+type: fixed

ee/spec/features/boards/multiple_boards_spec.rb

@@ -7,6 +7,8 @@ describe 'Multiple Issue Boards', :js do
   let!(:board)    { create(:board, project: project) }
   let!(:board2)   { create(:board, project: project) }
 
+  dropdown_selector = '.js-boards-selector .dropdown-menu'
+
   context 'with multiple issue boards enabled' do
     context 'authorized user' do
       before do
@@ -27,7 +29,7 @@ describe 'Multiple Issue Boards', :js do
       it 'shows a list of boards' do
         click_button board.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           expect(page).to have_content(board.name)
           expect(page).to have_content(board2.name)
         end
@@ -36,7 +38,7 @@ describe 'Multiple Issue Boards', :js do
       it 'switches current board' do
         click_button board.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           click_link board2.name
         end
 
@@ -50,7 +52,7 @@ describe 'Multiple Issue Boards', :js do
       it 'creates new board without detailed configuration' do
         click_button board.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           click_button 'Create new board'
         end
 
@@ -66,7 +68,7 @@ describe 'Multiple Issue Boards', :js do
 
         wait_for_requests
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           click_button 'Delete board'
         end
 
@@ -74,7 +76,7 @@ describe 'Multiple Issue Boards', :js do
         click_button 'Delete'
 
         click_button board2.name
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           expect(page).not_to have_content(board.name)
           expect(page).to have_content(board2.name)
         end
@@ -83,7 +85,7 @@ describe 'Multiple Issue Boards', :js do
       it 'adds a list to the none default board' do
         click_button board.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           click_link board2.name
         end
 
@@ -107,7 +109,7 @@ describe 'Multiple Issue Boards', :js do
 
         click_button board2.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           click_link board.name
         end
 
@@ -136,7 +138,7 @@ describe 'Multiple Issue Boards', :js do
       it 'does not show action links' do
         click_button board.name
 
-        page.within('.dropdown-menu') do
+        page.within(dropdown_selector) do
           expect(page).not_to have_content('Create new board')
           expect(page).not_to have_content('Delete board')
         end
@@ -158,7 +160,7 @@ describe 'Multiple Issue Boards', :js do
 
       click_button board.name
 
-      page.within('.dropdown-menu') do
+      page.within(dropdown_selector) do
         expect(page).not_to have_content('Create new board')
         expect(page).not_to have_content('Delete board')
       end

ee/spec/javascripts/boards/components/boards_selector_spec.js

 import Vue from 'vue';
 import BoardService from 'ee/boards/services/board_service';
 import BoardsSelector from 'ee/boards/components/boards_selector.vue';
-import setTimeoutPromiseHelper from 'spec/helpers/set_timeout_promise_helper';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { TEST_HOST } from 'spec/test_constants';
 
 const throttleDuration = 1;
 
-function waitForScroll() {
-  return Vue.nextTick()
-    .then(() => setTimeoutPromiseHelper(throttleDuration))
-    .then(() => Vue.nextTick());
-}
-
 describe('BoardsSelector', () => {
   let vm;
-  let scrollContainer;
-  let scrollFade;
   let boardServiceResponse;
   const boards = new Array(20).fill().map((board, id) => {
     const name = `board${id}`;
@@ -75,13 +66,6 @@ describe('BoardsSelector', () => {
 
     boardServiceResponse
       .then(() => vm.$nextTick())
-      .then(() => {
-        scrollFade = vm.$el.querySelector('.js-scroll-fade');
-        scrollContainer = scrollFade.querySelector('.js-dropdown-list');
-
-        scrollContainer.style.maxHeight = '100px';
-        scrollContainer.style.overflowY = 'scroll';
-      })
       .then(done)
       .catch(done.fail);
   });
@@ -91,29 +75,6 @@ describe('BoardsSelector', () => {
     window.gl.boardService = undefined;
   });
 
-  it('shows the scroll fade if isScrolledUp', done => {
-    vm.scrollFadeInitialized = false;
-    scrollContainer.scrollTop = 0;
-
-    waitForScroll()
-      .then(() => {
-        expect(scrollFade.classList.contains('fade-out')).toEqual(false);
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
-  it('hides the scroll fade if not isScrolledUp', done => {
-    scrollContainer.scrollTop = scrollContainer.scrollHeight;
-
-    waitForScroll()
-      .then(() => {
-        expect(scrollFade.classList.contains('fade-out')).toEqual(true);
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
   describe('filtering', () => {
     const fillSearchBox = filterTerm => {
       const { searchBox } = vm.$refs;
@@ -122,10 +83,15 @@ describe('BoardsSelector', () => {
       searchBoxInput.dispatchEvent(new Event('input'));
     };
 
-    it('shows all boards without filtering', () => {
-      const dropdownItemCount = vm.$el.querySelectorAll('.js-dropdown-item');
+    it('shows all boards without filtering', done => {
+      vm.$nextTick()
+        .then(() => {
+          const dropdownItemCount = vm.$el.querySelectorAll('.js-dropdown-item');
 
-      expect(dropdownItemCount.length).toBe(boards.length);
+          expect(dropdownItemCount.length).toBe(boards.length);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('shows only matching boards when filtering', done => {

locale/gitlab.pot

@@ -5025,6 +5025,9 @@ msgstr ""
 msgid "IssueBoards|Some of your boards are hidden, activate a license to see them again."
 msgstr ""
 
+msgid "IssueBoards|Switch board"
+msgstr ""
+
 msgid "Issues"
 msgstr ""