@camunda/task-testing 0.2.5 → 0.2.6

package/dist/index.js

@@ -11,8 +11,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ElementConfig: () => (/* binding */ ElementConfig),
-/* harmony export */   createDefaultInputConfig: () => (/* binding */ createDefaultInputConfig)
+/* harmony export */   DEFAULT_CONFIG: () => (/* binding */ DEFAULT_CONFIG),
+/* harmony export */   ElementConfig: () => (/* binding */ ElementConfig)
 /* harmony export */ });
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! events */ "./node_modules/events/events.js");
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(events__WEBPACK_IMPORTED_MODULE_0__);
@@ -33,8 +33,8 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._injector = injector;
     this._elementVariables = elementVariables;
 
-    /**
-     * @type {import('./types').Config}
+    /**
+     * @type {import('./types').Config}
      */
     this._config = {
       ...DEFAULT_CONFIG,
@@ -98,19 +98,19 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     };
     this.emit('config.changed');
   }
-  async getInputConfigForElement(element) {
+  getInputConfigForElement(element) {
     if (!(0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(element, SUPPORTED_ELEMENT_TYPES)) {
       throw new Error(`Unsupported element type: ${element.type}`);
     }
     if (!(0,min_dash__WEBPACK_IMPORTED_MODULE_2__.isString)(this._config.input[element.id])) {
-      return this._getDefaultInputConfig(element);
+      return this._getDefaultInputConfig();
     }
     return this._config.input[element.id];
   }
 
-  /**
-   * @param {import('./types').Element} element
-   * @returns {import('./types').ElementOutput}
+  /**
+   * @param {import('./types').Element} element
+   * @returns {import('./types').ElementOutput}
    */
   getOutputConfigForElement(element) {
     if (!(0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(element, SUPPORTED_ELEMENT_TYPES)) {
@@ -121,175 +121,9 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     }
     return this._config.output[element.id];
   }
-  async _getDefaultInputConfig(element) {
-    const variables = await this._elementVariables.getVariablesForElement(element);
-    return createDefaultInputConfig(element, variables);
-  }
-}
-
-/**
- * Get input parameters from a BPMN element.
- *
- * @param {import('./types').Element} element
- *
- * @returns {import('./types').ModdleElement[]}
- */
-function getInputParameters(element) {
-  const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.getBusinessObject)(element);
-  const extensionElements = businessObject.get('extensionElements');
-  if (!extensionElements) {
-    return [];
-  }
-  const values = extensionElements.get('values');
-  if (!values) {
-    return [];
-  }
-  const ioMapping = values.find(value => (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(value, 'zeebe:IoMapping'));
-  if (!ioMapping) {
-    return [];
-  }
-  return ioMapping.get('inputParameters');
-}
-
-/**
- * Unflatten an object with dot notation keys into a nested object.
- *
- * Example:
- *
- * ```
- * unflatten({
- *   'foo.bar': 'baz'
- * }) // returns { foo: { bar: 'baz' } }
- * ```
- *
- * @param {Object} obj
- *
- * @returns {Object}
- */
-function unflatten(obj) {
-  const result = {};
-  for (const [path, value] of Object.entries(obj)) {
-    const parts = path.split('.');
-    const lastKey = parts.pop();
-    let current = result;
-    for (const part of parts) {
-      if (!(part in current)) {
-        current[part] = {};
-      }
-      current = current[part];
-    }
-    current[lastKey] = value;
+  _getDefaultInputConfig() {
+    return '{}';
   }
-  return result;
-}
-
-/**
- * Create default input config for a BPMN element.
- *
- * @todo Only simple input parameter sources can be handled until
- * https://github.com/bpmn-io/internal-docs/issues/1218 is implemented.
- *
- * @param {import('./types').Element} element
- * @param {import('./types').Variable[]} variablesForElement
- *
- * @returns {string}
- */
-function createDefaultInputConfig(element, variablesForElement) {
-  const inputParameters = getInputParameters(element);
-  const foundVariables = inputParameters.reduce((foundVariables, inputParameter) => {
-    const source = inputParameter.get('source'),
-      target = inputParameter.get('target');
-    const variable = variablesForElement.find(({
-      name
-    }) => name === target);
-    if (!variable) {
-      return foundVariables;
-    }
-    const {
-      name,
-      type
-    } = variable;
-
-    // for context inputs, we cannot determine the structure, so we
-    // just create an empty object
-    if (type === 'Context') {
-      return {
-        ...foundVariables,
-        [name]: {}
-      };
-    }
-
-    // only handle simple sources for now
-    if (isFeel(source) && !isBoolean(source)) {
-      const nameFromSource = getNameFromSource(source);
-      if (nameFromSource) {
-        return {
-          ...foundVariables,
-          [nameFromSource]: ''
-        };
-      }
-    }
-    return foundVariables;
-  }, {});
-  return JSON.stringify(unflatten(foundVariables), null, 2);
-}
-
-/**
- * Get the name from a source string.
- *
- * @example
- *
- * getNameFromSource('=foo') // 'foo'
- * getNameFromSource('=foo + bar') // null
- * getNameFromSource('= 1 + 2') // null
- *
- * @param {string} source
- *
- * @returns {string|null}
- */
-function getNameFromSource(source) {
-  if (source && isFeel(source)) {
-    const name = source.slice(1).trim();
-    if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
-      return name;
-    }
-  }
-  return null;
-}
-
-/**
- * Check if a source string is a FEEL expression.
- *
- * @example
- *
- * isFeel('=foo') // true
- * isFeel('= 1 + 2') // true
- * isFeel('foo') // false
- *
- * @param {string} source
- *
- * @returns {boolean}
- */
-function isFeel(source) {
-  return !!source && source.startsWith('=');
-}
-
-/**
- * Check if a source string is a boolean FEEL expression.
- *
- * @example
- *
- * isBoolean('=true') // true
- * isBoolean('= false') // true
- * isBoolean('=foo') // false
- * isBoolean('=1 + 2') // false
- *
- * @param {string} source
- *
- * @return {boolean}
- */
-function isBoolean(source) {
-  return !!source && /^=\s*(true|false)\s*$/i.test(source);
 }
 
 /***/ }),
@@ -352,33 +186,33 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! events */ "./node_modules/events/events.js");
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(events__WEBPACK_IMPORTED_MODULE_0__);
-/**
- * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
- * under one or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information regarding copyright
- * ownership.
- *
- * Camunda licenses this file to you under the MIT; you may not use this file
- * except in compliance with the MIT License.
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
  */
 
 
 const INTERVAL_MS = 1000;
 
-/**
- * @import { TaskExecutionApi, TaskExecutionResult, TaskExecutionError, TaskExecutionStatus } from './types';
+/**
+ * @import { TaskExecutionApi, TaskExecutionResult, TaskExecutionError, TaskExecutionStatus } from './types';
  */
 
