Skip to content

G
gitlab-ce
Commit bcc3873e authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

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
parents 735da7ec ea14d2bc
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 150 deletions
ee/app/assets/javascripts/boards/components/boards_selector.vue
View file @ bcc3873e
<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
View file @ bcc3873e
......@@ -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 0 → 100644
View file @ bcc3873e
---
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
View file @ bcc3873e
......@@ -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
View file @ bcc3873e
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
View file @ bcc3873e
......@@ -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 ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7