Merge pull request #52 from hashicorp/integrate-table-component

Integrate rose/table into host catalogs overview page

addons/rose/addon/styles/rose/components/layout/_global.scss

@@ -13,6 +13,7 @@
 
   .rose-layout-global-body {
     grid-area: body;
+    margin: 0 sizing.rems(m);
   }
 
   .rose-layout-global-header {

ui/core/app/styles/app.scss

@@ -19,14 +19,8 @@
   }
 }
 
-.projects-overview {
-  margin: sizing.rems(l);
-}
-
 .project-overview,
 .project-new {
-  margin: sizing.rems(l);
-
   .breadcrumbs,
   .breadcrumbs a {
     color: #6f7682;

ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs

@@ -1,7 +1,6 @@
-<Rose::Layout::Page as |page|>
-
+<Rose::Layout::Page class="host-catalogs" as |page|>
   <page.header>
-    <h2>{{t "resources.host-catalogs"}}</h2>
+    <h2>{{t 'resources.host-catalogs'}}</h2>
   </page.header>
 
   <page.actions>
@@ -13,18 +12,33 @@
   </page.actions>
 
   <page.body>
-    <ul>
-      {{#each @model as |hostCatalog|}}
-        <li>
-          <LinkTo
-            @route="orgs.org.projects.project.host-catalogs.host-catalog"
-            @model={{hostCatalog}}
-          >
-            {{hostCatalog.name}}
-          </LinkTo>
-        </li>
-      {{/each}}
-    </ul>
+    <p>{{t 'descriptions.host-catalogs'}}</p>
+
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell>{{t 'form.label.name'}}</row.cell>
+          <row.cell>{{t 'form.label.type'}}</row.cell>
+          <row.cell>{{t 'form.label.description'}}</row.cell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each @model as |hostCatalog|}}
+          <body.row as |row|>
+            <row.cell>
+              <LinkTo
+                @route="orgs.org.projects.project.host-catalogs.host-catalog"
+                @model={{hostCatalog}}
+              >
+                {{hostCatalog.name}}
+              </LinkTo>
+            </row.cell>
+            <row.cell>{{hostCatalog.type}}</row.cell>
+            <row.cell>{{hostCatalog.description}}</row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
   </page.body>
 
 </Rose::Layout::Page>

ui/core/tests/acceptance/host-catalogs-test.js

@@ -23,7 +23,7 @@ module('Acceptance | host catalogs', function(hooks) {
     this.server.createList('project', 1);
     this.server.createList('host-catalog', 1);
     await visit('/orgs/1/projects/1/host-catalogs');
-    await click('main ul li:first-child a');
+    await click('main .rose-table-cell:first-child a');
     await a11yAudit();
     assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1');
   });

ui/core/translations/en-us.yaml

@@ -12,6 +12,8 @@ titles:
   new: New
   overview: Overview
   settings: Settings
+descriptions:
+  host-catalogs: Overview of collections of hosts and host sets.
 states:
   info: Info
   success: Success
@@ -21,6 +23,7 @@ form:
   label:
     name: Name
     description: Description
+    type: Type
 dev:
   default-org: Default Org
   menu-item: Menu item