Specialized error for 403s that links to the ACLs page

ui/app/controllers/application.js

@@ -27,6 +27,10 @@ export default Controller.extend({
       .map(code => '' + code);
   }),
 
+  is403: computed('errorCodes.[]', function() {
+    return this.get('errorCodes').includes('403');
+  }),
+
   is404: computed('errorCodes.[]', function() {
     return this.get('errorCodes').includes('404');
   }),

ui/app/routes/application.js

@@ -11,10 +11,13 @@ export default Route.extend({
 
   actions: {
     didTransition() {
-      this.controllerFor('application').set('error', null);
       window.scrollTo(0, 0);
     },
 
+    willTransition() {
+      this.controllerFor('application').set('error', null);
+    },
+
     error(error) {
       this.controllerFor('application').set('error', error);
     },

ui/app/routes/jobs/job.js

@@ -8,7 +8,7 @@ export default Route.extend({
 
   model({ job_id }) {
     return this.get('store')
-      .find('job', job_id)
+      .findRecord('job', job_id, { reload: true })
       .then(job => {
         return job.get('allocations').then(() => job);
       })

ui/app/templates/application.hbs

@@ -10,6 +10,13 @@
       {{else if is404}}
         <h1 class="title is-spaced">Not Found</h1>
         <p class="subtitle">What you're looking for couldn't be found. It either doesn't exist or you are not authorized to see it.</p>
+      {{else if is403}}
+        <h1 class="title is-spaced">Not Authorized</h1>
+        {{#if token.secret}}
+          <p class="subtitle">Your {{#link-to "settings.tokens"}}ACL token{{/link-to}} does not provide the required permissions. Contact your administrator if this is an error.</p>
+        {{else}}
+          <p class="subtitle">Provide an {{#link-to "settings.tokens"}}ACL token{{/link-to}} with requisite permissions to view this.</p>
+        {{/if}}
       {{else}}
         <h1 class="title is-spaced">Error</h1>
         <p class="subtitle">Something went wrong.</p>

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

@@ -11,7 +11,7 @@ moduleForAcceptance('Acceptance | application errors ', {
 });
 
 test('transitioning away from an error page resets the global error', function(assert) {
-  server.pretender.get('/v1/nodes', () => [403, {}, null]);
+  server.pretender.get('/v1/nodes', () => [500, {}, null]);
 
   visit('/nodes');
 
@@ -25,3 +25,32 @@ test('transitioning away from an error page resets the global error', function(a
     assert.notOk(find('.error-message'), 'Application is no longer in an error state');
   });
 });
+
+test('the 403 error page links to the ACL tokens page', function(assert) {
+  const job = server.db.jobs[0];
+
+  server.pretender.get(`/v1/job/${job.id}`, () => [403, {}, null]);
+
+  visit(`/jobs/${job.id}`);
+
+  andThen(() => {
+    assert.ok(find('.error-message'), 'Error message is shown');
+    assert.equal(
+      find('.error-message .title').textContent,
+      'Not Authorized',
+      'Error message is for 403'
+    );
+  });
+
+  andThen(() => {
+    click('.error-message a');
+  });
+
+  andThen(() => {
+    assert.equal(
+      currentURL(),
+      '/settings/tokens',
+      'Error message contains a link to the tokens page'
+    );
+  });
+});