🐛 Fixed theme installs from ghost.org/marketplace

no issue

The marketplace still uses the `/settings/theme/install` route but that was removed as part of the redesign for design settings.

- added `settings.design.change-theme.install` route that uses the newer theme install modal
  - requires backing controller for query param support despite no template being rendered
  - uses the `change-theme` controller's official theme list to fetch theme details based on query param `ref`
- added `settings.change-theme` route that lives on the old `/settings/theme/install` path and redirects to the new install route
- commented out the old theme settings routes ready for full cleanup/removal

ghost/admin/app/controllers/settings/design/change-theme/install.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import {tracked} from '@glimmer/tracking';
+
+export default class InstallThemeController extends Controller {
+    queryParams = ['source', 'ref'];
+
+    @tracked source = '';
+    @tracked ref = '';
+}

ghost/admin/app/router.js

@@ -51,8 +51,11 @@ Router.map(function () {
     this.route('settings.design', {path: '/settings/design'}, function () {
         this.route('change-theme', function () {
             this.route('view', {path: ':theme_name'});
+            this.route('install');
         });
     });
+    // redirect for old install route used by ghost.org/marketplace
+    this.route('settings.theme-install', {path: '/settings/theme/install'});
 
     this.route('settings.staff', {path: '/settings/staff'}, function () {
         this.route('user', {path: ':user_slug'});
@@ -71,10 +74,12 @@ Router.map(function () {
     this.route('settings.integrations.unsplash', {path: '/settings/integrations/unsplash'});
     this.route('settings.integrations.zapier', {path: '/settings/integrations/zapier'});
 
-    this.route('settings.theme', {path: '/settings/theme'}, function () {
-        this.route('uploadtheme');
-        this.route('install');
-    });
+    // TODO: remove in customThemeSettings cleanup
+    // this.route('settings.theme', {path: '/settings/theme'}, function () {
+    //     this.route('uploadtheme');
+    //     this.route('install');
+    // });
+
     this.route('settings.navigation', {path: '/settings/navigation'});
     this.route('settings.labs', {path: '/settings/labs'});
 

ghost/admin/app/routes/settings/design/change-theme/install.js

@@ -0,0 +1,57 @@
+import Route from '@ember/routing/route';
+import {action} from '@ember/object';
+import {bind} from '@ember/runloop';
+import {inject as service} from '@ember/service';
+
+export default class InstallThemeRoute extends Route {
+    @service modals;
+    @service router;
+
+    redirect(model, transition) {
+        const {source, ref} = transition.to.queryParams || {};
+
+        if (!source || !ref) {
+            this.transitionTo('settings.design.change-theme');
+        }
+    }
+
+    // use `didTransition` rather than `activate` so that controller setup has completed
+    @action
+    didTransition() {
+        const installController = this.controllerFor('settings.design.change-theme.install');
+        const themesController = this.controllerFor('settings.design.change-theme');
+
+        const theme = themesController.officialThemes.findBy('ref', installController.ref);
+
+        if (!theme) {
+            return this.transitionTo('settings.design.change-theme');
+        }
+
+        this.installModal = this.modals.open('modals/design/install-theme', {
+            theme,
+            onSuccess: () => {
+                this.showingSuccessModal = true;
+                this.router.transitionTo('settings.design');
+            }
+        }, {
+            beforeClose: bind(this, this.beforeModalClose)
+        });
+    }
+
+    deactivate() {
+        // leave install modal visible if it's in the success state because
+        // we're switching over to the design customisation screen in the bg
+        // and don't want to auto-close when this modal closes
+        if (this.installModal && !this.showingSuccessModal) {
+            this.installModal.close();
+        }
+    }
+
+    beforeModalClose() {
+        if (!this.showingSuccessModal) {
+            this.transitionTo('settings.design.change-theme');
+        }
+        this.showingSuccessModal = false;
+        this.installModal = null;
+    }
+}

ghost/admin/app/routes/settings/theme-install.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class InstallThemeRoute extends Route {
+    redirect(model, transition) {
+        this.transitionTo('settings.design.change-theme.install', {queryParams: transition.to.queryParams});
+    }
+}