-/**
- * Emits:
- * - `taskExecution.status.changed` with one of {@link TaskExecutionStatus}
- * - `taskExecution.finished` with {@link TaskExecutionResult}
- * - `taskExecution.error` with {@link TaskExecutionError}
+/**
+ * Emits:
+ * - `taskExecution.status.changed` with one of {@link TaskExecutionStatus}
+ * - `taskExecution.finished` with {@link TaskExecutionResult}
+ * - `taskExecution.error` with {@link TaskExecutionError}
  */
 class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
-  /**
-   * @param {Object} injector
-   * @param {TaskExecutionApi} api
+  /**
+   * @param {Object} injector
+   * @param {TaskExecutionApi} api
    */
   constructor(injector, api) {
     super();
@@ -398,13 +232,13 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     });
   }
 
-  /**
-   * Start task execution.
-   *
-   * @param {string} elementId
-   * @param {Object} variables
-   *
-   * @returns {Promise<void>}
+  /**
+   * Start task execution.
+   *
+   * @param {string} elementId
+   * @param {Object} variables
+   *
+   * @returns {Promise<void>}
    */
   async executeTask(elementId, variables) {
     this._changeStatus('deploying');
@@ -498,8 +332,8 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._interval = setInterval(intervalCallback, INTERVAL_MS);
   }
 
-  /**
-   * Cancel current task execution, clean up and change status to `idle`.
+  /**
+   * Cancel current task execution, clean up and change status to `idle`.
    */
   async cancelTaskExecution() {
     // TODO: Proper clean up:
@@ -513,11 +347,11 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._changeStatus('idle');
   }
 
-  /**
-   * Emit `taskExecution.error` event.
-   *
-   * @param {string} message
-   * @param {any} [response]
+  /**
+   * Emit `taskExecution.error` event.
+   *
+   * @param {string} message
+   * @param {any} [response]
    */
   _emitError(message, response) {
     /** @type {import('./types').TaskExecutionError} */
@@ -538,12 +372,12 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   }
 }
 
-/**
- * Get the process ID from the deployment response.
- *
- * @param {import('./types').DeploymentResponse} [response]
- *
- * @returns {string|null} The process ID or null if not found.
+/**
+ * Get the process ID from the deployment response.
+ *
+ * @param {import('./types').DeploymentResponse} [response]
+ *
+ * @returns {string|null} The process ID or null if not found.
  */
 function getProcessId(response) {
   if (!response) {
@@ -560,12 +394,12 @@ function getProcessId(response) {
   return null;
 }
 
-/**
- * Get the process instance key from the response.
- *
- * @param {import('./types').StartInstanceResponse} [response]
- *
- * @returns {string|null} The process instance key or null if not found.
+/**
+ * Get the process instance key from the response.
+ *
+ * @param {import('./types').StartInstanceResponse} [response]
+ *
+ * @returns {string|null} The process instance key or null if not found.
  */
 function getProcessInstanceKey(response) {
   if (!response) {
@@ -651,7 +485,7 @@ __webpack_require__.r(__webpack_exports__);
 
 function Input({
   allOutputs,
-  input,
+  input = '',
   onErrorChange,
   onResetInput,
   onSetInput,
@@ -680,7 +514,7 @@ function Input({
           children: "Reset"
         })
       })]
-    }), input && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_InputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_InputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
       allOutputs: allOutputs,
       value: input,
       onChange: onSetInput,
@@ -769,21 +603,21 @@ function InputEditor({
       value
     }));
 
-    /**
-     * @type {import('@codemirror/autocomplete').Completion[]}
+    /**
+     * @type {import('@codemirror/autocomplete').Completion[]}
      */
     const result = [...variablesForElementAutocompletions, ...outputVariablesAutocompletions];
     return result;
   }, [allOutputs, variablesForElement]);
   const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {ReturnType<typeof useState<EditorView>>}
+  /**
+   * @type {ReturnType<typeof useState<EditorView>>}
    */
   const [editorView, setEditorView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<string?>>}
