Show empty state if filter returns empty results

4 files changed, 37 insertions, 1 deletions

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;
@@ -111,6 +115,19 @@
         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">
           <div
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