Updated "successfully scheduled" notification message

refs https://github.com/TryGhost/Ghost/issues/11965

- be more explicit about when the post will be published
- indicate if and to which type of members the post will be emailed
- improved description formatting by making sure pertinent pieces of information do not wrap

ghost/admin/app/controllers/editor.js

@@ -3,6 +3,7 @@ import PostModel from 'ghost-admin/models/post';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import config from 'ghost-admin/config/environment';
 import isNumber from 'ghost-admin/utils/isNumber';
+import moment from 'moment';
 import {alias, mapBy} from '@ember/object/computed';
 import {computed} from '@ember/object';
 import {inject as controller} from '@ember/controller';
@@ -88,6 +89,7 @@ export default Controller.extend({
     router: service(),
     slugGenerator: service(),
     session: service(),
+    settings: service(),
     ui: service(),
 
     /* public properties -----------------------------------------------------*/
@@ -799,9 +801,14 @@ export default Controller.extend({
         return hasDirtyAttributes;
     },
 
-    _showSaveNotification(prevStatus, status, delay) {
-        let message = messageMap.success.post[prevStatus][status];
+    _showSaveNotification(prevStatus, status, delayed) {
+        // scheduled messaging is completely custom
+        if (status === 'scheduled') {
+            return this._showScheduledNotification(delayed);
+        }
+
         let notifications = this.notifications;
+        let message = messageMap.success.post[prevStatus][status];
         let actions, type, path;
 
         if (status === 'published' || status === 'scheduled') {
@@ -814,7 +821,45 @@ export default Controller.extend({
             actions = `<a href="${path}" target="_blank">View ${type}</a>`;
         }
 
-        notifications.showNotification(message, {type: 'success', actions: actions.htmlSafe(), delayed: delay});
+        notifications.showNotification(message, {type: 'success', actions: actions.htmlSafe(), delayed});
+    },
+
+    _showScheduledNotification(delayed) {
+        let {
+            publishedAtUTC,
+            sendEmailWhenPublished,
+            visibility,
+            previewUrl
+        } = this.post;
+        let publishedAtBlogTZ = moment.tz(publishedAtUTC, this.settings.get('timezone'));
+
+        let title = 'Scheduled';
+        let description = ['Will be published'];
+
+        if (sendEmailWhenPublished) {
+            description.push('and delivered to');
+
+            if (visibility === 'paid') {
+                description.push('<span><strong>paid members</strong></span>');
+            } else {
+                description.push('<span><strong>all members</strong></span>');
+            }
+        }
+
+        description.push(`on <span><strong>${publishedAtBlogTZ.format('MMM Mo')}</strong></span>`);
+
+        description.push(`at <span><strong>${publishedAtBlogTZ.format('HH:mm')}</strong>`);
+        if (publishedAtBlogTZ.utcOffset() === 0) {
+            description.push('(UTC)</span>');
+        } else {
+            description.push(`(UTC${publishedAtBlogTZ.format('Z').replace(/([+-])0/, '$1').replace(/:00/, '')})</span>`);
+        }
+
+        description = description.join(' ').htmlSafe();
+
+        let actions = `<a href="${previewUrl}" target="_blank">View Preview</a>`.htmlSafe();
+
+        return this.notifications.showNotification(title, {description, actions, type: 'success', delayed});
     },
 
     _showErrorAlert(prevStatus, status, error, delay) {

ghost/admin/app/styles/components/notifications.css

@@ -55,6 +55,10 @@
     max-width: 215px;
 }
 
+.gh-notification-content p span {
+    white-space: nowrap;
+}
+
 .gh-notification-title {
     display: block;
     margin-top: 1px;
@@ -122,7 +126,7 @@
     animation-duration: 0.8s, 0.35s;
     animation-iteration-count: 1;
     animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-} 
+}
 
 .gh-notification-passive:hover {
     animation: notification-fade-in-spring;