Improved URL syncing between Admin and Explore (#15640)

no issue Improve the route communication between Ghost Admin and Ghost Explore to reflect route changes in the URL and correctly navigate to Explore sub routes
TryGhost · Oct 21, 2022 · 6c9f8ec · 6c9f8ec
1 parent 50c9214
commit 6c9f8ec
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/ghost/admin/app/components/gh-explore-iframe.js b/ghost/admin/app/components/gh-explore-iframe.js
@@ -45,6 +45,6 @@ export default class GhExploreIframe extends Component {
     }
 
     _handleSiteDataUpdate(data) {
-        this.explore.siteData = data.siteData;
+        this.explore.siteData = data?.siteData ?? {};
     }
 }
diff --git a/ghost/admin/app/controllers/explore.js b/ghost/admin/app/controllers/explore.js
@@ -20,6 +20,7 @@ export default class ExploreController extends Controller {
     @action
     closeConnect() {
         if (this.explore.isIframeTransition) {
+            this.explore.sendRouteUpdate({path: '/explore'});
             this.router.transitionTo('/explore');
         } else {
             this.router.transitionTo('/dashboard');
@@ -43,7 +44,6 @@ export default class ExploreController extends Controller {
             // to the submit page and fetch the required site data
             setTimeout(() => {
                 this.explore.toggleExploreWindow(true);
-                this.router.transitionTo('explore');
             }, 500);
         } else {
             // Ghost Explore URL to submit a new site

diff --git a/ghost/admin/app/routes/explore.js b/ghost/admin/app/routes/explore.js
@@ -0,0 +1,10 @@
+import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import {inject as service} from '@ember/service';
+
+export default class ExploreRoute extends AuthenticatedRoute {
+    @service store;
+
+    model() {
+        return this.store.findAll('integration');
+    }
+}
diff --git a/ghost/admin/app/routes/explore/index.js b/ghost/admin/app/routes/explore/index.js
@@ -2,7 +2,7 @@ import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
-export default class ExploreRoute extends AuthenticatedRoute {
+export default class ExploreIndexRoute extends AuthenticatedRoute {
     @service explore;
     @service store;
     @service router;
@@ -43,10 +43,27 @@ export default class ExploreRoute extends AuthenticatedRoute {
 
             if (destinationUrl?.includes('/explore')) {
                 isExploreTransition = true;
+                this.explore.isIframeTransition = isExploreTransition;
 
-                // Send the updated route to the iframe
-                if (transition?.to?.params?.sub) {
-                    this.explore.sendRouteUpdate({path: transition.to.params.sub});
+                if (destinationUrl?.includes('/explore/submit')) {
+                    // only show the submit page if the site is already submitted
+                    // and redirect to the connect page if not.
+                    if (Object.keys(this?.explore?.siteData).length >= 1) {
+                        this.controllerFor('explore').submitExploreSite();
+                    } else {
+                        transition.abort();
+                        return this.router.transitionTo('explore.connect');
+                    }
+                } else {
+                    let path = destinationUrl.replace(/explore\//, '');
+                    path = path === '/' ? '/explore/' : path;
+
+                    if (destinationUrl?.includes('/explore/about')) {
+                        window.open(`${this.explore.exploreUrl}about/`, '_blank').focus();
+                        path = '/explore/';
+                    }
+                    // Send the updated route to the iframe
+                    this.explore.sendRouteUpdate({path});
                 }
             }
         }