From 1ea9592707f847341d5dbc5f02978ba41c086c10 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:07:23 +0000
Subject: [PATCH] ui: Surface 'detail' of API errors in the error page (#9237)

* ui: Surface 'detail' of API errors in the error page

* Make UI generated 404s look less bare
---
 .../consul-ui/app/components/empty-state/index.hbs |  5 ++++-
 .../consul-ui/app/components/error-state/index.hbs | 14 ++++++++++----
 ui/packages/consul-ui/app/routes/application.js    |  2 +-
 .../consul-ui/app/services/repository/dc.js        |  3 +--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/empty-state/index.hbs b/ui/packages/consul-ui/app/components/empty-state/index.hbs
index e90dbdeb9d..9b16309fe6 100644
--- a/ui/packages/consul-ui/app/components/empty-state/index.hbs
+++ b/ui/packages/consul-ui/app/components/empty-state/index.hbs
@@ -1,5 +1,8 @@
 {{yield}}
-<div class="empty-state" ...attributes>
+<div
+  class="empty-state"
+  ...attributes
+>
 {{#if hasHeader}}
   <header>
     {{#yield-slot name="header"}}
diff --git a/ui/packages/consul-ui/app/components/error-state/index.hbs b/ui/packages/consul-ui/app/components/error-state/index.hbs
index fdff41c07f..039fb4ade8 100644
--- a/ui/packages/consul-ui/app/components/error-state/index.hbs
+++ b/ui/packages/consul-ui/app/components/error-state/index.hbs
@@ -12,13 +12,19 @@
     </BlockSlot>
 {{/if}}
     <BlockSlot @name="body">
-      <p>
-        You may have visited a URL that is loading an unknown resource, so you can try going back to the root or try re-submitting your ACL Token/SecretID by going back to ACLs.
-      </p>
+      {{#if error.detail}}
+        <p>
+          {{error.detail}}
+        </p>
+      {{else}}
+        <p>
+          You may have visited a URL that is loading an unknown resource, so you can try going back to the root or try re-submitting your ACL Token/SecretID by going back to ACLs.
+        </p>
+      {{/if}}
     </BlockSlot>
     <BlockSlot @name="actions">
       <li class="back-link">
-        <a data-test-home rel="home" href={{href-to 'index'}}>Go back to root</a>
+        <a data-test-home rel="home" href={{href-to 'index'}}>Go back</a>
       </li>
       <li class="docs-link">
         <a href="{{env 'CONSUL_DOCS_URL'}}" rel="noopener noreferrer" target="_blank">Read the documentation</a>
diff --git a/ui/packages/consul-ui/app/routes/application.js b/ui/packages/consul-ui/app/routes/application.js
index 12667edc25..82bf5bdd4f 100644
--- a/ui/packages/consul-ui/app/routes/application.js
+++ b/ui/packages/consul-ui/app/routes/application.js
@@ -41,7 +41,7 @@ export default Route.extend(WithBlockingActions, {
       };
       if (e.errors && e.errors[0]) {
         error = e.errors[0];
-        error.message = error.title || error.detail || 'Error';
+        error.message = error.message || error.title || error.detail || 'Error';
       }
       if (error.status === '') {
         error.message = 'Error';
diff --git a/ui/packages/consul-ui/app/services/repository/dc.js b/ui/packages/consul-ui/app/services/repository/dc.js
index d919148a8f..8fdc17879c 100644
--- a/ui/packages/consul-ui/app/services/repository/dc.js
+++ b/ui/packages/consul-ui/app/services/repository/dc.js
@@ -26,9 +26,8 @@ export default class DcService extends RepositoryService {
         });
       }
     }
-    const e = new Error();
+    const e = new Error('Page not found');
     e.status = '404';
-    e.detail = 'Page not found';
     return Promise.reject({ errors: [e] });
   }