Merge pull request #697 from PROCEED-Labs/bpmn-editor-fixes

BPMN Editor & User Task Editor fixes

Author: jjoderis

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler-toolbar.tsx

@@ -306,7 +306,11 @@ const ModelerToolbar = ({
                 );
               }}
               options={(isListView ? [] : [LATEST_VERSION])
-                .concat(process.versions ?? [])
+                .concat(
+                  (process.versions ?? []).sort((a, b) => {
+                    return b.createdOn.getTime() - a.createdOn.getTime();
+                  }),
+                )
                 .map(({ id, name }) => ({
                   value: id,
                   label: name,

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/planned-duration-input.tsx

@@ -28,11 +28,13 @@ type PlannedDurationModalProperties = {
   durationValues: DurationValues;
   show: boolean;
   close: (values?: DurationValues) => void;
+  title?: string;
 };
 export const PlannedDurationModal: React.FC<PlannedDurationModalProperties> = ({
   durationValues,
   show,
   close,
+  title,
 }) => {
   const [form] = Form.useForm();
 
@@ -64,7 +66,7 @@ export const PlannedDurationModal: React.FC<PlannedDurationModalProperties> = ({
 
   return (
     <Modal
-      title="Edit Planned Duration"
+      title={title || 'Edit Planned Duration'}
       className={styles.PlannedDurationModal}
       width={getModalWidth()}
       style={{ maxWidth: '400px' }}
@@ -113,12 +115,14 @@ type PlannedDurationInputProperties = {
   timePlannedDuration: string;
   onChange: (changedTimePlannedDuration: string) => void;
   readOnly?: boolean;
+  title?: string;
 };
 
 const PlannedDurationInput: React.FC<PlannedDurationInputProperties> = ({
   timePlannedDuration,
   onChange,
   readOnly = false,
+  title,
 }) => {
   const [isPlannedDurationModalOpen, setIsPlannedDurationModalOpen] = useState(false);
 
@@ -167,6 +171,7 @@ const PlannedDurationInput: React.FC<PlannedDurationInputProperties> = ({
       <PlannedDurationModal
         durationValues={durationValues}
         show={isPlannedDurationModalOpen}
+        title={title}
         close={(values) => {
           if (values) {
             const timeFormalExpression = calculateTimeFormalExpression(values);
@@ -216,9 +221,15 @@ export const TimerEventButton: React.FC<TimerEventButtonProps> = ({ element }) =
     }
   }, [element]);
 
+  // Determine title based on event type
+  const isStartEvent = element && bpmnIs(element, 'bpmn:StartEvent');
+  const title = isStartEvent
+    ? 'Edit Trigger Interval for Timer Start Event'
+    : 'Edit Wait Duration of Timer Event';
+
   return (
     <>
-      <Tooltip title="Edit Wait Duration of Timer Event">
+      <Tooltip title={title}>
         <Button
           icon={<ClockCircleOutlined />}
           onClick={() => setIsPlannedDurationModalOpen(true)}
@@ -227,6 +238,7 @@ export const TimerEventButton: React.FC<TimerEventButtonProps> = ({ element }) =
       <PlannedDurationModal
         durationValues={durationValues}
         show={isPlannedDurationModalOpen}
+        title={title}
         close={async (values) => {
           if (modeler && element && values) {
             const modeling = modeler.getModeling();

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/properties-panel.tsx

@@ -373,6 +373,7 @@ const PropertiesPanelContent: React.FC<PropertiesPanelContentProperties> = ({
                 }}
                 timePlannedDuration={timePlannedDuration || ''}
                 readOnly={readOnly}
+                title="Edit Planned Execution Duration"
               ></PlannedDurationInput>
             )}
           </Space>

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/user-task-editor.tsx

@@ -2,7 +2,7 @@ import HtmlFormEditor, { HtmlFormEditorRef } from '@/components/html-form-editor
 import useEditorStateStore, {
   EditorStoreProvider,
 } from '@/components/html-form-editor/use-editor-state-store';
-import { Alert, App, Grid, Modal } from 'antd';
+import { Alert, App, Button, Grid, Modal } from 'antd';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { LuImage, LuMilestone } from 'react-icons/lu';
@@ -142,7 +142,7 @@ const UserTaskEditorModal: React.FC<UserTaskEditorModalProps> = ({ processId, op
   const editingEnabled = useCanEdit();
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-
+  const [modalKey, setModalKey] = useState(0);
   const app = App.useApp();
   const breakpoint = Grid.useBreakpoint();
 
@@ -243,10 +243,31 @@ const UserTaskEditorModal: React.FC<UserTaskEditorModalProps> = ({ processId, op
       modalApi.confirm({
         title: 'You have unsaved changes!',
         content: 'Are you sure you want to close without saving?',
+        okText: 'Discard Changes',
+        okType: 'default',
+        cancelText: 'Cancel',
         onOk: () => {
           setHasUnsavedChanges(false);
+          // Increment key to force editor remount and discard changes
+          setModalKey((prev) => prev + 1);
           onClose();
         },
+        footer: (_, { OkBtn, CancelBtn }) => (
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <CancelBtn />
+            <OkBtn />
+
+            <Button
+              type="primary"
+              onClick={async () => {
+                Modal.destroyAll();
+                await handleSave();
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        ),
       });
     }
   };
@@ -275,7 +296,10 @@ const UserTaskEditorModal: React.FC<UserTaskEditorModalProps> = ({ processId, op
   let title = <div>Html Form</div>;
 
   if (bpmnIs(affectedElement, 'bpmn:UserTask')) {
-    title = <span>User Task Form</span>;
+    const taskName = affectedElement?.businessObject.name
+      ? `: ${affectedElement?.businessObject.name}`
+      : '';
+    title = <span>User Task Form{taskName}</span>;
   } else if (bpmnIs(affectedElement, 'bpmn:Process')) {
     title = <span>Process Start Form</span>;
   }
@@ -310,7 +334,7 @@ const UserTaskEditorModal: React.FC<UserTaskEditorModalProps> = ({ processId, op
       onOk={handleSave}
       destroyOnHidden
     >
-      <EditorStoreProvider>
+      <EditorStoreProvider key={modalKey}>
         <UserTaskEditor json={json} onChange={() => setHasUnsavedChanges(true)} ref={builder} />
       </EditorStoreProvider>
       {modalElement}

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/user-task-image.tsx

@@ -3,11 +3,13 @@ import { useEditor, useNode, UserComponent } from '@craftjs/core';
 import { Button, Input, InputNumber, Select, Space, Upload } from 'antd';
 
 import { useEffect, useRef, useState } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
 
 import { useParams } from 'next/navigation';
 import {
   ContextMenu,
   Setting,
+  useDeleteControl,
   VariableSelection,
 } from '@/components/html-form-editor/elements/utils';
 import { fallbackImage, useImageUpload } from '@/components/image-upload';
@@ -16,6 +18,7 @@ import { useFileManager } from '@/lib/useFileManager';
 import useEditorStateStore from '@/components/html-form-editor/use-editor-state-store';
 
 import { tokenize } from '@proceed/user-task-helper/src/tokenize';
+import { DeleteButton } from '@/components/html-form-editor/DeleteButton';
 
 type ImageProps = {
   src?: string;
@@ -53,7 +56,7 @@ export const EditImage: UserComponent<ImageProps> = ({ src, width, definitionId
   const imageRef = useRef<HTMLImageElement>(null);
 
   const [showOverlay, setShowOverlay] = useState(false);
-
+  const { handleDelete } = useDeleteControl();
   const {
     connectors: { connect },
     actions: { setProp },
@@ -124,6 +127,7 @@ export const EditImage: UserComponent<ImageProps> = ({ src, width, definitionId
         onMouseOver={() => editingEnabled && setShowOverlay(true)}
         onMouseOut={() => editingEnabled && setShowOverlay(false)}
       >
+        <DeleteButton show={editingEnabled && showOverlay} onClick={handleDelete} />
         <img
           ref={imageRef}
           style={{ width: width && `${width}%` }}

src/management-system-v2/components/html-form-editor/DeleteButton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+
+type DeleteButtonProps = {
+  onClick: (e: React.MouseEvent) => void;
+  show: boolean;
+};
+
+export const DeleteButton: React.FC<DeleteButtonProps> = ({ onClick, show }) => {
+  if (!show) return null;
+
+  return (
+    <button className="container-element-delete-button" onClick={onClick}>
+      <DeleteOutlined />
+    </button>
+  );
+};

src/management-system-v2/components/html-form-editor/Toolbar.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 
-import { Row, Button, Divider, Col, Space } from 'antd';
+import { Row, Button, Divider, Col, Space, Modal } from 'antd';
 
 import {
   DesktopOutlined,
   MobileOutlined,
   UndoOutlined,
   RedoOutlined,
   DeleteOutlined,
+  ReloadOutlined,
 } from '@ant-design/icons';
 
 import styles from './index.module.scss';
 
 import useEditorControls from './use-editor-controls';
 import useEditorStateStore from './use-editor-state-store';
-
+import { useEditor } from '@craftjs/core';
+import { addDefaultElements } from '.';
+import { getDefaultStateSnapshot, extractStructure } from '.';
 export type EditorLayout = 'computer' | 'mobile';
 
 type ToolbarProps = {
@@ -30,6 +33,36 @@ export const Toolbar: React.FC<ToolbarProps> = ({
 }) => {
   const { canUndo, canRedo, undo, redo, selected, deleteElement } = useEditorControls();
 
+  // Check if the changes have been made to default content to enable the button
+  const { query, actions } = useEditor((state, query) => {
+    // Return a trigger value that changes whenever nodes change
+    return {
+      nodeCount: Object.keys(state.nodes).length,
+    };
+  });
+
+  const isDefault = (() => {
+    try {
+      const currentState = query.serialize();
+      const defaultStructure = getDefaultStateSnapshot();
+
+      if (!defaultStructure) {
+        return false;
+      }
+
+      // Extract current structure
+      const currentStructure = extractStructure(JSON.parse(currentState));
+
+      // Deep compare structures
+      const matches = JSON.stringify(currentStructure) === JSON.stringify(defaultStructure);
+
+      return matches;
+    } catch (error) {
+      console.error('Error checking isDefault:', error);
+      return false;
+    }
+  })();
+
   const editingEnabled = useEditorStateStore((state) => state.editingEnabled);
 
   return (
@@ -79,11 +112,27 @@ export const Toolbar: React.FC<ToolbarProps> = ({
               <Divider type="vertical" />
               <Button
                 danger
-                disabled={!selected}
                 type="text"
-                icon={<DeleteOutlined />}
-                onClick={async () => {
-                  selected && deleteElement(selected);
+                icon={<ReloadOutlined />}
+                disabled={isDefault}
+                onClick={() => {
+                  Modal.confirm({
+                    title: 'Reset Form',
+                    content:
+                      'Are you sure you want to reset the form to the default template? This will replace all current elements.',
+                    okText: 'Reset',
+                    okType: 'danger',
+                    cancelText: 'Cancel',
+                    onOk: () => {
+                      // Reset to default form
+                      const rootNode = query.node('ROOT').get();
+                      rootNode.data.nodes.forEach((nodeId: string) => {
+                        actions.delete(nodeId);
+                      });
+                      // Add default elements back
+                      addDefaultElements(actions, query);
+                    },
+                  });
                 }}
               />
             </>