From 341bc9d9f0cd21b0f62578c339da07b7a2d38a06 Mon Sep 17 00:00:00 2001
From: Ming-Hay <157658916+minghay@users.noreply.github.com>
Date: Wed, 31 Jul 2024 00:18:23 -0700
Subject: [PATCH] feat: New modal component to stop a running build (#1092)

---
 .../pipeline/modal/stop-build/component.js    | 29 +++++++
 .../pipeline/modal/stop-build/template.hbs    | 39 ++++++++++
 .../modal/stop-build/component-test.js        | 77 +++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 app/components/pipeline/modal/stop-build/component.js
 create mode 100644 app/components/pipeline/modal/stop-build/template.hbs
 create mode 100644 tests/integration/components/pipeline/modal/stop-build/component-test.js

diff --git a/app/components/pipeline/modal/stop-build/component.js b/app/components/pipeline/modal/stop-build/component.js
new file mode 100644
index 000000000..ea14d9046
--- /dev/null
+++ b/app/components/pipeline/modal/stop-build/component.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class PipelineModalStopBuildComponent extends Component {
+  @service shuttle;
+
+  @tracked isDisabled = false;
+
+  @tracked errorMessage = null;
+
+  @tracked successMessage = null;
+
+  @action
+  async stopBuild() {
+    await this.shuttle
+      .fetchFromApi('put', `/builds/${this.args.buildId}`, {
+        status: 'ABORTED'
+      })
+      .then(() => {
+        this.successMessage = 'Build stopped successfully';
+        this.isDisabled = true;
+      })
+      .catch(err => {
+        this.errorMessage = err.message;
+      });
+  }
+}
diff --git a/app/components/pipeline/modal/stop-build/template.hbs b/app/components/pipeline/modal/stop-build/template.hbs
new file mode 100644
index 000000000..1cd718be1
--- /dev/null
+++ b/app/components/pipeline/modal/stop-build/template.hbs
@@ -0,0 +1,39 @@
+<BsModal
+  id="stop-build-modal"
+  @onHide={{fn @closeModal}}
+  @onSubmit={{fn this.stopBuild}}
+  as |modal|
+>
+  <modal.header>
+    <div class="modal-title">
+      Stop the build
+    </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}}
+    Are you sure you want to stop the build?
+  </modal.body>
+  <modal.footer>
+    <BsButton
+      id="stop-build"
+      @type="primary"
+      @onClick={{modal.submit}}
+      disabled={{this.isDisabled}}
+    >
+      Yes
+    </BsButton>
+  </modal.footer>
+</BsModal>
diff --git a/tests/integration/components/pipeline/modal/stop-build/component-test.js b/tests/integration/components/pipeline/modal/stop-build/component-test.js
new file mode 100644
index 000000000..25eff2f71
--- /dev/null
+++ b/tests/integration/components/pipeline/modal/stop-build/component-test.js
@@ -0,0 +1,77 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'screwdriver-ui/tests/helpers';
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module('Integration | Component | pipeline/modal/stop-build', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.setProperties({
+      buildId: 1,
+      closeModal: () => {}
+    });
+
+    await render(
+      hbs`<Pipeline::Modal::StopBuild
+        @buildId={{this.buildId}}
+        @closeModal={{this.closeModal}}
+      />`
+    );
+
+    assert.dom('.alert').doesNotExist();
+    assert.dom('#stop-build').exists({ count: 1 });
+    assert.dom('#stop-build').isEnabled();
+  });
+
+  test('it displays error message when stop fails', async function (assert) {
+    const shuttle = this.owner.lookup('service:shuttle');
+    const errorMessage = 'Failed to stop build';
+    const shuttleStub = sinon
+      .stub(shuttle, 'fetchFromApi')
+      .rejects({ message: errorMessage });
+
+    this.setProperties({
+      buildId: 1,
+      closeModal: () => {}
+    });
+
+    await render(
+      hbs`<Pipeline::Modal::StopBuild
+        @buildId={{this.buildId}}
+        @closeModal={{this.closeModal}}
+      />`
+    );
+
+    await click('#stop-build');
+
+    assert.equal(shuttleStub.calledOnce, true);
+    assert.dom('.alert').exists({ count: 1 });
+    assert.dom('.alert > span').hasText(errorMessage);
+  });
+
+  test('it displays success message when stop succeeds', async function (assert) {
+    const shuttle = this.owner.lookup('service:shuttle');
+    const shuttleStub = sinon.stub(shuttle, 'fetchFromApi').resolves();
+
+    this.setProperties({
+      buildId: 1,
+      closeModal: () => {}
+    });
+
+    await render(
+      hbs`<Pipeline::Modal::StopBuild
+        @buildId={{this.buildId}}
+        @closeModal={{this.closeModal}}
+      />`
+    );
+
+    await click('#stop-build');
+
+    assert.equal(shuttleStub.calledOnce, true);
+    assert.dom('.alert').exists({ count: 1 });
+    assert.dom('.alert > span').hasText('Build stopped successfully');
+    assert.dom('#stop-build').isDisabled();
+  });
+});