Switched snippet update modal to new modal pattern

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/update-snippet.hbs

@@ -0,0 +1,24 @@
+<div class="modal-content" data-test-modal="update-snippet">
+    <header class="modal-header">
+        <h1>Update this snippet?</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>
+            "<strong>{{@data.snippet.name}}</strong>" will be overwritten.
+            Don't worry, this will only affect using the snippet in the future.
+            Any older posts using this snippet will stay the same.
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Update"
+            @successText="Updated"
+            @task={{this.updateSnippetTask}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+        />
+    </div>
+</div>

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

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default class UpdateSnippetModal extends Component {
+    @service notifications;
+
+    @task({drop: true})
+    *updateSnippetTask() {
+        const {snippet, updatedProperties: {mobiledoc}} = this.args.data;
+
+        try {
+            snippet.mobiledoc = mobiledoc;
+
+            yield snippet.save();
+
+            this.notifications.closeAlerts('snippet.save');
+            this.notifications.showNotification(
+                `Snippet "${snippet.name}" updated`,
+                {type: 'success'}
+            );
+
+            return snippet;
+        } catch (error) {
+            if (!snippet.errors.isEmpty) {
+                this.notifications.showAlert(
+                    `Snippet save failed: ${snippet.errors.messages.join('. ')}`,
+                    {type: 'error', key: 'snippet.save'}
+                );
+            }
+            snippet.rollbackAttributes();
+            throw error;
+        } finally {
+            this.args.close();
+        }
+    }
+}

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

@@ -1,21 +0,0 @@
-<header class="modal-header">
-    <h1>Update this snippet?</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>
-        "<strong>{{this.snippet.name}}</strong>" will be overwritten.
-        Don't worry, this will only affect using the snippet in the future.
-        Any older posts using this snippet will stay the same.
-    </p>
-</div>
-
-<div class="modal-footer">
-    <button class="gh-btn" type="button" {{action "closeModal"}}><span>Cancel</span></button>
-    <GhTaskButton
-        @buttonText="Update"
-        @successText="Updated"
-        @task={{this.updateSnippet}}
-        @class="gh-btn gh-btn-black gh-btn-icon" />
-</div>

ghost/admin/app/components/modal-update-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.snippetRecord'),
-
-    actions: {
-        confirm() {
-            this.updateSnippet.perform();
-        }
-    },
-
-    updateSnippet: task(function* () {
-        try {
-            yield this.confirm();
-        } catch (error) {
-            this.notifications.showAPIError(error, {key: 'snippet.update.failed'});
-        } finally {
-            this.send('closeModal');
-        }
-    }).drop()
-});

ghost/admin/app/controllers/editor.js

@@ -4,6 +4,7 @@ import DeletePostModal from '../components/modals/delete-post';
 import DeleteSnippetModal from '../components/editor/modals/delete-snippet';
 import PostModel from 'ghost-admin/models/post';
 import PublishLimitModal from '../components/modals/limits/publish-limit';
+import UpdateSnippetModal from '../components/editor/modals/update-snippet';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import classic from 'ember-classic-decorator';
 import config from 'ghost-admin/config/environment';
@@ -378,40 +379,10 @@ export default class EditorController extends Controller {
     }
 
     @action
