Merge pull request #4850 from hashicorp/f-ui-links-on-error-pages

UI: Escape hatch links on error pages

ui/app/mixins/with-watchers.js

@@ -33,6 +33,9 @@ export default Mixin.create(WithVisibilityDetection, {
   actions: {
     willTransition() {
       this.cancelAllWatchers();
+
+      // Bubble the action up to the application route
+      return true;
     },
   },
 });

ui/app/styles/components/error-container.scss

@@ -3,20 +3,32 @@
   height: 100%;
   padding-top: 25vh;
   display: flex;
-  justify-content: center;
-  background: $grey-lighter;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  background: $white-ter;
 
   .error-message {
+    width: 95vw;
     max-width: 600px;
 
-    .title,
-    .subtitle {
+    .title {
       text-align: center;
     }
   }
 
   .error-stack-trace {
-    border: 1px solid $grey-light;
+    border: 1px solid $grey-lighter;
     border-radius: $radius;
+    background: $white;
+  }
+
+  .error-links {
+    padding-top: 15px;
+    margin-top: 15px;
+    border-top: 1px solid $grey-lighter;
+    width: 95vw;
+    max-width: 600px;
+    text-align: center;
   }
 }

ui/app/templates/application.hbs

@@ -30,5 +30,9 @@
         <pre class="error-stack-trace"><code>{{errorStr}}</code></pre>
       {{/if}}
     </div>
+    <div class="error-links">
+      {{#link-to "jobs" data-test-error-jobs-link class="button is-white"}}Go to Jobs{{/link-to}}
+      {{#link-to "clients" data-test-error-clients-link class="button is-white"}}Go to Clients{{/link-to}}
+    </div>
   </div>
 {{/unless}}

ui/tests/acceptance/application-errors-test.js

@@ -67,3 +67,28 @@ test('the no leader error state gets its own error message', function(assert) {
     );
   });
 });
+
+test('error pages include links to the jobs and clients pages', function(assert) {
+  visit('/a/non-existent/page');
+
+  andThen(() => {
+    assert.ok(JobsList.error.isPresent, 'An error is shown');
+    JobsList.error.gotoJobs();
+  });
+
+  andThen(() => {
+    assert.equal(currentURL(), '/jobs', 'Now on the jobs page');
+    assert.notOk(JobsList.error.isPresent, 'The error is gone now');
+    visit('/a/non-existent/page');
+  });
+
+  andThen(() => {
+    assert.ok(JobsList.error.isPresent, 'An error is shown');
+    JobsList.error.gotoClients();
+  });
+
+  andThen(() => {
+    assert.equal(currentURL(), '/clients', 'Now on the clients page');
+    assert.notOk(JobsList.error.isPresent, 'The error is gone now');
+  });
+});

ui/tests/pages/jobs/list.js

@@ -44,6 +44,8 @@ export default create({
     title: text('[data-test-error-title]'),
     message: text('[data-test-error-message]'),
     seekHelp: clickable('[data-test-error-message] a'),
+    gotoJobs: clickable('[data-test-error-jobs-link]'),
+    gotoClients: clickable('[data-test-error-clients-link]'),
   },
 
   namespaceSwitcher: {