Refactored delete custom integration modal

refs https://github.com/TryGhost/Team/issues/1734
refs https://github.com/TryGhost/Team/issues/559
refs https://github.com/TryGhost/Ghost/issues/14101

- switches to newer modal patterns ready for later Ember upgrades

ghost/admin/app/components/modal-delete-integration.hbs

@@ -1,17 +0,0 @@
-<header class="modal-header">
-    <h1>Are you sure?</h1>
-</header>
-<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
-<div class="modal-body">
-    <p>
-        Deleting this integration will remove all webhooks and api keys associated with it.
-    </p>
-</div>
-<div class="modal-footer">
-    <button class="gh-btn" type="button" {{action "closeModal"}}><span>Cancel</span></button>
-    <GhTaskButton
-        @buttonText="Delete Integration"
-        @successText="Deleted"
-        @task={{this.deleteIntegration}}
-        @class="gh-btn gh-btn-red gh-btn-icon" />
-</div>

ghost/admin/app/components/modal-delete-integration.js

@@ -1,26 +0,0 @@
-import ModalComponent from 'ghost-admin/components/modal-base';
-import {alias} from '@ember/object/computed';
-import {inject as service} from '@ember/service';
-import {task} from 'ember-concurrency';
-
-export default ModalComponent.extend({
-    router: service(),
-    feature: service(),
-    notifications: service(),
-    integration: alias('model'),
-    actions: {
-        confirm() {
-            this.deleteIntegration.perform();
-        }
-    },
-    deleteIntegration: task(function* () {
-        try {
-            yield this.confirm();
-            this.router.transitionTo('settings.integrations');
-        } catch (error) {
-            this.notifications.showAPIError(error, {key: 'integration.delete.failed'});
-        } finally {
-            this.send('closeModal');
-        }
-    }).drop()
-});

ghost/admin/app/components/settings/integrations/delete-integration-modal.hbs

@@ -0,0 +1,20 @@
+<div class="modal-content" data-test-modal="delete-integration">
+    <header class="modal-header">
+        <h1>Are you sure?</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+    <div class="modal-body">
+        <p>
+            Deleting this integration will remove all webhooks and api keys associated with it.
+        </p>
+    </div>
+    <div class="modal-footer">
+        <button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Delete Integration"
+            @successText="Deleted"
+            @task={{this.deleteIntegrationTask}}
+            @class="gh-btn gh-btn-red gh-btn-icon"
+            data-test-button="confirm" />
+    </div>
+</div>

ghost/admin/app/components/settings/integrations/delete-integration-modal.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default class DeleteIntegrationModal extends Component {
+    @service notifications;
+    @service router;
+
+    @task({drop: true})
+    *deleteIntegrationTask() {
+        try {
+            const {integration} = this.args.data;
+
+            if (integration.isDeleted) {
+                return true;
+            }
+
+            yield integration.destroyRecord();
+
+            this.notifications.closeAlerts('integration.delete');
+            this.router.transitionTo('settings.integrations');
+            return true;
+        } catch (error) {
+            this.notifications.showAPIError(error, {key: 'integration.delete.failed'});
+        } finally {
+            this.args.close();
+        }
+    }
+}

ghost/admin/app/controllers/settings/integration.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import DeleteIntegrationModal from '../../components/settings/integrations/delete-integration-modal';
 import config from 'ghost-admin/config/environment';
 import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
 import {
@@ -14,11 +15,11 @@ import {tracked} from '@glimmer/tracking';
 export default class IntegrationController extends Controller {
     @service config;
     @service ghostPaths;
+    @service modals;
 
     imageExtensions = IMAGE_EXTENSIONS;
     imageMimeTypes = IMAGE_MIME_TYPES;
 
-    @tracked showDeleteIntegrationModal = false;
     @tracked showRegenerateKeyModal = false;
     @tracked showUnsavedChangesModal = false;
     @tracked selectedApiKey = null;
@@ -148,22 +149,12 @@ export default class IntegrationController extends Controller {
         return transition.retry();
     }
 
-    @action
-    deleteIntegration(event) {
-        event?.preventDefault();
-        this.integration.destroyRecord();
-    }
-
     @action
     confirmIntegrationDeletion(event) {
         event?.preventDefault();
-        this.showDeleteIntegrationModal = true;
+        return this.modals.open(DeleteIntegrationModal, {
-    }
+            integration: this.integration
-
+        });
-    @action
-    cancelIntegrationDeletion(event) {
-        event?.preventDefault();
-        this.showDeleteIntegrationModal = false;
     }
 
     @action

ghost/admin/app/templates/settings/integration.hbs

@@ -215,7 +215,7 @@
                                             <li>
                                                 <LinkTo @route="settings.integration.webhooks.edit" @models={{array this.integration webhook}} data-test-link="edit-webhook">
                                                     Edit
-                                                </LinkTo>                                            
+                                                </LinkTo>
                                             </li>
                                             <li>
                                                 <button data-test-button="delete-webhook" type="button" {{on "click" (fn this.confirmWebhookDeletion webhook)}}>
@@ -265,7 +265,7 @@
 
     <section class="gh-main-section">
         <div class="gh-main-section-block">
-            <button class="gh-btn gh-btn-red gh-btn-icon" type="button" {{on "click" this.confirmIntegrationDeletion}}>
+            <button class="gh-btn gh-btn-red gh-btn-icon" type="button" {{on "click" this.confirmIntegrationDeletion}} data-test-button="delete-integration">
                 <span> Delete integration </span>
             </button>
         </div>
@@ -290,13 +290,6 @@
         @modifier="action wide" />
 {{/if}}
 
-{{#if this.showDeleteIntegrationModal}}
-    <GhFullscreenModal @modal="delete-integration"
-        @confirm={{this.deleteIntegration}}
-        @close={{this.cancelIntegrationDeletion}}
-        @modifier="action wide" />
-{{/if}}
-
 {{#if this.webhookToDelete}}
     <GhFullscreenModal @modal="delete-webhook"
         @confirm={{this.deleteWebhook}}

ghost/admin/tests/acceptance/settings/integrations-test.js

@@ -483,7 +483,7 @@ describe('Acceptance: Settings - Integrations - Custom', function () {
 
             await visit('/settings/integrations/1');
             await click('[data-test-input="description"]');
-            await await blur('[data-test-input="description"]');
+            await blur('[data-test-input="description"]');
             await click('[data-test-link="integrations-back"]');
 
             expect(
@@ -493,5 +493,20 @@ describe('Acceptance: Settings - Integrations - Custom', function () {
 
             expect(currentURL()).to.equal('/settings/integrations');
         });
+
+        it('can delete integration', async function () {
+            this.server.create('integration');
+
+            await visit('/settings/integrations/1');
+            await click('[data-test-button="delete-integration"]');
+
+            expect(find('[data-test-modal="delete-integration"]')).to.exist;
+
+            await click('[data-test-modal="delete-integration"] [data-test-button="confirm"]');
+
+            expect(find('[data-test-modal="delete-integration"]')).to.not.exist;
+            expect(currentURL()).to.equal('/settings/integrations');
+            expect(find('[data-test-custom-integration]')).to.not.exist;
+        });
     });
 });