feat: support ad-hoc sub-processes

Related to camunda/camunda-modeler#5591

Author: philippfromme

lib/ElementConfig.js

@@ -9,7 +9,7 @@ export const DEFAULT_CONFIG = {
   output: {}
 };
 
-const SUPPORTED_ELEMENT_TYPES = [ 'bpmn:Task' ];
+const SUPPORTED_ELEMENT_TYPES = [ 'bpmn:Task', 'bpmn:SubProcess' ];
 
 const DEFAULT_OUTPUT = undefined;
 

lib/hooks/useSelectedElement.js

@@ -1,20 +1,21 @@
 import { useState, useEffect } from 'react';
 
 import {
-  getBusinessObject,
-  is,
   isAny
 } from 'bpmn-js/lib/util/ModelUtil';
 
-const SUPPORTED_ELEMENT_TYPES = [ 'bpmn:Task' ];
+import { isInsideAdHocSubProcess } from '../utils/element';
 
-export const SINGLE_TASK_SELECTION_REQUIRED_MESSAGE = 'Select a task to start testing.';
-export const TASK_SELECTION_REQUIRED_MESSAGE = 'Task testing is only supported for tasks. Select a task to start testing.';
-export const AD_HOC_SUBPROCESS_TASK_UNSUPPORTED_MESSAGE = 'Task testing is not supported for tasks inside an ad-hoc subprocess. Select a different task to start testing.';
+const SUPPORTED_ELEMENT_TYPES = [ 'bpmn:Task', 'bpmn:SubProcess' ];
+
+export const SINGLE_TASK_SELECTION_REQUIRED_MESSAGE = 'Select a task or subprocess to start testing.';
+export const TASK_SELECTION_REQUIRED_MESSAGE = 'Task testing is only supported for tasks and subprocesses. Select one to start testing.';
+export const AD_HOC_SUBPROCESS_MESSAGE = 'Task testing is not supported for tasks inside ad-hoc subprocesses.';
 
 /**
- * Get currently selected BPMN element, if it is a single `bpmn:Task`. If not,
- * return null and a message indicating what to do.
+ * Get currently selected BPMN element, if it is a single supported element
+ * (`bpmn:Task` or `bpmn:SubProcess`). If not, return null and a message
+ * indicating what to do.
  *
  * @param {Object} injector
  * @return {[ Object|null, string|null ]}
@@ -74,27 +75,11 @@ function validateSelection(selection) {
     return TASK_SELECTION_REQUIRED_MESSAGE;
   }
 
-  if (isInAdHocSubprocess(selection[0])) {
-    return AD_HOC_SUBPROCESS_TASK_UNSUPPORTED_MESSAGE;
+  if (isInsideAdHocSubProcess(selection[0])) {
+    return AD_HOC_SUBPROCESS_MESSAGE;
   }
 
   return null;
 }
 
-function isInAdHocSubprocess(element) {
-  const bo = getBusinessObject(element);
-  let parent = getParent(bo);
-
-  while (parent) {
-    if (is(parent, 'bpmn:AdHocSubProcess')) {
-      return true;
-    }
-    parent = getParent(parent);
-  }
 
-  return false;
-}
-
-function getParent(bo) {
-  return bo.$parent;
-}

lib/utils/element.js

@@ -31,6 +31,27 @@ export function getConcreteType(element) {
   return element.type.split(':')[1];
 }
 
+/**
+ * Check if an element is a child of an ad-hoc subprocess.
+ *
+ * @param {import('../types').Element} element
+ *
+ * @returns {boolean}
+ */
+export function isInsideAdHocSubProcess(element) {
+  let businessObject = getBusinessObject(element).$parent;
+
+  while (businessObject) {
+    if (is(businessObject, 'bpmn:AdHocSubProcess')) {
+      return true;
+    }
+
+    businessObject = businessObject.$parent;
+  }
+
+  return false;
+}
+
 /**
  * Get parent process of an element.
  *

test/components/TaskTesting/TaskTesting.spec.js

@@ -49,35 +49,7 @@ describe('TaskTesting', function() {
   }));
 
 
-  it('should show task type and name (generic)', inject(async function(elementRegistry, selection) {
-
-    // given
-    renderTaskTesting();
-
-    // when
-    selection.select(elementRegistry.get('ServiceTask_1'));
-
-    // then
-    await screen.findByText('Script Task');
-    await screen.findByText('No inputs');
-  }));
-
-
-  it('should show task type and name (element template)', inject(async function(elementRegistry, selection) {
-
-    // given
-    renderTaskTesting();
-
-    // when
-    selection.select(elementRegistry.get('ServiceTask_3'));
-
-    // then
-    await screen.findByText('REST Outbound Connector');
-    await screen.findByText('REST');
-  }));
-
-
-  it('should display unsupported message for a task in ad-hoc subprocess', inject(
+  it('should not support a task in ad-hoc subprocess', inject(
     async function(elementRegistry, selection) {
 
       // given
@@ -87,12 +59,12 @@ describe('TaskTesting', function() {
       selection.select(elementRegistry.get('AdHocSubProcessTask'));
 
       // then
-      await screen.findByText(AD_HOC_SUBPROCESS_TASK_UNSUPPORTED_MESSAGE);
+      await screen.findByText(AD_HOC_SUBPROCESS_MESSAGE);
     })
   );
 
 
-  it('should display unsupported message for a task in a collapsed ad-hoc subprocess', inject(
+  it('should not support a task in a collapsed ad-hoc subprocess', inject(
     async function(elementRegistry, selection, canvas) {
 
       // given
@@ -103,7 +75,7 @@ describe('TaskTesting', function() {
       selection.select(elementRegistry.get('CollapsedAdHocSubProcessTask'));
 
       // then
-      await screen.findByText(AD_HOC_SUBPROCESS_TASK_UNSUPPORTED_MESSAGE);
+      await screen.findByText(AD_HOC_SUBPROCESS_MESSAGE);
     })
   );
 

test/fixtures/ElementConfig.bpmn

@@ -78,6 +78,9 @@
       <bpmn:incoming>Flow_0ggbd4s</bpmn:incoming>
       <bpmn:outgoing>Flow_0hwbr17</bpmn:outgoing>
     </bpmn:serviceTask>
+    <bpmn:adHocSubProcess id="AdHocSubProcess_1">
+      <bpmn:task id="AdHocChild_1" name="In ad-hoc subprocess" />
+    </bpmn:adHocSubProcess>
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
@@ -101,6 +104,12 @@
         <dc:Bounds x="650" y="80" width="100" height="80" />
         <bpmndi:BPMNLabel />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="AdHocSubProcess_1_di" bpmnElement="AdHocSubProcess_1" isExpanded="true">
+        <dc:Bounds x="230" y="200" width="200" height="120" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="AdHocChild_1_di" bpmnElement="AdHocChild_1">
+        <dc:Bounds x="270" y="230" width="100" height="80" />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="Flow_0d202t1_di" bpmnElement="Flow_0d202t1">
         <di:waypoint x="188" y="120" />
         <di:waypoint x="230" y="120" />

test/hooks/useSelectedElement.spec.js

@@ -5,7 +5,8 @@ import { bootstrapModeler, inject } from '../util/Util';
 import {
   useSelectedElement,
   SINGLE_TASK_SELECTION_REQUIRED_MESSAGE,
-  TASK_SELECTION_REQUIRED_MESSAGE
+  TASK_SELECTION_REQUIRED_MESSAGE,
+  AD_HOC_SUBPROCESS_MESSAGE
 } from '../../lib/hooks/useSelectedElement';
 
 import diagramXML from '../fixtures/ElementConfig.bpmn';
@@ -86,4 +87,24 @@ describe('useSelectedElement', function() {
     expect(message).to.be.null;
   }));
 
+
+  it('should return null and a message if element is inside ad-hoc subprocess', inject(function(elementRegistry, injector, selection) {
+
+    // given
+    const { result } = renderHook(() => useSelectedElement(injector));
+
+    const element = elementRegistry.get('AdHocChild_1');
+
+    // when
+    act(() => {
+      selection.select(element);
+    });
+
+    const [ selectedElement, message ] = result.current;
+
+    // then
+    expect(selectedElement).to.be.null;
+    expect(message).to.equal(AD_HOC_SUBPROCESS_MESSAGE);
+  }));
+
 });

test/utils/element.spec.js

@@ -1,6 +1,6 @@
 import { bootstrapModeler, inject } from '../util/Util';
 
-import { getProcessId } from '../../lib/utils/element';
+import { getProcessId, isInsideAdHocSubProcess } from '../../lib/utils/element';
 
 import processXML from '../fixtures/diagram.bpmn';
 import collaborationXML from '../fixtures/collaboration.bpmn';
@@ -50,4 +50,50 @@ describe('element', function() {
 
   });
 
+
+  describe('isInsideAdHocSubProcess', function() {
+
+    beforeEach(bootstrapModeler(processXML));
+
+
+    it('should return true for direct child of ad-hoc subprocess', inject(function(elementRegistry) {
+
+      // given
+      const element = elementRegistry.get('AdHocSubProcessTask');
+
+      // when
+      const result = isInsideAdHocSubProcess(element);
+
+      // then
+      expect(result).to.be.true;
+    }));
+
+
+    it('should return true for nested child of ad-hoc subprocess', inject(function(elementRegistry) {
+
+      // given
+      const element = elementRegistry.get('CollapsedAdHocSubProcessTask');
+
+      // when
+      const result = isInsideAdHocSubProcess(element);
+
+      // then
+      expect(result).to.be.true;
+    }));
+
+
+    it('should return false for element not in ad-hoc subprocess', inject(function(elementRegistry) {
+
+      // given
+      const element = elementRegistry.get('ServiceTask_1');
+
+      // when
+      const result = isInsideAdHocSubProcess(element);
+
+      // then
+      expect(result).to.be.false;
+    }));
+
+  });
+
 });