feat: add onTaskExecutionError andonTaskExecutionCancelled props

Related to camunda/camunda-modeler#5597

Author: philippfromme

demo/App.jsx

@@ -162,6 +162,21 @@ function App() {
           onConfigChanged={ onConfigChanged }
           operateBaseUrl={ operateURL }
           documentationUrl="https://docs.camunda.io/"
+          onTaskExecutionStarted={ (element) => {
+            console.log('Task execution started:', element.id);
+          } }
+          onTaskExecutionFinished={ (element, output) => {
+            console.log('Task execution finished:', element.id, output);
+          } }
+          onTaskExecutionError={ (element, error) => {
+            console.log('Task execution error:', element.id, error);
+          } }
+          onTaskExecutionInterrupted={ () => {
+            console.log('Task execution interrupted');
+          } }
+          onTaskExecutionCanceled={ () => {
+            console.log('Task execution canceled');
+          } }
         />
       </div>
     </>

lib/TaskExecution.js

@@ -41,6 +41,7 @@ export const SCOPES = {
  * - `taskExecution.finished` with {@link TaskExecutionResult}
  * - `taskExecution.error` with {@link TaskExecutionError}
  * - `taskExecution.interrupted` when execution is interrupted by switching focus
+ * - `taskExecution.canceled` when execution is manually canceled by the user
  */
 export default class TaskExecution extends EventEmitter {
 
@@ -243,11 +244,17 @@ export default class TaskExecution extends EventEmitter {
     // - delete process definition
     // - cancel deploy and start instance if they are in progress
 
+    const wasCanceled = this._status !== 'idle';
+
     if (this._interval) {
       clearInterval(this._interval);
     }
 
     this._changeStatus('idle');
+
+    if (wasCanceled) {
+      this.emit('taskExecution.canceled');
+    }
   }
 
   /**

lib/components/TaskTesting/TaskTesting.js

@@ -53,7 +53,9 @@ import { OutputTab } from '../Output/OutputVariables';
  * @param {string} [props.documentationUrl]
  * @param {Function} [props.onTaskExecutionStarted=() => {}]
  * @param {Function} [props.onTaskExecutionFinished=() => {}]
+ * @param {Function} [props.onTaskExecutionError=() => {}]
  * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
+ * @param {Function} [props.onTaskExecutionCanceled=() => {}]
  * @param {React.ReactNode[]} [props.children=[]]
  */
 export default function TaskTesting({
@@ -71,6 +73,8 @@ export default function TaskTesting({
   documentationUrl,
   onTaskExecutionStarted = () => {},
   onTaskExecutionFinished = () => {},
+  onTaskExecutionError = () => {},
+  onTaskExecutionCanceled = () => {},
   onTaskExecutionInterrupted = () => {},
   children = []
 }) {
@@ -210,6 +214,7 @@ export default function TaskTesting({
         success: false,
         error
       });
+      onTaskExecutionError(element, error);
     };
 
     /**
@@ -242,17 +247,23 @@ export default function TaskTesting({
       onTaskExecutionInterrupted();
     };
 
+    const handleCanceled = () => {
+      onTaskExecutionCanceled();
+    };
+
     taskExecutionRef?.current?.on('taskExecution.finished', handleFinished);
     taskExecutionRef?.current?.on('taskExecution.status.changed', handleStatusChange);
     taskExecutionRef?.current?.on('taskExecution.error', handleError);
     taskExecutionRef?.current?.on('taskExecution.interrupted', handleInterrupted);
+    taskExecutionRef?.current?.on('taskExecution.canceled', handleCanceled);
 
     return () => {
       if (taskExecutionRef.current) {
         taskExecutionRef.current.off('taskExecution.finished', handleFinished);
         taskExecutionRef.current.off('taskExecution.status.changed', handleStatusChange);
         taskExecutionRef.current.off('taskExecution.error', handleError);
         taskExecutionRef.current.off('taskExecution.interrupted', handleInterrupted);
+        taskExecutionRef.current.off('taskExecution.canceled', handleCanceled);
       }
     };
   }, [ element, operateBaseUrl, currentOperateUrl ]);