From 619f7ec8eff2999d8b9bef72e0345c4f390d031f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 2 Feb 2017 14:54:45 +0000
Subject: [PATCH] Show empty state if filter returns empty results
---
.../boards/components/modal/index.js.es6 | 3 ++-
.../boards/components/modal/list.js.es6 | 17 +++++++++++++++++
app/assets/stylesheets/pages/boards.scss | 6 ++++++
spec/features/boards/modal_filter_spec.rb | 12 ++++++++++++
4 files changed, 37 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 71f7f7eeb20..cab7d576194 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 d0901219216..3730c1ecaeb 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 506cb108249..0d336a34131 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 44daa50a006..62b0efdb51c 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
--
GitLab