@camunda/task-testing 0.2.2 → 0.2.4

package/dist/index.js

@@ -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,
@@ -108,9 +108,9 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     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)) {
@@ -127,12 +127,12 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   }
 }
 
-/**
- * Get input parameters from a BPMN element.
- *
- * @param {import('./types').Element} element
- *
- * @returns {import('./types').ModdleElement[]}
+/**
+ * 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);
@@ -151,20 +151,20 @@ function getInputParameters(element) {
   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}
+/**
+ * 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 = {};
@@ -183,16 +183,16 @@ function unflatten(obj) {
   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}
+/**
+ * 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);
@@ -234,18 +234,18 @@ function createDefaultInputConfig(element, variablesForElement) {
   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}
+/**
+ * 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)) {
@@ -257,36 +257,36 @@ function getNameFromSource(source) {
   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}
+/**
+ * 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}
+/**
+ * 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 +352,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();
@@ -391,20 +391,18 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._status = 'idle';
     const eventBus = injector.get('eventBus');
     eventBus.on(['selection.changed', 'commandStack.changed'], () => {
-      if (this._status !== 'idle') {
-        this.emit('taskExecution.interrupted');
-      }
       this.cancelTaskExecution();
+      this.emit('taskExecution.interrupted');
     });
   }
 
-  /**
-   * 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 +496,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 +511,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 +536,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 +558,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) {
@@ -769,21 +767,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 +889,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 +946,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,
@@ -1136,14 +1134,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,
@@ -1154,33 +1152,35 @@ function ErrorBanner({
 }) {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
     className: "output__error",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
-      className: "output__error--title",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
-        children: title
-      }), actionLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
-        className: "output__error--action",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+      className: "output__error--icon",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.ErrorFilled, {})
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+      className: "output__error--content",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+        className: "output__error--title",
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+          children: title
+        }), actionLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
           href: actionUrl,
           onClick: () => onActionClick(),
           children: actionLabel
+        })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+          children: description
         })
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
-      className: "output__error--content",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
-        children: description
-      })
     })]
   });
 }
 
-/**
- * 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 = '';
@@ -1190,16 +1190,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());
@@ -1238,8 +1238,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)(() => {
@@ -1336,21 +1336,20 @@ __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 {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 {Function} [props.onTaskExecution=() => {}]
+ * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
  */
 function TaskTesting({
   injector,
@@ -1363,41 +1362,40 @@ function TaskTesting({
   config,
   onConfigChanged = () => {},
   operateBaseUrl,
-  onTaskExecutionStarted = () => {},
-  onTaskExecutionFinished = () => {},
+  onTaskExecution = () => {},
   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);
 
-  /**
-   * @type {React.RefObject<TaskExecution?>}
+  /**
+   * @type {React.RefObject<TaskExecution?>}
    */
   const taskExecutionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
@@ -1476,9 +1474,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);
@@ -1501,7 +1499,6 @@ function TaskTesting({
         ...output,
         operateUrl
       });
-      onTaskExecutionFinished(element, output);
     };
     taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur = taskExecutionRef.current) === null || _taskExecutionRef$cur === void 0 || _taskExecutionRef$cur.on('taskExecution.finished', handleFinished);
     taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur2 = taskExecutionRef.current) === null || _taskExecutionRef$cur2 === void 0 || _taskExecutionRef$cur2.on('taskExecution.status.changed', handleStatusChange);
@@ -1549,14 +1546,11 @@ function TaskTesting({
     const inputConfig = await elementConfigRef.current.getInputConfigForElement(element);
     elementConfigRef.current.setOutputConfigForElement(element, null);
     taskExecutionRef.current.executeTask(element.id, JSON.parse(inputConfig));
-    onTaskExecutionStarted(element);
+    onTaskExecution();
   };
   const handleCancelTaskExecution = () => {
-    var _taskExecutionRef$cur5;
-    taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur5 = taskExecutionRef.current) === null || _taskExecutionRef$cur5 === void 0 || _taskExecutionRef$cur5.cancelTaskExecution();
-    if (output !== null && output !== void 0 && output.operateUrl && Object.keys(output).length === 1) {
-      var _elementConfigRef$cur7;
-      elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur7 = elementConfigRef.current) === null || _elementConfigRef$cur7 === void 0 || _elementConfigRef$cur7.setOutputConfigForElement(element, null);
+    if (taskExecutionRef.current) {
+      taskExecutionRef.current.cancelTaskExecution();
     }
   };
   const handleResetOutput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
