From fd9c8401f8701ce3176eaa372c8bed3611d5ba80 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 17 Jun 2020 15:35:51 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20"no=20items"=20me?=
 =?UTF-8?q?ssaging=20when=20sets=20are=20empty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/layout/_centered.scss     |  1 +
 .../app/templates/orgs/org/projects/index.hbs | 42 ++++++++---
 .../projects/project/host-catalogs/index.hbs  | 71 ++++++++++++-------
 ui/core/translations/en-us.yaml               |  2 +
 4 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/layout/_centered.scss b/addons/rose/addon/styles/rose/components/layout/_centered.scss
index 10844c8ae..71d058f1e 100644
--- a/addons/rose/addon/styles/rose/components/layout/_centered.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_centered.scss
@@ -3,4 +3,5 @@
 .rose-layout-centered {
   display: flex;
   justify-content: center;
+  padding: sizing.rems(xl) 0;
 }
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index 0ddef022c..1723da8a6 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -13,17 +13,37 @@
   </page.actions>
 
   <page.body>
-    <Rose::Cards as |cards|>
-      {{#each @model as |project|}}
-        <cards.link
-          @title={{project.name}}
-          @subtitle={{project.id}}
-          @description={{project.description}}
-          @route="orgs.org.projects.project"
-          @model={{project}}
-        />
-      {{/each}}
-    </Rose::Cards>
+
+    {{#if @model}}
+
+      <Rose::Cards as |cards|>
+        {{#each @model as |project|}}
+          <cards.link
+            @title={{project.name}}
+            @subtitle={{project.id}}
+            @description={{project.description}}
+            @route="orgs.org.projects.project"
+            @model={{project}}
+          />
+        {{/each}}
+      </Rose::Cards>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t 'titles.empty-set'}} as |message|>
+          <message.description>
+            {{t 'descriptions.empty-set'}}
+          </message.description>
+          <message.link @route="orgs.org.projects.new">
+            <Rose::Icon @name="plus-circle-outline" />
+            {{t 'titles.new'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+
   </page.body>
 
 </Rose::Layout::Page>
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 d164728eb..898c4159c 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
@@ -6,6 +6,7 @@
 
   <page.header>
     <h2>{{t 'resources.host-catalogs'}}</h2>
+    <p>{{t 'descriptions.host-catalogs'}}</p>
   </page.header>
 
   <page.actions>
@@ -17,33 +18,51 @@
   </page.actions>
 
   <page.body>
-    <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>
+    {{#if @model}}
+
+      <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>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t 'titles.empty-set'}} as |message|>
+          <message.description>
+            {{t 'descriptions.empty-set'}}
+          </message.description>
+          <message.link @route="orgs.org.projects.project.host-catalogs.new">
+            <Rose::Icon @name="plus-circle-outline" />
+            {{t 'titles.new'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+      
+    {{/if}}
+
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 4b51a1dc2..fa0873322 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -12,8 +12,10 @@ titles:
   new: New
   overview: Overview
   settings: Settings
+  empty-set: No Items Yet
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
+  empty-set: There are no items to display yet.  You may be able to add items or try back later.
 states:
   info: Info
   success: Success