Improved scheduled status text shown in editor

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

- always show scheduled time when a post is scheduled
- show when a post will be emailed and to which group of members

ghost/admin/app/components/gh-editor-post-status.hbs

@@ -1,22 +1,20 @@
-{{#if this._isSaving}}
-    Saving...
-{{else if (or this.post.isPublished this.post.pastScheduledTime)}}
-    Published
-    {{#if (or (eq this.post.email.status "submitting") (eq this.post.email.status "submitting"))}}
-        and sending to {{pluralize this.post.email.emailCount "member"}}
-    {{else if (eq this.post.email.status "submitted")}}
-        and sent to {{pluralize this.post.email.emailCount "member"}}
-    {{/if}}
-{{else if this.post.isScheduled}}
-    {{#if this.countdown}}
-        <time datetime="{{this.post.publishedAtUTC}}" class="ml1 green f8" data-test-schedule-countdown>
-            Scheduled to be published {{if this.post.sendEmailWhenPublished "and sent"}} {{this.countdown}}.
+<div data-test-editor-post-status ...attributes>
+    {{#if this._isSaving}}
+        Saving...
+    {{else if (or @post.isPublished @post.pastScheduledTime)}}
+        Published
+        {{#if (or (eq @post.email.status "submitting") (eq @post.email.status "submitting"))}}
+            and sending to {{pluralize @post.email.emailCount "member"}}
+        {{else if (eq @post.email.status "submitted")}}
+            and sent to {{pluralize @post.email.emailCount "member"}}
+        {{/if}}
+    {{else if @post.isScheduled}}
+        <time datetime="{{@post.publishedAtUTC}}" class="ml1 green f8" data-test-schedule-countdown>
+            Will be published {{this.scheduledText}}.
         </time>
+    {{else if @post.isNew}}
+        New
     {{else}}
-        Scheduled
+        Draft
     {{/if}}
-{{else if this.post.isNew}}
-    New
-{{else}}
-    Draft
-{{/if}}
+</div>

ghost/admin/app/components/gh-editor-post-status.js

@@ -1,52 +1,57 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import config from 'ghost-admin/config/environment';
-import moment from 'moment';
-import {computed} from '@ember/object';
+import {formatPostTime} from 'ghost-admin/helpers/gh-format-post-time';
+import {get} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {task, timeout} from 'ember-concurrency';
+import {task} from 'ember-concurrency-decorators';
+import {timeout} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
 
-export default Component.extend({
-    clock: service(),
+export default class GhEditorPostStatusComponent extends Component {
+    @service clock;
+    @service settings;
 
-    post: null,
-    isSaving: false,
+    @tracked _isSaving = false;
 
-    'data-test-editor-post-status': true,
-
-    _isSaving: false,
-
-    countdown: computed('post.{publishedAtUTC,isScheduled}', 'clock.second', function () {
-        let isScheduled = this.get('post.isScheduled');
-        let publishTime = this.get('post.publishedAtUTC') || moment.utc();
-
-        let timeUntilPublished = publishTime.diff(moment.utc(), 'minutes', true);
-        let isPublishedSoon = timeUntilPublished > 0 && timeUntilPublished < 15;
-
-        // force a recompute
-        this.get('clock.second');
-
-        if (isScheduled && isPublishedSoon) {
-            return moment(publishTime).fromNow();
-        } else {
-            return false;
-        }
-    }),
-
-    // isSaving will only be true briefly whilst the post is saving,
+    // this.args.isSaving will only be true briefly whilst the post is saving,
     // we want to ensure that the "Saving..." message is shown for at least
-    // a few seconds so that it's noticeable
-    didReceiveAttrs() {
-        if (this.isSaving) {
+    // a few seconds so that it's noticeable so we use autotracking to trigger
+    // a task that sets _isSaving to true for 3 seconds
+    get isSaving() {
+        if (this.args.isSaving) {
             this.showSavingMessage.perform();
         }
-    },
 
-    showSavingMessage: task(function* () {
-        this.set('_isSaving', true);
+        return this._isSaving;
+    }
+
+    get scheduledText() {
+        // force a recompute every second
+        get(this.clock, 'second');
+
+        let text = [];
+
+        if (this.args.post.sendEmailWhenPublished) {
+            let paid = this.args.post.visibility === 'paid';
+            text.push(`and sent to ${paid ? 'paid' : 'all'} members`);
+        }
+
+        let formattedTime = formatPostTime(
+            this.args.post.publishedAtUTC,
+            {timezone: this.settings.get('timezone'), scheduled: true}
+        );
+        text.push(formattedTime);
+
+        return text.join(' ');
+    }
+
+    @task({drop: true})
+    *showSavingMessage() {
+        this._isSaving = true;
         yield timeout(config.environment === 'test' ? 0 : 3000);
 
         if (!this.isDestroyed && !this.isDestroying) {
-            this.set('_isSaving', false);
+            this._isSaving = false;
         }
-    }).drop()
-});
+    }
+}

ghost/admin/tests/acceptance/editor-test.js

@@ -350,7 +350,7 @@ describe('Acceptance: Editor', function () {
 
             // expect countdown to show warning that post is scheduled to be published
             expect(find('[data-test-schedule-countdown]').textContent.trim(), 'notification countdown')
-                .to.match(/Scheduled to be published {2}in (4|5) minutes/);
+                .to.match(/Will be published in (4|5) minutes/);
 
             expect(
                 find('[data-test-publishmenu-trigger]').textContent.trim(),
@@ -360,7 +360,7 @@ describe('Acceptance: Editor', function () {
             expect(
                 find('[data-test-editor-post-status]').textContent.trim(),
                 'scheduled post status'
-            ).to.match(/Scheduled to be published {2}in (4|5) minutes./);
+            ).to.match(/Will be published in (4|5) minutes./);
 
             // Re-schedule
             await click('[data-test-publishmenu-trigger]');
@@ -387,7 +387,7 @@ describe('Acceptance: Editor', function () {
             expect(
                 find('[data-test-editor-post-status]').textContent.trim(),
                 'scheduled status text'
-            ).to.match(/Scheduled to be published {2}in (4|5) minutes\./);
+            ).to.match(/Will be published in (4|5) minutes\./);
 
             // unschedule
             await click('[data-test-publishmenu-trigger]');
@@ -542,7 +542,7 @@ describe('Acceptance: Editor', function () {
                 .to.equal('Scheduled');
             // expect countdown to show warning, that post is scheduled to be published
             expect(find('[data-test-schedule-countdown]').textContent.trim(), 'notification countdown')
-                .to.match(/Scheduled to be published {2}in (4|5) minutes/);
+                .to.match(/Will be published in (4|5) minutes/);
         });
 
         it('shows author token input and allows changing of authors in PSM', async function () {