@valtimo/process-management 13.45.1 → 13.47.0

package/fesm2022/valtimo-process-management.mjs

@@ -15,7 +15,7 @@ import { LoadingModule, DropdownModule, SelectModule, ButtonModule, IconModule,
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
-import { BaseApiService, InterceptorSkipHeader, InterceptorSkip, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, ROLE_ADMIN } from '@valtimo/shared';
+import { BaseApiService, InterceptorSkipHeader, InterceptorSkip, toKebabCase, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, ROLE_ADMIN } from '@valtimo/shared';
 import { useService, BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel';
 import Modeler from 'bpmn-js/lib/Modeler';
 import camundaPlatformBehaviors from 'camunda-bpmn-js-behaviors/lib/camunda-platform';
@@ -25,7 +25,8 @@ import { filter, BehaviorSubject, Subject, Subscription, combineLatest, switchMa
 import { distinctUntilChanged, map, filter as filter$1 } from 'rxjs/operators';
 import * as i2$1 from '@valtimo/form';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { is } from 'bpmn-js/lib/util/ModelUtil';
+import { is, getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
+import { TextFieldEntry } from '@bpmn-io/properties-panel';
 import { html } from 'htm/preact';
 import { View16, ViewOff16, Upload16 } from '@carbon/icons';
 import * as i3 from 'ngx-logger';
@@ -66,6 +67,8 @@ const EMPTY_BPMN = `
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>
 `;
+// process_link.activity_id is varchar(64) — longer ids fail on save
+const MAX_ACTIVITY_ID_LENGTH = 64;
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -273,7 +276,7 @@ class ProcessManagementEditorService {
     }
     updateProcessLink(event) {
         this.setProcessLinksForSelectedDefinition(this.processLinksForSelectedDefinition.map(processLink => {
-            if (processLink.activityId === event.activityId) {
+            if (processLink.id === event.id) {
                 return { ...processLink, ...event };
             }
             return processLink;
@@ -897,6 +900,21 @@ const clearBuildingBlockCalledElement = (editor, activityId) => {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// Mirrors the QName rules of bpmn-js-properties-panel, which does not expose them
+const SPACE_REGEX = /\s/;
+const QNAME_REGEX = /^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i;
+const ID_REGEX = /^[a-z_][\w-.]*$/i;
+const PROCESS_LINKABLE_TYPES = [
+    'bpmn:UserTask',
+    'bpmn:StartEvent',
+    'bpmn:ServiceTask',
+    'bpmn:SendTask',
+    'bpmn:ReceiveTask',
+    'bpmn:IntermediateThrowEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:CallActivity',
+];
+const isProcessLinkable = (element) => PROCESS_LINKABLE_TYPES.some(type => is(element, type));
 class ValtimoPropertiesProvider {
     static { this.$inject = ['propertiesPanel', 'translate']; }
     get processManagementEditorService() {
@@ -932,6 +950,14 @@ class ValtimoPropertiesProvider {
             const generalGroup = groups.find((g) => g.id === 'general');
             if (generalGroup) {
                 generalGroup.entries = generalGroup.entries.filter((entry) => entry.id !== 'isExecutable');
+                // Same scope as the auto-filled id, so typing and generating share one limit
+                if (is(element, 'bpmn:FlowNode')) {
+                    const idEntry = generalGroup.entries.find((entry) => entry.id === 'id');
+                    if (idEntry) {
+                        idEntry.component = LengthLimitedIdElement;
+                        idEntry.translateService = this.translateService;
+                    }
+                }
             }
             if (elementErrors.length > 0) {
                 const errorGroup = {
@@ -966,14 +992,7 @@ class ValtimoPropertiesProvider {
                     targetGroup.shouldOpen = true;
                 }
             }
-            if (is(element, 'bpmn:UserTask') ||
-                is(element, 'bpmn:StartEvent') ||
-                is(element, 'bpmn:ServiceTask') ||
-                is(element, 'bpmn:SendTask') ||
-                is(element, 'bpmn:ReceiveTask') ||
-                is(element, 'bpmn:IntermediateThrowEvent') ||
-                is(element, 'bpmn:IntermediateCatchEvent') ||
-                is(element, 'bpmn:CallActivity')) {
+            if (isProcessLinkable(element)) {
                 const editingAllowed = this.processManagementEditorService.editingAllowed;
                 if (editingAllowed || processLink) {
                     const customGroup = {
@@ -1148,6 +1167,75 @@ const CustomRootElement = (props) => {
         ${linkedButtons}
       </div>`);
     }
+    const externalActionKey = processLink?.actionKey;
+    if (processLink?.processLinkType === 'external_plugin' && externalActionKey) {
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title-container">
+          <span class="process-link-properties-panel__title">${externalActionKey}</span>
+        </span>
+
+        <cds-tag
+          class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+          ><span class="cds--tag__label">
+            ${translateService.instant('processLinkType.plugin')}
+          </span>
+        </cds-tag>
+      </div>
+
+      <div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          onClick=${handleUnlinkClick}
+        >
+          ${unlinkText}
+        </button>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </div>`;
+    }
+    if (processLink?.processLinkType === 'external_plugin_task_form') {
+        // A task-form's name is its bundle key (the form identifier), mirroring how the external-plugin
+        // action panel shows its action key; fall back to a generic label for a plugin's sole, unkeyed
+        // task-form bundle.
+        const taskFormName = processLink?.bundleKey || translateService.instant('processLink.pluginForm');
+        return html `<div class="process-link-properties-panel">
+      <div class="process-link-properties-panel__header">
+        <span class="process-link-properties-panel__title-container">
+          <span class="process-link-properties-panel__title">${taskFormName}</span>
+        </span>
+
+        <cds-tag
+          class="cds--tag cds--tag--purple cds--tag--md cds--layout--size-md  cds-tag--no-margin"
+          ><span class="cds--tag__label">
+            ${translateService.instant('processLinkType.plugin')}
+          </span>
+        </cds-tag>
+      </div>
+
+      <div class="process-link-properties-panel__buttons">
+        <button
+          class="cds--btn cds--btn--danger cds--btn--sm cds--layout--side-md"
+          onClick=${handleUnlinkClick}
+        >
+          ${unlinkText}
+        </button>
+
+        <button
+          class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-md"
+          onClick=${handleEditClick}
+        >
+          ${editProcessLinkText}
+        </button>
+      </div>
+    </div>`;
+    }
     const pluginActionKey = processLink?.pluginActionDefinitionKey;
     const pluginActionTranslation = pluginTranslationService.instantByPluginActionKey(pluginActionKey);
     const pluginTitleTranslation = pluginTranslationService.instantPluginTitleByPluginActionKey(pluginActionKey);
@@ -1204,6 +1292,56 @@ const CustomRootElement = (props) => {
   </div>`;
     return wrapEntry(processLink ? genericLinkedPanel : genericCreatePanel);
 };
+const LengthLimitedIdElement = (props) => {
+    const { element, translateService } = props;
+    const modeling = useService('modeling');
+    const debounce = useService('debounceInput');
+    const translate = useService('translate');
+    const getValue = () => getBusinessObject(element).id;
+    const setValue = (value, error) => {
+        if (error)
+            return;
+        modeling.updateProperties(element, { id: value });
+    };
+    const validate = (value) => {
+        const businessObject = getBusinessObject(element);
+        const assigned = businessObject.$model.ids.assigned(value);
+        if (!value)
+            return translate('ID must not be empty.');
+        if (assigned && assigned !== businessObject)
+            return translate('ID must be unique.');
+        if (SPACE_REGEX.test(value))
+            return translate('ID must not contain spaces.');
+        if (!ID_REGEX.test(value)) {
+            return QNAME_REGEX.test(value)
+                ? translate('ID must not contain prefix.')
+                : translate('ID must be a valid QName.');
+        }
+        if (value.length > MAX_ACTIVITY_ID_LENGTH) {
+            return translateService.instant('processManagement.idTooLong', {
+                max: MAX_ACTIVITY_ID_LENGTH,
+            });
+        }
+        return undefined;
+    };
+    // The panel's text field has no maxLength prop, so cap the rendered input directly
+    const capInputLength = (node) => {
+        const input = node?.querySelector('input');
+        if (input)
+            input.maxLength = MAX_ACTIVITY_ID_LENGTH;
+    };
+    return html `<div ref=${capInputLength}>
+    ${TextFieldEntry({
+        element,
+        id: 'id',
+        label: translate('ID'),
+        getValue,
+        setValue,
+        debounce,
+        validate,
+    })}
+  </div>`;
+};
 const ValidationErrorsElement = (props) => {
     const getErrorMessage = (error) => {
         if (error.errorCode) {
@@ -1947,6 +2085,145 @@ const ExpressionAutocompleteModule = {
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const MAX_UNIQUE_SUFFIX = 100;
+const TRAILING_SEPARATOR_REGEX = /[-_]+$/;
+class AutoIdBehavior {
+    static { this.$inject = ['eventBus', 'modeling', 'elementRegistry']; }
+    constructor(eventBus, modeling, elementRegistry) {
+        this.modeling = modeling;
+        this.elementRegistry = elementRegistry;
+        this._ownedElements = new WeakSet();
+        this._applyingId = false;
+        this._replacedElementWasOwned = false;
+        eventBus.on('commandStack.shape.create.postExecuted', ({ context }) => {
+            const element = context?.shape;
+            if (this.isEligible(element))
+                this._ownedElements.add(element);
+        });
+        // Changing the type swaps in a new element, and carries the id over as a property update
+        eventBus.on('commandStack.shape.replace.preExecute', ({ context }) => {
+            this._replacedElementWasOwned = this._ownedElements.has(context?.oldShape);
+        });
+        eventBus.on('commandStack.shape.replace.postExecuted', ({ context }) => {
+            const { oldShape, newShape } = context ?? {};
+            this._ownedElements.delete(oldShape);
+            if (this._replacedElementWasOwned && this.isEligible(newShape)) {
+                this._ownedElements.add(newShape);
+            }
+            else {
+                this._ownedElements.delete(newShape);
+            }
+            this._replacedElementWasOwned = false;
+        });
+        // Read the previous id before the update is applied
+        eventBus.on('commandStack.element.updateProperties.preExecute', ({ context }) => {
+            if (this._applyingId)
+                return;
+            const newId = context?.properties?.id;
+            if (newId && newId !== context.element?.id)
+                this._ownedElements.delete(context.element);
+        });
+        eventBus.on('commandStack.element.updateLabel.postExecuted', ({ context }) => this.syncIdWithName(context));
+        eventBus.on('commandStack.element.updateProperties.postExecuted', ({ context }) => {
+            // Editing an unrelated property must never move the id
+            if (context?.properties?.name === undefined)
+                return;
+            this.syncIdWithName(context);
+        });
+    }
+    // A new process starts from a template, so treat what it brings as drawn here
+    adoptAll() {
+        this.elementRegistry.forEach((element) => {
+            if (this.isEligible(element))
+                this._ownedElements.add(element);
+        });
+    }
+    syncIdWithName(context) {
+        if (this._applyingId)
+            return;
+        const element = context?.element?.labelTarget ?? context?.element;
+        if (!element || !this._ownedElements.has(element))
+            return;
+        const name = getBusinessObject(element)?.name;
+        if (!name)
+            return;
+        const baseId = toKebabCase(name, MAX_ACTIVITY_ID_LENGTH);
+        if (!baseId || baseId === element.id)
+            return;
+        const uniqueId = this.resolveUniqueId(baseId, element);
+        if (!uniqueId || uniqueId === element.id)
+            return;
+        this._applyingId = true;
+        try {
+            this.modeling.updateProperties(element, { id: uniqueId });
+        }
+        finally {
+            this._applyingId = false;
+        }
+    }
+    isEligible(element) {
+        return !!element && !element.labelTarget && is(element, 'bpmn:FlowNode');
+    }
+    isTaken(id, element) {
+        const existingElement = this.elementRegistry.get(id);
+        if (existingElement && existingElement !== element)
+            return true;
+        // Covers moddle elements that are not on the canvas, e.g. the process itself
+        const businessObject = getBusinessObject(element);
+        const assigned = businessObject?.$model?.ids?.assigned(id);
+        return !!assigned && assigned !== businessObject;
+    }
+    resolveUniqueId(baseId, element) {
+        if (!this.isTaken(baseId, element))
+            return baseId;
+        for (let counter = 2; counter <= MAX_UNIQUE_SUFFIX; counter++) {
+            const suffix = `-${counter}`;
+            const trimmedBase = baseId
+                .slice(0, MAX_ACTIVITY_ID_LENGTH - suffix.length)
+                .replace(TRAILING_SEPARATOR_REGEX, '');
+            const candidate = `${trimmedBase}${suffix}`;
+            if (!this.isTaken(candidate, element))
+                return candidate;
+        }
+        return null;
+    }
+}
+const AutoIdBehaviorModule = {
+    __init__: ['autoIdBehavior'],
+    autoIdBehavior: ['type', AutoIdBehavior],
+};
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -2863,6 +3140,7 @@ class ProcessManagementBuilderComponent {
                 camundaPlatformBehaviors,
                 ValtimoPropertiesProviderModule,
                 ExpressionAutocompleteModule,
+                AutoIdBehaviorModule,
             ],
             moddleExtensions: { camunda: CamundaBpmnModdle },
             propertiesPanel: { parent: this.modelerPanelElementRef.nativeElement },
@@ -3021,7 +3299,9 @@ class ProcessManagementBuilderComponent {
         if (this._selectedProcess$.getValue() !== 'create')
             return;
         this.creatingNewProcess$.next(true);
-        this._bpmnModeler?.importXML(EMPTY_BPMN);
+        this._bpmnModeler
+            ?.importXML(EMPTY_BPMN)
+            .then(() => this._bpmnModeler?.get('autoIdBehavior')?.adoptAll());
         this.isReadOnlyProcess$.next(false);
         this.isSystemProcess$.next(false);
         this.loading$.next(false);