Switched delete snippet modal to new modal pattern (#15468)

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/editor/modals/delete-snippet.hbs

@@ -0,0 +1,22 @@
+<div class="modal-content" data-test-modal="delete-snippet">
+    <header class="modal-header">
+        <h1>Confirm snippet deletion</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>
+            You're about to delete the "<strong>{{@data.snippet.name}}</strong>" snippet. This is permanent, and will delete the snippet for all staff users. It will <strong>not</strong> change any posts where you’ve used this snippet in the past.
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Delete snippet"
+            @successText="Deleted"
+            @task={{this.deleteSnippetTask}}
+            @taskArgs={{@data.snippet}}
+            @class="gh-btn gh-btn-red gh-btn-icon" />
+    </div>
+</div>

ghost/admin/app/components/editor/modals/delete-snippet.js

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

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

@@ -1,20 +0,0 @@
-<header class="modal-header">
-    <h1>Confirm snippet deletion</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>
-        You're about to delete the "<strong>{{this.snippet.name}}</strong>" snippet. This is permanent, and will delete the snippet for all staff users. It will <strong>not</strong> change any posts where you’ve used this snippet in the past.
-    </p>
-</div>
-
-<div class="modal-footer">
-    <button class="gh-btn" type="button" {{action "closeModal"}}><span>Cancel</span></button>
-    <GhTaskButton
-        @buttonText="Delete snippet"
-        @successText="Deleted"
-        @task={{this.deleteSnippet}}
-        @taskArgs={{this.snippet}}
-        @class="gh-btn gh-btn-red gh-btn-icon" />
-</div>

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

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

ghost/admin/app/controllers/editor.js

@@ -1,6 +1,7 @@
 import ConfirmEditorLeaveModal from '../components/modals/editor/confirm-leave';
 import Controller, {inject as controller} from '@ember/controller';
 import DeletePostModal from '../components/modals/delete-post';
+import DeleteSnippetModal from '../components/editor/modals/delete-snippet';
 import PostModel from 'ghost-admin/models/post';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import classic from 'ember-classic-decorator';
@@ -109,7 +110,6 @@ export default class EditorController extends Controller {
     shouldFocusTitle = false;
     showReAuthenticateModal = false;
     showUpgradeModal = false;
-    showDeleteSnippetModal = false;
     showSettingsMenu = false;
     hostLimitError = null;
 
@@ -409,13 +409,10 @@ export default class EditorController extends Controller {
     }
 
     @action
-    toggleDeleteSnippetModal(snippet) {
-        this.set('snippetToDelete', snippet);
-    }
-
-    @action
-    deleteSnippet(snippet) {
-        return snippet.destroyRecord();
+    async confirmDeleteSnippet(snippet) {
+        await this.modals.open(DeleteSnippetModal, {
+            snippet
+        });
     }
 
     /* Public tasks ----------------------------------------------------------*/

ghost/admin/app/controllers/lexical-editor.js

@@ -1,6 +1,7 @@
 import ConfirmEditorLeaveModal from '../components/modals/editor/confirm-leave';
 import Controller, {inject as controller} from '@ember/controller';
 import DeletePostModal from '../components/modals/delete-post';
+import DeleteSnippetModal from '../components/editor/modals/delete-snippet';
 import PostModel from 'ghost-admin/models/post';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import classic from 'ember-classic-decorator';
@@ -109,7 +110,6 @@ export default class LexicalEditorController extends Controller {
     shouldFocusTitle = false;
     showReAuthenticateModal = false;
     showUpgradeModal = false;
-    showDeleteSnippetModal = false;
     showSettingsMenu = false;
     hostLimitError = null;
 
@@ -410,13 +410,10 @@ export default class LexicalEditorController extends Controller {
     }
 
     @action
-    toggleDeleteSnippetModal(snippet) {
-        this.set('snippetToDelete', snippet);
-    }
-
-    @action
-    deleteSnippet(snippet) {
-        return snippet.destroyRecord();
+    async confirmDeleteSnippet(snippet) {
+        await this.modals.open(DeleteSnippetModal, {
+            snippet
+        });
     }
 
     /* Public tasks ----------------------------------------------------------*/

ghost/admin/app/templates/editor.hbs

@@ -68,7 +68,7 @@
                 @snippets={{this.snippets}}
                 @saveSnippet={{if this.canManageSnippets this.saveSnippet}}
                 @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
-                @deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
+                @deleteSnippet={{if this.canManageSnippets this.confirmDeleteSnippet}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
                 @featureImageCaption={{this.post.featureImageCaption}}
@@ -136,16 +136,6 @@
             @modifier="action wide"
         />
     {{/if}}
-
-    {{#if this.snippetToDelete}}
-        <GhFullscreenModal
-            @modal="delete-snippet"
-            @model={{this.snippetToDelete}}
-            @confirm={{this.deleteSnippet}}
-            @close={{this.toggleDeleteSnippetModal}}
-            @modifier="action wide"
-        />
-    {{/if}}
 {{/if}}
 
 {{outlet}}

ghost/admin/app/templates/lexical-editor.hbs

@@ -68,7 +68,7 @@
                 @snippets={{this.snippets}}
                 @saveSnippet={{if this.canManageSnippets this.saveSnippet}}
                 @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
-                @deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
+                @deleteSnippet={{if this.canManageSnippets this.confirmDeleteSnippet}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
                 @featureImageCaption={{this.post.featureImageCaption}}
@@ -137,16 +137,6 @@
             @modifier="action wide"
         />
     {{/if}}
-
-    {{#if this.snippetToDelete}}
-        <GhFullscreenModal
-            @modal="delete-snippet"
-            @model={{this.snippetToDelete}}
-            @confirm={{this.deleteSnippet}}
-            @close={{this.toggleDeleteSnippetModal}}
-            @modifier="action wide"
-        />
-    {{/if}}
 {{/if}}
 
 {{outlet}}