Fix/message editor validator (#1825)

* Add eventBus to customForm

* Fix bpmnEvent Issue

* Update spiffworkflow-frontend/src/components/messages/MessageEditor.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fixed linting issues w/ burnettk

---------

Co-authored-by: =theaubmov <ayoubaitlachgar98@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -1,5 +1,5 @@
 import validator from '@rjsf/validator-ajv8';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 import { RegistryFieldsType } from '@rjsf/utils';
 import { Button } from '@carbon/react';
 import { Form as MuiForm } from '@rjsf/mui';
@@ -23,7 +23,6 @@ type OwnProps = {
   formData: any;
   schema: any;
   uiSchema: any;
-
   className?: string;
   disabled?: boolean;
   onChange?: any;
@@ -34,6 +33,7 @@ type OwnProps = {
   submitButtonText?: string;
   reactJsonSchemaForm?: string;
   hideSubmitButton?: boolean;
+  bpmnEvent?: any;
 };
 
 export default function CustomForm({
@@ -52,6 +52,7 @@ export default function CustomForm({
   submitButtonText,
   reactJsonSchemaForm = 'carbon',
   hideSubmitButton = false,
+  bpmnEvent,
 }: OwnProps) {
   // set in uiSchema using the "ui:widget" key for a property
   const rjsfWidgets = {
@@ -500,10 +501,31 @@ export default function CustomForm({
   };
 
   let childrenToUse = children;
+  const submitButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (bpmnEvent && submitButtonText) {
+      const triggerSaveEvent = (event: any) => {
+        if (submitButtonRef.current) {
+          submitButtonRef.current.click();
+        }
+        event.stopPropagation();
+      };
+
+      bpmnEvent.eventBus.on('spiff.message.save', triggerSaveEvent);
+
+      return () => {
+        bpmnEvent.eventBus.off('spiff.message.save', triggerSaveEvent);
+      };
+    }
+    return undefined;
+  }, [bpmnEvent, submitButtonText]);
+
   if (submitButtonText) {
     childrenToUse = (
       <Button
         type="submit"
+        ref={submitButtonRef}
         id="submit-button"
         disabled={disabled}
         style={{ display: hideSubmitButton ? 'none' : 'unset' }}

spiffworkflow-frontend/src/components/messages/MessageEditor.tsx

@@ -186,22 +186,6 @@ export function MessageEditor({
     });
   }, [modifiedProcessGroupIdentifier, correlationProperties, messageId]);
 
-  // Setup event listeners on message.save
-  useEffect(() => {
-    const handleSaveEvent = (_event: any) => {
-      updateProcessGroupWithMessages({
-        formData: currentFormData,
-      });
-    };
-
-    messageEvent.eventBus.on('spiff.message.save', handleSaveEvent);
-
-    // Cleanup event listener on unmount
-    return () => {
-      messageEvent.eventBus.off('spiff.message.save', handleSaveEvent);
-    };
-  }, [currentFormData, messageEvent.eventBus, updateProcessGroupWithMessages]);
-
   const schema = {
     type: 'object',
     required: ['processGroupIdentifier', 'messageId'],
@@ -219,7 +203,7 @@ export function MessageEditor({
       messageId: {
         type: 'string',
         title: 'Message Name',
-        pattern: '^[\\w -]+$',
+        pattern: '^[\\w-]+$',
         validationErrorMessage:
           'must contain only alphanumeric characters, underscores, or hyphens',
         description:
@@ -236,6 +220,9 @@ export function MessageEditor({
               type: 'string',
               title: 'Property Name',
               description: '',
+              pattern: '^[\\w-]+$',
+              validationErrorMessage:
+                'The property name should contain no spaces or special characters',
             },
             retrievalExpression: {
               type: 'string',
@@ -318,6 +305,7 @@ export function MessageEditor({
           hideSubmitButton
           onChange={updateFormData}
           submitButtonText="Save"
+          bpmnEvent={messageEvent}
         />
       </>
     );

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -1093,7 +1093,6 @@ export default function ProcessModelEditDiagram() {
   };
 
   const handleMessageEditorSave = (_event: any) => {
-    // setShowMessageEditor(false);
     messageEvent.eventBus.fire('spiff.message.save');
   };