+  /**
+   * @type {ReturnType<typeof useState<string?>>}
    */
   const [error, setError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -891,19 +725,19 @@ function getAllOutputVariables(allOutputs) {
   return allOutputVariables;
 }
 
-/**
- * Get a string representation of the type of a value.
- *
- * @example
- *
- * getDetail('foo') // String
- * getDetail(1337) // Number
- * getDetail(true) // Boolean
- * getDetail({}) // Object
- *
- * @param {any} value
- *
- * @return {string}
+/**
+ * Get a string representation of the type of a value.
+ *
+ * @example
+ *
+ * getDetail('foo') // String
+ * getDetail(1337) // Number
+ * getDetail(true) // Boolean
+ * getDetail({}) // Object
+ *
+ * @param {any} value
+ *
+ * @return {string}
  */
 function getDetail(value) {
   const type = typeof value;
@@ -948,17 +782,17 @@ const TASK_EXECUTION_STATUS_LABEL = {
   executing: 'Waiting for task to be completed...'
 };
 
-/**
- * @param {Object} props
- * @param {boolean} props.isConnectionConfigured
- * @param {string} [props.configureConnectionBannerTitle]
- * @param {string} [props.configureConnectionBannerDescription]
- * @param {string} [props.configureConnectionLabel]
- * @param {Function} [props.onConfigureConnection]
- * @param {boolean} props.isTaskExecuting
- * @param {import('../../types').ElementOutput} props.output
- * @param {Function} props.onResetOutput
- * @param {import('../../types').TaskExecutionStatus} props.taskExecutionStatus
+/**
+ * @param {Object} props
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
+ * @param {boolean} props.isTaskExecuting
+ * @param {import('../../types').ElementOutput} props.output
+ * @param {Function} props.onResetOutput
+ * @param {import('../../types').TaskExecutionStatus} props.taskExecutionStatus
  */
 function Output({
   isConnectionConfigured,
@@ -1137,14 +971,14 @@ function OutputVariables({
   });
 }
 
-/**
- *
- * @param {Object} props
- * @param {string} props.title
- * @param {string} props.description
- * @param {string} [props.actionLabel]
- * @param {string} [props.actionUrl]
- * @param {Function} [props.onActionClick]
+/**
+ *
+ * @param {Object} props
+ * @param {string} props.title
+ * @param {string} props.description
+ * @param {string} [props.actionLabel]
+ * @param {string} [props.actionUrl]
+ * @param {Function} [props.onActionClick]
  */
 function ErrorBanner({
   title,
@@ -1176,12 +1010,12 @@ function ErrorBanner({
   });
 }
 
-/**
- * Print the details of an incident.
- *
- * @param {Object} incident
- *
- * @returns {string}
+/**
+ * Print the details of an incident.
+ *
+ * @param {Object} incident
+ *
+ * @returns {string}
  */
 function printIncident(incident) {
   let text = '';
@@ -1191,16 +1025,16 @@ function printIncident(incident) {
   return text;
 }
 
-/**
- * Capitalize a string, adding spaces before capital letters.
- *
- * @example
- *
- * capitalize('fooBar'); // Foo Bar
- *
- * @param {string} string
- *
- * @returns {string}
+/**
+ * Capitalize a string, adding spaces before capital letters.
+ *
+ * @example
+ *
+ * capitalize('fooBar'); // Foo Bar
+ *
+ * @param {string} string
+ *
+ * @returns {string}
  */
 function capitalize(string) {
   return string.replace(/([A-Z])/g, ' $1').replace(/^./, match => match.toUpperCase());
@@ -1239,8 +1073,8 @@ function OutputEditor({
 }) {
   const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {ReturnType<typeof useState<EditorView>>}
+  /**
+   * @type {ReturnType<typeof useState<EditorView>>}
    */
   const [editorView, setEditorView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -1305,7 +1139,6 @@ function OutputEditor({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   NO_ELEMENT_TEXT: () => (/* binding */ NO_ELEMENT_TEXT),
 /* harmony export */   "default": () => (/* binding */ TaskTesting)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
@@ -1335,25 +1168,24 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const NO_ELEMENT_TEXT = 'Select a task to start testing.';
-
-/**
- * @param {Object} props
- * @param {Object} props.injector
- * @param {import('../../types').TaskExecutionApi} props.api
- * @param {boolean} props.isConnectionConfigured
- * @param {string} [props.configureConnectionBannerTitle]
- * @param {string} [props.configureConnectionBannerDescription]
- * @param {string} [props.configureConnectionLabel]
- * @param {Function} [props.onConfigureConnection]
- * @param {import('../../types').Config|undefined} [props.config]
- * @param {Function} [props.onConfigChanged=() => {}]
- * @param {string} [props.operateBaseUrl]
- * @param {string} [props.documentationUrl]
- * @param {Function} [props.onTaskExecutionStarted=() => {}]
- * @param {Function} [props.onTaskExecutionFinished=() => {}]
- * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
+/**
+ * @param {Object} props
+ * @param {Object} props.injector
+ * @param {import('../../types').TaskExecutionApi} props.api
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
+ * @param {import('../../types').Config|undefined} [props.config]
+ * @param {Function} [props.onConfigChanged=() => {}]
+ * @param {string} [props.operateBaseUrl]
+ * @param {string} [props.documentationUrl]
+ * @param {Function} [props.onTaskExecutionStarted=() => {}]
+ * @param {Function} [props.onTaskExecutionFinished=() => {}]
+ * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
  */
+
 function TaskTesting({
   injector,
   api,
@@ -1370,37 +1202,37 @@ function TaskTesting({
   onTaskExecutionFinished = () => {},
   onTaskExecutionInterrupted = () => {}
 }) {
-  /**
-   * @type {React.RefObject<ElementVariables?>}
+  /**
+   * @type {React.RefObject<ElementVariables?>}
    */
   const elementVariablesRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {React.RefObject<ElementConfig?>}
+  /**
+   * @type {React.RefObject<ElementConfig?>}
    */
   const elementConfigRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const [variablesForElement, setVariablesForElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
 
-  /**
-   * @type {ReturnType<typeof useState<import('../../types').TaskExecutionStatus>>}
+  /**
+   * @type {ReturnType<typeof useState<import('../../types').TaskExecutionStatus>>}
    */
   const [taskExecutionStatus, setTaskExecutionStatus] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<string>>}
+  /**
+   * @type {ReturnType<typeof useState<string>>}
    */
   const [input, setInput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<import('../../types').ElementOutput>>}
+  /**
+   * @type {ReturnType<typeof useState<import('../../types').ElementOutput>>}
    */
   const [output, setOutput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   const [allOutputs, setAllOutputs] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
   const [inputError, setInputError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
-  const element = (0,_hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_4__.useSelectedElement)(injector);
+  const [element, selectedElementMessage] = (0,_hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_4__.useSelectedElement)(injector);
 
-  /**
-   * @type {React.RefObject<TaskExecution?>}
+  /**
+   * @type {React.RefObject<TaskExecution?>}
    */
   const taskExecutionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
@@ -1455,7 +1287,7 @@ function TaskTesting({
       if (!element) {
         return;
       }
-      elementConfigRef.current.getInputConfigForElement(element).then(setInput);
+      setInput(elementConfigRef.current.getInputConfigForElement(element));
       setOutput(elementConfigRef.current.getOutputConfigForElement(element));
       setAllOutputs(elementConfigRef.current.getConfig().output);
     };
@@ -1479,9 +1311,9 @@ function TaskTesting({
       });
     };
 
-    /**
-     * @param {import('../../types').TaskExecutionStatus} status
-     * @param {string} [processInstanceKey]
+    /**
+     * @param {import('../../types').TaskExecutionStatus} status
+     * @param {string} [processInstanceKey]
      */
     const handleStatusChange = (status, processInstanceKey) => {
       setTaskExecutionStatus(status);
@@ -1535,7 +1367,7 @@ function TaskTesting({
       setInput(undefined);
       return;
     }
-    elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur5 = elementConfigRef.current) === null || _elementConfigRef$cur5 === void 0 || _elementConfigRef$cur5.getInputConfigForElement(element).then(setInput);
+    setInput(elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur5 = elementConfigRef.current) === null || _elementConfigRef$cur5 === void 0 ? void 0 : _elementConfigRef$cur5.getInputConfigForElement(element));
     setOutput(elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur6 = elementConfigRef.current) === null || _elementConfigRef$cur6 === void 0 ? void 0 : _elementConfigRef$cur6.getOutputConfigForElement(element));
   }, [element]);
   const handleSetInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(newInput => {
@@ -1553,7 +1385,7 @@ function TaskTesting({
       return;
     }
     onTaskExecutionStarted(element);
-    const inputConfig = await elementConfigRef.current.getInputConfigForElement(element);
+    const inputConfig = elementConfigRef.current.getInputConfigForElement(element);
     elementConfigRef.current.setOutputConfigForElement(element, null);
     taskExecutionRef.current.executeTask(element.id, JSON.parse(inputConfig));
   };
@@ -1587,7 +1419,7 @@ function TaskTesting({
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
         className: "task-testing__container-no-element",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Cursor_1, {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
-          children: NO_ELEMENT_TEXT
+          children: selectedElementMessage
         }), documentationUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
           href: documentationUrl,
           target: "_blank",
@@ -1597,8 +1429,21 @@ function TaskTesting({
     });
   }
   const showTooltip = !isConnectionConfigured || !!inputError;
-  const tooltipLabel = !isConnectionConfigured ? 'Connection not configured' : inputError;
+  const tooltipLabel = !isConnectionConfigured ? configureConnectionBannerTitle : inputError;
   const isTaskExecuting = !!taskExecutionStatus && taskExecutionStatus !== 'idle';
+  const handleClick = () => {
+    if (!isConnectionConfigured) {
+      if (onConfigureConnection) {
+        onConfigureConnection();
+      }
+      return;
+    }
+    if (isTaskExecuting) {
+      handleCancelTaskExecution();
+      return;
+    }
+    handleExecuteTask();
+  };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
     className: "task-testing__container",
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
@@ -1609,8 +1454,9 @@ function TaskTesting({
           className: "task-header",
           children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
             className: "task-type",
-            children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_10__.getType)(element)
+            children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_10__.getType)(element, injector)
           }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+            className: "task-name",
             children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_10__.getName)(element)
           })]
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tooltip, {
@@ -1620,11 +1466,12 @@ function TaskTesting({
           label: tooltipLabel,
           align: "left-start",
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
+            "data-testid": "test-task-btn",
             className: "btn-execute",
             kind: "primary",
             size: "sm",
             renderIcon: isTaskExecuting ? _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.StopFilledAlt : _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.PlayFilledAlt,
-            onClick: isTaskExecuting ? handleCancelTaskExecution : handleExecuteTask,
+            onClick: handleClick,
             children: isTaskExecuting ? 'Cancel' : 'Test task'
           })
         })]
@@ -1779,6 +1626,8 @@ const syntaxClasses = (0,_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.synta
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SINGLE_TASK_SELECTION_REQUIRED_MESSAGE: () => (/* binding */ SINGLE_TASK_SELECTION_REQUIRED_MESSAGE),
+/* harmony export */   TASK_SELECTION_REQUIRED_MESSAGE: () => (/* binding */ TASK_SELECTION_REQUIRED_MESSAGE),
 /* harmony export */   useSelectedElement: () => (/* binding */ useSelectedElement)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
@@ -1786,15 +1635,21 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const SUPPORTED_ELEMENT_TYPES = ['bpmn:Task'];
+const SINGLE_TASK_SELECTION_REQUIRED_MESSAGE = 'Select a task to start testing.';
+const TASK_SELECTION_REQUIRED_MESSAGE = 'Task testing is only supported for tasks. Select a task to start testing.';
 
-/**
- * Get currently selected BPMN element, if it is a single `bpmn:Task`.
- *
- * @param {Object} injector
- * @return {Object|null} Selected BPMN element or null
+/**
+ * Get currently selected BPMN element, if it is a single `bpmn:Task`. If not,
+ * return null and a message indicating what to do.
+ *
+ * @param {Object} injector
+ * @return {[ Object|null, string|null ]}
  */
 function useSelectedElement(injector) {
   const [selectedElement, setSelectedElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+
+  /** @type {[ string|null, Function ]} */
+  const [message, setMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(SINGLE_TASK_SELECTION_REQUIRED_MESSAGE);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const selection = injector.get('selection');
     handleSelection({
@@ -1809,13 +1664,18 @@ function useSelectedElement(injector) {
   const handleSelection = ({
     newSelection
   }) => {
-    if (newSelection.length === 1 && (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(newSelection[0], SUPPORTED_ELEMENT_TYPES)) {
-      setSelectedElement(newSelection[0]);
-    } else {
+    if (newSelection.length !== 1) {
+      setSelectedElement(null);
+      setMessage(SINGLE_TASK_SELECTION_REQUIRED_MESSAGE);
+    } else if (!(0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(newSelection[0], SUPPORTED_ELEMENT_TYPES)) {
       setSelectedElement(null);
+      setMessage(TASK_SELECTION_REQUIRED_MESSAGE);
+    } else {
+      setSelectedElement(newSelection[0]);
+      setMessage(null);
     }
   };
-  return selectedElement;
+  return [selectedElement, message];
 }
 
 /***/ }),
@@ -1889,21 +1749,21 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * @typedef {import('@codemirror/autocomplete').Completion} Completion
- * @typedef {import('@codemirror/autocomplete').CompletionContext} CompletionContext
- * @typedef {import('@codemirror/autocomplete').CompletionResult} CompletionResult
+/**
+ * @typedef {import('@codemirror/autocomplete').Completion} Completion
+ * @typedef {import('@codemirror/autocomplete').CompletionContext} CompletionContext
+ * @typedef {import('@codemirror/autocomplete').CompletionResult} CompletionResult
  */
 
-/**
- * @param {Completion[]} variables
+/**
+ * @param {Completion[]} variables
  */
 function getAutocompletionExtensions(variables) {
   return [autoCompletionExtension(variables), startCompletionExtension()];
 }
 
-/**
- * @param {Completion[]} variables
+/**
+ * @param {Completion[]} variables
  */
 function autoCompletionExtension(variables) {
   return (0,_codemirror_autocomplete__WEBPACK_IMPORTED_MODULE_0__.autocompletion)({
@@ -1911,8 +1771,8 @@ function autoCompletionExtension(variables) {
   });
 }
 
-/**
- * Trigger autocompletion when the user goes into a new line.
+/**
+ * Trigger autocompletion when the user goes into a new line.
  */
 function startCompletionExtension() {
   return _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.updateListener.of(update => {
@@ -1936,11 +1796,11 @@ function startCompletionExtension() {
   });
 }
 
-/**
- * @param {CompletionContext} context
- * @param {Array} variables
- *
- * @returns {CompletionResult | null}
+/**
+ * @param {CompletionContext} context
+ * @param {Array} variables
+ *
+ * @returns {CompletionResult | null}
  */
 function autocomplete(context, variables) {
   const {
@@ -2031,13 +1891,13 @@ function autocomplete(context, variables) {
   };
 }
 
-/**
- * Check if there is a property after the current position by looking for a `"` character.
- *
- * @param {*} state
- * @param {number} pos
- *
- * @returns {boolean}
+/**
+ * Check if there is a property after the current position by looking for a `"` character.
+ *
+ * @param {*} state
+ * @param {number} pos
+ *
+ * @returns {boolean}
  */
 function hasPropertyAfter(state, pos) {
   const textAfter = state.sliceDoc(pos).trimStart();
@@ -2054,60 +1914,33 @@ function hasPropertyAfter(state, pos) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   getConcreteType: () => (/* binding */ getConcreteType),
 /* harmony export */   getName: () => (/* binding */ getName),
 /* harmony export */   getType: () => (/* binding */ getType)
 /* harmony export */ });
-/* harmony import */ var bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bpmn-js/lib/util/ModelUtil */ "./node_modules/bpmn-js/lib/util/ModelUtil.js");
+/* harmony import */ var bpmn_js_lib_features_label_editing_LabelUtil__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bpmn-js/lib/features/label-editing/LabelUtil */ "./node_modules/bpmn-js/lib/util/LabelUtil.js");
 
-
-/**
- * Get the name of a BPMN element.
- *
- * @param {import('../types').Element} element
- *
- * @returns {string}
- */
 function getName(element) {
-  const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.getBusinessObject)(element);
-  const name = businessObject.get('name') || businessObject.get('id');
-  if (name.length > 30) {
-    return `${name.substring(0, 27)}...`;
-  }
-  return name;
+  return (0,bpmn_js_lib_features_label_editing_LabelUtil__WEBPACK_IMPORTED_MODULE_0__.getLabel)(element);
 }
-
-/**
- * Get the name of a BPMN element.
- *
- * @param {import('../types').Element} element
- *
- * @returns {string}
- */
-function getType(element) {
-  const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.getBusinessObject)(element);
-  const {
-    $type: type
-  } = businessObject;
-  switch (type) {
-    case 'bpmn:Task':
-      return 'Task';
-    case 'bpmn:UserTask':
-      return 'User Task';
-    case 'bpmn:ScriptTask':
-      return 'Script Task';
-    case 'bpmn:ServiceTask':
-      return 'Service Task';
-    case 'bpmn:BusinessRuleTask':
-      return 'Business Rule Task';
-    case 'bpmn:SendTask':
-      return 'Send Task';
-    case 'bpmn:ManualTask':
-      return 'Manual Task';
-    case 'bpmn:ReceiveTask':
-      return 'Receive Task';
-    default:
-      return 'Task';
+function getType(element, injector) {
+  const translate = injector.get('translate') || (text => text);
+  const elementTemplates = injector.get('elementTemplates', false);
+  if (elementTemplates) {
+    const template = getTemplate(element, elementTemplates);
+    if (template && template.name) {
+      return translate(template.name);
+    }
   }
+  const concreteType = getConcreteType(element);
+  return translate(concreteType.replace(/(\B[A-Z])/g, ' $1'));
+}
+;
+function getTemplate(element, elementTemplates) {
+  return elementTemplates.get(element);
+}
+function getConcreteType(element) {
+  return element.type.split(':')[1];
 }
 
 /***/ }),
@@ -32362,6 +32195,297 @@ function surrogateHigh(ch) { return ch >= 0xD800 && ch < 0xDC00 }
 function codePointSize(code) { return code < 0x10000 ? 1 : 2 }
 
 
+/***/ }),
+
+/***/ "./node_modules/bpmn-js/lib/util/LabelUtil.js":
+/*!****************************************************!*\
+  !*** ./node_modules/bpmn-js/lib/util/LabelUtil.js ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DEFAULT_LABEL_SIZE: () => (/* binding */ DEFAULT_LABEL_SIZE),
+/* harmony export */   FLOW_LABEL_INDENT: () => (/* binding */ FLOW_LABEL_INDENT),
+/* harmony export */   getExternalLabelBounds: () => (/* binding */ getExternalLabelBounds),
+/* harmony export */   getExternalLabelMid: () => (/* binding */ getExternalLabelMid),
+/* harmony export */   getFlowLabelPosition: () => (/* binding */ getFlowLabelPosition),
+/* harmony export */   getLabel: () => (/* binding */ getLabel),
+/* harmony export */   getWaypointsMid: () => (/* binding */ getWaypointsMid),
+/* harmony export */   hasExternalLabel: () => (/* binding */ hasExternalLabel),
+/* harmony export */   isLabel: () => (/* reexport safe */ diagram_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.isLabel),
+/* harmony export */   isLabelExternal: () => (/* binding */ isLabelExternal),
+/* harmony export */   setLabel: () => (/* binding */ setLabel)
+/* harmony export */ });
+/* harmony import */ var min_dash__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! min-dash */ "./node_modules/min-dash/dist/index.esm.js");
+/* harmony import */ var _ModelUtil__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ModelUtil */ "./node_modules/bpmn-js/lib/util/ModelUtil.js");
+/* harmony import */ var diagram_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! diagram-js/lib/util/ModelUtil */ "./node_modules/diagram-js/lib/util/ModelUtil.js");
+
+
+
+
+
+
+
+
+/**
+ * @typedef {import('diagram-js/lib/util/Types').Point} Point
+ * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
+ *
+ * @typedef {import('../model/Types').Element} Element
+ * @typedef {import('../model/Types').ModdleElement} ModdleElement
+ */
+
+var DEFAULT_LABEL_SIZE = {
+  width: 90,
+  height: 20
+};
+
+var FLOW_LABEL_INDENT = 15;
+
+
+/**
+ * Return true if the given semantic has an external label.
+ *
+ * @param {Element} semantic
+ *
+ * @return {boolean}
+ */
+function isLabelExternal(semantic) {
+  return (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Event') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Gateway') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataStoreReference') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataObjectReference') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataInput') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataOutput') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:SequenceFlow') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:MessageFlow') ||
+         (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Group');
+}
+
+/**
+ * Return true if the given element has an external label.
+ *
+ * @param {Element} element
+ *
+ * @return {boolean}
+ */
+function hasExternalLabel(element) {
+  return (0,diagram_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.isLabel)(element.label);
+}
+
+/**
+ * Get the position of a sequence flow label.
+ *
+ * @param  {Point[]} waypoints
+ *
+ * @return {Point}
+ */
+function getFlowLabelPosition(waypoints) {
+
+  // get the waypoints mid
+  var mid = waypoints.length / 2 - 1;
+
+  var first = waypoints[Math.floor(mid)];
+  var second = waypoints[Math.ceil(mid + 0.01)];
+
+  // get position
+  var position = getWaypointsMid(waypoints);
+
+  // calculate angle
+  var angle = Math.atan((second.y - first.y) / (second.x - first.x));
+
+  var x = position.x,
+      y = position.y;
+
+  if (Math.abs(angle) < Math.PI / 2) {
+    y -= FLOW_LABEL_INDENT;
+  } else {
+    x += FLOW_LABEL_INDENT;
+  }
+
+  return { x: x, y: y };
+}
+
+
+/**
+ * Get the middle of a number of waypoints.
+ *
+ * @param  {Point[]} waypoints
+ *
+ * @return {Point}
+ */
+function getWaypointsMid(waypoints) {
+
+  var mid = waypoints.length / 2 - 1;
+
+  var first = waypoints[Math.floor(mid)];
+  var second = waypoints[Math.ceil(mid + 0.01)];
+
+  return {
+    x: first.x + (second.x - first.x) / 2,
+    y: first.y + (second.y - first.y) / 2
+  };
+}
+
+/**
+ * Get the middle of the external label of an element.
+ *
+ * @param {Element} element
+ *
+ * @return {Point}
+ */
+function getExternalLabelMid(element) {
+
+  if (element.waypoints) {
+    return getFlowLabelPosition(element.waypoints);
+  } else if ((0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(element, 'bpmn:Group')) {
+    return {
+      x: element.x + element.width / 2,
+      y: element.y + DEFAULT_LABEL_SIZE.height / 2
+    };
+  } else {
+    return {
+      x: element.x + element.width / 2,
+      y: element.y + element.height + DEFAULT_LABEL_SIZE.height / 2
+    };
+  }
+}
+
+
+/**
+ * Return the bounds of an elements label, parsed from the elements DI or
+ * generated from its bounds.
+ *
+ * @param {ModdleElement} di
+ * @param {Element} element
+ *
+ * @return {Rect}
+ */
+function getExternalLabelBounds(di, element) {
+
+  var mid,
+      size,
+      bounds,
+      label = di.label;
+
+  if (label && label.bounds) {
+    bounds = label.bounds;
+
+    size = {
+      width: Math.max(DEFAULT_LABEL_SIZE.width, bounds.width),
+      height: bounds.height
+    };
+
+    mid = {
+      x: bounds.x + bounds.width / 2,
+      y: bounds.y + bounds.height / 2
+    };
+  } else {
+
+    mid = getExternalLabelMid(element);
+
+    size = DEFAULT_LABEL_SIZE;
+  }
+
+  return (0,min_dash__WEBPACK_IMPORTED_MODULE_2__.assign)({
+    x: mid.x - size.width / 2,
+    y: mid.y - size.height / 2
+  }, size);
+}
+
+/**
+ * @param {ModdleElement} semantic
+ *
+ * @returns {string}
+ */
+function getLabelAttr(semantic) {
+  if (
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:FlowElement') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Participant') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Lane') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:SequenceFlow') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:MessageFlow') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataInput') ||
+    (0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:DataOutput')
+  ) {
+    return 'name';
+  }
+
+  if ((0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:TextAnnotation')) {
+    return 'text';
+  }
+
+  if ((0,_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.is)(semantic, 'bpmn:Group')) {
+    return 'categoryValueRef';
+  }
+}
+
+/**
+ * @param {ModdleElement} semantic
+ *
+ * @returns {string}
+ */
+function getCategoryValue(semantic) {
+  var categoryValueRef = semantic['categoryValueRef'];
+
+  if (!categoryValueRef) {
+    return '';
+  }
+
+
+  return categoryValueRef.value || '';
+}
+
+/**
+ * @param {Element} element
+ *
+ * @return {string}
+ */
+function getLabel(element) {
+  var semantic = element.businessObject,
+      attr = getLabelAttr(semantic);
+
+  if (attr) {
+
+    if (attr === 'categoryValueRef') {
+
+      return getCategoryValue(semantic);
+    }
+
+    return semantic[attr] || '';
+  }
+}
+
+
+/**
+ * @param {Element} element
+ * @param {string} text
+ *
+ * @return {Element}
+ */
+function setLabel(element, text) {
+  var semantic = element.businessObject,
+      attr = getLabelAttr(semantic);
+
+  if (attr) {
+
+    if (attr === 'categoryValueRef') {
+      if (!semantic[attr]) {
+        return element;
+      }
+
+      semantic[attr].value = text;
+    } else {
+      semantic[attr] = text;
+    }
+
+  }
+
+  return element;
+}
+
+
 /***/ }),
 
 /***/ "./node_modules/bpmn-js/lib/util/ModelUtil.js":
