From 20d32fd10169a259e7788975a6032792c354c15e Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Mon, 9 Nov 2020 09:41:18 -0600
Subject: [PATCH] Add no matches empty state

---
 ui/app/templates/optimize.hbs        | 63 ++++++++++++++++------------
 ui/tests/acceptance/optimize-test.js |  8 +++-
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/ui/app/templates/optimize.hbs b/ui/app/templates/optimize.hbs
index c6f3c6135..a08e92d4a 100644
--- a/ui/app/templates/optimize.hbs
+++ b/ui/app/templates/optimize.hbs
@@ -40,35 +40,44 @@
         </div>
       </div>
 
-      {{outlet}}
+      {{#if this.filteredSummaries}}
+        {{outlet}}
 
-      <ListTable
-        @source={{this.filteredSummaries}} as |t|>
-        <t.head>
-          <th>Job</th>
-          <th>Recommended At</th>
-          <th># Allocs</th>
-          <th>CPU</th>
-          <th>Mem</th>
-          <th>Agg. CPU</th>
-          <th>Agg. Mem</th>
-        </t.head>
-        <t.body as |row|>
-          {{#if row.model.isProcessed}}
-            <Das::RecommendationRow
-              class="is-disabled"
-              @summary={{row.model}}
-            />
-          {{else}}
-            <Das::RecommendationRow
-              class="is-interactive {{if (eq row.model this.activeRecommendationSummary) 'is-active'}}"
-              @summary={{row.model}}
-              {{on "click" (fn this.transitionToSummary row.model)}}
-            />
-          {{/if}}
+        <ListTable
+          @source={{this.filteredSummaries}} as |t|>
+          <t.head>
+            <th>Job</th>
+            <th>Recommended At</th>
+            <th># Allocs</th>
+            <th>CPU</th>
+            <th>Mem</th>
+            <th>Agg. CPU</th>
+            <th>Agg. Mem</th>
+          </t.head>
+          <t.body as |row|>
+            {{#if row.model.isProcessed}}
+              <Das::RecommendationRow
+                class="is-disabled"
+                @summary={{row.model}}
+              />
+            {{else}}
+              <Das::RecommendationRow
+                class="is-interactive {{if (eq row.model this.activeRecommendationSummary) 'is-active'}}"
+                @summary={{row.model}}
+                {{on "click" (fn this.transitionToSummary row.model)}}
+              />
+            {{/if}}
 
-        </t.body>
-      </ListTable>
+          </t.body>
+        </ListTable>
+      {{else}}
+        <div class="empty-message" data-test-empty-recommendations>
+          <h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Matches</h3>
+          <p class="empty-message-body">
+            No recommendations match your current filter selection.
+          </p>
+        </div>
+      {{/if}}
     {{else}}
       <div class="empty-message" data-test-empty-recommendations>
         <h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Recommendations</h3>
diff --git a/ui/tests/acceptance/optimize-test.js b/ui/tests/acceptance/optimize-test.js
index 68469f7bb..3b5d90334 100644
--- a/ui/tests/acceptance/optimize-test.js
+++ b/ui/tests/acceptance/optimize-test.js
@@ -366,7 +366,7 @@ module('Acceptance | optimize search and facets', function(hooks) {
     window.localStorage.nomadTokenSecret = managementToken.secretId;
   });
 
-  test('search field narrows summary table results', async function(assert) {
+  test('search field narrows summary table results and displays a no matches message when there are none', async function(assert) {
     server.createList('job', 1, {
       name: 'oooooo',
       createRecommendations: true,
@@ -389,6 +389,12 @@ module('Acceptance | optimize search and facets', function(hooks) {
 
     assert.equal(Optimize.recommendationSummaries.length, 2);
     assert.ok(Optimize.recommendationSummaries[0].slug.startsWith('oooooo'));
+
+    await Optimize.search.fillIn('qqq');
+
+    assert.notOk(Optimize.card.isPresent);
+    assert.ok(Optimize.empty.isPresent);
+    assert.equal(Optimize.empty.headline, 'No Matches');
   });
 
   test('the optimize page has appropriate faceted search options', async function(assert) {