Merge pull request #60 from hashicorp/ICU-304-error-messages

Fillout error message template with relevant text

ui/core/app/templates/orgs/org/error.hbs

@@ -13,27 +13,46 @@
   *                   we don't distinguish it yet
 
 --}}
-
-{{#each @model.errors as |error|}}
-
-  {{#if error.isUnauthenticated}}
+<Rose::Layout::Centered>
+  {{#each @model.errors as |error|}}
     {{!-- error.status === 401 --}}
-  {{/if}}
+    {{#if error.isUnauthenticated}}
+      <Rose::Message @title={{t 'errors.titles.unauthenticated-error'}} @subtitle="{{t 'states.error'}} {{error.status}}" @icon="disabled" as |message|>
+        <message.description>{{t 'errors.descriptions.unauthenticated-error'}}</message.description>
+        <message.link @route="index">{{t 'actions.help'}}</message.link>
+      </Rose::Message>
+    {{/if}}
 
-  {{#if error.isForbidden}}
     {{!-- error.status === 403 --}}
-  {{/if}}
+    {{#if error.isForbidden}}
+      <Rose::Message @title={{t 'errors.titles.forbidden-error'}} @subtitle="{{t 'states.error'}} {{error.status}}" @icon="disabled" as |message|>
+        <message.description>{{t 'errors.descriptions.forbidden-error'}}</message.description>
+        <message.link @route="index">{{t 'actions.help'}}</message.link>
+      </Rose::Message>
+    {{/if}}
 
-  {{#if error.isNotFound}}
     {{!-- error.status === 404 --}}
-  {{/if}}
+    {{#if error.isNotFound}}
+      <Rose::Message @title={{t 'errors.titles.notfound-error'}} @subtitle="{{t 'states.error'}} {{error.status}}" @icon="help-circle-outline" as |message|>
+        <message.description>{{t 'errors.descriptions.notfound-error'}}</message.description>
+        <message.link @route="index">{{t 'actions.help'}}</message.link>
+      </Rose::Message>
+    {{/if}}
 
-  {{#if error.isServer}}
     {{!-- error.status === 500 --}}
-  {{/if}}
+    {{#if error.isServer}}
+      <Rose::Message @title={{t 'errors.titles.server-error'}} @subtitle="{{t 'states.error'}} {{error.status}}" @icon="alert-circle-outline" as |message|>
+        <message.description>{{t 'errors.descriptions.server-error'}}</message.description>
+        <message.link @route="index">{{t 'actions.help'}}</message.link>
+      </Rose::Message>
+    {{/if}}
 
-  {{#if error.isUnknown}}
-    {{!-- error.status === 🤷 --}}
-  {{/if}}
-
-{{/each}}
+    {{!-- error.status === 🤷 everything else --}}
+    {{#if error.isUnknown}}
+      <Rose::Message @title={{t 'errors.titles.unknown-error'}} @subtitle="{{t 'states.error'}} {{error.status}}" @icon="alert-circle-outline" as |message|>
+        <message.description>{{t 'errors.descriptions.unknown-error'}}</message.description>
+        <message.link @route="index">{{t 'actions.help'}}</message.link>
+      </Rose::Message>
+    {{/if}}
+  {{/each}}
+</Rose::Layout::Centered>

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -9,7 +9,9 @@
   </page.header>
 
   <page.actions>
-    <Rose::LinkButton @route="orgs.org.projects.new" @style="primary">{{t 'titles.new'}}</Rose::LinkButton>
+    {{#if @model}}
+      <Rose::LinkButton @route="orgs.org.projects.new" @style="primary">{{t 'titles.new'}}</Rose::LinkButton>
+    {{/if}}
   </page.actions>
 
   <page.body>
@@ -31,9 +33,9 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message @title={{t 'titles.empty-set'}} as |message|>
+        <Rose::Message @title={{t 'titles.projects-welcome'}} as |message|>
           <message.description>
-            {{t 'descriptions.empty-set'}}
+            {{t 'descriptions.projects-welcome'}}
           </message.description>
           <message.link @route="orgs.org.projects.new">
             <Rose::Icon @name="plus-circle-outline" />

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

@@ -10,9 +10,11 @@
   </page.header>
 
   <page.actions>
-    <Rose::LinkButton @route="orgs.org.projects.project.host-catalogs.new" @style="primary">
-      {{t 'titles.new'}}
-    </Rose::LinkButton>
+    {{#if @model}}
+      <Rose::LinkButton @route="orgs.org.projects.project.host-catalogs.new" @style="primary">
+        {{t 'titles.new'}}
+      </Rose::LinkButton>
+    {{/if}}
   </page.actions>
 
   <page.body>
@@ -48,9 +50,9 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message @title={{t 'titles.empty-set'}} as |message|>
+        <Rose::Message @title={{t 'titles.host-catalogs-welcome'}} as |message|>
           <message.description>
-            {{t 'descriptions.empty-set'}}
+            {{t 'descriptions.host-catalogs-welcome'}}
           </message.description>
           <message.link @route="orgs.org.projects.project.host-catalogs.new">
             <Rose::Icon @name="plus-circle-outline" />
@@ -58,7 +60,7 @@
           </message.link>
         </Rose::Message>
       </Rose::Layout::Centered>
-      
+
     {{/if}}
 
   </page.body>

ui/core/mirage/config.js

@@ -1,5 +1,5 @@
 import config from '../config/environment';
-//import { Response } from 'miragejs';
+// import { Response } from 'miragejs';
 
 export default function() {
 
@@ -30,6 +30,14 @@ export default function() {
   this.del('/orgs/:org_id/projects/:project_id/host-catalogs/:id');
 
   // Uncomment the following line and the Response import above
-  // Then change the response code to simulate error responses
-  //this.get('/orgs/:org_id/projects', () => new Response(401));
+  // Then change the response code to simulate error responses.
+  // this.get('/orgs/:org_id/projects', () => new Response(505));
+
+  // Update error payload to simulate specific error responses.
+  // this.get('/orgs/:org_id/projects', () => new Response(505, {}, {
+  //   errors: [{
+  //     status: 505,
+  //     message: 'HTTP version not supported.',
+  //   }]
+  // }));
 }

ui/core/translations/en-us.yaml

@@ -3,6 +3,7 @@ actions:
   delete: Delete
   dismiss: Dismiss
   save: Save
+  help: Need help?
 resources:
   projects: Projects
   project: Project
@@ -13,9 +14,13 @@ titles:
   overview: Overview
   settings: Settings
   empty-set: No Items Yet
+  projects-welcome: Welcome to Projects
+  host-catalogs-welcome: Welcome to Host Catalogs
 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.
+  projects-welcome: Projects allow you to create and manage host catalogs. To start, create a project.
+  host-catalogs-welcome: Host catalogs allow you to configure to collect and create hosts and host sets. To start, create a host catalog.
 states:
   info: Info
   success: Success
@@ -26,6 +31,19 @@ form:
     name: Name
     description: Description
     type: Type
+errors:
+  titles:
+    unauthenticated-error: You are not signed in
+    forbidden-error: You are not authorized
+    notfound-error: Resource not found
+    server-error: Server error
+    unknown-error: Something went wrong
+  descriptions:
+    unauthenticated-error: You are not authenticated. Please authenticate and try again later.
+    forbidden-error: You must be granted permissions to view this data. Ask your administrator if you think you should have access.
+    notfound-error: We could not find the requested resource. You can ask your administrator or try again later.
+    server-error: We ran into a problem and could not continue. You can ask your administrator or try again later.
+    unknown-error: Please contact your administrator or try again later.
 dev:
   default-org: Default Org
   menu-item: Menu item