Converted post-preview modal to EPM based modal

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

- moved the modal component class, template, and sub-components into a `components/modals/` directory to keep the top-level dir cleaner
- migrated component class to full glimmer syntax

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

@@ -1,43 +0,0 @@
-<div class="flex flex-column h-100">
-    <header class="modal-header gh-post-preview-header gh-post-preview-header-border" data-test-modal="preview-email">
-        <div>
-            <button class="gh-editor-back-button" title="Close" {{on "click" this.close}}>
-                <span>{{svg-jar "arrow-left"}} Back</span>
-            </button>
-        </div>
-        <div class="gh-post-preview-btn-group">
-            <div class="gh-contentfilter gh-btn-group">
-                <button type="button" class="gh-btn {{if (eq this.tab "browser") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "browser")}}><span>{{svg-jar "desktop"}}</span></button>
-                <button type="button" class="gh-btn {{if (eq this.tab "mobile") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
-                {{#if @model.post.isPost}}
-                    <button type="button" class="gh-btn {{if (eq this.tab "email") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "email")}}><span>{{svg-jar "email-unread"}}</span></button>
-                {{/if}}
-                <button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "twitter"}}</span></button>
-            </div>
-        </div>
-
-        <GhPublishmenu
-            @post={{@model.post}}
-            @postStatus={{@model.post.status}}
-            @saveTask={{@model.saveTask}}
-            @setSaveType={{@model.setEditorSaveType}}
-            @memberCount={{@model.memberCount}}
-            @uiContext="preview" />
-    </header>
-
-    {{#if (eq this.tab "browser")}}
-        <ModalPostPreview::Browser @post={{@model.post}} />
-    {{/if}}
-
-    {{#if (and (eq this.tab "mobile"))}}
-        <ModalPostPreview::Mobile @post={{@model.post}} />
-    {{/if}}
-
-    {{#if (and (eq this.tab "email") @model.post.isPost)}}
-        <ModalPostPreview::Email @post={{@model.post}} />
-    {{/if}}
-
-    {{#if (eq this.tab "social")}}
-        <ModalPostPreview::Social @post={{@model.post}} />
-    {{/if}}
-</div>

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

@@ -1,31 +0,0 @@
-import ModalBase from 'ghost-admin/components/modal-base';
-import classic from 'ember-classic-decorator';
-import {action} from '@ember/object';
-import {tracked} from '@glimmer/tracking';
-
-// TODO: update modals to work fully with Glimmer components
-@classic
-export default class ModalPostPreviewComponent extends ModalBase {
-    @tracked tab = 'browser';
-
-    @action
-    changeTab(tab) {
-        this.tab = tab;
-    }
-
-    @action
-    close() {
-        this.closeModal();
-    }
-
-    actions = {
-        confirm() {
-            // noop - needed to override ModalBase.actions.confirm
-        },
-
-        // needed because ModalBase uses .send() for keyboard events
-        closeModal() {
-            this.closeModal();
-        }
-    }
-}

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

@@ -0,0 +1,45 @@
+<div class="modal-content">
+    <div class="flex flex-column h-100">
+        <header class="modal-header gh-post-preview-header gh-post-preview-header-border" data-test-modal="preview-email">
+            <div>
+                <button class="gh-editor-back-button" title="Close" {{on "click" @close}}>
+                    <span>{{svg-jar "arrow-left"}} Back</span>
+                </button>
+            </div>
+            <div class="gh-post-preview-btn-group">
+                <div class="gh-contentfilter gh-btn-group">
+                    <button type="button" class="gh-btn {{if (eq this.tab "browser") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "browser")}}><span>{{svg-jar "desktop"}}</span></button>
+                    <button type="button" class="gh-btn {{if (eq this.tab "mobile") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
+                    {{#if @data.post.isPost}}
+                        <button type="button" class="gh-btn {{if (eq this.tab "email") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "email")}}><span>{{svg-jar "email-unread"}}</span></button>
+                    {{/if}}
+                    <button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "twitter"}}</span></button>
+                </div>
+            </div>
+
+            <GhPublishmenu
+                @post={{@data.post}}
+                @postStatus={{@data.post.status}}
+                @saveTask={{@data.saveTask}}
+                @setSaveType={{@data.setEditorSaveType}}
+                @memberCount={{@data.memberCount}}
+                @uiContext="preview" />
+        </header>
+
+        {{#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 "email") @data.post.isPost)}}
+            <Modals::PostPreview::Email @post={{@data.post}} />
+        {{/if}}
+
+        {{#if (eq this.tab "social")}}
+            <Modals::PostPreview::Social @post={{@data.post}} />
+        {{/if}}
+    </div>
+</div>

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

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+export default class ModalPostPreviewComponent extends Component {
+    @tracked tab = 'browser';
+
+    @action
+    changeTab(tab) {
+        this.tab = tab;
+    }
+}

ghost/admin/app/controllers/editor.js

@@ -289,8 +289,16 @@ export default Controller.extend({
             this.toggleProperty('showEmailPreviewModal');
         },
 
-        togglePostPreviewModal() {
-            this.toggleProperty('showPostPreviewModal');
+        openPostPreviewModal() {
+            this.modals.open('modals/post-preview', {
+                post: this.post,
+                saveTask: this.saveTask,
+                // TODO: update to call action method directly when switching to class syntax
+                setEditorSaveType: this.actions.setSaveType.bind(this),
+                memberCount: this.memberCount
+            }, {
+                className: 'fullscreen-modal fullscreen-modal-full-overlay fullscreen-modal-email-preview'
+            });
         },
 
         toggleReAuthenticateModal() {

ghost/admin/app/routes/editor.js

@@ -57,7 +57,7 @@ export default AuthenticatedRoute.extend(ShortcutsRoute, {
 
         preview() {
             if (this.controller.post.isDraft) {
-                this.controller.send('togglePostPreviewModal');
+                this.controller.send('openPostPreviewModal');
             } else {
                 window.open(this.controller.post.previewUrl, '_blank', 'noopener');
             }

ghost/admin/app/styles/layouts/preview-email.css

@@ -1,4 +1,5 @@
-.fullscreen-modal-email-preview {
+/* TODO: remove .epm-modal once original modals.css is removed */
+.epm-modal.fullscreen-modal-email-preview {
     margin: 24px;
     max-width: 100%;
 }

ghost/admin/app/templates/editor.hbs

@@ -32,7 +32,7 @@
                     {{#unless this.post.isNew}}
                         {{#if this.post.isDraft}}
                             <div>
-                                <button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" (action "togglePostPreviewModal")}}>
+                                <button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" (action "openPostPreviewModal")}}>
                                     <span>Preview</span>
                                 </button>
                             </div>
@@ -136,18 +136,6 @@
             @modifier="action wide" />
     {{/if}}
 
-    {{#if this.showPostPreviewModal}}
-        <GhFullscreenModal @modal="post-preview"
-            @model={{hash
-                post=this.post
-                saveTask=this.saveTask
-                setEditorSaveType=(action "setSaveType")
-                memberCount=this.memberCount
-            }}
-            @close={{action "togglePostPreviewModal"}}
-            @modifier="full-overlay email-preview" />
-    {{/if}}
-
     {{#if this.showEmailPreviewModal}}
         <GhFullscreenModal @modal="post-email-preview"
             @model={{this.post}}