fix: Updates confirm action modal to latest UI (#1094)

app/components/pipeline/modal/confirm-action/component.js

@@ -14,6 +14,10 @@ export default class PipelineModalConfirmActionComponent extends Component {
 
   @service session;
 
+  @tracked errorMessage = null;
+
+  @tracked successMessage = null;
+
   @tracked isAwaitingResponse = false;
 
   @tracked wasActionSuccessful = false;
@@ -105,20 +109,20 @@ export default class PipelineModalConfirmActionComponent extends Component {
       this.reason
     );
 
-    return new Promise((resolve, reject) => {
-      this.shuttle
-        .fetchFromApi('POST', '/events', data)
-        .then(() => {
-          this.wasActionSuccessful = true;
-          resolve();
-        })
-        .catch(err => {
-          this.wasActionSuccessful = false;
-          reject(err);
-        })
-        .finally(() => {
-          this.isAwaitingResponse = false;
-        });
-    });
+    await this.shuttle
+      .fetchFromApi('post', '/events', data)
+      .then(() => {
+        this.successMessage = `${capitalizeFirstLetter(
+          this.action
+        )}ed successfully`;
+        this.wasActionSuccessful = true;
+      })
+      .catch(err => {
+        this.wasActionSuccessful = false;
+        this.errorMessage = err.message;
+      })
+      .finally(() => {
+        this.isAwaitingResponse = false;
+      });
   }
 }

app/components/pipeline/modal/confirm-action/styles.scss

