From fb2cfb13af5e8f9012a084f1ffa574ee67dd3568 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Feb 2021 22:46:45 -0500
Subject: [PATCH 1/3] feat: Show info messages when resources are empty

---
 addons/core/translations/resources/en-us.yaml |   3 +
 .../scopes/scope/projects/targets/index.hbs   | 138 ++++++++++--------
 .../scope/projects/targets/target/hosts.hbs   |  74 ++++++----
 .../projects/targets/target/sessions.hbs      |  94 +++++++-----
 4 files changed, 177 insertions(+), 132 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index ff2dce9eb..55b547d0b 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -195,6 +195,9 @@ target:
   messages:
     welcome:
       title: Welcome to Targets
+    none:
+      title: No Targets Available
+      description: No Targets to display yet. Contact your Boundary admin if you don't see a Target you expect access to.
   actions:
     create: New Target
     delete: Delete Target
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index b816ced05..bbb3e7b5d 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -7,73 +7,87 @@
   </page.header>
 
   <page.body>
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>{{t "form.name.label"}}</row.headerCell>
-          <row.headerCell>{{t "form.id.label"}}</row.headerCell>
-          <row.headerCell>{{t "form.type.label"}}</row.headerCell>
-          <row.headerCell>{{t "resources.project.title"}}</row.headerCell>
-          <row.headerCell />
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        {{#each @model as |model|}}
-          <body.row as |row|>
-            <row.headerCell>
-              <Rose::Icon
-                class={{concat "session-status-" (if model.target.isActive 'active' 'canceled')}}
-                @name="app-icons/action-session"
-                @size="medium"
-                title={{if model.target.isActive (t 'states.active')}}
-              />
-              <LinkTo
-                @route="scopes.scope.projects.targets.target"
-                @model={{model.target.id}}
-              >
-                {{model.target.displayName}}
-              </LinkTo>
-              <p>{{model.target.description}}</p>
-            </row.headerCell>
-            <row.cell>
-              <Copyable
-                @text={{model.target.id}}
-                @buttonText={{t "actions.copy-to-clipboard"}}
-                @acknowledgeText={{t "states.copied"}}
-              >
-                <code>{{model.target.id}}</code>
-              </Copyable>
-            </row.cell>
-            <row.cell>
-              {{#if model.target.type}}
-                <Rose::Badge>
-                  {{t (concat "resources.target.types." model.target.type)}}
-                </Rose::Badge>
-              {{/if}}
-            </row.cell>
-            <row.cell>
-              <div>
+    {{#if @model}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t "form.name.label"}}</row.headerCell>
+            <row.headerCell>{{t "form.id.label"}}</row.headerCell>
+            <row.headerCell>{{t "form.type.label"}}</row.headerCell>
+            <row.headerCell>{{t "resources.project.title"}}</row.headerCell>
+            <row.headerCell />
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model as |model|}}
+            <body.row as |row|>
+              <row.headerCell>
+                <Rose::Icon
+                  class={{concat "session-status-" (if model.target.isActive 'active' 'canceled')}}
+                  @name="app-icons/action-session"
+                  @size="medium"
+                  title={{if model.target.isActive (t 'states.active')}}
+                />
+                <LinkTo
+                  @route="scopes.scope.projects.targets.target"
+                  @model={{model.target.id}}
+                >
+                  {{model.target.displayName}}
+                </LinkTo>
+                <p>{{model.target.description}}</p>
+              </row.headerCell>
+              <row.cell>
                 <Copyable
-                  @text={{model.project.id}}
+                  @text={{model.target.id}}
                   @buttonText={{t "actions.copy-to-clipboard"}}
                   @acknowledgeText={{t "states.copied"}}
                 >
-                  <code>{{model.project.id}}</code>
+                  <code>{{model.target.id}}</code>
                 </Copyable>
-              </div>
-              <Rose::Badge @style='informational'>
-                {{model.project.name}}
-              </Rose::Badge>
-            </row.cell>
-            <row.cell>
-              <Rose::Button @style="secondary" {{on "click" (route-action "connect" model.target)}}>
-                {{t "resources.session.actions.connect"}}
-              </Rose::Button>
-            </row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
+              </row.cell>
+              <row.cell>
+                {{#if model.target.type}}
+                  <Rose::Badge>
+                    {{t (concat "resources.target.types." model.target.type)}}
+                  </Rose::Badge>
+                {{/if}}
+              </row.cell>
+              <row.cell>
+                <div>
+                  <Copyable
+                    @text={{model.project.id}}
+                    @buttonText={{t "actions.copy-to-clipboard"}}
+                    @acknowledgeText={{t "states.copied"}}
+                  >
+                    <code>{{model.project.id}}</code>
+                  </Copyable>
+                </div>
+                <Rose::Badge @style='informational'>
+                  {{model.project.name}}
+                </Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Rose::Button @style="secondary" {{on "click" (route-action "connect" model.target)}}>
+                  {{t "resources.session.actions.connect"}}
+                </Rose::Button>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t "resources.target.messages.none.title"}} as |message|>
+          <message.description>
+            {{t "resources.target.messages.none.description"}}
+          </message.description>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
index bb76d5e56..e2cf73f39 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
@@ -1,32 +1,46 @@
 {{page-title (t "resources.host-set.title_plural")}}
 
-<Rose::Table as |table|>
-  <table.body as |body|>
-    {{#each @model.hosts as |host|}}
-      <body.row as |row|>
-        <row.cell>
-          {{host.displayName}}
-          <p>{{host.description}}</p>
-        </row.cell>
-        <row.cell>
-          <Copyable
-            @text={{host.id}}
-            @buttonText={{t "actions.copy-to-clipboard"}}
-            @acknowledgeText={{t "states.copied"}}
-          >
-            <code>{{host.id}}</code>
-          </Copyable>
-        </row.cell>
-        <row.cell>{{host.attributes.address}}</row.cell>
-        <row.cell>
-          <Rose::Badge>{{t (concat 'resources.host.types.' host.type)}}</Rose::Badge>
-        </row.cell>
-        <row.cell>
-          <Rose::Button @style="secondary" {{on "click" (route-action "connect" @model.target host)}}>
-            {{t "resources.session.actions.connect"}}
-          </Rose::Button>
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
+{{#if @model.hosts}}
+
+  <Rose::Table as |table|>
+    <table.body as |body|>
+      {{#each @model.hosts as |host|}}
+        <body.row as |row|>
+          <row.cell>
+            {{host.displayName}}
+            <p>{{host.description}}</p>
+          </row.cell>
+          <row.cell>
+            <Copyable
+              @text={{host.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
+              <code>{{host.id}}</code>
+            </Copyable>
+          </row.cell>
+          <row.cell>{{host.attributes.address}}</row.cell>
+          <row.cell>
+            <Rose::Badge>{{t (concat 'resources.host.types.' host.type)}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            <Rose::Button @style="secondary" {{on "click" (route-action "connect" @model.target host)}}>
+              {{t "resources.session.actions.connect"}}
+            </Rose::Button>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.host.messages.none.title"}} as |message|>
+      <message.description>
+        {{t "resources.host.messages.none.description"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+
+{{/if}}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index 48f10efda..d9edc3900 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -1,40 +1,54 @@
-<Rose::Table as |table|>
-  <table.body as |body|>
-    {{!--
-      TODO:  sort these via the controller so that active and pending appear first
-      similar to the way the sessions routes are sorted.
-     --}}
-    {{#each @model.target.sessions as |session|}}
-      <body.row as |row|>
-        <row.cell class="nowrap">
-          <Rose::Icon
-            class={{concat "session-status-" session.status}}
-            @name="app-icons/action-session"
-            @size="medium" />
-          <Copyable
-            @text={{session.id}}
-            @buttonText={{t "actions.copy-to-clipboard"}}
-            @acknowledgeText={{t "states.copied"}}
-          >
-            <code>{{session.id}}</code>
-          </Copyable>
-        </row.cell>
-        <row.cell>
-          <time datetime={{format-date-iso session.created_time}}>
-            {{format-date-iso-human session.created_time}}
-          </time>
-        </row.cell>
-        <row.cell>
-          <Rose::Badge>{{session.status}}</Rose::Badge>
-        </row.cell>
-        <row.cell>
-          {{#if session.isCancelable}}
-            <Rose::Button @style="secondary" {{on "click" (route-action "cancelSession" session)}}>
-              {{t "actions.cancel"}}
-            </Rose::Button>
-          {{/if}}
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
+{{#if @model.target.sessions}}
+
+  <Rose::Table as |table|>
+    <table.body as |body|>
+      {{!--
+        TODO:  sort these via the controller so that active and pending appear first
+        similar to the way the sessions routes are sorted.
+      --}}
+      {{#each @model.target.sessions as |session|}}
+        <body.row as |row|>
+          <row.cell class="nowrap">
+            <Rose::Icon
+              class={{concat "session-status-" session.status}}
+              @name="app-icons/action-session"
+              @size="medium" />
+            <Copyable
+              @text={{session.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
+              <code>{{session.id}}</code>
+            </Copyable>
+          </row.cell>
+          <row.cell>
+            <time datetime={{format-date-iso session.created_time}}>
+              {{format-date-iso-human session.created_time}}
+            </time>
+          </row.cell>
+          <row.cell>
+            <Rose::Badge>{{session.status}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            {{#if session.isCancelable}}
+              <Rose::Button @style="secondary" {{on "click" (route-action "cancelSession" session)}}>
+                {{t "actions.cancel"}}
+              </Rose::Button>
+            {{/if}}
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.session.messages.none.title"}} as |message|>
+      <message.description>
+        {{t "resources.session.messages.none.description"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+
+{{/if}}
\ No newline at end of file

From 40cb386cfd3cf82e0403fdca9d9d8b389047e556 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 10 Feb 2021 21:49:33 -0500
Subject: [PATCH 2/3] chore: Add friendly tag to desktop info messages

Adding a friendly tag to translation file properties helps maintain the
current structure while adding non-administrative language to info
messages.
---
 addons/core/translations/resources/en-us.yaml            | 9 +++++++++
 .../templates/scopes/scope/projects/sessions/index.hbs   | 4 ++--
 .../scopes/scope/projects/targets/target/hosts.hbs       | 4 ++--
 .../scopes/scope/projects/targets/target/sessions.hbs    | 4 ++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 55b547d0b..e670a70d7 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -95,6 +95,9 @@ host:
     none:
       title: No Hosts
       description: No hosts available in this scope.
+    none-friendly:
+      title: No Hosts Available
+      description: No hosts available to display yet.
   actions:
     add: Add Host
     create: New Host
@@ -110,6 +113,12 @@ session:
     none:
       title: No Sessions
       description: There are no active sessions within the current scope.
+    none-friendly:
+      title: No Sessions Available
+      description: No sessions available to display yet.
+    none-active-friendly:
+      title: No Active Sessions Available
+      description: No active sessions available to display yet.
   actions:
     connect: Connect
 org:
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index 35c53bb63..4c124cc24 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -83,9 +83,9 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message @title={{t "resources.session.messages.none.title"}} as |message|>
+        <Rose::Message @title={{t "resources.session.messages.none-friendly.title"}} as |message|>
           <message.description>
-            {{t "resources.session.messages.none.description"}}
+            {{t "resources.session.messages.none-friendly.description"}}
           </message.description>
         </Rose::Message>
       </Rose::Layout::Centered>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
index e2cf73f39..92ae3eebe 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
@@ -36,9 +36,9 @@
 {{else}}
 
   <Rose::Layout::Centered>
-    <Rose::Message @title={{t "resources.host.messages.none.title"}} as |message|>
+    <Rose::Message @title={{t "resources.host.messages.none-friendly.title"}} as |message|>
       <message.description>
-        {{t "resources.host.messages.none.description"}}
+        {{t "resources.host.messages.none-friendly.description"}}
       </message.description>
     </Rose::Message>
   </Rose::Layout::Centered>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index d9edc3900..0c8095880 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -44,9 +44,9 @@
 {{else}}
 
   <Rose::Layout::Centered>
-    <Rose::Message @title={{t "resources.session.messages.none.title"}} as |message|>
+    <Rose::Message @title={{t "resources.session.messages.none-active-friendly.title"}} as |message|>
       <message.description>
-        {{t "resources.session.messages.none.description"}}
+        {{t "resources.session.messages.none-active-friendly.description"}}
       </message.description>
     </Rose::Message>
   </Rose::Layout::Centered>

From cb04f93a8333d5e8b77f11bc5c4b0b5ebb0263de Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 12 Feb 2021 09:34:42 -0500
Subject: [PATCH 3/3] style: Fix tab spacing in sessions template

---
 .../projects/targets/target/sessions.hbs      | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
index 8806a81af..fa93594e3 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs
@@ -17,26 +17,27 @@
             </Copyable>
           </row.cell>
           <row.cell>
-          {{!--
-            Two if's here because:
-            1) Local proxy info is only relevant if the session is
-                active or pending (aka isCancelable).  Once the session
-                is canceled or in the process thereof, the local proxy
-                may no longer be used.
-            2) The session actually has proxy information associated
-                with it.  It's possible for the user to start sessions
-                from other devices (or even another tab), in which case we
-                won't have the local proxy info available here.
-          --}}
-          {{#if session.isCancelable}}
-            {{#if session.proxy}}
-              <Copyable
-                @text={{session.proxy}}
-                @buttonText={{t "actions.copy-to-clipboard"}}
-                @acknowledgeText={{t "states.copied"}}
-              >
-                <code>{{session.proxy}}</code>
-              </Copyable>
+            {{!--
+              Two if's here because:
+              1) Local proxy info is only relevant if the session is
+                  active or pending (aka isCancelable).  Once the session
+                  is canceled or in the process thereof, the local proxy
+                  may no longer be used.
+              2) The session actually has proxy information associated
+                  with it.  It's possible for the user to start sessions
+                  from other devices (or even another tab), in which case we
+                  won't have the local proxy info available here.
+            --}}
+            {{#if session.isCancelable}}
+              {{#if session.proxy}}
+                <Copyable
+                  @text={{session.proxy}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
+                  <code>{{session.proxy}}</code>
+                </Copyable>
+              {{/if}}
             {{/if}}
           </row.cell>
         </body.row>