From cf3f872fa6c8cfc82576599f59868136dfd78413 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 10 May 2022 19:24:45 +0100
Subject: [PATCH] Added client-side validation check for post before opening
 publish/update flows

refs https://github.com/orgs/TryGhost/projects/59/views/20

- before the publish/update flow modals are opened, perform a `post.validate()` call, if it fails show the red error bar and don't open the modal
- shows validation errors early rather than being hidden until a save occurs at the end of the publish flow
---
 .../editor-labs/publish-management.js         | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/publish-management.js b/ghost/admin/app/components/editor-labs/publish-management.js
index 1f932f90e8..851ebbdaf7 100644
--- a/ghost/admin/app/components/editor-labs/publish-management.js
+++ b/ghost/admin/app/components/editor-labs/publish-management.js
@@ -370,12 +370,14 @@ export default class PublishManagement extends Component {
     }
 
     @action
-    openPublishFlow(event) {
+    async openPublishFlow(event) {
         event?.preventDefault();
 
         this.updateFlowModal?.close();
 
-        if (!this.publishFlowModal || this.publishFlowModal.isClosing) {
+        const isValid = await this._validatePost();
+
+        if (isValid && !this.publishFlowModal || this.publishFlowModal.isClosing) {
             this.publishOptions.resetPastScheduledAt();
 
             this.publishFlowModal = this.modals.open(PublishFlowModal, {
@@ -391,7 +393,9 @@ export default class PublishManagement extends Component {
 
         this.publishFlowModal?.close();
 
-        if (!this.updateFlowModal || this.updateFlowModal.isClosing) {
+        const isValid = await this._validatePost();
+
+        if (isValid && !this.updateFlowModal || this.updateFlowModal.isClosing) {
             this.updateFlowModal = this.modals.open(UpdateFlowModal, {
                 publishOptions: this.publishOptions,
                 saveTask: this.publishTask
@@ -406,6 +410,26 @@ export default class PublishManagement extends Component {
         }
     }
 
+    async _validatePost() {
+        this.notifications.closeAlerts('post.save');
+
+        try {
+            await this.publishOptions.post.validate();
+            return true;
+        } catch (e) {
+            if (e === undefined && this.publishOptions.post.errors.length !== 0) {
+                // validation error
+                const validationError = this.publishOptions.post.errors.messages[0];
+                const errorMessage = `Validation failed: ${validationError}`;
+
+                this.notifications.showAlert(errorMessage, {type: 'error', key: 'post.save'});
+                return false;
+            }
+
+            this.notifications.showAPIError(e);
+        }
+    }
+
     @task
     *publishTask({taskName = 'saveTask'} = {}) {
         const willEmail = this.publishOptions.willEmail;