-    toggleUpdateSnippetModal(snippetRecord, updatedProperties = {}) {
-        if (snippetRecord) {
-            this.set('snippetToUpdate', {snippetRecord, updatedProperties});
-        } else {
-            this.set('snippetToUpdate', null);
-        }
-    }
-
-    @action
-    updateSnippet() {
-        if (!this.snippetToUpdate) {
-            return Promise.reject();
-        }
-
-        const {snippetRecord, updatedProperties: {mobiledoc}} = this.snippetToUpdate;
-        snippetRecord.set('mobiledoc', mobiledoc);
-
-        return snippetRecord.save().then(() => {
-            this.set('snippetToUpdate', null);
-            this.notifications.closeAlerts('snippet.save');
-            this.notifications.showNotification(
-                `Snippet "${snippetRecord.name}" updated`,
-                {type: 'success'}
-            );
-            return snippetRecord;
-        }).catch((error) => {
-            if (!snippetRecord.errors.isEmpty) {
-                this.notifications.showAlert(
-                    `Snippet save failed: ${snippetRecord.errors.messages.join('. ')}`,
-                    {type: 'error', key: 'snippet.save'}
-                );
-            }
-            snippetRecord.rollbackAttributes();
-            throw error;
+    async confirmUpdateSnippet(snippet, updatedProperties = {}) {
+        await this.modals.open(UpdateSnippetModal, {
+            snippet,
+            updatedProperties
         });
     }
 

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

@@ -4,6 +4,7 @@ import DeletePostModal from '../components/modals/delete-post';
 import DeleteSnippetModal from '../components/editor/modals/delete-snippet';
 import PostModel from 'ghost-admin/models/post';
 import PublishLimitModal from '../components/modals/limits/publish-limit';
+import UpdateSnippetModal from '../components/editor/modals/update-snippet';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import classic from 'ember-classic-decorator';
 import config from 'ghost-admin/config/environment';
@@ -379,40 +380,10 @@ export default class LexicalEditorController extends Controller {
     }
 
     @action
-    toggleUpdateSnippetModal(snippetRecord, updatedProperties = {}) {
-        if (snippetRecord) {
-            this.set('snippetToUpdate', {snippetRecord, updatedProperties});
-        } else {
-            this.set('snippetToUpdate', null);
-        }
-    }
-
-    @action
-    updateSnippet() {
-        if (!this.snippetToUpdate) {
-            return Promise.reject();
-        }
-
-        const {snippetRecord, updatedProperties: {mobiledoc}} = this.snippetToUpdate;
-        snippetRecord.set('mobiledoc', mobiledoc);
-
-        return snippetRecord.save().then(() => {
-            this.set('snippetToUpdate', null);
-            this.notifications.closeAlerts('snippet.save');
-            this.notifications.showNotification(
-                `Snippet "${snippetRecord.name}" updated`,
-                {type: 'success'}
-            );
-            return snippetRecord;
-        }).catch((error) => {
-            if (!snippetRecord.errors.isEmpty) {
-                this.notifications.showAlert(
-                    `Snippet save failed: ${snippetRecord.errors.messages.join('. ')}`,
-                    {type: 'error', key: 'snippet.save'}
-                );
-            }
-            snippetRecord.rollbackAttributes();
-            throw error;
+    async confirmUpdateSnippet(snippet, updatedProperties = {}) {
+        await this.modals.open(UpdateSnippetModal, {
+            snippet,
+            updatedProperties
         });
     }
 

ghost/admin/app/templates/editor.hbs

@@ -79,7 +79,7 @@
                 @onWordCountChange={{this.updateWordCount}}
                 @snippets={{this.snippets}}
                 @saveSnippet={{if this.canManageSnippets this.saveSnippet}}
-                @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
+                @updateSnippet={{if this.canManageSnippets this.confirmUpdateSnippet}}
                 @deleteSnippet={{if this.canManageSnippets this.confirmDeleteSnippet}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
@@ -126,16 +126,6 @@
             @close={{this.toggleReAuthenticateModal}}
             @modifier="action wide" />
     {{/if}}
-
-    {{#if this.snippetToUpdate}}
-        <GhFullscreenModal
-            @modal="update-snippet"
-            @model={{this.snippetToUpdate}}
-            @confirm={{this.updateSnippet}}
-            @close={{this.toggleUpdateSnippetModal}}
-            @modifier="action wide"
-        />
-    {{/if}}
 {{/if}}
 
 {{outlet}}

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

@@ -79,7 +79,7 @@
                 @onWordCountChange={{this.updateWordCount}}
                 @snippets={{this.snippets}}
                 @saveSnippet={{if this.canManageSnippets this.saveSnippet}}
-                @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
+                @updateSnippet={{if this.canManageSnippets this.confirmUpdateSnippet}}
                 @deleteSnippet={{if this.canManageSnippets this.confirmDeleteSnippet}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
@@ -127,16 +127,6 @@
             @close={{this.toggleReAuthenticateModal}}
             @modifier="action wide" />
     {{/if}}
-
-    {{#if this.snippetToUpdate}}
-        <GhFullscreenModal
-            @modal="update-snippet"
-            @model={{this.snippetToUpdate}}
-            @confirm={{this.updateSnippet}}
-            @close={{this.toggleUpdateSnippetModal}}
-            @modifier="action wide"
-        />
-    {{/if}}
 {{/if}}
 
 {{outlet}}