🐛 Fixed missing active theme breaks design screen (#15602)

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.

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;
             }
 

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'});

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')
         ]);
     }
 

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) {

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');
+        }
+    }
+}

ghost/admin/app/templates/settings/design/no-theme.hbs

@@ -0,0 +1,20 @@
+<section class="gh-canvas gh-design">
+    <GhCanvasHeader class="gh-canvas-header">
+        <h2 class="gh-canvas-title">Site design</h2>
+        <section class="view-actions">
+        </section>
+    </GhCanvasHeader>
+    <div class="view-container ">
+        <ol class="posts-list gh-list">
+            <li class="no-posts-box">
+                <div class="no-posts">
+                    <h4>No theme is currently active</h4>
+                    <LinkTo @route="settings.design.change-theme" class="gh-btn">
+                        <span>Activate a theme</span>
+                    </LinkTo>
+                </div>
+            </li>
+        </ol>
+    </div>
+</section>
+{{outlet}}