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.

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}}

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');

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;
+    }
+}

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;
+}