From 3eaa00bddbc354405f2156e1b65fc98598b93597 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 16 Nov 2022 14:07:37 +0100
Subject: [PATCH] Restructured modal open logic

no refs.

- Navigating to `/settings/labs/import` opened the modal but also transitioned to a blank page in the background. Restructured content import modal so it's opening on top of the Labs page.
---
 .../app/components/modal-import-content.hbs   | 10 ++++----
 ghost/admin/app/router.js                     |  6 +++--
 .../admin/app/routes/settings/labs/import.js  | 24 ++++++++++++++++++-
 ghost/admin/app/styles/layouts/labs.css       |  4 ++++
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/modal-import-content.hbs b/ghost/admin/app/components/modal-import-content.hbs
index 70f4f96f81..3026e75f44 100644
--- a/ghost/admin/app/components/modal-import-content.hbs
+++ b/ghost/admin/app/components/modal-import-content.hbs
@@ -18,10 +18,10 @@
         </header>
     {{/if}}
 
-    <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>
+    <button class="close" data-test-button="close-import-content" type="button" {{on "click" @close}}>
         {{svg-jar "close"}}
         <span class="hidden">Close</span>
-    </a>
+    </button>
 
     <div class="modal-body">
         {{#if (eq this.state 'INIT')}}
@@ -46,7 +46,7 @@
 
     <div class="modal-footer">
         {{#if (eq this.state 'INIT')}}
-            <button class="gh-btn" data-test-button="close-import-content" type="button" {{action "closeModal"}}>
+            <button class="gh-btn" data-test-button="close-import-content" type="button" {{on "click" @close}}>
                 <span>Close</span>
             </button>
         {{/if}}
@@ -61,7 +61,7 @@
         {{/if}}
 
         {{#if (eq this.state 'PROCESSING')}}
-            <button class="gh-btn gh-btn-black" data-test-button="close-import-content" type="button" {{action "closeModal"}}>
+            <button class="gh-btn gh-btn-black" data-test-button="close-import-content" type="button" {{on "click" @close}}>
                 <span>Got it</span>
             </button>
         {{/if}}
@@ -72,7 +72,7 @@
                     <span>Try again</span>
                 </button>
             {{/if}}
-            <button class="gh-btn gh-btn-black" data-test-button="close-import-content" type="button" {{action "closeModal"}}>
+            <button class="gh-btn gh-btn-black" data-test-button="close-import-content" type="button" {{on "click" @close}}>
                 <span>OK</span>
             </button>
         {{/if}}
diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js
index e4134229df..1100596fb0 100644
--- a/ghost/admin/app/router.js
+++ b/ghost/admin/app/router.js
@@ -102,8 +102,10 @@ Router.map(function () {
     this.route('settings.integrations.zapier', {path: '/settings/integrations/zapier'});
 
     this.route('settings.navigation', {path: '/settings/navigation'});
-    this.route('settings.labs', {path: '/settings/labs'});
-    this.route('settings.labs.import', {path: '/settings/labs/import'});
+    this.route('settings.labs', {path: '/settings/labs'}, function() {
+        this.route('import');
+    });
+    // this.route('settings.labs.import', {path: '/settings/labs/import'});
 
     this.route('members', function () {
         this.route('import');
diff --git a/ghost/admin/app/routes/settings/labs/import.js b/ghost/admin/app/routes/settings/labs/import.js
index 013cb3fab3..9ad8af7864 100644
--- a/ghost/admin/app/routes/settings/labs/import.js
+++ b/ghost/admin/app/routes/settings/labs/import.js
@@ -1,3 +1,25 @@
 import AdminRoute from 'ghost-admin/routes/admin';
+import ImportContentModal from '../../../components/modal-import-content';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
 
-export default class LabsImportRoute extends AdminRoute {}
+export default class LabsImportRoute extends AdminRoute {
+    @service modals;
+
+    importModal = null;
+
+    setupController(controller, model) {
+        this.importModal?.close();
+
+        this.importModal = this.modals.open(ImportContentModal, {}, {
+            className: 'fullscreen-modal fullscreen-modal-action fullscreen-modal-import-content',
+            beforeClose: this.beforeModalClose
+        });
+    }
+
+    @action
+    async beforeModalClose() {
+        this.router.transitionTo('settings.labs');
+        return true;
+    }
+}
diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css
index f0bb0332e2..2b3f444568 100644
--- a/ghost/admin/app/styles/layouts/labs.css
+++ b/ghost/admin/app/styles/layouts/labs.css
@@ -510,3 +510,7 @@ p.gh-content-import-errordetail:first-of-type {
         padding: 4px;
     }
 }
+
+.fullscreen-modal-import-content {
+    max-width: unset !important;
+}
\ No newline at end of file