🐛 Fixed preview modal showing outdated content if opened before autosave is triggered

refs https://github.com/TryGhost/Team/issues/609

There's a 3 second timeout before a background save is triggered after the last edit, if the preview modal is opened in that timeframe it would show outdated content.

- added a task that is triggered when the preview modal is opened
  - if a save task is already running it will wait for it to finish
  - otherwise if the post is a draft and the editor has dirty attributes it will trigger a save
- modal shows a loading spinner whilst waiting for the save to finish so the preview contents always match the latest editor changes

ghost/admin/app/components/modals/post-preview.hbs

@@ -26,20 +26,24 @@
                 @uiContext="preview" />
         </header>
 
-        {{#if (eq this.tab "browser")}}
-            <Modals::PostPreview::Browser @post={{@data.post}} />
-        {{/if}}
+        {{#if this.saveFirstTask.isRunning}}
+            <GhLoadingSpinner />
+        {{else}}
+            {{#if (eq this.tab "browser")}}
+                <Modals::PostPreview::Browser @post={{@data.post}} />
+            {{/if}}
 
-        {{#if (and (eq this.tab "mobile"))}}
-            <Modals::PostPreview::Mobile @post={{@data.post}} />
-        {{/if}}
+            {{#if (and (eq this.tab "mobile"))}}
+                <Modals::PostPreview::Mobile @post={{@data.post}} />
+            {{/if}}
 
-        {{#if (and (eq this.tab "email") @data.post.isPost)}}
-            <Modals::PostPreview::Email @post={{@data.post}} />
-        {{/if}}
+            {{#if (and (eq this.tab "email") @data.post.isPost)}}
+                <Modals::PostPreview::Email @post={{@data.post}} />
+            {{/if}}
 
-        {{#if (eq this.tab "social")}}
-            <Modals::PostPreview::Social @post={{@data.post}} />
+            {{#if (eq this.tab "social")}}
+                <Modals::PostPreview::Social @post={{@data.post}} />
+            {{/if}}
         {{/if}}
     </div>
 </div>

ghost/admin/app/components/modals/post-preview.js

@@ -1,12 +1,31 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
+import {task} from 'ember-concurrency-decorators';
 import {tracked} from '@glimmer/tracking';
 
 export default class ModalPostPreviewComponent extends Component {
     @tracked tab = 'browser';
 
+    constructor() {
+        super(...arguments);
+        this.saveFirstTask.perform();
+    }
+
     @action
     changeTab(tab) {
         this.tab = tab;
     }
+
+    @task
+    *saveFirstTask() {
+        const {saveTask, post, hasDirtyAttributes} = this.args.data;
+
+        if (saveTask.isRunning) {
+            return yield saveTask.last;
+        }
+
+        if (post.isDraft && hasDirtyAttributes) {
+            yield saveTask.perform();
+        }
+    }
 }

ghost/admin/app/controllers/editor.js

@@ -293,6 +293,7 @@ export default Controller.extend({
             this.modals.open('modals/post-preview', {
                 post: this.post,
                 saveTask: this.saveTask,
+                hasDirtyAttributes: this.hasDirtyAttributes,
                 // TODO: update to call action method directly when switching to class syntax
                 setEditorSaveType: this.actions.setSaveType.bind(this),
                 memberCount: this.memberCount