add delete webhook icon and confirmation modal

app/components/modal-delete-webhook.js

@@ -0,0 +1,26 @@
+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({
+    notifications: service(),
+
+    webhook: alias('model'),
+
+    actions: {
+        confirm() {
+            this.deleteWebhook.perform();
+        }
+    },
+
+    deleteWebhook: task(function* () {
+        try {
+            yield this.confirm();
+        } catch (error) {
+            this.notifications.showAPIError(error, {key: 'webhook.delete.failed'});
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop()
+});

app/controllers/settings/integration.js

@@ -61,6 +61,18 @@ export default Controller.extend({
             this.integration.rollbackAttributes();
 
             return transition.retry();
+        },
+
+        confirmWebhookDeletion(webhook) {
+            this.set('webhookToDelete', webhook);
+        },
+
+        cancelWebhookDeletion() {
+            this.set('webhookToDelete', null);
+        },
+
+        deleteWebhook() {
+            return this.webhookToDelete.destroyRecord();
         }
     },
 

app/templates/components/modal-delete-webhook.hbs

@@ -0,0 +1,15 @@
+<header class="modal-header">
+    <h1>Are you sure?</h1>
+</header>
+<a class="close" href="" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body">
+    <p>
+        Deleting this webhook may prevent the integration from functioning.
+    </p>
+</div>
+
+<div class="modal-footer">
+    <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
+    {{gh-task-button "Delete Webhook" successText="Deleted" task=deleteWebhook class="gh-btn gh-btn-red gh-btn-icon"}}
+</div>

app/templates/settings/integration.hbs

@@ -143,6 +143,9 @@
                                 {{#link-to "settings.integration.webhooks.edit" integration webhook}}
                                     {{svg-jar "koenig/kg-thin-edit" class="w4 fill-black-80"}}
                                 {{/link-to}}
+                                <button {{action "confirmWebhookDeletion" webhook}}>
+                                    {{svg-jar "trash" class="w4 fill-red"}}
+                                </button>
                             </div>
                         </td>
                     </tr>
@@ -172,4 +175,11 @@
         modifier="action wide"}}
 {{/if}}
 
+{{#if webhookToDelete}}
+    {{gh-fullscreen-modal "delete-webhook"
+        confirm=(action "deleteWebhook")
+        close=(action "cancelWebhookDeletion")
+        modifier="action wide"}}
+{{/if}}
+
 {{outlet}}