From 096dffb8173a8a06c7002104628645fc54f2fe61 Mon Sep 17 00:00:00 2001 From: Arjuna Kristophe Sankar <33190221+kristophesankar@users.noreply.github.com> Date: Sun, 30 Oct 2022 10:12:38 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20missing=20active=20theme?= =?UTF-8?q?=20breaks=20design=20screen=20(#15602)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes: https://github.com/TryGhost/Ghost/issues/15505 When starting Ghost with a missing active theme, the design settings screen and change theme screen both end up in a broken state with the user unable to select a new theme as the active one. The design screen has no default (or blank) slate, and so shows a preview of an empty theme. - First added a new default screen to serve as a placeholder for when the state contains no active theme. - Added a check for when there was no active theme, then redirects the user to the default screen . The change theme screen wants to set an active property on the theme that should be active in the theme list. - Added a check to see whether there is an active theme set. - If there isn't one, don't bother trying to add the active property. --- .../settings/design/change-theme.js | 3 ++- ghost/admin/app/router.js | 1 + ghost/admin/app/routes/settings/design.js | 4 +++- .../admin/app/routes/settings/design/index.js | 10 ++++++++++ .../app/routes/settings/design/no-theme.js | 16 +++++++++++++++ .../templates/settings/design/no-theme.hbs | 20 +++++++++++++++++++ 6 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 ghost/admin/app/routes/settings/design/no-theme.js create mode 100644 ghost/admin/app/templates/settings/design/no-theme.hbs diff --git a/ghost/admin/app/controllers/settings/design/change-theme.js b/ghost/admin/app/controllers/settings/design/change-theme.js index 9effa53847..01db13ba1f 100644 --- a/ghost/admin/app/controllers/settings/design/change-theme.js +++ b/ghost/admin/app/controllers/settings/design/change-theme.js @@ -129,7 +129,8 @@ export default class ChangeThemeController extends Controller { decoratedTheme.isDefault = true; } - if (theme.name.toLowerCase() === activeTheme.name) { + if (typeof activeTheme !== 'undefined' + && theme.name.toLowerCase() === activeTheme.name) { decoratedTheme.isActive = true; } diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js index 6814e56745..2b8a852e74 100644 --- a/ghost/admin/app/router.js +++ b/ghost/admin/app/router.js @@ -67,6 +67,7 @@ Router.map(function () { this.route('view', {path: ':theme_name'}); this.route('install'); }); + this.route('no-theme'); }); // redirect for old install route used by ghost.org/marketplace this.route('settings.theme-install', {path: '/settings/theme/install'}); diff --git a/ghost/admin/app/routes/settings/design.js b/ghost/admin/app/routes/settings/design.js index eb0136f1b5..1392502a49 100644 --- a/ghost/admin/app/routes/settings/design.js +++ b/ghost/admin/app/routes/settings/design.js @@ -9,6 +9,7 @@ export default class SettingsDesignRoute extends AdminRoute { @service themeManagement; @service ui; @service session; + @service store; model() { // background refresh of preview @@ -19,7 +20,8 @@ export default class SettingsDesignRoute extends AdminRoute { // wait for settings to be loaded - we need the data to be present before display return Promise.all([ this.settings.reload(), - this.customThemeSettings.load() + this.customThemeSettings.load(), + this.store.findAll('theme') ]); } diff --git a/ghost/admin/app/routes/settings/design/index.js b/ghost/admin/app/routes/settings/design/index.js index 87404885c0..f378f4f92f 100644 --- a/ghost/admin/app/routes/settings/design/index.js +++ b/ghost/admin/app/routes/settings/design/index.js @@ -7,9 +7,19 @@ export default class SettingsDesignIndexRoute extends AuthenticatedRoute { @service customThemeSettings; @service modals; @service settings; + @service store; confirmModal = null; hasConfirmed = false; + themes = this.store.peekAll('theme'); + + afterModel() { + super.afterModel(...arguments); + let activeTheme = this.themes.findBy('active', true); + if (typeof activeTheme === 'undefined') { + return this.transitionTo('settings.design.no-theme'); + } + } @action willTransition(transition) { diff --git a/ghost/admin/app/routes/settings/design/no-theme.js b/ghost/admin/app/routes/settings/design/no-theme.js new file mode 100644 index 0000000000..b091363041 --- /dev/null +++ b/ghost/admin/app/routes/settings/design/no-theme.js @@ -0,0 +1,16 @@ +import AuthenticatedRoute from 'ghost-admin/routes/authenticated'; +import {inject as service} from '@ember/service'; + +export default class SettingsDesignNoThemeRoute extends AuthenticatedRoute { + @service store; + + themes = this.store.peekAll('theme'); + + afterModel() { + super.afterModel(...arguments); + let activeTheme = this.themes.findBy('active', true); + if (typeof activeTheme !== 'undefined') { + return this.transitionTo('settings.design.index'); + } + } +} diff --git a/ghost/admin/app/templates/settings/design/no-theme.hbs b/ghost/admin/app/templates/settings/design/no-theme.hbs new file mode 100644 index 0000000000..e6fafeacf0 --- /dev/null +++ b/ghost/admin/app/templates/settings/design/no-theme.hbs @@ -0,0 +1,20 @@ +
+ +

Site design

+
+
+ +
+
    +
  1. +
    +

    No theme is currently active

    + + Activate a theme + +
    +
    2. +
+
+
+{{outlet}} \ No newline at end of file