@@ -32630,10 +32754,20 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
 .task-testing__container .task-testing__container--header .task-header {
   display: flex;
   gap: 6px;
+  min-width: 0;
 }
 .task-testing__container .task-testing__container--header .task-header .task-type {
   font-weight: bold;
 }
+.task-testing__container .task-testing__container--header .task-header .task-type,
+.task-testing__container .task-testing__container--header .task-header .task-name {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  flex-grow: 1;
+}
 .task-testing__container .task-testing__container--header .btn-execute {
   width: 138px;
 }
@@ -32819,7 +32953,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
 }
 .code__editor .code__editor-copy-button svg {
   fill: #525252;
-}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,+BAAA;EACA,kBAAA;AAFJ;AAKE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;AAHJ;AAME;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,SAAA;EACA,WAAA;AAJJ;AAMI;EACE,aAAA;EACA,QAAA;AAJN;AAMM;EACE,iBAAA;AAJR;AAQI;EACE,YAAA;AANN;AASI;EACE,aAAA;AAPN;AAUI;EACE,aAAA;AARN;AAWI;EACE,oBAAA;EACA,uBAAA;AATN;AAaE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAXJ;AAaI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAXN;AAcI;EACE,cAAA;AAZN;AAgBE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAdJ;AAgBI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAdN;AAiBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAfN;AAiBM;EACE,aAAA;AAfR;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,aAAA;AAjBR;AAoBM;EACE,iBAAA;EACA,uBAAA;AAlBR;AAsBI;EACE,iBAAA;AApBN;AAuBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AArBN;AAuBM;EACE,oCAAA;AArBR;AAwBM;EACE,UAAA;EACA,yBAAA;AAtBR;AAyBM;EACE,aAAA;AAvBR;AA2BM;EACE,aAAA;AAzBR;AA6BI;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA3BN;AA6BM;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;AA3BR;AA6BQ;EACE,aAAA;AA3BV;AA8BQ;EACE,iBAAA;AA5BV;AAiCI;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AA/BN;AAkCI;EACE,iBAAA;AAhCN;AAmCI;EACE,WAAA;AAjCN;AAoCI;EACE,qBAAA;EACA,YAAA;AAlCN;AAqCI;EACE,eAAA;AAnCN;;AAwCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AArCF;AAuCE;EACE,0BAAA;EACA,oBAAA;AArCJ;AAwCE;EACE,kBAAA;EACA,YAAA;AAtCJ;AAwCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAtCN;AAwCM;EACE,YAAA;EACA,2CAAA;AAtCR;AAyCM;EACE,2BAAA;AAvCR;AA0CM;EACE,aAAA;AAxCR;AA2CM;EACE,aAAA;AAzCR;AA4CM;EACE,eAAA;AA1CR;AA6CM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AA3CR;AA6CQ;EACE,kBAAA;AA3CV;AA8CQ;EACE,eAAA;AA5CV;AAkDE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAhDJ;AAmDE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;AAjDJ;AAmDI;EACE,aAAA;AAjDN","sourcesContent":[".task-testing__container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  height: 100%;\r\n  width: 100%;\r\n  padding: 10px;\r\n  font-size: 14px;\r\n\r\n  &.task-testing__container--empty {\r\n    .task-testing__container-no-config,\r\n    .task-testing__container-no-element {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n      height: 32px;\r\n\r\n      .cds--inline-loading {\r\n        inline-size: initial;\r\n        min-block-size: initial;\r\n      }\r\n    }\r\n  }\r\n\r\n  .task-testing__container--left {\r\n    width: 50%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-right: 1px solid #E0E0E0;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  .task-testing__container--right {\r\n    width: 50%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding-left: 6px;\r\n  }\r\n\r\n  .task-testing__container--header {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    width: 100%;\r\n\r\n    .task-header {\r\n      display: flex;\r\n      gap: 6px;\r\n      \r\n      .task-type {\r\n        font-weight: bold;\r\n      }\r\n    }\r\n\r\n    .btn-execute {\r\n      width: 138px;\r\n    }\r\n\r\n    .cds--popover-container:not(.has-error) .cds--popover {\r\n      display: none;\r\n    }\r\n\r\n    .cds--tooltip-content {\r\n      padding: 12px;\r\n    }\r\n\r\n    .cds--btn .cds--inline-loading {\r\n      inline-size: initial;\r\n      min-block-size: initial;\r\n    }\r\n  }\r\n\r\n  .input {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n\r\n    .input__header {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .input__header--title {\r\n      color: #525252;\r\n    }\r\n  }\r\n\r\n  .output {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n\r\n    .output__header {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 32px;\r\n      width: 100%;\r\n    }\r\n\r\n    .output__header--title {\r\n      color: #525252;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n\r\n      svg.output__status-icon--ready {\r\n        fill: #0043ce;\r\n      }\r\n\r\n      svg.output__status-icon--success {\r\n        fill: #24a148;\r\n      }\r\n\r\n      svg.output__status-icon--error {\r\n        fill: #da1e28;\r\n      }\r\n\r\n      .cds--inline-loading {\r\n        inline-size: 16px;\r\n        min-block-size: initial;\r\n      }\r\n    }\r\n\r\n    .output__header--button-operate {\r\n      margin-left: auto;\r\n    }\r\n\r\n    .output__body {\r\n      display: flex;\r\n      flex-direction: column;\r\n      flex-grow: 1;\r\n      position: relative;\r\n\r\n      .cds--tabs {\r\n        --cds-layout-size-height-local: 32px;\r\n      }\r\n      \r\n      .cds--tab-content {\r\n        padding: 0;\r\n        height: calc(100% - 20px);\r\n      }\r\n\r\n      .cds--tab-content:not([hidden]) {\r\n        display: flex;\r\n      }\r\n\r\n      // Tooltip on Carbon Button with absolute position is broken.\r\n      .cds--popover {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    .output__error {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 12px;\r\n      padding: 12px;\r\n      margin-bottom: 12px;\r\n      border: 1px solid #da1e28;\r\n      border-left-width: 3px;\r\n      background-color: #fff1f1;\r\n\r\n      .output__error--title {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        font-weight: bold;\r\n\r\n        svg {\r\n          fill: #da1e28;\r\n        }\r\n\r\n        .output__error--action {\r\n          margin-left: auto;\r\n        }\r\n      }\r\n    }\r\n\r\n    .output__variables--empty {\r\n      height: 32px;\r\n      display: flex;\r\n      align-items: center;\r\n      color: #525252;\r\n    }\r\n\r\n    .output__variables--empty-action {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .cds--snippet-container {\r\n      width: 100%;\r\n    }\r\n\r\n    .cds--snippet {\r\n      max-inline-size: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    code {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n}\r\n\r\n.code__editor {\r\n  position: relative;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  &.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {\r\n    outline: 1px solid #da1e28;\r\n    outline-offset: -1px;\r\n  }\r\n\r\n  .code__editor-codemirror {\r\n    position: relative;\r\n    flex-grow: 1;\r\n\r\n    .code__editor-codemirror-inner {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n\r\n      .cm-editor {\r\n        height: 100%;\r\n        background-color: var(--cds-layer, #f4f4f4);\r\n      }\r\n\r\n      .cm-scroller {\r\n        overflow-y: auto !important;\r\n      }\r\n\r\n      .cm-content {\r\n        padding: 15px;\r\n      }\r\n\r\n      .cm-focused {\r\n        outline: none;\r\n      }\r\n\r\n      .cm-tooltip {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .info {\r\n        padding: 5px;\r\n        font-family: monospace;\r\n        font-size: 12px;\r\n        max-width: 300px;\r\n        word-wrap: break-word;\r\n\r\n        span {\r\n          font-style: italic;\r\n        }\r\n\r\n        pre {\r\n          margin-top: 5px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .code__editor-error {\r\n    color: #da1e28;\r\n    font-size: 13px;\r\n    margin-top: 5px;\r\n  }\r\n\r\n  .code__editor-copy-button {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    z-index: 10;\r\n\r\n    svg {\r\n      fill: #525252;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,+BAAA;EACA,kBAAA;AAFJ;AAKE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;AAHJ;AAME;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,SAAA;EACA,WAAA;AAJJ;AAMI;EACE,aAAA;EACA,QAAA;EACA,YAAA;AAJN;AAMM;EACE,iBAAA;AAJR;AAOM;;EAEE,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,YAAA;AALR;AASI;EACE,YAAA;AAPN;AAUI;EACE,aAAA;AARN;AAWI;EACE,aAAA;AATN;AAYI;EACE,oBAAA;EACA,uBAAA;AAVN;AAcE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAZJ;AAcI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAZN;AAeI;EACE,cAAA;AAbN;AAiBE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAfJ;AAiBI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAfN;AAkBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAhBN;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,aAAA;AAjBR;AAoBM;EACE,aAAA;AAlBR;AAqBM;EACE,iBAAA;EACA,uBAAA;AAnBR;AAuBI;EACE,iBAAA;AArBN;AAwBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AAtBN;AAwBM;EACE,oCAAA;AAtBR;AAyBM;EACE,UAAA;EACA,yBAAA;AAvBR;AA0BM;EACE,aAAA;AAxBR;AA4BM;EACE,aAAA;AA1BR;AA8BI;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA5BN;AA8BM;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;AA5BR;AA8BQ;EACE,aAAA;AA5BV;AA+BQ;EACE,iBAAA;AA7BV;AAkCI;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AAhCN;AAmCI;EACE,iBAAA;AAjCN;AAoCI;EACE,WAAA;AAlCN;AAqCI;EACE,qBAAA;EACA,YAAA;AAnCN;AAsCI;EACE,eAAA;AApCN;;AAyCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AAtCF;AAwCE;EACE,0BAAA;EACA,oBAAA;AAtCJ;AAyCE;EACE,kBAAA;EACA,YAAA;AAvCJ;AAyCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAvCN;AAyCM;EACE,YAAA;EACA,2CAAA;AAvCR;AA0CM;EACE,2BAAA;AAxCR;AA2CM;EACE,aAAA;AAzCR;AA4CM;EACE,aAAA;AA1CR;AA6CM;EACE,eAAA;AA3CR;AA8CM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AA5CR;AA8CQ;EACE,kBAAA;AA5CV;AA+CQ;EACE,eAAA;AA7CV;AAmDE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAjDJ;AAoDE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;AAlDJ;AAoDI;EACE,aAAA;AAlDN","sourcesContent":[".task-testing__container {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n  padding: 10px;\n  font-size: 14px;\n\n  &.task-testing__container--empty {\n    .task-testing__container-no-config,\n    .task-testing__container-no-element {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 32px;\n\n      .cds--inline-loading {\n        inline-size: initial;\n        min-block-size: initial;\n      }\n    }\n  }\n\n  .task-testing__container--left {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #E0E0E0;\n    padding-right: 6px;\n  }\n\n  .task-testing__container--right {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    padding-left: 6px;\n  }\n\n  .task-testing__container--header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    width: 100%;\n\n    .task-header {\n      display: flex;\n      gap: 6px;\n      min-width: 0;\n      \n      .task-type {\n        font-weight: bold;\n      }\n\n      .task-type,\n      .task-name {\n        min-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        flex-shrink: 1;\n        flex-grow: 1;\n      }\n    }\n\n    .btn-execute {\n      width: 138px;\n    }\n\n    .cds--popover-container:not(.has-error) .cds--popover {\n      display: none;\n    }\n\n    .cds--tooltip-content {\n      padding: 12px;\n    }\n\n    .cds--btn .cds--inline-loading {\n      inline-size: initial;\n      min-block-size: initial;\n    }\n  }\n\n  .input {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .input__header {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .input__header--title {\n      color: #525252;\n    }\n  }\n\n  .output {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .output__header {\n      display: flex;\n      align-items: center;\n      height: 32px;\n      width: 100%;\n    }\n\n    .output__header--title {\n      color: #525252;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      svg.output__status-icon--ready {\n        fill: #0043ce;\n      }\n\n      svg.output__status-icon--success {\n        fill: #24a148;\n      }\n\n      svg.output__status-icon--error {\n        fill: #da1e28;\n      }\n\n      .cds--inline-loading {\n        inline-size: 16px;\n        min-block-size: initial;\n      }\n    }\n\n    .output__header--button-operate {\n      margin-left: auto;\n    }\n\n    .output__body {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 1;\n      position: relative;\n\n      .cds--tabs {\n        --cds-layout-size-height-local: 32px;\n      }\n      \n      .cds--tab-content {\n        padding: 0;\n        height: calc(100% - 20px);\n      }\n\n      .cds--tab-content:not([hidden]) {\n        display: flex;\n      }\n\n      // Tooltip on Carbon Button with absolute position is broken.\n      .cds--popover {\n        display: none;\n      }\n    }\n\n    .output__error {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 12px;\n      margin-bottom: 12px;\n      border: 1px solid #da1e28;\n      border-left-width: 3px;\n      background-color: #fff1f1;\n\n      .output__error--title {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-weight: bold;\n\n        svg {\n          fill: #da1e28;\n        }\n\n        .output__error--action {\n          margin-left: auto;\n        }\n      }\n    }\n\n    .output__variables--empty {\n      height: 32px;\n      display: flex;\n      align-items: center;\n      color: #525252;\n    }\n\n    .output__variables--empty-action {\n      font-weight: bold;\n    }\n\n    .cds--snippet-container {\n      width: 100%;\n    }\n\n    .cds--snippet {\n      max-inline-size: 100%;\n      height: 100%;\n    }\n\n    code {\n      font-size: 14px;\n    }\n  }\n}\n\n.code__editor {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {\n    outline: 1px solid #da1e28;\n    outline-offset: -1px;\n  }\n\n  .code__editor-codemirror {\n    position: relative;\n    flex-grow: 1;\n\n    .code__editor-codemirror-inner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n\n      .cm-editor {\n        height: 100%;\n        background-color: var(--cds-layer, #f4f4f4);\n      }\n\n      .cm-scroller {\n        overflow-y: auto !important;\n      }\n\n      .cm-content {\n        padding: 15px;\n      }\n\n      .cm-focused {\n        outline: none;\n      }\n\n      .cm-tooltip {\n        font-size: 14px;\n      }\n\n      .info {\n        padding: 5px;\n        font-family: monospace;\n        font-size: 12px;\n        max-width: 300px;\n        word-wrap: break-word;\n\n        span {\n          font-style: italic;\n        }\n\n        pre {\n          margin-top: 5px;\n        }\n      }\n    }\n  }\n\n  .code__editor-error {\n    color: #da1e28;\n    font-size: 13px;\n    margin-top: 5px;\n  }\n\n  .code__editor-copy-button {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 10;\n\n    svg {\n      fill: #525252;\n    }\n  }\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -32945,6 +33079,56 @@ module.exports = function (item) {
 
 /***/ }),
 
