Refactored tag delete 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/.lint-todo

@@ -1001,3 +1001,6 @@ add|ember-template-lint|no-passed-in-event-handlers|383|24|383|24|d8b5d7c4140d1d
 add|ember-template-lint|no-passed-in-event-handlers|396|24|396|24|3e1dad0fb19c62adea14c5534d52cd95cfad280a|1662508800000|1672880400000|1678064400000|app/components/tags/tag-form.hbs
 add|ember-template-lint|require-input-label|30|28|30|28|af62541280c3dc86d2ca7a4be8c980ee164fba5a|1662508800000|1672880400000|1678064400000|app/components/tags/tag-form.hbs
 add|ember-template-lint|require-input-label|47|32|47|32|8e299cf5bf0e93e054410239451997a196933d25|1662508800000|1672880400000|1678064400000|app/components/tags/tag-form.hbs
+remove|ember-template-lint|no-action|22|85|22|85|8024e7e42cf37a5954ea4db401cbf123931da388|1658102400000|1668474000000|1673658000000|app/templates/tag.hbs
+remove|ember-template-lint|no-action|41|17|41|17|712a767fa44489687284ef2aa32c1acc5221afce|1658102400000|1668474000000|1673658000000|app/templates/tag.hbs
+remove|ember-template-lint|no-action|42|15|42|15|d3fea3e454ca345739d46caf51afd85a3eea1041|1658102400000|1668474000000|1673658000000|app/templates/tag.hbs

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

@@ -1,16 +0,0 @@
-<header class="modal-header">
-    <h1>Are you sure you want to delete this tag?</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">
-    {{#if this.tag.count.posts}}
-        <span class="red">This tag is attached to <span data-test-text="posts-count">{{this.tag.count.posts}} {{this.postInflection}}</span>.</span>
-    {{/if}}
-    You're about to delete "<strong>{{this.tag.name}}</strong>". This is permanent! We warned you, k?
-</div>
-
-<div class="modal-footer">
-    <button class="gh-btn" type="button" {{action "closeModal"}} data-test-button="cancel"><span>Cancel</span></button>
-    <GhTaskButton @buttonText="Delete" @successText="Deleted" @task={{this.deleteTag}} @class="gh-btn gh-btn-red gh-btn-icon" data-test-button="confirm" />
-</div>

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

@@ -1,32 +0,0 @@
-import ModalComponent from 'ghost-admin/components/modal-base';
-import {alias} from '@ember/object/computed';
-import {computed} from '@ember/object';
-import {task} from 'ember-concurrency';
-
-export default ModalComponent.extend({
-    attributeBindings: ['dataTestModal:data-test-modal'],
-    dataTestModal: 'confirm-delete-tag',
-
-    // Allowed actions
-    confirm: () => {},
-
-    tag: alias('model'),
-
-    postInflection: computed('tag.count.posts', function () {
-        return this.get('tag.count.posts') > 1 ? 'posts' : 'post';
-    }),
-
-    actions: {
-        confirm() {
-            this.deleteTag.perform();
-        }
-    },
-
-    deleteTag: task(function* () {
-        try {
-            yield this.confirm();
-        } finally {
-            this.send('closeModal');
-        }
-    }).drop()
-});

ghost/admin/app/components/tags/delete-tag-modal.hbs

@@ -0,0 +1,18 @@
+<div class="modal-content" {{on-key "Enter" (perform this.deleteTagTask)}} data-test-modal="confirm-delete-tag">
+    <header class="modal-header">
+        <h1>Are you sure you want to delete this tag?</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">
+        {{#if @data.tag.count.posts}}
+            <span class="red">This tag is attached to <span data-test-text="posts-count">{{gh-pluralize @data.tag.count.posts "post"}}</span>.</span>
+        {{/if}}
+        You're about to delete "<strong>{{@data.tag.name}}</strong>". This is permanent! We warned you, k?
+    </div>
+
+    <div class="modal-footer">
+        <button class="gh-btn" type="button" {{on "click" @close}} data-test-button="cancel"><span>Cancel</span></button>
+        <GhTaskButton @buttonText="Delete" @successText="Deleted" @task={{this.deleteTagTask}} @class="gh-btn gh-btn-red gh-btn-icon" data-test-button="confirm" />
+    </div>
+</div>

ghost/admin/app/components/tags/delete-tag-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 DeleteTagModal extends Component {
+    @service notifications;
+    @service router;
+
+    @task({drop: true})
+    *deleteTagTask() {
+        try {
+            const {tag} = this.args.data;
+
+            if (tag.isDeleted) {
+                return true;
+            }
+
+            yield tag.destroyRecord();
+
+            this.notifications.closeAlerts('tag.delete');
+            this.router.transitionTo('tags');
+            return true;
+        } catch (error) {
+            this.notifications.showAPIError(error, {key: 'tag.delete.failed'});
+        } finally {
+            this.args.close();
+        }
+    }
+}

ghost/admin/app/controllers/tag.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import DeleteTagModal from '../components/tags/delete-tag-modal';
 import EmberObject, {action, computed, defineProperty} from '@ember/object';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import classic from 'ember-classic-decorator';
@@ -11,11 +12,10 @@ const SCRATCH_PROPS = ['name', 'slug', 'description', 'metaTitle', 'metaDescript
 
 @classic
 export default class TagController extends Controller {
+    @service modals;
     @service notifications;
     @service router;
 
-    showDeleteTagModal = false;
-
     @alias('model')
         tag;
 
@@ -32,23 +32,9 @@ export default class TagController extends Controller {
     }
 
     @action
-    openDeleteTagModal() {
-        this.set('showDeleteTagModal', true);
-    }
-
-    @action
-    closeDeleteTagModal() {
-        this.set('showDeleteTagModal', false);
-    }
-
-    @action
-    deleteTag() {
-        return this.tag.destroyRecord().then(() => {
-            this.set('showDeleteTagModal', false);
-            this.router.transitionTo('tags');
-            return true;
-        }, (error) => {
-            return this.notifications.showAPIError(error, {key: 'tag.delete'});
+    confirmDeleteTag() {
+        return this.modals.open(DeleteTagModal, {
+            tag: this.model
         });
     }
 

ghost/admin/app/templates/tag.hbs

@@ -19,7 +19,7 @@
 
     {{#unless this.tag.isNew}}
         <div>
-            <button type="button" class="gh-btn gh-btn-red gh-btn-icon" {{on "click" (action "openDeleteTagModal")}} data-test-button="delete-tag">
+            <button type="button" class="gh-btn gh-btn-red gh-btn-icon" {{on "click" this.confirmDeleteTag}} data-test-button="delete-tag">
                 <span>Delete tag</span>
             </button>
         </div>
@@ -32,13 +32,4 @@
         @confirm={{action "leaveScreen"}}
         @close={{action "toggleUnsavedChangesModal"}}
         @modifier="action wide" />
-{{/if}}
-
-{{#if this.showDeleteTagModal}}
-    <GhFullscreenModal
-        @modal="delete-tag"
-        @model={{this.tag}}
-        @confirm={{action "deleteTag"}}
-        @close={{action "closeDeleteTagModal"}}
-        @modifier="action wide" />
 {{/if}}