From 45b9a4fe8e99598845fd726d792c0fff45e339ad Mon Sep 17 00:00:00 2001
From: Ming-Hay <157658916+minghay@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:26:58 -0700
Subject: [PATCH] fix: Use unified modal style for toggle job modal (#1090)

---
 app/components/pipeline/modal/styles.scss     |  5 ++
 .../pipeline/modal/toggle-job/component.js    |  2 +-
 .../pipeline/modal/toggle-job/styles.scss     | 51 ++++---------------
 .../pipeline/modal/toggle-job/template.hbs    | 17 +++++--
 app/components/pipeline/styles.scss           |  4 +-
 .../modal/toggle-job/component-test.js        | 46 +++++++++++++----
 6 files changed, 69 insertions(+), 56 deletions(-)
 create mode 100644 app/components/pipeline/modal/styles.scss

diff --git a/app/components/pipeline/modal/styles.scss b/app/components/pipeline/modal/styles.scss
new file mode 100644
index 000000000..432b6e7e7
--- /dev/null
+++ b/app/components/pipeline/modal/styles.scss
@@ -0,0 +1,5 @@
+@use 'toggle-job/styles' as toggleJob;
+
+@mixin styles {
+  @include toggleJob.styles;
+}
diff --git a/app/components/pipeline/modal/toggle-job/component.js b/app/components/pipeline/modal/toggle-job/component.js
index c46b589c3..80976c536 100644
--- a/app/components/pipeline/modal/toggle-job/component.js
+++ b/app/components/pipeline/modal/toggle-job/component.js
@@ -18,7 +18,7 @@ export default class PipelineModalToggleJobComponent extends Component {
   async updateJob() {
     const payload = {
       state:
-        this.args.toggleAction.toLowerCase() === 'disabled'
+        this.args.toggleAction.toLowerCase() === 'disable'
           ? 'DISABLED'
           : 'ENABLED'
     };
diff --git a/app/components/pipeline/modal/toggle-job/styles.scss b/app/components/pipeline/modal/toggle-job/styles.scss
index b79d213d5..29080bf41 100644
--- a/app/components/pipeline/modal/toggle-job/styles.scss
+++ b/app/components/pipeline/modal/toggle-job/styles.scss
@@ -1,46 +1,17 @@
-@use 'variables';
 @use 'screwdriver-colors' as colors;
 
 @mixin styles {
-  #ember-bootstrap-wormhole {
-    .modal.toggle-job {
-      .modal-header {
-        font-weight: variables.$weight-bold;
-        font-size: 1.5rem;
-        padding: 1rem 3rem;
-      }
-
-      .modal-body {
-        padding: 3.5rem 3rem;
-
-        label {
-          display: flex;
-          flex-direction: column;
-
-          input {
-            background-color: colors.$sd-flyout-bg;
-            border-radius: 3px;
-            border: 1px solid colors.$sd-light-gray;
-            padding: 0.375rem 0.75rem;
-          }
-        }
-      }
-
-      .modal-footer {
-        padding: 1rem 3rem;
-
-        button {
-          width: 150px;
-
-          &.confirm {
-            background-color: colors.$sd-running;
-            border-color: colors.$sd-running;
-
-            &:hover {
-              background-color: colors.$sd-link;
-              border-color: colors.$sd-link;
-            }
-          }
+  #toggle-job-modal {
+    .modal-body {
+      label {
+        display: flex;
+        flex-direction: column;
+
+        input {
+          background-color: colors.$sd-flyout-bg;
+          border-radius: 3px;
+          border: 1px solid colors.$sd-light-gray;
+          padding: 0.375rem 0.75rem;
         }
       }
     }
diff --git a/app/components/pipeline/modal/toggle-job/template.hbs b/app/components/pipeline/modal/toggle-job/template.hbs
index 232a78ad4..ec42165f2 100644
--- a/app/components/pipeline/modal/toggle-job/template.hbs
+++ b/app/components/pipeline/modal/toggle-job/template.hbs
@@ -1,5 +1,5 @@
 <BsModal
-  class="toggle-job"
+  id="toggle-job-modal"
   @onHide={{fn @closeModal}}
   @onSubmit={{fn this.updateJob}}
   as |modal|
@@ -26,10 +26,21 @@
     {{/if}}
     <label>
       Reason
-      <Input @value={{this.stateChangeMessage}}  autofocus="autofocus" placeholder="Reason for the job state change (optional)"/>
+      <Input
+        @value={{this.stateChangeMessage}}
+        autofocus="autofocus"
+        placeholder="Reason for the job state change (optional)"
+      />
     </label>
   </modal.body>
   <modal.footer>
-    <BsButton class="confirm" @onClick={{modal.submit}} disabled={{this.isDisabled}}>Save</BsButton>
+    <BsButton
+      id="submit-action"
+      @type="primary"
+      @onClick={{modal.submit}}
+      disabled={{this.isDisabled}}
+    >
+      Save
+    </BsButton>
   </modal.footer>
 </BsModal>
diff --git a/app/components/pipeline/styles.scss b/app/components/pipeline/styles.scss
index 2cb4520c9..b096c8605 100644
--- a/app/components/pipeline/styles.scss
+++ b/app/components/pipeline/styles.scss
@@ -1,13 +1,13 @@
 @use 'nav/styles' as nav;
 @use 'header/styles' as header;
 @use 'modal/confirm-action/styles' as confirm-action-modal;
-@use 'modal/toggle-job/styles' as toggle-job;
+@use 'modal/styles' as modal;
 @use 'parameters/styles' as parameters;
 
 @mixin styles {
   @include nav.styles;
   @include header.styles;
   @include confirm-action-modal.styles;
-  @include toggle-job.styles;
+  @include modal.styles;
   @include parameters.styles;
 }
diff --git a/tests/integration/components/pipeline/modal/toggle-job/component-test.js b/tests/integration/components/pipeline/modal/toggle-job/component-test.js
index 78d1b4cb4..927b90931 100644
--- a/tests/integration/components/pipeline/modal/toggle-job/component-test.js
+++ b/tests/integration/components/pipeline/modal/toggle-job/component-test.js
@@ -15,7 +15,12 @@ module('Integration | Component | pipeline/modal/toggle-job', function (hooks) {
       closeModal: () => {}
     });
     await render(
-      hbs`<Pipeline::Modal::ToggleJob @jobId={{this.jobId}} @name={{this.name}} @toggleAction={{this.toggleAction}} @closeModal={{this.closeModal}}/>`
+      hbs`<Pipeline::Modal::ToggleJob
+        @jobId={{this.jobId}}
+        @name={{this.name}}
+        @toggleAction={{this.toggleAction}}
+        @closeModal={{this.closeModal}}
+      />`
     );
 
     assert.dom('.modal-title').hasText('Disable the "main" job?');
@@ -32,7 +37,12 @@ module('Integration | Component | pipeline/modal/toggle-job', function (hooks) {
       closeModal: () => {}
     });
     await render(
-      hbs`<Pipeline::Modal::ToggleJob @jobId={{this.jobId}} @name={{this.name}} @toggleAction={{this.toggleAction}} @closeModal={{this.closeModal}}/>`
+      hbs`<Pipeline::Modal::ToggleJob
+        @jobId={{this.jobId}}
+        @name={{this.name}}
+        @toggleAction={{this.toggleAction}}
+        @closeModal={{this.closeModal}}
+      />`
     );
 
     assert
@@ -53,13 +63,19 @@ module('Integration | Component | pipeline/modal/toggle-job', function (hooks) {
       closeModal: () => {}
     });
     await render(
-      hbs`<Pipeline::Modal::ToggleJob @jobId={{this.jobId}} @name={{this.name}} @toggleAction={{this.toggleAction}} @closeModal={{this.closeModal}}/>`
+      hbs`<Pipeline::Modal::ToggleJob
+        @jobId={{this.jobId}}
+        @name={{this.name}}
+        @toggleAction={{this.toggleAction}}
+        @closeModal={{this.closeModal}}
+      />`
     );
-    await click('button.confirm');
+    await click('#submit-action');
 
     assert.dom('.modal-body .alert.alert-warning').exists({ count: 1 });
     assert.dom('.modal-body .alert.alert-warning > span').hasText(errorMessage);
   });
+
   test('it displays success message when update succeeds', async function (assert) {
     const shuttle = this.owner.lookup('service:shuttle');
 
@@ -72,9 +88,14 @@ module('Integration | Component | pipeline/modal/toggle-job', function (hooks) {
       closeModal: () => {}
     });
     await render(
-      hbs`<Pipeline::Modal::ToggleJob @jobId={{this.jobId}} @name={{this.name}} @toggleAction={{this.toggleAction}} @closeModal={{this.closeModal}}/>`
+      hbs`<Pipeline::Modal::ToggleJob
+        @jobId={{this.jobId}}
+        @name={{this.name}}
+        @toggleAction={{this.toggleAction}}
+        @closeModal={{this.closeModal}}
+      />`
     );
-    await click('button.confirm');
+    await click('#submit-action');
 
     assert.dom('.modal-body .alert.alert-success').exists({ count: 1 });
     assert
@@ -94,13 +115,18 @@ module('Integration | Component | pipeline/modal/toggle-job', function (hooks) {
       closeModal: () => {}
     });
     await render(
-      hbs`<Pipeline::Modal::ToggleJob @jobId={{this.jobId}} @name={{this.name}} @toggleAction={{this.toggleAction}} @closeModal={{this.closeModal}}/>`
+      hbs`<Pipeline::Modal::ToggleJob
+        @jobId={{this.jobId}}
+        @name={{this.name}}
+        @toggleAction={{this.toggleAction}}
+        @closeModal={{this.closeModal}}
+      />`
     );
 
-    assert.dom('button.confirm').isNotDisabled();
+    assert.dom('#submit-action').isNotDisabled();
 
-    await click('button.confirm');
+    await click('#submit-action');
 
-    assert.dom('button.confirm').isDisabled();
+    assert.dom('#submit-action').isDisabled();
   });
 });