Switched Unsplash integration 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

@@ -1052,3 +1052,5 @@ remove|ember-template-lint|no-action|17|21|17|21|df631bb317cb737790ce8fd9a9b107f
 remove|ember-template-lint|no-action|18|19|18|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/integrations/firstpromoter.hbs
 remove|ember-template-lint|no-action|17|21|17|21|df631bb317cb737790ce8fd9a9b107f5a196a10d|1658102400000|1668474000000|1673658000000|app/templates/settings/integrations/slack.hbs
 remove|ember-template-lint|no-action|18|19|18|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/integrations/slack.hbs
+remove|ember-template-lint|no-action|17|21|17|21|df631bb317cb737790ce8fd9a9b107f5a196a10d|1658102400000|1668474000000|1673658000000|app/templates/settings/integrations/unsplash.hbs
+remove|ember-template-lint|no-action|18|19|18|19|35178fb4b4e564116d2012fda7d3977a471fc8e7|1658102400000|1668474000000|1673658000000|app/templates/settings/integrations/unsplash.hbs

ghost/admin/app/controllers/settings/integrations/unsplash.js

@@ -1,17 +1,12 @@
-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 UnsplashController extends Controller {
     @service notifications;
     @service settings;
 
-    leaveSettingsTransition = null;
-
     @action
     update(value) {
         this.settings.set('unsplash', value);
@@ -22,48 +17,8 @@ export default class UnsplashController extends Controller {
         this.saveTask.perform();
     }
 
-    @action
+    @task({drop: true})
-    toggleLeaveSettingsModal(transition) {
+    *saveTask() {
-        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 model
-        settings.rollbackAttributes();
-
-        return transition.retry();
-    }
-
-    @(task(function* () {
         try {
             yield this.settings.validate();
             return yield this.settings.save();
@@ -71,6 +26,5 @@ export default class UnsplashController extends Controller {
             this.notifications.showAPIError(error);
             throw error;
         }
-    }).drop())
+    }
-        saveTask;
 }

ghost/admin/app/routes/settings/integrations/unsplash.js

@@ -1,35 +1,69 @@
 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({
+export default class UnsplashIntegrationRoute extends AdminRoute {
-    settings: service(),
+    @service modals;
+    @service settings;
 
-    beforeModel() {
+    model() {
-        this._super(...arguments);
+        this.settings.reload();
+    }
 
-        return this.settings.reload();
+    deactivate() {
-    },
+        this.confirmModal = null;
+        this.hasConfirmed = false;
+    }
 
-    actions: {
+    @action
-        save() {
+    async willTransition(transition) {
-            this.controller.send('save');
+        if (this.hasConfirmed) {
-        },
+            return true;
-
-        willTransition(transition) {
-            let controller = this.controller;
-            let modelIsDirty = this.settings.get('hasDirtyAttributes');
-
-            if (modelIsDirty) {
-                transition.abort();
-                controller.send('toggleLeaveSettingsModal', transition);
-                return;
-            }
         }
-    },
+
+        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.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: 'Unsplash'
         };
     }
-});
+}

ghost/admin/app/templates/settings/integrations/unsplash.hbs

@@ -12,13 +12,6 @@
         </section>
     </GhCanvasHeader>
 
-    {{#if this.showLeaveSettingsModal}}
-        <GhFullscreenModal @modal="leave-settings"
-            @confirm={{action "leaveSettings"}}
-            @close={{action "toggleLeaveSettingsModal"}}
-            @modifier="action wide" />
-    {{/if}}
-
     <section class="view-container">
         <section class="gh-main-section bt app-grid">
             <div class="gh-main-section-block app-detail-heading app-grid">

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

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