From 9bb848eb5504ac9c95e192db5239a0eebbf119e7 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 11 Jun 2020 21:23:33 -0400
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Integrate=20rose/ta?=
 =?UTF-8?q?ble=20component=20into=20host=20catalogs=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/styles/app.scss                   |  6 ++--
 .../projects/project/host-catalogs/index.hbs  | 28 +++++++++++--------
 .../tests/acceptance/host-catalogs-test.js    |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index f7c1e37f1..ea53643d3 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -19,14 +19,12 @@
   }
 }
 
-.projects-overview {
-  margin: sizing.rems(l);
+.rose-layout-global-body {
+  margin: 0 sizing.rems(m);
 }
 
 .project-overview,
 .project-new {
-  margin: sizing.rems(l);
-
   .breadcrumbs,
   .breadcrumbs a {
     color: #6f7682;
diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
index 490cb5b65..9194d73de 100644
--- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
@@ -13,18 +13,22 @@
   </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>
+    <Rose::Table as |table|>
+      <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>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index acdacafa7..7a54340b3 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/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');
   });

From ad20d93765c1a2e29dead4f023c3d305b2e8566e Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 12 Jun 2020 11:17:35 -0400
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20hostcatalo?=
 =?UTF-8?q?gs=20table=20columns=20to=20include:type,desc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add type and description columns to host catalogs overview table. Move
page body margin into global layout.
---
 .../styles/rose/components/layout/_global.scss   |  1 +
 ui/core/app/styles/_host-catalogs.scss           |  7 +++++++
 ui/core/app/styles/app.scss                      |  5 +----
 .../org/projects/project/host-catalogs/index.hbs | 16 +++++++++++++---
 ui/core/translations/en-us.yaml                  |  7 +++++++
 5 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 ui/core/app/styles/_host-catalogs.scss

diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss
index 2100c70eb..cfc218e4e 100644
--- a/addons/rose/addon/styles/rose/components/layout/_global.scss
+++ b/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 {
diff --git a/ui/core/app/styles/_host-catalogs.scss b/ui/core/app/styles/_host-catalogs.scss
new file mode 100644
index 000000000..1bd06bd24
--- /dev/null
+++ b/ui/core/app/styles/_host-catalogs.scss
@@ -0,0 +1,7 @@
+@use 'rose/variables/sizing';
+
+.host-catalogs {
+  .description {
+    padding-bottom: sizing.rems(s);
+  }
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index ea53643d3..9a2f54344 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -2,6 +2,7 @@
 
 @import 'rose';
 @import 'notify';
+@import 'host-catalogs';
 
 .rose-nav-sidebar {
   margin-top: sizing.rems(xxl);
@@ -19,10 +20,6 @@
   }
 }
 
-.rose-layout-global-body {
-  margin: 0 sizing.rems(m);
-}
-
 .project-overview,
 .project-new {
   .breadcrumbs,
diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
index 9194d73de..64dba757e 100644
--- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
+++ b/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,7 +12,16 @@
   </page.actions>
 
   <page.body>
+    <div class="description">{{t 'descriptions.host-catalogs'}}</div>
+
     <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell>{{t 'table.headers.name'}}</row.cell>
+          <row.cell>{{t 'table.headers.type'}}</row.cell>
+          <row.cell>{{t 'table.headers.description'}}</row.cell>
+        </header.row>
+      </table.header>
       <table.body as |body|>
         {{#each @model as |hostCatalog|}}
           <body.row as |row|>
@@ -25,6 +33,8 @@
                 {{hostCatalog.name}}
               </LinkTo>
             </row.cell>
+            <row.cell>{{hostCatalog.type}}</row.cell>
+            <row.cell>{{hostCatalog.description}}</row.cell>
           </body.row>
         {{/each}}
       </table.body>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index a6cb7e4c1..dfc17716b 100644
--- a/ui/core/translations/en-us.yaml
+++ b/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,11 @@ form:
   label:
     name: Name
     description: Description
+table:
+  headers:
+    type: Type
+    name: Name
+    description: Description
 dev:
   default-org: Default Org
   menu-item: Menu item

From 7ec78cf987cbc1e371e00df694020dfa58603d4c Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 12 Jun 2020 13:58:07 -0400
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20hostcatalo?=
 =?UTF-8?q?gs=20desc=20and=20table=20i8ln=20properties?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/styles/_host-catalogs.scss                    | 7 -------
 ui/core/app/styles/app.scss                               | 1 -
 .../orgs/org/projects/project/host-catalogs/index.hbs     | 8 ++++----
 ui/core/translations/en-us.yaml                           | 4 ----
 4 files changed, 4 insertions(+), 16 deletions(-)
 delete mode 100644 ui/core/app/styles/_host-catalogs.scss

diff --git a/ui/core/app/styles/_host-catalogs.scss b/ui/core/app/styles/_host-catalogs.scss
deleted file mode 100644
index 1bd06bd24..000000000
--- a/ui/core/app/styles/_host-catalogs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use 'rose/variables/sizing';
-
-.host-catalogs {
-  .description {
-    padding-bottom: sizing.rems(s);
-  }
-}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 9a2f54344..20dbbe53f 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -2,7 +2,6 @@
 
 @import 'rose';
 @import 'notify';
-@import 'host-catalogs';
 
 .rose-nav-sidebar {
   margin-top: sizing.rems(xxl);
diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
index 64dba757e..006513fa8 100644
--- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs
@@ -12,14 +12,14 @@
   </page.actions>
 
   <page.body>
-    <div class="description">{{t 'descriptions.host-catalogs'}}</div>
+    <p>{{t 'descriptions.host-catalogs'}}</p>
 
     <Rose::Table as |table|>
       <table.header as |header|>
         <header.row as |row|>
-          <row.cell>{{t 'table.headers.name'}}</row.cell>
-          <row.cell>{{t 'table.headers.type'}}</row.cell>
-          <row.cell>{{t 'table.headers.description'}}</row.cell>
+          <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|>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index dfc17716b..4b51a1dc2 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -23,11 +23,7 @@ form:
   label:
     name: Name
     description: Description
-table:
-  headers:
     type: Type
-    name: Name
-    description: Description
 dev:
   default-org: Default Org
   menu-item: Menu item