Added "View email" button to view already-sent email

no issue

- refactored `renderEmailPreview` into separate fetch and render functions
- grab email info from an existing email resource if it exists on the post rather than fetching a preview
- added "View email" button the the email-sent state of the newsletter settings PSM section

app/components/gh-post-settings-menu/email.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import validator from 'validator';
+import {action} from '@ember/object';
 import {alias, oneWay, or} from '@ember/object/computed';
 import {computed} from '@ember/object';
 import {inject as service} from '@ember/service';
@@ -52,15 +53,15 @@ export default Component.extend({
             });
         },
 
-        toggleEmailPreview() {
-            this.toggleEmailPreviewModal();
-        },
-
         discardEnter() {
             return false;
         }
     },
 
+    toggleEmailPreview: action(function () {
+        this.toggleEmailPreviewModal();
+    }),
+
     sendTestEmail: task(function* () {
         try {
             const resourceId = this.post.id;

app/components/modal-post-email-preview.js

@@ -3,42 +3,7 @@ import {action} from '@ember/object';
 import {alias} from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 
-export default ModalComponent.extend({
-    ghostPaths: service(),
-    ajax: service(),
-
-    type: 'desktop',
-    previewHtml: '',
-    previewEmailSubject: null,
-
-    post: alias('model'),
-
-    actions: {
-        changeType(type) {
-            this.set('type', type);
-        }
-    },
-
-    renderEmailPreview: action(async function renderEmailPreview() {
-        try {
-            const resourceId = this.post.id;
-            const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId);
-            let htmlData = this.get('previewHtml');
-            let emailSubject = this.get('previewEmailSubject');
-
-            if (!htmlData) {
-                const response = await this.ajax.request(url);
-                let [emailPreview] = response.email_previews;
-                htmlData = emailPreview.html;
-                emailSubject = emailPreview.subject;
-            }
-
-            let domParser = new DOMParser();
-            let htmlDoc = domParser.parseFromString(htmlData, 'text/html');
-
-            let stylesheet = htmlDoc.querySelector('style');
-            let originalCss = stylesheet.innerHTML;
-            let extraCss = `
+const INJECTED_CSS = `
 html::-webkit-scrollbar {
     display: none;
     width: 0;
@@ -50,23 +15,63 @@ html {
 body {
     pointer-events: none !important;
 }
-            `;
-            stylesheet.innerHTML = `${originalCss}\n\n${extraCss}`;
+`;
 
-            let iframe = this.element.querySelector('iframe');
-            if (iframe) {
-                iframe.contentWindow.document.open();
-                iframe.contentWindow.document.write(htmlDoc.documentElement.innerHTML);
-                iframe.contentWindow.document.close();
-            }
+export default ModalComponent.extend({
+    ghostPaths: service(),
+    ajax: service(),
 
-            this.set('previewHtml', htmlData);
-            this.set('previewEmailSubject', emailSubject);
-        } catch (error) {
-            // re-throw if we don't have a validation error
-            if (error) {
-                throw error;
-            }
+    type: 'desktop',
+    html: '',
+    subject: '',
+
+    post: alias('model'),
+
+    actions: {
+        changeType(type) {
+            this.set('type', type);
         }
-    })
+    },
+
+    renderEmailPreview: action(async function renderEmailPreview() {
+        await this._fetchEmailData();
+
+        let iframe = this.element.querySelector('iframe');
+        if (iframe) {
+            iframe.contentWindow.document.open();
+            iframe.contentWindow.document.write(this.html);
+            iframe.contentWindow.document.close();
+        }
+    }),
+
+    async _fetchEmailData() {
+        let {html, subject} = this;
+
+        if (html && subject) {
+            return {html, subject};
+        }
+
+        if (this.post.email) {
+            // use sent email
+            html = this.post.email.html;
+            subject = this.post.email.subject;
+        } else {
+            // fetch email preview
+            let url = this.get('ghostPaths.url').api('/email_preview/posts', this.post.id);
+            let response = await this.ajax.request(url);
+            let [emailPreview] = response.email_previews;
+            html = emailPreview.html;
+            subject = emailPreview.subject;
+        }
+
+        // inject extra CSS into the html for disabling links and scrollbars etc
+        let domParser = new DOMParser();
+        let htmlDoc = domParser.parseFromString(html, 'text/html');
+        let stylesheet = htmlDoc.querySelector('style');
+        let originalCss = stylesheet.innerHTML;
+        stylesheet.innerHTML = `${originalCss}\n\n${INJECTED_CSS}`;
+        html = htmlDoc.documentElement.innerHTML;
+
+        this.setProperties({html, subject});
+    }
 });

app/templates/components/gh-post-settings-menu/email.hbs

@@ -11,6 +11,7 @@
         <p>Status: {{this.post.email.status}}</p>
         <p>Sent on: {{gh-format-post-time this.post.email.createdAtUTC}}</p>
         <p>Sent to {{pluralize this.post.email.emailCount "member"}}</p>
+        <p><button {{on "click" this.toggleEmailPreview}}>View email</button></p>
     {{else}}
         {{!-- Mail not sent yet --}}
         {{#if mailgunError}}
@@ -40,8 +41,7 @@
             <div class="form-group">
                 <div class="flex">
                     <label class="nowrap flex-auto">Test email</label>
-                    <button type="button" class="gh-btn gh-btn-link settings-menu-email-button" onclick={{action "toggleEmailPreview"}}
-                        data-test-button="toggle-email-preview">
+                    <button type="button" class="gh-btn gh-btn-link settings-menu-email-button" {{on "click" this.toggleEmailPreview}} data-test-button="toggle-email-preview">
                         <span class="blue">
                             Preview in browser
                         </span>