🎨 Publish menu wording and saving states improvements (#788)

closes TryGhost/Ghost#8696

- Changes the `gh-save-button` component to allow a custom `runningText` which would be rendered in the button when the current task is running.
- Adds a `runningText` CP to `gh-publishmenu` component, which will render (depending of post status and desired save type) 'Unpublishing', 'Publishing', 'Scheduling', 'Updating', 'Unpublishing', 'Rescheduling', and 'Unscheduling'.

app/components/gh-publishmenu-draft.js

@@ -35,7 +35,7 @@ export default Component.extend({
                 this.get('setSaveType')(type);
 
                 // when publish: switch to now to avoid validation errors
-                // when schedule: switch  to last valid or new minimum scheduled date
+                // when schedule: switch to last valid or new minimum scheduled date
                 if (type === 'publish') {
                     if (!hasDateError && !hasTimeError) {
                         this._publishedAtBlogTZ = this.get('post.publishedAtBlogTZ');

app/components/gh-publishmenu.js

@@ -39,21 +39,43 @@ export default Component.extend({
         }
     }),
 
-    buttonText:  computed('postState', 'saveType', function() {
+    _runningText:  computed('postState', 'saveType', function() {
+        let saveType = this.get('saveType');
         let postState = this.get('postState');
+        let runningText;
+
+        if (postState === 'draft') {
+            runningText = saveType === 'publish' ? 'Publishing' : 'Scheduling';
+        }
+
+        if (postState === 'published') {
+            runningText = saveType === 'publish' ? 'Updating' : 'Unpublishing';
+        }
+
+        if (postState === 'scheduled') {
+            runningText = saveType === 'schedule' ? 'Rescheduling' : 'Unscheduling';
+        }
+
+        return runningText || 'Publishing';
+    }),
+
+    runningText: null,
+
+    buttonText:  computed('postState', 'saveType', function() {
         let saveType = this.get('saveType');
+        let postState = this.get('postState');
         let buttonText;
 
         if (postState === 'draft') {
             buttonText = saveType === 'publish' ? 'Publish' : 'Schedule';
         }
 
         if (postState === 'published') {
-            buttonText = saveType === 'publish' ? 'Update' : 'Un-publish';
+            buttonText = saveType === 'publish' ? 'Update' : 'Unpublish';
         }
 
         if (postState === 'scheduled') {
-            buttonText = saveType === 'schedule' ? 'Re-schedule' : 'Un-schedule';
+            buttonText = saveType === 'schedule' ? 'Reschedule' : 'Unschedule';
         }
 
         return buttonText || 'Publish';
@@ -69,17 +91,20 @@ export default Component.extend({
         }
 
         if (previousStatus === 'published') {
-            buttonText = postState === 'draft' ? 'Un-published' : 'Updated';
+            buttonText = postState === 'draft' ? 'Unpublished' : 'Updated';
         }
 
         if (previousStatus === 'scheduled') {
-            buttonText = postState === 'draft' ? 'Un-scheduled' : 'Re-scheduled';
+            buttonText = postState === 'draft' ? 'Unscheduled' : 'Rescheduled';
         }
 
         return buttonText;
     }),
 
     save: task(function* () {
+        // runningText needs to be declared before the other states change during the
+        // save action.
+        this.set('runningText', this.get('_runningText'));
         this.set('_previousStatus', this.get('post.status'));
         this.get('setSaveType')(this.get('saveType'));
 

app/templates/components/gh-publishmenu.hbs

@@ -34,6 +34,7 @@
             {{gh-task-button buttonText
                 task=save
                 successText=successText
+                runningText=runningText
                 class="gh-btn gh-btn-blue gh-publishmenu-button gh-btn-icon"
                 data-test-publishmenu-save=true}}
         </footer>

app/templates/components/gh-task-button.hbs

@@ -7,8 +7,8 @@
     )}}
 {{else}}
     <span>
-    {{#if isRunning}}{{inline-svg "spinner" class="gh-icon-spinner"}}{{/if}}
-    {{if (or isIdle isRunning) buttonText}}
+    {{#if isRunning}}{{inline-svg "spinner" class="gh-icon-spinner"}}{{runningText}}{{/if}}
+    {{#if isIdle}}{{buttonText}}{{/if}}
     {{#if isSuccess}}{{inline-svg "check-circle"}} {{successText}}{{/if}}
     {{#if isFailure}}{{inline-svg "retry"}} {{failureText}}{{/if}}
     </span>

tests/acceptance/editor-test.js

@@ -188,7 +188,7 @@ describe('Acceptance: Editor', function() {
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'published post unpublish button text'
-            ).to.equal('Un-publish');
+            ).to.equal('Unpublish');
 
             // post id 2 is a published post, checking for published post behaviour now
             await visit('/editor/2');
@@ -258,14 +258,14 @@ describe('Acceptance: Editor', function() {
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'published post unpublish button text'
-            ).to.equal('Un-publish');
+            ).to.equal('Unpublish');
 
             await click(testSelector('publishmenu-save'));
 
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'publish menu save button updated after published post is unpublished'
-            ).to.equal('Un-published');
+            ).to.equal('Unpublished');
 
             expect(
                 find(testSelector('publishmenu-draft')),
@@ -324,14 +324,14 @@ describe('Acceptance: Editor', function() {
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'scheduled post button reschedule text'
-            ).to.equal('Re-schedule');
+            ).to.equal('Reschedule');
 
             await click(testSelector('publishmenu-save'));
 
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'publish menu save button text for a rescheduled post'
-            ).to.equal('Re-scheduled');
+            ).to.equal('Rescheduled');
 
             await click(testSelector('publishmenu-cancel'));
 
@@ -352,14 +352,14 @@ describe('Acceptance: Editor', function() {
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'publish menu save button updated after scheduled post is unscheduled'
-            ).to.equal('Un-schedule');
+            ).to.equal('Unschedule');
 
             await click(testSelector('publishmenu-save'));
 
             expect(
                 find(testSelector('publishmenu-save')).text().trim(),
                 'publish menu save button updated after scheduled post is unscheduled'
-            ).to.equal('Un-scheduled');
+            ).to.equal('Unscheduled');
 
             await click(testSelector('publishmenu-cancel'));
 

tests/integration/components/gh-task-button-test.js

@@ -55,6 +55,23 @@ describe('Integration: Component: gh-task-button', function() {
         wait().then(done);
     });
 
+    it('shows running text when passed whilst running', function (done) {
+        this.set('myTask', task(function* () {
+            yield timeout(50);
+        }));
+
+        this.render(hbs`{{gh-task-button task=myTask runningText="Running"}}`);
+
+        this.get('myTask').perform();
+
+        run.later(this, function () {
+            expect(this.$('button')).to.have.descendants('svg');
+            expect(this.$('button')).to.contain('Running');
+        }, 20);
+
+        wait().then(done);
+    });
+
     it('appears disabled whilst running', function (done) {
         this.set('myTask', task(function* () {
             yield timeout(50);