Confirm-action fixes (#16777)

* test and the fix

* pr fixes

* comment fix

ui/lib/core/addon/components/confirm-action.hbs

@@ -15,13 +15,13 @@
     >
       {{yield}}
       {{#if (eq @buttonClasses "toolbar-link")}}
-        <Chevron @direction={{if this.showConfirm "up" "down"}} />
+        <Chevron @direction={{if this.showConfirm "up" "down"}} data-test-confirm-action-chevron />
       {{/if}}
     </d.Trigger>
     <d.Content @defaultClass="popup-menu-content">
       <div class="box confirm-action-message">
         <div class="message is-highlight">
-          <div class="message-title">
+          <div class="message-title" data-test-confirm-action-title>
             <Icon @name="alert-triangle-fill" />
             {{this.confirmTitle}}
           </div>
@@ -35,7 +35,7 @@
             disabled={{or this.disabled this.isRunning}}
             class="link is-destroy"
             data-test-confirm-button="true"
-            {{on "click" this.onConfirm}}
+            {{on "click" (fn this.onConfirm d.actions)}}
           >
             {{#if this.isRunning}}
               <span class="loader is-inline-block"></span>
@@ -43,7 +43,7 @@
               {{this.confirmButtonText}}
             {{/if}}
           </button>
-          <button type="button" class="link" data-test-confirm-cancel-button="true" {{on "click" (fn this.closeButton d)}}>
+          <button type="button" class="link" data-test-confirm-cancel-button="true" {{on "click" d.actions.close}}>
             {{this.cancelButtonText}}
           </button>
         </div>

ui/lib/core/addon/components/confirm-action.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
 
 /**
  * @module ConfirmAction
@@ -29,6 +30,8 @@ import { assert } from '@ember/debug';
  */
 
 export default class ConfirmActionComponent extends Component {
+  @tracked showConfirm = false;
+
   get horizontalPosition() {
     return this.args.horizontalPosition || 'auto-right';
   }
@@ -61,11 +64,6 @@ export default class ConfirmActionComponent extends Component {
     return this.args.cancelButtonText || 'Cancel';
   }
 
-  @action
-  closeButton(d) {
-    d.actions.close();
-  }
-
   @action
   toggleConfirm() {
     // toggle
@@ -73,15 +71,15 @@ export default class ConfirmActionComponent extends Component {
   }
 
   @action
-  onConfirm() {
+  onConfirm(actions) {
     const confirmAction = this.args.onConfirmAction;
 
     if (typeof confirmAction !== 'function') {
       assert('confirm-action components expects `onConfirmAction` attr to be a function');
     } else {
       confirmAction();
-      // toggle
-      this.showConfirm = !this.showConfirm;
+      // close the dropdown content
+      actions.close();
     }
   }
 }

ui/tests/integration/components/confirm-action-test.js

@@ -0,0 +1,53 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import sinon from 'sinon';
+
+module('Integration | Component | confirm-action', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders and on click shows the correct icon', async function (assert) {
+    let confirmAction = sinon.spy();
+    this.set('onConfirm', confirmAction);
+    await render(hbs`
+      <ConfirmAction
+        @onConfirmAction={{onConfirm}}
+        @buttonClasses="toolbar-link"
+      >
+        DELETE
+        </ConfirmAction>
+      `);
+    assert.dom('[data-test-icon="chevron-down"]').exists('Icon is pointing down');
+    await click('[data-test-confirm-action-trigger="true"]');
+    assert.dom('[data-test-icon="chevron-up"]').exists('Icon is now pointing up');
+    assert.dom('[data-test-confirm-action-title]').hasText('Delete this?');
+  });
+
+  test('it closes the confirmation modal on successful delete', async function (assert) {
+    let confirmAction = sinon.spy();
+    this.set('onConfirm', confirmAction);
+    await render(hbs`
+      <ConfirmAction
+        @onConfirmAction={{onConfirm}}
+        @buttonClasses="toolbar-link"
+      >
+        DELETE
+        </ConfirmAction>
+      `);
+    await click('[data-test-confirm-action-trigger="true"]');
+    await click('[data-test-confirm-cancel-button="true"]');
+    // assert that after CANCEL the icon button is pointing down.
+    assert.dom('[data-test-icon="chevron-down"]').exists('Icon is pointing down after clicking cancel');
+    // open the modal again to test the DELETE action
+    await click('[data-test-confirm-action-trigger="true"]');
+    await click('[data-test-confirm-button="true"]');
+    assert
+      .dom('[data-test-icon="chevron-down"]')
+      .exists('Icon is pointing down after executing the Delete action');
+    assert.true(confirmAction.called, 'calls the action when Delete is pressed');
+    assert
+      .dom('[data-test-confirm-action-title]')
+      .doesNotExist('it has closed the confirm content and does not show the title');
+  });
+});