From 556a2a8ee9c532c5d414243958c3e5f76b208765 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 8 Sep 2022 09:18:43 +0100
Subject: [PATCH] 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 | 3 ++
.../admin/app/components/modal-delete-tag.hbs | 16 ----------
.../admin/app/components/modal-delete-tag.js | 32 -------------------
.../app/components/tags/delete-tag-modal.hbs | 18 +++++++++++
.../app/components/tags/delete-tag-modal.js | 29 +++++++++++++++++
ghost/admin/app/controllers/tag.js | 24 +++-----------
ghost/admin/app/templates/tag.hbs | 11 +------
7 files changed, 56 insertions(+), 77 deletions(-)
delete mode 100644 ghost/admin/app/components/modal-delete-tag.hbs
delete mode 100644 ghost/admin/app/components/modal-delete-tag.js
create mode 100644 ghost/admin/app/components/tags/delete-tag-modal.hbs
create mode 100644 ghost/admin/app/components/tags/delete-tag-modal.js
diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo
index d5754c7c05..1cf8d019c2 100644
--- a/ghost/admin/.lint-todo
+++ b/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
diff --git a/ghost/admin/app/components/modal-delete-tag.hbs b/ghost/admin/app/components/modal-delete-tag.hbs
deleted file mode 100644
index 808d8972f6..0000000000
--- a/ghost/admin/app/components/modal-delete-tag.hbs
+++ /dev/null
@@ -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>
diff --git a/ghost/admin/app/components/modal-delete-tag.js b/ghost/admin/app/components/modal-delete-tag.js
deleted file mode 100644
index 9118fc616d..0000000000
--- a/ghost/admin/app/components/modal-delete-tag.js
+++ /dev/null
@@ -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()
-});
diff --git a/ghost/admin/app/components/tags/delete-tag-modal.hbs b/ghost/admin/app/components/tags/delete-tag-modal.hbs
new file mode 100644
index 0000000000..02b9908611
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ghost/admin/app/components/tags/delete-tag-modal.js b/ghost/admin/app/components/tags/delete-tag-modal.js
new file mode 100644
index 0000000000..99c60a5583
--- /dev/null
+++ b/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();
+ }
+ }
+}
diff --git a/ghost/admin/app/controllers/tag.js b/ghost/admin/app/controllers/tag.js
index c75825c12b..5eb371189a 100644
--- a/ghost/admin/app/controllers/tag.js
+++ b/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
});
}
diff --git a/ghost/admin/app/templates/tag.hbs b/ghost/admin/app/templates/tag.hbs
index f0a49e1f9c..c9a2fec48c 100644
--- a/ghost/admin/app/templates/tag.hbs
+++ b/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}}
\ No newline at end of file