Merge branch 'main' of github.com:PROCEED-Labs/proceed into dynamic-task-list

Author: jjoderis

.github/copilot-instructions.md

@@ -0,0 +1,51 @@
+# Copilot / AI Agent Instructions for PROCEED
+
+Purpose: Give an AI coding agent the minimal, actionable context to be productive in this monorepo.
+
+**Big Picture:**
+
+- **Management System (MS):** Next.js frontend + server code in [src/management-system-v2](src/management-system-v2). Runs at `http://localhost:3000` in dev (first, start a local Postgres instance and then run `yarn dev-ms` from the repo root).
+- **Process Engine (PE / Engine):** Node/TS engine code in [src/engine](src/engine). Start the engine in dev from the repo root with `yarn dev`.
+- **Helpers:** Reusable helpers live under [src/helper-modules](src/helper-modules).
+- **Deprecated/Currrently not in development**: the code under [src/capabilities](src/capabilities) and [src/config-server](src/config-server) is not currently in active development and may be outdated. The focus is on the MS v2 and the engine.
+
+**Monorepo facts & tooling:**
+
+- Workspaces are defined in the root [package.json](package.json). Node >= 20.11 and Yarn v1.22 are expected (see `engines` and `packageManager`).
+- Scripts in the root `package.json` orchestrate common workflows (start MS, start engine, db setup, builds).
+
+**Key developer workflows (commands you should use):**
+
+- Install: `yarn install` at the repo root.
+- Initialize local Postgres for MS: `yarn dev-ms-db` (this uses [src/management-system-v2/docker-compose-dev.yml](src/management-system-v2/docker-compose-dev.yml) and runs `scripts/db-helper.mts`).
+- Run Management System (dev): `yarn dev-ms` (root) or `cd src/management-system-v2 && yarn dev`. (Requires the local Postgres from the previous step).
+- Create new DB structure during schema changes: `yarn dev-ms-db-new-structure --name "<desc>"`.
+- Build MS for production: `yarn build-ms` (root) or `cd src/management-system-v2 && yarn build`.
+- Run Engine in dev: `yarn dev` (root).
+- Tests: `yarn test-engine`, `yarn test-e2e`, or `cd src/management-system-v2 && yarn test:unit` for MS unit tests.
+
+**Project-specific conventions & patterns:**
+
+- MS v2 is a Next.js app using `prisma` and server-side code; database access and schema changes rely on `scripts/db-helper.mts` and prisma commands in [src/management-system-v2/package.json](src/management-system-v2/package.json).
+- Many repo scripts call `cd` into subfolders; prefer using the root scripts (e.g. `yarn dev-ms`) to ensure the correct environment.
+- Build/test scripts may use `ts-node` or `tsx` for short TS scripts (see `predev`, `prebuild`, `postinstall`).
+- The engine has a `universal` and `native` part under [src/engine/universal](src/engine/universal) and [src/engine/native](src/engine/native). The `universal` part contains pure Typescript/JavaScript and most business logic. The `native` part contains platform-specific code which is not standardized in JavaScript, e.g. Node.js code for Windows, Linux and Mac under [src/engine/native/node](src/engine/native/node). The universal part uses functionality in the native part via an abstraction layer.
+
+**Integration points & external dependencies:**
+
+- The MS talks to Postgres (local docker compose in dev) and expects environment variables from [src/management-system-v2/.env].
+- The MS uses `@proceed/bpmn-helper` and `bpmn-js` for BPMN editing and rendering.
+- The engine exposes runtime APIs used by the MS and E2E tests located under [src/engine/e2e_tests](src/engine/e2e_tests).
+
+**Files to inspect for context when changing behavior:**
+
+- Repo-level scripts and workflows: [package.json](package.json)
+- MS-specific: [src/management-system-v2/package.json](src/management-system-v2/package.json), [src/management-system-v2/docker-compose-dev.yml](src/management-system-v2/docker-compose-dev.yml), [src/management-system-v2/scripts/db-helper.mts](src/management-system-v2/scripts/db-helper.mts)
+- Engine: [src/engine/native](src/engine/native) and [src/engine/universal](src/engine/universal)
+
+**When you change DB schema or Prisma models:**
+
+- Run `yarn dev-ms-db-new-structure --name "<desc>"` to create a new DB instance and run migrations locally.
+- Run `yarn dev-ms-db-generate` to regenerate Prisma client if models changed.
+
+If anything here is ambiguous or you want more details (run commands, CI hooks, or where to find specific APIs), tell me what area to expand and I will iterate.

docker-compose.yml

@@ -13,6 +13,8 @@ services:
       - PROCEED_PUBLIC_GANTT_ACTIVE=true
       - PROCEED_PUBLIC_CONFIG_SERVER_ACTIVE=false
       - PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE=true
+      - PROCEED_PUBLIC_PROCESS_AUTOMATION_TASK_EDITOR_ACTIVE=true
+      - PROCEED_PUBLIC_COMPETENCE_MATCHING_ACTIVE=true
     ports:
       - '3002:33081'
     depends_on:

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]/modeler.tsx

