Fixed flash of "Draft" when reverting a post to a draft

no issue

When reverting a post/page to a draft we were applying the model changes, saving, then closing the modal. This had the unwanted effect of updating the modal's copy whilst the save was in progress because it's all derived state and we're changing that state.

- changed revert button behaviour to instantly close the modal with a return value that lets the publish management know to run the revert task once the modal has closed
- added a popup notification to confirm successful revert

ghost/admin/app/components/editor-labs/modals/update-flow.hbs

@@ -68,13 +68,13 @@
                     @class="gh-btn gh-btn-icon gh-btn-primary gh-btn-large mr4"
                 />
 
-                <GhTaskButton
-                    @task={{this.revertToDraftTask}}
-                    @buttonText="Revert to draft"
-                    @runningText="Reverting"
-                    @successText="Reverted"
-                    @class="gh-btn gh-btn-icon gh-btn-secondary gh-btn-large"
-                />
+                <button
+                    type="button"
+                    class="gh-btn gh-btn-icon gh-btn-secondary gh-btn-large"
+                    {{on "click" (fn @close (hash afterTask="revertToDraftTask"))}}
+                >
+                    <span>Revert to draft</span>
+                </button>
             </div>
         </div>
     {{/let}}

ghost/admin/app/components/editor-labs/modals/update-flow.js

@@ -14,11 +14,4 @@ export default class UpdateFlowModalComponent extends Component {
         this.args.close();
         return true;
     }
-
-    @task
-    *revertToDraftTask() {
-        yield this.args.data.revertToDraftTask.perform();
-        this.args.close();
-        return true;
-    }
 }

ghost/admin/app/components/editor-labs/publish-management.js

@@ -6,6 +6,7 @@ import UpdateFlowModal from './modals/update-flow';
 import envConfig from 'ghost-admin/config/environment';
 import moment from 'moment';
 import {action, get} from '@ember/object';
+import {capitalize} from '@ember/string';
 import {inject as service} from '@ember/service';
 import {task, taskGroup, timeout} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
@@ -353,6 +354,7 @@ export class PublishOptions {
 // PublishOptions saving.
 export default class PublishManagement extends Component {
     @service modals;
+    @service notifications;
 
     // ensure we get a new PublishOptions instance when @post is replaced
     @use publishOptions = new PublishOptionsResource(() => [this.args.post]);
@@ -382,7 +384,7 @@ export default class PublishManagement extends Component {
     }
 
     @action
-    openUpdateFlow(event) {
+    async openUpdateFlow(event) {
         event?.preventDefault();
 
         this.publishFlowModal?.close();
@@ -390,9 +392,14 @@ export default class PublishManagement extends Component {
         if (!this.updateFlowModal || this.updateFlowModal.isClosing) {
             this.updateFlowModal = this.modals.open(UpdateFlowModal, {
                 publishOptions: this.publishOptions,
-                saveTask: this.publishTask,
-                revertToDraftTask: this.revertToDraftTask
+                saveTask: this.publishTask
             });
+
+            const result = await this.updateFlowModal;
+
+            if (result?.afterTask && this[result?.afterTask]) {
+                this[result.afterTask].perform();
+            }
         }
     }
 
@@ -462,6 +469,15 @@ export default class PublishManagement extends Component {
 
     @task
     *revertToDraftTask() {
-        return yield this.publishTask.perform({taskName: 'revertToDraftTask'});
+        try {
+            yield this.publishTask.perform({taskName: 'revertToDraftTask'});
+
+            const postType = capitalize(this.args.post.displayName);
+            this.notifications.showNotification(`${postType} successfully reverted to a draft.`, {type: 'success'});
+
+            return true;
+        } catch (e) {
+            this.notifications.showAPIError(error);
+        }
     }
 }