Added preview page selector to design settings screen

closes https://github.com/TryGhost/Team/issues/1103

Custom post settings can be grouped by homepage or post, when set to `'post'` it makes sense to be able to preview a post page rather than the homepage.

- added preview type selection to `themeManagement` service
  - `.availablePreviewTypes` is useful for populating selects or other page selection elements
  - `.previewType` is set to the currently selected preview type name
  - `.setPreviewType()` is for setting the preview type and re-generating the preview html if necessary
- updated `themeManagement.updatePreviewHtmlTask` to fetch the latest published post if we don't already have a published post reference in the store, that post's `url` is then used when fetching the preview html if the preview type is set to `'post'`
- added a select element to the design index header that uses the themeManagement properties/actions to list types and update the preview on change
- updated the design nav menu to switch preview types when different sections are opened so the preview automatically switches to the post preview when making changes to the "post" custom theme settings group

ghost/admin/app/components/gh-nav-menu/design.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
+import {times} from 'lodash-es';
 import {tracked} from '@glimmer/tracking';
 
 export default class DesignMenuComponent extends Component {
@@ -18,11 +19,13 @@ export default class DesignMenuComponent extends Component {
     KNOWN_GROUPS = [{
         key: 'homepage',
         name: 'Homepage',
-        icon: 'house'
+        icon: 'house',
+        previewType: 'homepage'
     }, {
         key: 'post',
         name: 'Post',
-        icon: 'post'
+        icon: 'post',
+        previewType: 'post'
     }];
 
     constructor() {
@@ -73,6 +76,13 @@ export default class DesignMenuComponent extends Component {
             this.openSection = null;
         } else {
             this.openSection = section;
+
+            const group = this.KNOWN_GROUPS.findBy('key', section);
+            if (group && group.previewType) {
+                this.themeManagement.setPreviewType(group.previewType);
+            } else {
+                this.themeManagement.setPreviewType('homepage');
+            }
         }
     }
 

ghost/admin/app/services/theme-management.js

@@ -14,10 +14,34 @@ export default class ThemeManagementService extends Service {
     @service limit;
     @service modals;
     @service settings;
+    @service store;
 
     @tracked isUploading;
+    @tracked previewType = 'homepage';
     @tracked previewHtml;
 
+    allPosts = this.store.peekAll('post');
+
+    availablePreviewTypes = [{
+        name: 'homepage',
+        label: 'Homepage'
+    }, {
+        name: 'post',
+        label: 'Post'
+    }]
+
+    get latestPublishedPost() {
+        return this.allPosts.toArray().filterBy('status', 'published').sortBy('publishedAtUTC').lastObject;
+    }
+
+    @action
+    setPreviewType(type) {
+        if (type !== this.previewType) {
+            this.previewType = type;
+            this.updatePreviewHtmlTask.perform();
+        }
+    }
+
     @action
     async upload(event) {
         event?.preventDefault();
@@ -138,7 +162,17 @@ export default class ThemeManagementService extends Service {
         };
 
         // TODO: config.blogUrl always removes trailing slash - switch to always have trailing slash
-        const frontendUrl = `${this.config.get('blogUrl')}/`;
+        let frontendUrl = `${this.config.get('blogUrl')}/`;
+
+        if (this.previewType === 'post') {
+            // in case we haven't loaded any posts so far
+            if (!this.latestPublishedPost) {
+                yield this.store.query('post', {filter: 'status:published', order: 'created_at DESC', limit: 1});
+            }
+
+            frontendUrl = this.latestPublishedPost.url;
+        }
+
         const previewContents = yield this.ajax.post(frontendUrl, ajaxOptions);
 
         // inject extra CSS to disable navigation and prevent clicks

ghost/admin/app/templates/settings/design/index.hbs

@@ -2,6 +2,19 @@
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title">{{this.config.blogTitle}}</h2>
         <section class="view-actions">
+            <div class="gh-contentfilter">
+                <span class="gh-select">
+                    <OneWaySelect
+                        @value={{this.themeManagement.previewType}}
+                        @options={{this.themeManagement.availablePreviewTypes}}
+                        @optionValuePath="name"
+                        @optionLabelPath="label"
+                        @optionTargetPath="name"
+                        @update={{this.themeManagement.setPreviewType}}
+                    />
+                </span>
+            </div>
+
             <div class="gh-contentfilter gh-btn-group">
                 <button type="button" class="gh-btn gh-design-preview-mode {{if this.isDesktopPreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "desktop")}}><span>{{svg-jar "desktop"}}</span></button>
                 <button type="button" class="gh-btn gh-design-preview-mode {{if this.isMobilePreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>