Add empty states to the job list page

ui/app/components/search-box.js

@@ -12,7 +12,7 @@ export default Component.extend({
   // Used to throttle sets to searchTerm
   debounce: 150,
 
-  classNames: ['field', 'has-addons'],
+  classNames: ['search-box', 'field', 'has-addons'],
 
   actions: {
     setSearchTerm(e) {

ui/app/styles/components.scss

@@ -1,6 +1,7 @@
 @import "./components/badge";
 @import "./components/boxed-section";
 @import "./components/breadcrumbs";
+@import "./components/empty-message";
 @import "./components/gutter";
 @import "./components/inline-definitions";
 @import "./components/job-diff";

ui/app/styles/components/empty-message.scss

@@ -0,0 +1,21 @@
+.empty-message {
+  padding: 1.5rem;
+  background: $white-ter;
+  border-radius: $radius;
+
+  .empty-message-headline {
+    font-size: $size-3;
+    color: $grey;
+    text-align: center;
+  }
+
+  .empty-message-body {
+    padding: 0 20%;
+    text-align: center;
+    color: $grey;
+
+    strong {
+      color: $grey;
+    }
+  }
+}

ui/app/templates/jobs/index.hbs

@@ -3,9 +3,11 @@
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
-    <div class="content">
-      <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
-    </div>
+    {{#if model.length}}
+      <div class="content">
+        <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
+      </div>
+    {{/if}}
     {{#list-pagination
       source=sortedJobs
       size=pageSize
@@ -37,6 +39,18 @@
           <ul class="pagination-list"></ul>
         </nav>
       </div>
+    {{else}}
+      <div class="empty-message">
+        {{#if (eq model.length 0)}}
+          <h3 class="empty-message-headline">No Jobs</h3>
+          <p class="empty-message-body">
+            There are currently no visible jobs in the cluster. It could be that the cluster is empty. It could also mean {{#link-to "settings.tokens"}}you don't have access to see any jobs{{/link-to}}.
+          </p>
+        {{else if searchTerm}}
+          <h3 class="empty-message-headline">No Matches</h3>
+          <p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
+        {{/if}}
+      </div>
     {{/list-pagination}}
   </section>
 {{/gutter-menu}}

ui/tests/acceptance/jobs-list-test.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { click, findAll, currentURL, visit } from 'ember-native-dom-helpers';
+import { click, find, findAll, currentURL, visit, fillIn } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
 
@@ -80,3 +80,30 @@ test('each job row should link to the corresponding job', function(assert) {
     assert.equal(currentURL(), `/jobs/${job.id}`);
   });
 });
+
+test('when there are no jobs, there is an empty message', function(assert) {
+  visit('/jobs');
+
+  andThen(() => {
+    assert.ok(find('.empty-message'));
+    assert.equal(find('.empty-message-headline').textContent, 'No Jobs');
+  });
+});
+
+test('when there are jobs, but no matches for a search result, there is an empty message', function(
+  assert
+) {
+  server.create('job', { name: 'cat 1' });
+  server.create('job', { name: 'cat 2' });
+
+  visit('/jobs');
+
+  andThen(() => {
+    fillIn('.search-box input', 'dog');
+  });
+
+  andThen(() => {
+    assert.ok(find('.empty-message'));
+    assert.equal(find('.empty-message-headline').textContent, 'No Matches');
+  });
+});