Switched navigation 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

@@ -1044,3 +1044,5 @@ remove|ember-template-lint|no-action|15|21|15|21|df631bb317cb737790ce8fd9a9b107f
 remove|ember-template-lint|no-action|16|19|16|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/code-injection.hbs
 remove|ember-template-lint|no-action|15|21|15|21|df631bb317cb737790ce8fd9a9b107f5a196a10d|1658102400000|1668474000000|1673658000000|app/templates/settings/general.hbs
 remove|ember-template-lint|no-action|16|19|16|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/general.hbs
+remove|ember-template-lint|no-action|15|21|15|21|df631bb317cb737790ce8fd9a9b107f5a196a10d|1658102400000|1668474000000|1673658000000|app/templates/settings/navigation.hbs
+remove|ember-template-lint|no-action|16|19|16|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/navigation.hbs

ghost/admin/app/controllers/settings/navigation.js

@@ -88,48 +88,6 @@ export default class NavigationController extends Controller {
         return url;
     }
 
-    @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.save.isRunning) {
-                return this.save.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();
-        this.set('dirtyAttributes', false);
-
-        return transition.retry();
-    }
-
     @action
     reset() {
         this.set('newNavItem', NavigationItem.create({isNew: true}));
@@ -152,7 +110,8 @@ export default class NavigationController extends Controller {
         }
     }
 
-    @task *saveTask() {
+    @task
+    *saveTask() {
         let navItems = this.get('settings.navigation');
         let secondaryNavItems = this.get('settings.secondaryNavigation');
 

ghost/admin/app/routes/settings/navigation.js

@@ -1,51 +1,74 @@
-import $ from 'jquery';
 import AdminRoute from 'ghost-admin/routes/admin';
-import RSVP from 'rsvp';
+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 NavigationRoute extends AdminRoute {
+    @service modals;
+    @service settings;
 
     model() {
-        return RSVP.hash({
-            settings: this.settings.reload()
-        });
-    },
+        this.settings.reload();
+    }
 
     setupController() {
-        this.controller.send('reset');
-    },
+        this.controller.reset();
+    }
 
     deactivate() {
-        this._super(...arguments);
-        this.controller.set('leaveSettingsTransition', null);
-        this.controller.set('showLeaveSettingsModal', false);
-    },
+        this.confirmModal = null;
+        this.hasConfirmed = false;
+        this.controller.reset();
+    }
 
-    actions: {
-        save() {
-            // since shortcuts are run on the route, we have to signal to the components
-            // on the page that we're about to save.
-            $('.page-actions .gh-btn-blue').focus();
-
-            this.controller.send('save');
-        },
-
-        willTransition(transition) {
-            let controller = this.controller;
-            let modelIsDirty = controller.dirtyAttributes;
-
-            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() {
+        if (this.controller.dirtyAttributes) {
+            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 - Navigation'
         };
     }
-});
+}

ghost/admin/app/templates/settings/navigation.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="gh-main-section">
         <h4 class="gh-main-section-header small bn">Primary Navigation</h4>
         <div class="gh-main-section-block">

ghost/admin/tests/acceptance/settings/navigation-test.js

@@ -91,10 +91,10 @@ describe('Acceptance: Settings - Navigation', function () {
 
             await visit('/settings/code-injection');
 
-            expect(findAll('.fullscreen-modal').length, 'modal exists').to.equal(1);
+            expect(findAll('[data-test-modal="unsaved-settings"]').length, 'modal exists').to.equal(1);
 
             // Leave without saving
-            await click('.fullscreen-modal [data-test-leave-button]'), 'leave without saving';
+            await click('[data-test-leave-button]'), 'leave without saving';
 
             expect(currentURL(), 'currentURL').to.equal('/settings/code-injection');