@@ -8,7 +8,7 @@ import { debounce, spaceURL } from '@/lib/utils';
 import VersionToolbar from './version-toolbar';
 import useMobileModeler from '@/lib/useMobileModeler';
 import { updateProcess } from '@/lib/data/processes';
-import { App } from 'antd';
+import { Alert, App } from 'antd';
 import { is as bpmnIs, isAny as bpmnIsAny } from 'bpmn-js/lib/util/ModelUtil';
 import BPMNCanvas, { BPMNCanvasProps, BPMNCanvasRef } from '@/components/bpmn-canvas';
 import { useEnvironment } from '@/components/auth-can';
@@ -32,9 +32,10 @@ type ModelerProps = React.HTMLAttributes<HTMLDivElement> & {
   versionName?: string;
   process: Process;
   folder?: Folder;
+  inEditing?: { userId: string; name: string; timestamp: number };
 };
 
-const Modeler = ({ versionName, process, folder, ...divProps }: ModelerProps) => {
+const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: ModelerProps) => {
   const pathname = usePathname();
   const environment = useEnvironment();
   const query = useSearchParams();
@@ -92,7 +93,21 @@ const Modeler = ({ versionName, process, folder, ...divProps }: ModelerProps) =>
 
   const showMobileView = useMobileModeler();
 
-  const canEdit = !selectedVersionId && !showMobileView && !isListView;
+  const canEdit = !selectedVersionId && !showMobileView && !isListView && !inEditing;
+
+  useEffect(() => {
+    if (!canEdit) {
+      return;
+    }
+    // Implement a ping to an endpoint to mark the editing session alive.
+    const interval = setInterval(() => {
+      fetch(`/api/private/${environment.spaceId}/processes/${process.id}/ping`, {
+        method: 'POST',
+      });
+    }, 1000 * 5);
+
+    return () => clearInterval(interval);
+  }, [canEdit, environment.spaceId, process.id]);
 
   // We shouldn't get to a place where the event listener isn't removed, since the debounce will
   // always be fired, as it doesn't get cancelled when process.id changes
@@ -336,6 +351,17 @@ const Modeler = ({ versionName, process, folder, ...divProps }: ModelerProps) =>
   return (
     <CanEditContext.Provider value={canEdit}>
       <div className={styles.Modeler} style={{ height: '100%' }}>
+        {inEditing && (
+          <Alert
+            message={
+              'This process is currently being edited by ' +
+              (inEditing.name ?? 'a user') +
+              '. No changes can be made while it is being edited.'
+            }
+            type="warning"
+            closable
+          />
+        )}
         {!minimized && (
           <>
             {loaded && (

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

@@ -1,4 +1,4 @@
-import { getCurrentEnvironment } from '@/components/auth';
+import { getCurrentEnvironment, getCurrentUser } from '@/components/auth';
 import Wrapper from './wrapper';
 import styles from './page.module.scss';
 import Modeler from './modeler';
@@ -14,6 +14,7 @@ import type { Process } from '@/lib/data/process-schema';
 import { redirect } from 'next/navigation';
 import { spaceURL } from '@/lib/utils';
 import { getFolderById } from '@/lib/data/db/folders';
+import { getUserById } from '@/lib/data/db/iam/users';
 
 type ProcessPageProps = {
   params: Promise<{ processId: string; environmentId: string; mode: string }>;
@@ -36,6 +37,7 @@ const ProcessComponent = async (props: ProcessComponentProps) => {
   //console.log('processId', processId);
   //console.log('query', searchParams);
   const { ability, activeEnvironment } = await getCurrentEnvironment(environmentId);
+  const { userId } = await getCurrentUser();
 
   const selectedVersionId = searchParams.version;
   // Only load BPMN if no version selected (for latest version)
@@ -78,9 +80,26 @@ const ProcessComponent = async (props: ProcessComponentProps) => {
     ? await getProcessBPMN(processId, environmentId, selectedVersionId)
     : process.bpmn;
   const selectedVersion = selectedVersionId
-    ? process.versions.find((version) => version.id === selectedVersionId)
+    ? process.versions.find((version: any) => version.id === selectedVersionId)
     : undefined;
 
+  let inEditing = {
+    ...((process.inEditingBy as any)?.find(
+      (e: any) => e.userId !== userId && (e.timestamp ?? 0) + 15000 > Date.now(),
+    ) as any),
+    name: '',
+  };
+
+  if (!inEditing.userId) {
+    inEditing = undefined;
+  }
+
+  // Get name of user who is editing
+  if (inEditing?.userId) {
+    const user = await getUserById(inEditing.userId, { throwIfNotFound: false });
+    inEditing.name = user ? (Object.hasOwn(user, 'username') ? (user as any).username : '') : '';
+  }
+
   // Since the user is able to minimize and close the page, everything is in a
   // client component from here.
   return (
@@ -98,6 +117,7 @@ const ProcessComponent = async (props: ProcessComponentProps) => {
             process={{ ...process, bpmn: selectedVersionBpmn as string } as Process}
             folder={folder}
             versionName={selectedVersion?.name}
+            inEditing={inEditing}
           />
         }
         timelineComponent={

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}%` }}