From 0d7c2f4790f6a4a996d21f6713d837b2e8d1ad3a Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Wed, 10 Nov 2021 10:58:29 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20theme=20installs=20from?= =?UTF-8?q?=20ghost.org/marketplace?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../settings/design/change-theme/install.js | 9 +++ ghost/admin/app/router.js | 13 +++-- .../settings/design/change-theme/install.js | 57 +++++++++++++++++++ .../app/routes/settings/theme-install.js | 7 +++ 4 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 ghost/admin/app/controllers/settings/design/change-theme/install.js create mode 100644 ghost/admin/app/routes/settings/design/change-theme/install.js create mode 100644 ghost/admin/app/routes/settings/theme-install.js diff --git a/ghost/admin/app/controllers/settings/design/change-theme/install.js b/ghost/admin/app/controllers/settings/design/change-theme/install.js new file mode 100644 index 0000000000..33468d4d0f --- /dev/null +++ b/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 = ''; +} diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js index 987cdc8833..e8dc7bbf2e 100644 --- a/ghost/admin/app/router.js +++ b/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'}); diff --git a/ghost/admin/app/routes/settings/design/change-theme/install.js b/ghost/admin/app/routes/settings/design/change-theme/install.js new file mode 100644 index 0000000000..7f96d96077 --- /dev/null +++ b/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; + } +} diff --git a/ghost/admin/app/routes/settings/theme-install.js b/ghost/admin/app/routes/settings/theme-install.js new file mode 100644 index 0000000000..ad53daa2eb --- /dev/null +++ b/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}); + } +}