Refactor workflow action button JS so that the form submission goes through the edit view

wagtail/admin/static_src/wagtailadmin/js/workflow-action.js

@@ -1,5 +1,13 @@
+function _addHiddenInput(form, name, val) {
+    var element = document.createElement('input');
+    element.type = 'hidden';
+    element.name = name;
+    element.value = val;
+    form.appendChild(element);
+}
+
 /* When a workflow action button is clicked, either show a modal or make a POST request to the workflow action view */
-function ActivateWorkflowActions(csrfToken) {
+function ActivateWorkflowActionsForDashboard(csrfToken) {
     document.querySelectorAll('[data-workflow-action-url]').forEach(function (buttonElement) {
         buttonElement.addEventListener('click', function (e) {
             // Stop the button from submitting the form
@@ -30,21 +38,53 @@ function ActivateWorkflowActions(csrfToken) {
                 formElement.action = buttonElement.dataset.workflowActionUrl;
                 formElement.method = 'POST';
 
-                var csrftokenElement = document.createElement('input');
-                csrftokenElement.type = 'hidden';
-                csrftokenElement.name = 'csrfmiddlewaretoken';
-                csrftokenElement.value = csrfToken;
-                formElement.appendChild(csrftokenElement);
-
-                var nextElement = document.createElement('input');
-                nextElement.type = 'hidden';
-                nextElement.name = 'next';
-                nextElement.value = window.location;
-                formElement.appendChild(nextElement);
+                _addHiddenInput(formElement, 'csrfmiddlewaretoken', csrfToken);
+                _addHiddenInput(formElement, 'next', window.location);
 
                 document.body.appendChild(formElement);
                 formElement.submit();
             }
         }, {capture: true});
     });
-}
+}
+
+
+function ActivateWorkflowActionsForEditView(formSelector) {
+    var form = $(formSelector).get(0);
+
+    document.querySelectorAll('[data-workflow-action-name]').forEach(function (buttonElement) {
+        buttonElement.addEventListener('click', function (e) {
+            if ('workflowActionModalUrl' in buttonElement.dataset) {
+                // This action requires opening a modal to collect additional data.
+                // Stop the button from submitting the form
+                e.preventDefault();
+                e.stopPropagation();
+
+                // open the modal at the given URL
+                ModalWorkflow({
+                    'url': buttonElement.dataset.workflowActionModalUrl,
+                    'onload': {
+                        'action': function(modal, jsonData) {
+                            modal.ajaxifyForm($('form', modal.body));
+                        },
+                        'success': function(modal, jsonData) {
+                            // a success response includes the additional data to submit with the edit form
+                            _addHiddenInput(form, 'action-workflow-action', 'true')
+                            _addHiddenInput(form, 'workflow-action-name', buttonElement.dataset.workflowActionName)
+                            _addHiddenInput(form, 'workflow-action-extra-data', JSON.stringify(jsonData['cleaned_data']))
+                            // note: need to submit via jQuery (as opposed to form.submit()) so that the onsubmit handler
+                            // that disables the dirty-form prompt doesn't get bypassed
+                            $(form).submit();
+                        }
+                    },
+                });
+
+            } else {
+                // no modal, so let the form submission to the edit view proceed, with additional
+                // hidden inputs to tell it to perform our action
+                _addHiddenInput(form, 'action-workflow-action', 'true')
+                _addHiddenInput(form, 'workflow-action-name', buttonElement.dataset.workflowActionName)
+            }
+        }, {capture: true});
+    });
+}

wagtail/admin/templates/wagtailadmin/home/workflow_pages_to_moderate.html

@@ -76,7 +76,7 @@
     <script src="{% versioned_static 'wagtailadmin/js/workflow-action.js' %}"></script>
     <script src="{% versioned_static 'wagtailadmin/js/vendor/bootstrap-tooltip.js' %}"></script>
     <script>
-        document.addEventListener('DOMContentLoaded', ActivateWorkflowActions('{{ csrf_token|escapejs }}'));
+        document.addEventListener('DOMContentLoaded', ActivateWorkflowActionsForDashboard('{{ csrf_token|escapejs }}'));
         /* Tooltips used by the workflow status component */
         $(function() {
             $('[data-wagtail-tooltip]').tooltip({

wagtail/admin/templates/wagtailadmin/pages/action_menu/workflow_menu_item.html

@@ -1,4 +1,4 @@
 {% load wagtailadmin_tags %}
-<button class="button" data-workflow-action-url="{% url 'wagtailadmin_pages:workflow_action' page.id name current_task_state.id %}" {% if launch_modal %}data-launch-modal{% endif %}>
+<button class="button" data-workflow-action-name="{{ name }}" {% if launch_modal %}data-workflow-action-modal-url="{% url 'wagtailadmin_pages:collect_workflow_action_data' page.id name current_task_state.id %}"{% endif %}>
     {% if icon_name %}{% icon name=icon_name %}{% endif %}{{ label }}
 </button>

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -169,7 +169,7 @@
         });
 
         $(function() {
-            document.addEventListener('DOMContentLoaded', ActivateWorkflowActions('{{ csrf_token|escapejs }}'));
+            document.addEventListener('DOMContentLoaded', ActivateWorkflowActionsForEditView('#page-edit-form'));
             document.addEventListener('DOMContentLoaded', LockUnlockAction('{{ csrf_token|escapejs }}', '{% url 'wagtailadmin_pages:edit' page.id %}'));
         })
     </script>