creates empty state component: styles/template. adds support for column endpoint exception message. adds integration tests for empty-state component.

wherehows-web/app/components/empty-state.ts

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: 'empty-state',
+
+  classNames: ['empty-state'],
+
+  /**
+   * Default heading for the empty state component
+   * @type {string}
+   */
+  heading: 'No data found'
+});

wherehows-web/app/styles/components/_all.scss

@@ -10,6 +10,7 @@
 @import 'notifications/all';
 @import 'dataset-comments/all';
 @import 'comments/all';
+@import 'empty-state/all';
 
 @import 'nacho/nacho-button';
 @import 'nacho/nacho-global-search';

wherehows-web/app/styles/components/empty-state/_all.scss

@@ -0,0 +1 @@
+@import 'empty-state';

wherehows-web/app/styles/components/empty-state/_empty-state.scss

@@ -0,0 +1,22 @@
+.empty-state {
+  @include flex-column-center;
+  margin: 0 auto item-spacing(4);
+  padding-top: 230px;
+  max-width: 360px;
+  text-align: center;
+  color: set-color(black, dune);
+  background: url('https://static.licdn-ei.com/sc/h/a9jcbnnyn1jjtd2a1vnxd92m2') no-repeat top center;
+
+  &__header {
+    line-height: item-spacing(6);
+    font-weight: fw(normal, 2);
+    font-size: 26px;
+    margin: item-spacing(0 0 2 0);
+  }
+
+  &__sub-head {
+    line-height: item-spacing(5);
+    font-size: 16px;
+    margin: item-spacing(0 0 0 2);
+  }
+}

wherehows-web/app/templates/components/empty-state.hbs

@@ -0,0 +1,15 @@
+{{#if hasBlock}}
+
+  {{yield}}
+
+{{else}}
+
+  <strong class="empty-state__header">{{heading}}</strong>
+
+  {{#if subHead}}
+    <p class="empty-state__sub-head">
+      {{subHead}}
+    </p>
+  {{/if}}
+
+{{/if}}

wherehows-web/app/templates/datasets/dataset-compliance/-dataset-compliance-entities.hbs

@@ -20,22 +20,21 @@
   {{/if}}
 </section>
 
-{{#if compliancePolicyChangeSet.length}}
+<section class="compliance-entities-meta">
+  {{ember-selector
+    values=fieldReviewOptions
+    selected=(readonly fieldReviewOption)
+    selectionDidChange=(action "onFieldReviewChange")
+  }}
 
-  <section class="compliance-entities-meta">
-    {{ember-selector
-      values=fieldReviewOptions
-      selected=(readonly fieldReviewOption)
-      selectionDidChange=(action "onFieldReviewChange")
-    }}
-
-    {{#if changeSetReviewCount}}
-      <span class="dataset-compliance-fields__has-suggestions">
+  {{#if changeSetReviewCount}}
+    <span class="dataset-compliance-fields__has-suggestions">
           {{changeSetReviewCount}} fields to be reviewed
         </span>
-    {{/if}}
-  </section>
+  {{/if}}
+</section>
 
+{{#if filteredChangeSet.length}}
   {{#dataset-table
     class="nacho-table--stripped dataset-compliance-fields"
     fields=filteredChangeSet
@@ -197,4 +196,12 @@
     {{/table.body}}
 
   {{/dataset-table}}
+
+{{else}}
+
+  {{empty-state
+    heading="No fields found"
+    subHead="If you have a filter applied, setting this to the least restrictive option may yield more results."
+  }}
+
 {{/if}}

wherehows-web/app/utils/api/datasets/columns.ts

@@ -66,14 +66,16 @@ const columnDataTypesAndFieldNames = arrayMap(columnDataTypeAndFieldName);
  * @return {Promise<Array<IDatasetColumn>>}
  */
 const readDatasetColumns = async (id: number): Promise<Array<IDatasetColumn>> => {
-  const { status, columns } = await getJSON<IDatasetColumnsGetResponse>({ url: datasetColumnUrlById(id) });
+  const { status, columns, message = datasetColumnsException } = await getJSON<IDatasetColumnsGetResponse>({
+    url: datasetColumnUrlById(id)
+  });
 
   // Returns an empty list if the status is ok but the columns is falsey
   if (status === ApiStatus.OK) {
     return columns || [];
   }
 
-  throw new Error(datasetColumnsException);
+  throw new Error(message);
 };
 
 export { readDatasetColumns, columnDataTypesAndFieldNames, columnsWithHtmlComments };

wherehows-web/tests/integration/components/empty-state-test.js

@@ -0,0 +1,68 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('empty-state', 'Integration | Component | empty state', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{empty-state}}`);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    'No data found'
+  );
+
+  // Template block usage:
+  this.render(hbs`
+    {{#empty-state}}
+      template block text
+    {{/empty-state}}
+  `);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    'template block text'
+  );
+});
+
+test('it renders a heading', function(assert) {
+  const heading = 'Not found!';
+  assert.expect(1);
+
+  this.set('heading', heading);
+
+  this.render(hbs`{{empty-state heading=heading}}`);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    heading,
+    'shows the heading text'
+  );
+});
+
+test('it renders a subheading', function(assert) {
+  const subHeading = 'We could not find any results.';
+  assert.expect(1);
+
+  this.set('subHeading', subHeading);
+
+  this.render(hbs`{{empty-state subHead=subHeading}}`);
+
+  assert.equal(
+    this.$('.empty-state__sub-head')
+      .text()
+      .trim(),
+    subHeading,
+    'shows the subheading text'
+  );
+});