Merge pull request #4017 from hashicorp/b-ui-error-message-for-force

Show an error message when forcing a periodic launch is forbidden

ui/app/components/job-page/periodic.js

@@ -3,13 +3,19 @@ import { inject as service } from '@ember/service';
 
 export default AbstractJobPage.extend({
   store: service(),
+
+  errorMessage: '',
+
   actions: {
     forceLaunch() {
       this.get('job')
         .forcePeriodic()
-        .then(() => {
-          this.get('store').findAll('job');
+        .catch(error => {
+          this.set('errorMessage', `Could not force launch: ${error}`);
         });
     },
+    clearErrorMessage() {
+      this.set('errorMessage', '');
+    },
   },
 });

ui/app/templates/components/job-page/periodic.hbs

@@ -6,6 +6,19 @@
   {{/each}}
 {{/global-header}}
 {{#job-page/parts/body job=job onNamespaceChange=onNamespaceChange}}
+  {{#if errorMessage}}
+    <div class="notification is-danger">
+      <div class="columns">
+        <div class="column">
+          <h3 data-test-force-error-title class="title is-4">Could Not Force Launch</h3>
+          <p data-test-force-error-body>Your ACL token does not grant permission to submit jobs.</p>
+        </div>
+        <div class="column is-centered is-minimum">
+          <button data-test-force-error-close class="button is-danger" {{action "clearErrorMessage"}}>Okay</button>
+        </div>
+      </div>
+    </div>
+  {{/if}}
   <h1 class="title">
     {{job.name}}
     <span class="bumper-left tag {{job.statusClass}}" data-test-job-status>{{job.status}}</span>

ui/tests/integration/job-page/periodic-test.js

 import { getOwner } from '@ember/application';
 import { test, moduleForComponent } from 'ember-qunit';
-import { click, findAll } from 'ember-native-dom-helpers';
+import { click, find, findAll } from 'ember-native-dom-helpers';
 import wait from 'ember-test-helpers/wait';
 import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
@@ -75,15 +75,61 @@ test('Clicking Force Launch launches a new periodic child job', function(assert)
           'POST URL was correct'
         );
 
-        assert.ok(server.db.jobs.length, currentJobCount + 1, 'POST request was made');
+        assert.equal(server.db.jobs.length, currentJobCount + 1, 'POST request was made');
+      });
+    });
+  });
+});
+
+test('Clicking force launch without proper permissions shows an error message', function(assert) {
+  server.pretender.post('/v1/job/:id/periodic/force', () => [403, {}, null]);
+
+  this.server.create('job', 'periodic', {
+    id: 'parent',
+    childrenCount: 1,
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    const job = this.store.peekAll('job').findBy('plainId', 'parent');
+    this.setProperties({
+      job,
+      sortProperty: 'name',
+      sortDescending: true,
+      currentPage: 1,
+      gotoJob: () => {},
+    });
+
+    this.render(hbs`
+      {{job-page/periodic
+        job=job
+        sortProperty=sortProperty
+        sortDescending=sortDescending
+        currentPage=currentPage
+        gotoJob=gotoJob}}
+    `);
+
+    return wait().then(() => {
+      assert.notOk(find('[data-test-force-error-title]'), 'No error message yet');
+
+      click('[data-test-force-launch]');
+
+      return wait().then(() => {
+        assert.equal(
+          find('[data-test-force-error-title]').textContent,
+          'Could Not Force Launch',
+          'Appropriate error is shown'
+        );
+        assert.ok(
+          find('[data-test-force-error-body]').textContent.includes('ACL'),
+          'The error message mentions ACLs'
+        );
+
+        click('[data-test-force-error-close]');
 
-        return wait().then(() => {
-          assert.equal(
-            findAll('[data-test-job-name]').length,
-            childrenCount + 1,
-            'The new periodic job launch is in the children list'
-          );
-        });
+        assert.notOk(find('[data-test-force-error-title]'), 'Error message is dismissable');
       });
     });
   });