diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6 index 71f7f7eeb2024326141ebe9768880646c612f3ed..cab7d576194d326b70959a1df6a3dc073b7824e9 100644 --- a/app/assets/javascripts/boards/components/modal/index.js.es6 +++ b/app/assets/javascripts/boards/components/modal/index.js.es6 @@ -75,7 +75,7 @@ }, 500), loadIssues(clearIssues = false) { if (!this.showAddIssuesModal) return; - + const data = Object.assign({}, this.filter, { search: this.searchTerm, page: this.page, @@ -138,6 +138,7 @@ :label-path="labelPath"> </modal-header> <modal-list + :image="blankStateImage" :issue-link-base="issueLinkBase" :root-path="rootPath" v-if="!loading && showList"></modal-list> diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6 index d0901219216e02e880060c107b4f4b06c4217289..3730c1ecaeb2abab384aa55a4fc25df1c4bade78 100644 --- a/app/assets/javascripts/boards/components/modal/list.js.es6 +++ b/app/assets/javascripts/boards/components/modal/list.js.es6 @@ -14,6 +14,10 @@ type: String, required: true, }, + image: { + type: String, + required: true, + }, }, data() { return ModalStore.store; @@ -110,6 +114,19 @@ <section class="add-issues-list add-issues-list-columns" ref="list"> + <div + class="empty-state add-issues-empty-state-filter text-center" + v-if="issuesCount > 0 && issues.length === 0"> + <div + class="svg-content" + v-html="image"> + </div> + <div class="text-content"> + <h4> + There are no issues to show. + </h4> + </div> + </div> <div v-for="group in groupedIssues" class="add-issues-list-column"> diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 506cb108249ab1981724c2918a1fc07f744c0266..0d336a34131a89b500a1671cd4901ad2245dcb90 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -389,6 +389,12 @@ flex: 1; margin-top: 0; + &.add-issues-empty-state-filter { + -webkit-flex-direction: column; + flex-direction: column; + margin-top: 50px; + } + > .row { width: 100%; margin: auto 0; diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb index 44daa50a006d663a100d8b15de99650501f30315..62b0efdb51ccb7f8240316fb8f02260fdc39d112 100644 --- a/spec/features/boards/modal_filter_spec.rb +++ b/spec/features/boards/modal_filter_spec.rb @@ -16,6 +16,18 @@ describe 'Issue Boards add issue modal filtering', :feature, :js do login_as(user) end + it 'shows empty state when no results found' do + visit_board + + page.within('.add-issues-modal') do + find('.form-control').native.send_keys('testing empty state') + + wait_for_vue_resource + + expect(page).to have_content('There are no issues to show.') + end + end + it 'restores filters when closing' do visit_board