+/***/ "./node_modules/diagram-js/lib/util/ModelUtil.js":
+/*!*******************************************************!*\
+  !*** ./node_modules/diagram-js/lib/util/ModelUtil.js ***!
+  \*******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   isConnection: () => (/* binding */ isConnection),
+/* harmony export */   isLabel: () => (/* binding */ isLabel),
+/* harmony export */   isRoot: () => (/* binding */ isRoot)
+/* harmony export */ });
+/* harmony import */ var min_dash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! min-dash */ "./node_modules/min-dash/dist/index.esm.js");
+
+
+/**
+ * Checks whether a value is an instance of Connection.
+ *
+ * @param {any} value
+ *
+ * @return {boolean}
+ */
+function isConnection(value) {
+  return (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) && (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.has)(value, 'waypoints');
+}
+
+/**
+ * Checks whether a value is an instance of Label.
+ *
+ * @param {any} value
+ *
+ * @return {boolean}
+ */
+function isLabel(value) {
+  return (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) && (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.has)(value, 'labelTarget');
+}
+
+/**
+ * Checks whether a value is an instance of Root.
+ *
+ * @param {any} value
+ *
+ * @return {boolean}
+ */
+function isRoot(value) {
+  return (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) && (0,min_dash__WEBPACK_IMPORTED_MODULE_0__.isNil)(value.parent);
+}
+
+/***/ }),
+
 /***/ "./node_modules/events/events.js":
 /*!***************************************!*\
   !*** ./node_modules/events/events.js ***!