@@ -1596,11 +1590,8 @@ function TaskTesting({
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
         className: "task-testing__container--header",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
-          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)
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+          className: "task-name",
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Chemistry, {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
             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, {
@@ -1777,11 +1768,11 @@ __webpack_require__.r(__webpack_exports__);
 
 const SUPPORTED_ELEMENT_TYPES = ['bpmn:Task'];
 
-/**
- * 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`.
+ *
+ * @param {Object} injector
+ * @return {Object|null} Selected BPMN element or null
  */
 function useSelectedElement(injector) {
   const [selectedElement, setSelectedElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
@@ -1879,21 +1870,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)({
@@ -1901,8 +1892,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 => {
@@ -1926,11 +1917,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 {
@@ -2021,13 +2012,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();
@@ -2044,18 +2035,17 @@ function hasPropertyAfter(state, pos) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   getName: () => (/* binding */ getName),
-/* harmony export */   getType: () => (/* binding */ getType)
+/* harmony export */   getName: () => (/* binding */ getName)
 /* 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");
 
 
-/**
- * Get the name of a BPMN element.
- *
- * @param {import('../types').Element} element
- *
- * @returns {string}
+/**
+ * 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);
@@ -2066,40 +2056,6 @@ function getName(element) {
   return name;
 }
 
-/**
- * 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';
-  }
-}
-
 /***/ }),
 
 /***/ "./node_modules/@bpmn-io/extract-process-variables/zeebe/index.mjs":
@@ -32617,12 +32573,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
   gap: 12px;
   width: 100%;
 }
-.task-testing__container .task-testing__container--header .task-header {
+.task-testing__container .task-testing__container--header .task-name {
   display: flex;
-  gap: 6px;
-}
-.task-testing__container .task-testing__container--header .task-header .task-type {
   font-weight: bold;
+  gap: 6px;
 }
 .task-testing__container .task-testing__container--header .btn-execute {
   width: 138px;
@@ -32706,7 +32660,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
 }
 .task-testing__container .output .output__error {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 12px;
   padding: 12px;
   margin-bottom: 12px;
@@ -32714,17 +32668,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
   border-left-width: 3px;
   background-color: #fff1f1;
 }
-.task-testing__container .output .output__error .output__error--title {
+.task-testing__container .output .output__error .output__error--content {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  gap: 6px;
+  flex-grow: 1;
+  margin-top: 1px;
+}
+.task-testing__container .output .output__error .output__error--content .output__error--title {
+  display: flex;
+  justify-content: space-between;
   font-weight: bold;
 }
-.task-testing__container .output .output__error .output__error--title svg {
-  fill: #da1e28;
+.task-testing__container .output .output__error .output__error--content .output__error--title .cds--link {
+  cursor: pointer;
 }
-.task-testing__container .output .output__error .output__error--title .output__error--action {
-  margin-left: auto;
+.task-testing__container .output .output__error .output__error--icon svg {
+  fill: #da1e28;
 }
 .task-testing__container .output .output__variables--empty {
   height: 32px;
@@ -32809,7 +32769,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 {\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      \n      .task-type {\n        font-weight: bold;\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":""}]);
+}`, "",{"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,iBAAA;EACA,QAAA;AAJN;AAOI;EACE,YAAA;AALN;AAQI;EACE,aAAA;AANN;AASI;EACE,aAAA;AAPN;AAUI;EACE,oBAAA;EACA,uBAAA;AARN;AAYE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAVJ;AAYI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAVN;AAaI;EACE,cAAA;AAXN;AAeE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAbJ;AAeI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAbN;AAgBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAdN;AAgBM;EACE,aAAA;AAdR;AAiBM;EACE,aAAA;AAfR;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,iBAAA;EACA,uBAAA;AAjBR;AAqBI;EACE,iBAAA;AAnBN;AAsBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AApBN;AAsBM;EACE,oCAAA;AApBR;AAuBM;EACE,UAAA;EACA,yBAAA;AArBR;AAwBM;EACE,aAAA;AAtBR;AA0BM;EACE,aAAA;AAxBR;AA4BI;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA1BN;AA4BM;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,YAAA;EACA,eAAA;AA1BR;AA4BQ;EACE,aAAA;EACA,8BAAA;EACA,iBAAA;AA1BV;AA4BU;EACE,eAAA;AA1BZ;AA+BM;EACE,aAAA;AA7BR;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-name {\r\n      display: flex;\r\n      font-weight: bold;\r\n      gap: 6px;\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: row;\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--content {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        flex-grow: 1;\r\n        margin-top: 1px;\r\n\r\n        .output__error--title {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          font-weight: bold;\r\n\r\n          .cds--link {\r\n            cursor: pointer;\r\n          }\r\n        }\r\n      }\r\n\r\n      .output__error--icon svg {\r\n        fill: #da1e28;\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":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);