From c988de30c5528a785694dfe755843820d8111c8b Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 2 Oct 2017 12:44:07 -0700
Subject: [PATCH] Empty state for allocations search on task group detail

---
 ui/app/templates/jobs/job/task-group.hbs      |  7 +++++++
 ui/tests/acceptance/task-group-detail-test.js | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index fc39e5589..bb4a0ed93 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -90,6 +90,13 @@
               {{#p.last class="pagination-link"}} &gt;| {{/p.last}}
             </ul>
           </nav>
+        {{else}}
+          <div class="boxed-section-body">
+            <div class="empty-message">
+              <h3 class="empty-message-headline">No Matches</h3>
+              <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
+            </div>
+          </div>
         {{/list-pagination}}
       </div>
     </div>
diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js
index 800e57544..593412317 100644
--- a/ui/tests/acceptance/task-group-detail-test.js
+++ b/ui/tests/acceptance/task-group-detail-test.js
@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { click, findAll, currentURL, visit } from 'ember-native-dom-helpers';
+import { click, find, findAll, fillIn, currentURL, visit } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
 
@@ -41,6 +41,11 @@ moduleForAcceptance('Acceptance | task group detail', {
       taskGroup: taskGroups[1].name,
     });
 
+    // Set a static name to make the search test deterministic
+    server.db.allocations.forEach(alloc => {
+      alloc.name = 'aaaaa';
+    });
+
     visit(`/jobs/${job.id}/${taskGroup.name}`);
   },
 });
@@ -212,3 +217,12 @@ test('each allocation should show stats about the allocation, retrieved directly
     `Requests ${nodeStatsUrl}`
   );
 });
+
+test('when the allocation search has no matches, there is an empty message', function(assert) {
+  fillIn('.search-box input', 'zzzzzz');
+
+  andThen(() => {
+    assert.ok(find('.allocations .empty-message'));
+    assert.equal(find('.allocations .empty-message-headline').textContent, 'No Matches');
+  });
+});