WIP types fixed

Author: philippfromme

lib/ExecutionLogModel.js

@@ -115,7 +115,7 @@ export function getWaitingItemLabel(item, finished) {
  * Get details for a waiting item to display in an expanded view.
  *
  * @param {import('./types').WaitingItem} item
- * @returns {{ label: string; value: string }[]}
+ * @returns {import('./types').WaitingItemDetail[]}
  */
 export function getWaitingItemDetails(item) {
   if (!item.data) {
@@ -236,7 +236,7 @@ export function isPendingItem(item) {
  * Get badge descriptors for a waiting item.
  *
  * @param {import('./types').WaitingItem} item
- * @returns {{ text: string, variant?: string }[]}
+ * @returns {import('./types').WaitingItemBadge[]}
  */
 export function getWaitingItemBadges(item) {
   const badges = [];
@@ -330,7 +330,7 @@ export default class ExecutionLogModel {
    */
   addEntry(entry) {
     if (entry.type === 'poll') {
-      this._handlePollEntry(entry);
+      this._handlePollEntry(/** @type {any} */ (entry));
       return this._entries;
     }
 
@@ -398,18 +398,7 @@ export default class ExecutionLogModel {
    * entries, applying key-based deduplication to avoid re-emitting unchanged
    * data on every poll tick.
    *
-   * @param {object} pollEntry
-   * @param {{ success: boolean, response?: { items: any[] } }} pollEntry.jobsResult
-   * @param {{ success: boolean, response?: { items: any[] } }} pollEntry.userTasksResult
-   * @param {{ success: boolean, response?: { items: any[] } }} pollEntry.messageSubscriptionsResult
-   * @param {{ success: boolean, response?: { items: any[] } }} pollEntry.elementInstancesResult
-   * @param {{ success: boolean, response?: { items: any[] } }} [pollEntry.variablesResult]
-   * @param {string} pollEntry.elementId
-   * @param {Set<string>} [pollEntry.childElementIds]
-   * @param {function(string): Set<string>} [pollEntry.getChildIds]
-   *   Called with a parent element ID; returns the set of direct child IDs.
-   *   Used to resolve event sub-process children from the element hierarchy.
-   * @param {number} pollEntry.timestamp
+   * @param {import('./types').TaskExecutionPollData} pollEntry
    */
   _handlePollEntry({
     jobsResult,
@@ -590,7 +579,7 @@ const CHILD_ELEMENT_TYPES = new Set([
 /**
  * Build a list of child element instances (tasks executed inside a sub-process).
  *
- * @param {{ success: boolean, response?: { items: any[] } }} elementInstancesResult
+ * @param {import('./types').ApiResponse<{ items: any[] }>} elementInstancesResult
  * @param {string} elementId - the element being tested (excluded from children)
  * @param {Set<string>} [childElementIds] - set of valid direct child element IDs
  * @returns {import('./types').ChildElement[]}
@@ -600,7 +589,7 @@ export function buildChildElements(elementInstancesResult, elementId, childEleme
     return [];
   }
 
-  return (elementInstancesResult.response.items || [])
+  return (/** @type {{ items: any[] }} */ (elementInstancesResult.response).items || [])
     .filter(el => {
       if (el.elementId === elementId) return false;
       if (!CHILD_ELEMENT_TYPES.has(el.type)) return false;
@@ -623,19 +612,16 @@ export function buildChildElements(elementInstancesResult, elementId, childEleme
  * Enrich event sub-process waiting items with their executed child element instances.
  *
  * @param {import('./types').WaitingItem[]} waitingItems
- * @param {{ success: boolean, response?: { items: any[] } }} elementInstancesResult
- * @param {Object} elementRegistry
- */
-/**
- * @param {function(string): Set<string>} getChildIds
+ * @param {import('./types').ApiResponse<{ items: any[] }>} elementInstancesResult
+ * @param {((arg0: string) => Set<string>)} [getChildIds]
  *   Called with a parent element ID; returns the set of direct child IDs.
  */
 export function enrichEventSubProcessChildren(waitingItems, elementInstancesResult, getChildIds) {
   if (!elementInstancesResult.success || typeof getChildIds !== 'function') {
     return;
   }
 
-  const allInstances = elementInstancesResult.response.items || [];
+  const allInstances = /** @type {{ items: any[] }} */ (elementInstancesResult.response).items || [];
 
   for (const item of waitingItems) {
     if (item.type !== 'event-sub-process') {
@@ -669,17 +655,17 @@ export function enrichEventSubProcessChildren(waitingItems, elementInstancesResu
  * variable scopeKey to element instance keys.
  *
  * @param {import('./types').ChildElement[]} children
- * @param {{ success: boolean, response?: { items: any[] } }} elementInstancesResult
- * @param {{ success: boolean, response?: { items: any[] } }} [variablesResult]
+ * @param {import('./types').ApiResponse<{ items: any[] }>} elementInstancesResult
+ * @param {import('./types').ApiResponse<{ items: any[] }>} [variablesResult]
  * @returns {import('./types').ChildElement[]}
  */
 export function enrichChildrenWithVariables(children, elementInstancesResult, variablesResult) {
   if (!variablesResult?.success || !elementInstancesResult.success) {
     return children;
   }
 
-  const elementInstances = elementInstancesResult.response.items || [];
-  const variables = variablesResult.response.items || [];
+  const elementInstances = /** @type {{ items: any[] }} */ (elementInstancesResult.response).items || [];
+  const variables = /** @type {{ items: any[] }} */ (variablesResult.response).items || [];
 
   // Build a map: elementId -> set of elementInstanceKeys
   const elementIdToKeys = new Map();

lib/components/Output/Output.jsx

@@ -401,9 +401,19 @@ function capitalize(string) {
   return string.replace(/([A-Z])/g, ' $1').replace(/^./, (match) => match.toUpperCase());
 }
 
+/**
+ * @param {Object} props
+ * @param {string} props.title
+ * @param {string} [props.tooltip]
+ * @param {boolean} [props.defaultOpen]
+ * @param {boolean} [props.isExecuting]
+ * @param {React.ReactNode} props.children
+ */
 function CollapsibleSection({ title, tooltip, defaultOpen = true, isExecuting = false, children }) {
   const [ isOpen, setIsOpen ] = useState(defaultOpen);
   const [ isStuck, setIsStuck ] = useState(false);
+
+  /** @type {React.MutableRefObject<HTMLDivElement|null>} */
   const sentinelRef = useRef(null);
 
   useEffect(() => {

lib/components/TaskTesting/TaskTesting.js

@@ -174,9 +174,12 @@ export default function TaskTesting({
    */
   const [ executionLog, setExecutionLog ] = useState([]);
   const executionLogModelRef = useRef(new ExecutionLogModel());
+  /** @type {React.MutableRefObject<number|null>} */
   const executionStartTimeRef = useRef(null);
 
-  const [ liveVariables, setLiveVariables ] = useState(null);
+  /** @type {[import('../../types').ElementOutputVariables|null, Function]} */
+  const [ liveVariables, setLiveVariables ] = useState(/** @type {import('../../types').ElementOutputVariables|null} */ (null));
+  /** @type {React.MutableRefObject<import('../../types').ElementOutputVariables|null>} */
   const liveVariablesRef = useRef(null);
 
   const [ executionCompleted, setExecutionCompleted ] = useState(false);
@@ -311,7 +314,7 @@ export default function TaskTesting({
       const log = executionLogModelRef.current.getEntries();
 
       // Compute variables from raw API responses for success and incident results
-      const variables = result.variablesResult?.success && result.elementInstancesResult?.success
+      const variables = ('variablesResult' in result) && result.variablesResult?.success && result.elementInstancesResult?.success
         ? getVariables(
           result.variablesResult.response.items,
           result.elementInstancesResult.response.items,
@@ -363,7 +366,7 @@ export default function TaskTesting({
       onTaskExecutionFinished(element, result);
     };
 
-    /** @param {Object} pollData */
+    /** @param {import('../../types').TaskExecutionPollData} pollData */
     const handlePoll = (pollData) => {
 
       // Compute live variables from poll data
@@ -734,9 +737,9 @@ function TabContainer({ selectedIndex = 0, children }) {
   }, [ selectedIndex ]);
 
   const tabs = useMemo(() => {
-    return React.Children.toArray(children).filter(
-      child => child.type === TabItem
-    );
+    return /** @type {React.ReactElement[]} */ (React.Children.toArray(children).filter(
+      child => /** @type {React.ReactElement} */ (child).type === TabItem
+    ));
   }, [ children ]);
 
   return (
@@ -762,7 +765,10 @@ function TabContainer({ selectedIndex = 0, children }) {
   );
 }
 
-function TabItem() {
+/**
+ * @param {{ label?: string, children?: React.ReactNode }} _props
+ */
+function TabItem(_props) {
   return null;
 }
 

lib/types.d.ts

@@ -4,7 +4,8 @@ import type {
   SearchProcessInstanceResponse,
   SearchVariablesResponse,
   SearchElementInstancesResponse,
-  SearchIncidentsResponse
+  SearchIncidentsResponse,
+  SearchUserTasksResponse
 } from '@camunda8/sdk/dist/c8/lib/C8Dto';
 
 import { TASK_EXECUTION_REASON } from './constants';
@@ -17,7 +18,7 @@ export type Output = {
   [elementId: string]: ElementOutput
 };
 
-export type VARIABLE_SCOPE = 'LOCAL' | 'PROCESS';
+export type VARIABLE_SCOPE = 'LOCAL' | 'PROCESS' | null;
 
 export type ElementOutputVariables = {
   [id: string]: {
@@ -90,6 +91,7 @@ export type WaitingItem =
   | {
       type: 'event-sub-process';
       data: any;
+      children?: any[];
     };
 
 export type WaitingState = {
@@ -134,6 +136,10 @@ export type ExecutionLogEntry =
       type: 'children';
       items: ChildElement[];
       timestamp: number;
+    }
+  | {
+      type: 'poll';
+      [key: string]: any;
     };
 
 export type TaskExecutionStatus =
@@ -142,6 +148,7 @@ export type TaskExecutionStatus =
   'starting-instance' |
   'executing' |
   'completed' |
+  'incident' |
   'canceled';
 
 export type TaskExecutionEvents = 
@@ -193,6 +200,30 @@ export type TaskExecutionError = {
   response?: any;
 };
 
+export type TaskExecutionPollData = {
+  jobsResult: ApiResponse<{ items: any[] }>; // TODO: type properly once types are available in SDK
+  userTasksResult: ApiResponse<SearchUserTasksResponse>;
+  messageSubscriptionsResult: ApiResponse<{ items: any[] }>; // TODO: type properly once types are available in SDK
+  elementInstancesResult: ApiResponse<SearchElementInstancesResponse>;
+  variablesResult?: ApiResponse<SearchVariablesResponse>;
+  processInstanceResult?: ApiResponse<SearchProcessInstanceResponse>;
+  processInstanceKey: string;
+  elementId: string;
+  childElementIds?: Set<string>;
+  getChildIds?: (parentId: string) => Set<string>;
+  timestamp: number;
+};
+
+export type WaitingItemDetail = {
+  label: string;
+  value: string;
+};
+
+export type WaitingItemBadge = {
+  text: string;
+  variant?: string;
+};
+
 export type { Element, ModdleElement } from 'bpmn-js/lib/model/Types';
 
 export type Plugin = {

lib/utils/variables.js

@@ -1,5 +1,8 @@
 import { has, isObject } from 'min-dash';
 
+/**
+ * @type {{ LOCAL: 'LOCAL', PROCESS: 'PROCESS' }}
+ */
 export const SCOPES = {
   LOCAL: 'LOCAL',
   PROCESS: 'PROCESS'
@@ -16,6 +19,8 @@ export const SCOPES = {
  * @returns {import('../types').ElementOutputVariables}
  */
 export function getVariables(variableItems, elementInstanceItems, processInstanceKey, elementId) {
+
+  /** @type {import('../types').ElementOutputVariables} */
   const variables = {};
 
   for (const item of variableItems) {
@@ -41,6 +46,13 @@ export function getVariables(variableItems, elementInstanceItems, processInstanc
   return variables;
 }
 
+/**
+ * @param {Object} variable
+ * @param {Array} elementInstances
+ * @param {string} processInstanceKey
+ * @param {string} elementId
+ * @returns {import('../types').VARIABLE_SCOPE}
+ */
 function getScope(variable, elementInstances, processInstanceKey, elementId) {
   const { scopeKey } = variable;