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

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"}}

ui/packages/consul-ui/app/components/error-state/index.hbs

@@ -12,13 +12,19 @@
     </BlockSlot>
 {{/if}}
     <BlockSlot @name="body">
+      {{#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>

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';

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] });
   }