@@ -1,72 +1,31 @@
 @use 'screwdriver-colors' as colors;
 
 @mixin styles {
-  #ember-bootstrap-wormhole {
-    .modal.confirm-action {
-      .modal-dialog {
-        max-width: 50%;
+  #confirm-action-modal {
+    .modal-body {
+      display: flex;
+      flex-direction: column;
 
-        .modal-body {
+      .frozen-reason {
+        label {
           display: flex;
-          flex-direction: column;
+          margin-bottom: 0;
 
-          .modal-title {
-            font-size: 1.75rem;
-            padding-bottom: 0.75rem;
+          > div {
+            margin: auto;
+            padding-right: 0.25rem;
           }
 
-          .alert {
-            margin-bottom: 0.5rem;
-          }
-
-          .frozen-reason {
-            display: flex;
-            justify-content: space-between;
-
-            label {
-              margin: auto;
-              padding-right: 0.25rem;
-            }
-
-            input {
-              flex: 1;
-              border-radius: 4px;
-              border: 1px solid colors.$sd-text-med;
-              padding-left: 8px;
-            }
-          }
-
-          .pipeline-parameters {
-            padding-top: 2.5rem;
+          input {
+            flex: 1;
+            border-radius: 4px;
+            border: 1px solid colors.$sd-text-med;
           }
         }
+      }
 
-        .modal-footer {
-          display: flex;
-          justify-content: space-between;
-
-          button {
-            width: 10rem;
-
-            color: colors.$sd-link;
-            border-color: colors.$sd-link;
-
-            &:hover {
-              background-color: colors.$sd-info-bg;
-            }
-
-            &.confirm {
-              color: colors.$sd-white;
-              background-color: colors.$sd-running;
-              border-color: colors.$sd-running;
-
-              &:hover {
-                background-color: colors.$sd-link;
-                border-color: colors.$sd-link;
-              }
-            }
-          }
-        }
+      .pipeline-parameters {
+        padding-top: 2.5rem;
       }
     }
   }

app/components/pipeline/modal/confirm-action/template.hbs

@@ -1,10 +1,27 @@
 <BsModal
-  class="confirm-action"
+  id="confirm-action-modal"
   @onHide={{fn @closeModal}}
+  @onSubmit={{fn this.startBuild}}
   as |modal|
 >
-  <modal.body>
+  <modal.header>
     <div class="modal-title">Are you sure you want to {{this.action}}?</div>
+  </modal.header>
+  <modal.body>
+    {{#if this.errorMessage}}
+      <InfoMessage
+        @message={{this.errorMessage}}
+        @type="warning"
+        @icon="exclamation-triangle"
+      />
+    {{/if}}
+    {{#if this.successMessage}}
+      <InfoMessage
+        @message={{this.successMessage}}
+        @type="success"
+        @icon="check-circle"
+      />
+    {{/if}}
     <div id="confirm-action-job">Job: <code>{{@job.name}}</code></div>
     <div id="confirm-action-commit">
       Commit: <code>{{this.truncatedMessage}}</code>
@@ -26,9 +43,13 @@
     {{#if this.isFrozen}}
       <div class="frozen-reason">
         <label>
-          Reason:
+          <div>Reason:</div>
+          <Input
+            @type="text"
+            @value={{this.reason}}
+            placeholder="Please enter a reason"
+          />
         </label>
-        <Input @type="text" @value={{this.reason}} placeholder="Please enter a reason"/>
       </div>
     {{/if}}
 
@@ -45,22 +66,13 @@
   </modal.body>
   <modal.footer>
     <BsButton
-      class="confirm"
+      id="submit-action"
       disabled={{this.isSubmitButtonDisabled}}
+      @type="primary"
       @defaultText="Yes"
       @pendingText={{this.pendingAction}}
       @fulfilledText={{this.completedAction}}
-      @onClick={{this.startBuild}}
+      @onClick={{modal.submit}}
     />
-    <BsButton
-      @outline={{true}}
-      @onClick={{modal.close}}
-    >
-      {{#if this.wasActionSuccessful}}
-        Close
-      {{else}}
-        No
-      {{/if}}
-    </BsButton>
   </modal.footer>
 </BsModal>

app/components/pipeline/modal/styles.scss

@@ -1,5 +1,7 @@
+@use 'confirm-action/styles' as confirmAction;
 @use 'toggle-job/styles' as toggleJob;
 
 @mixin styles {
+  @include confirmAction.styles;
   @include toggleJob.styles;
 }

app/components/pipeline/styles.scss

@@ -1,13 +1,11 @@
 @use 'nav/styles' as nav;
 @use 'header/styles' as header;
-@use 'modal/confirm-action/styles' as confirm-action-modal;
 @use 'modal/styles' as modal;
 @use 'parameters/styles' as parameters;
 
 @mixin styles {
   @include nav.styles;
   @include header.styles;
-  @include confirm-action-modal.styles;
   @include modal.styles;
   @include parameters.styles;
 }

tests/integration/components/pipeline/modal/confirm-action/component-test.js

@@ -1,7 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'screwdriver-ui/tests/helpers';
-import { fillIn, render } from '@ember/test-helpers';
+import { click, fillIn, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
 
 module(
   'Integration | Component | pipeline/modal/confirm-action',
@@ -227,7 +228,7 @@ module(
         />`
       );
 
-      assert.dom('.modal-footer button.confirm').isDisabled();
+      assert.dom('#submit-action').isDisabled();
     });
 
     test('it enables submit button when reason is provided for frozen job', async function (assert) {
@@ -255,7 +256,84 @@ module(
 
       await fillIn('.frozen-reason input', 'Some reason');
 
-      assert.dom('.modal-footer button.confirm').isEnabled();
+      assert.dom('#submit-action').isEnabled();
+    });
+
+    test('it display success message', async function (assert) {
+      const shuttle = this.owner.lookup('service:shuttle');
+      const shuttleStub = sinon.stub(shuttle, 'fetchFromApi').resolves();
+
+      this.setProperties({
+        pipeline: { parameters: {} },
+        event: {
+          commit: { message: 'commit message', url: 'http://foo.com' },
+          sha: 'deadbeef0123456789'
+        },
+        jobs: [],
+        latestCommitEvent: { sha: 'deadbeef0123456789' },
+        job: { name: 'main' },
+        closeModal: () => {}
+      });
+
+      await render(
+        hbs`<Pipeline::Modal::ConfirmAction
+            @pipeline={{this.pipeline}}
+            @event={{this.event}}
+            @jobs={{this.jobs}}
+            @latestCommitEvent={{this.latestCommitEvent}}
+            @job={{this.job}}
+            @closeModal={{this.closeModal}}
+        />`
+      );
+
+      assert.dom('.alert').doesNotExist();
+
+      await click('#submit-action');
+
+      assert.equal(shuttleStub.calledOnce, true);
+      assert.dom('#submit-action').isDisabled();
+      assert.dom('.alert').exists({ count: 1 });
+      assert.dom('.alert > span').hasText('Started successfully');
+    });
+
+    test('it displays error message when API call fails', async function (assert) {
+      const shuttle = this.owner.lookup('service:shuttle');
+      const errorMessage = 'Failed to trigger build';
+
+      const shuttleStub = sinon
+        .stub(shuttle, 'fetchFromApi')
+        .rejects({ message: errorMessage });
+
+      this.setProperties({
+        pipeline: { parameters: {} },
+        event: {
+          commit: { message: 'commit message', url: 'http://foo.com' },
+          sha: 'deadbeef0123456789'
+        },
+        jobs: [],
+        latestCommitEvent: { sha: 'deadbeef0123456789' },
+        job: { name: 'main' },
+        closeModal: () => {}
+      });
+
+      await render(
+        hbs`<Pipeline::Modal::ConfirmAction
+            @pipeline={{this.pipeline}}
+            @event={{this.event}}
+            @jobs={{this.jobs}}
+            @latestCommitEvent={{this.latestCommitEvent}}
+            @job={{this.job}}
+            @closeModal={{this.closeModal}}
+        />`
+      );
+
+      assert.dom('.alert').doesNotExist();
+
+      await click('#submit-action');
+
+      assert.equal(shuttleStub.calledOnce, true);
+      assert.dom('.alert').exists({ count: 1 });
+      assert.dom('.alert > span').hasText(errorMessage);
     });
   }
 );