Switched code injection unsaved changes 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/.lint-todo

@@ -1040,3 +1040,5 @@ remove|ember-template-lint|require-input-label|47|32|47|32|8e299cf5bf0e93e054410
 remove|ember-template-lint|no-action|1|40|1|40|573086f09d13f9bd362afc216e57873538ba48bd|1658102400000|1668474000000|1673658000000|app/templates/tags.hbs
 remove|ember-template-lint|no-action|91|17|91|17|c09dcb3dfe6ae3f5802c4ede66c922ed7b6a94e5|1658102400000|1668474000000|1673658000000|app/templates/settings.hbs
 remove|ember-template-lint|no-action|92|15|92|15|4327a1a496a49bd7460b2972a934a3bfbfb40ce0|1658102400000|1668474000000|1673658000000|app/templates/settings.hbs
+remove|ember-template-lint|no-action|15|21|15|21|df631bb317cb737790ce8fd9a9b107f5a196a10d|1658102400000|1668474000000|1673658000000|app/templates/settings/code-injection.hbs
+remove|ember-template-lint|no-action|16|19|16|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/code-injection.hbs

ghost/admin/app/controllers/settings/code-injection.js

@@ -1,11 +1,8 @@
-import classic from 'ember-classic-decorator';
+import Controller from '@ember/controller';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-/* eslint-disable ghost/ember/alias-model-in-controller */
-import Controller from '@ember/controller';
 import {task} from 'ember-concurrency';
 
-@classic
 export default class CodeInjectionController extends Controller {
     @service notifications;
     @service settings;
@@ -15,48 +12,8 @@ export default class CodeInjectionController extends Controller {
         this.saveTask.perform();
     }
 
-    @action
-    toggleLeaveSettingsModal(transition) {
-        let leaveTransition = this.leaveSettingsTransition;
-
-        if (!transition && this.showLeaveSettingsModal) {
-            this.set('leaveSettingsTransition', null);
-            this.set('showLeaveSettingsModal', false);
-            return;
-        }
-
-        if (!leaveTransition || transition.targetName === leaveTransition.targetName) {
-            this.set('leaveSettingsTransition', transition);
-
-            // if a save is running, wait for it to finish then transition
-            if (this.saveTask.isRunning) {
-                return this.saveTask.last.then(() => {
-                    transition.retry();
-                });
-            }
-
-            // we genuinely have unsaved data, show the modal
-            this.set('showLeaveSettingsModal', true);
-        }
-    }
-
-    @action
-    leaveSettings() {
-        let transition = this.leaveSettingsTransition;
-        let settings = this.settings;
-
-        if (!transition) {
-            this.notifications.showAlert('Sorry, there was an error in the application. Please let the Ghost team know what happened.', {type: 'error'});
-            return;
-        }
-
-        // roll back changes on settings props
-        settings.rollbackAttributes();
-
-        return transition.retry();
-    }
-
-    @task(function* () {
+    @task
+    *saveTask() {
         let notifications = this.notifications;
 
         try {
@@ -65,6 +22,5 @@ export default class CodeInjectionController extends Controller {
             notifications.showAPIError(error, {key: 'code-injection.save'});
             throw error;
         }
-    })
-        saveTask;
+    }
 }

ghost/admin/app/routes/settings/code-injection.js

@@ -1,40 +1,71 @@
 import AdminRoute from 'ghost-admin/routes/admin';
+import ConfirmUnsavedChangesModal from '../../components/modals/confirm-unsaved-changes';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
-export default AdminRoute.extend({
-    settings: service(),
+export default class CodeInjectionRoute extends AdminRoute {
+    @service modals;
+    @service settings;
 
     model() {
         return this.settings.reload();
-    },
+    }
 
     deactivate() {
-        this._super(...arguments);
-        this.controller.set('leaveSettingsTransition', null);
-        this.controller.set('showLeaveSettingsModal', false);
-    },
+        this.confirmModal = null;
+        this.hasConfirmed = false;
+    }
 
-    actions: {
-        save() {
-            this.controller.send('save');
-        },
-
-        willTransition(transition) {
-            let controller = this.controller;
-            let settings = this.settings;
-            let modelIsDirty = settings.get('hasDirtyAttributes');
-
-            if (modelIsDirty) {
-                transition.abort();
-                controller.send('toggleLeaveSettingsModal', transition);
-                return;
-            }
+    @action
+    async willTransition(transition) {
+        if (this.hasConfirmed) {
+            return true;
         }
-    },
+
+        transition.abort();
+
+        // wait for any existing confirm modal to be closed before allowing transition
+        if (this.confirmModal) {
+            return;
+        }
+
+        if (this.controller.saveTask?.isRunning) {
+            await this.controller.saveTask.last;
+        }
+
+        const shouldLeave = await this.confirmUnsavedChanges();
+
+        if (shouldLeave) {
+            this.settings.rollbackAttributes();
+            this.hasConfirmed = true;
+            return transition.retry();
+        }
+    }
+
+    async confirmUnsavedChanges() {
+        const settings = this.settings;
+
+        if (settings.get('hasDirtyAttributes')) {
+            this.confirmModal = this.modals
+                .open(ConfirmUnsavedChangesModal)
+                .finally(() => {
+                    this.confirmModal = null;
+                });
+
+            return this.confirmModal;
+        }
+
+        return true;
+    }
+
+    @action
+    save() {
+        this.controller.send('save');
+    }
 
     buildRouteInfoMetadata() {
         return {
             titleToken: 'Settings - Code injection'
         };
     }
-});
+}

ghost/admin/app/templates/settings/code-injection.hbs

@@ -10,13 +10,6 @@
         </section>
     </GhCanvasHeader>
 
-    {{#if this.showLeaveSettingsModal}}
-        <GhFullscreenModal @modal="leave-settings"
-            @confirm={{action "leaveSettings"}}
-            @close={{action "toggleLeaveSettingsModal"}}
-            @modifier="action wide" />
-    {{/if}}
-
     <section class="view-container">
         <form id="settings-code" novalidate="novalidate">
             <fieldset>