fix: Use unified modal style for toggle job modal (#1090)

screwdriver-cd · Jul 15, 2024 · 45b9a4f · 45b9a4f
1 parent 7729279
commit 45b9a4f
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 56 deletions.
diff --git a/app/components/pipeline/modal/styles.scss 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
   });
 });