pass emptyActions through list view component and render into EmptyState

ui/app/components/empty-action-namespaces.js

@@ -0,0 +1,2 @@
+import OuterHTML from './outer-html';
+export default OuterHTML.extend();

ui/app/components/list-view.js

@@ -6,6 +6,9 @@ export default Component.extend({
   tagName: '',
   items: null,
   itemNoun: 'item',
+  // the dasherized name of a component to render
+  // in the EmptyState component if there are no items in items.length
+  emptyActions: '',
 
   emptyTitle: computed('itemNoun', function() {
     let items = pluralize(this.get('itemNoun'));

ui/app/templates/components/empty-action-namespaces.hbs

@@ -0,0 +1,7 @@
+{{#link-to "vault.cluster.access.namespaces.create"}}
+  Create namespace
+{{/link-to}}
+
+<LearnLink @path="/vault/security/namespaces">
+  Learn More
+</LearnLink>

ui/app/templates/components/empty-state.hbs

@@ -9,9 +9,13 @@
     </p>
     {{/if}}
     {{#if hasBlock}}
-    <div class="empty-state-actions">
+      <div class="empty-state-actions">
-      {{yield}}
+        {{yield}}
-    </div>
+      </div>
+    {{else if emptyActions}}
+      <div class="empty-state-actions">
+        {{component emptyActions}}
+      </div>
     {{/if}}
   </div>
 </div>

ui/app/templates/components/list-view.hbs

@@ -6,7 +6,8 @@
   </div>
 {{else}}
   <EmptyState
-    @title={{emptyTitle}}
+    @title={{this.emptyTitle}}
-    @message={{emptyMessage}}
+    @message={{this.emptyMessage}}
+    @emptyActions={{this.emptyActions}}
   />
 {{/if}}

ui/app/templates/vault/cluster/access/namespaces/index.hbs

@@ -12,7 +12,7 @@
       {{/link-to}}
     </p.levelRight>
   </PageHeader>
-  <ListView @items={{model}} @itemNoun="namespace" as |list|>
+  <ListView @items={{model}} @itemNoun="namespace" @emptyActions="empty-action-namespaces" as |list|>
     <ListItem as |Item|>
       <Item.content>
         {{list.item.id}}