From e254ddbd17bcb602d51b0d264ad9491288f7b3fd Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <ronaldlangeveld@icloud.com>
Date: Thu, 14 Nov 2024 11:41:47 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20marketplace=20theme=20in?=
 =?UTF-8?q?stallation=20route=20(#21616)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

- Fixes a potential regression that caused the marketplace install route
not to route correctly.
---
 .../src/components/providers/SettingsRouter.tsx   |  5 ++---
 .../settings/site/DesignAndThemeModal.tsx         |  4 +---
 .../test/acceptance/site/theme.test.ts            | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx
index c2fff273d1..1eb2c44937 100644
--- a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx
+++ b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx
@@ -6,8 +6,7 @@ import type {ModalName} from './routing/modals';
 export const modalPaths: {[key: string]: ModalName} = {
     'design/change-theme': 'DesignAndThemeModal',
     'design/edit': 'DesignAndThemeModal',
-    // this is a special route, because it can install a theme directly from the Ghost Marketplace
-    'design/change-theme/install': 'DesignAndThemeModal',
+    'theme/install': 'DesignAndThemeModal', // this is a special route, because it can install a theme directly from the Ghost Marketplace
     'navigation/edit': 'NavigationModal',
     'staff/invite': 'InviteUserModal',
     'staff/:slug': 'UserDetailModal',
@@ -43,7 +42,7 @@ export const loadModals = () => import('./routing/modals');
 const SettingsRouter: React.FC = () => {
     const {updateNavigatedSection, scrollToSection} = useScrollSectionContext();
     const {route} = useRouting();
-
+    // get current route
     useRouteChangeCallback((newPath, oldPath) => {
         if (newPath === oldPath) {
             scrollToSection(newPath.split('/')[0]);
diff --git a/apps/admin-x-settings/src/components/settings/site/DesignAndThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/DesignAndThemeModal.tsx
index 26be07aced..2693ee496a 100644
--- a/apps/admin-x-settings/src/components/settings/site/DesignAndThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/DesignAndThemeModal.tsx
@@ -10,13 +10,11 @@ const DesignAndThemeModal: React.FC<RoutingModalProps> = ({pathName}) => {
         return <DesignModal />;
     } else if (pathName === 'design/change-theme') {
         return <ChangeThemeModal />;
-    } else if (pathName === 'design/change-theme/install') {
+    } else if (pathName === 'theme/install') {
         const url = window.location.href;
         const fragment = url.split('#')[1];
         const queryParams = fragment.split('?')[1];
-
         const searchParams = new URLSearchParams(queryParams);
-
         const ref = searchParams.get('ref') || null;
         const source = searchParams.get('source') || null;
 
diff --git a/apps/admin-x-settings/test/acceptance/site/theme.test.ts b/apps/admin-x-settings/test/acceptance/site/theme.test.ts
index 89811a4fd7..7e2b2917d5 100644
--- a/apps/admin-x-settings/test/acceptance/site/theme.test.ts
+++ b/apps/admin-x-settings/test/acceptance/site/theme.test.ts
@@ -237,4 +237,19 @@ test.describe('Theme settings', async () => {
 
         await expect(page.getByTestId('confirmation-modal')).toHaveText(/Upload failed/);
     });
+
+    test('fires Install Theme modal when redirected from markerplace url', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseThemes: {method: 'GET', path: '/themes/', response: responseFixtures.themes}
+        }});
+        await page.goto('/#/settings/theme/install?source=github&ref=TryGhost/Taste');
+
+        await page.waitForSelector('[data-testid="theme-modal"]');
+
+        const confirmation = page.getByTestId('confirmation-modal');
+
+        await expect(confirmation).toHaveText(/Install Theme/);
+        await expect(confirmation).toHaveText(/By clicking below, Taste will automatically be activated as the theme for your site/);
+    });
 });