refactor(21032): Add status of terminal transitions to the node (#362)

* refactor(21032): add types of state to the FSM schema

* refactor(21032): add end state status to the transition payload

* refactor(21032): add success/error handles

* refactor(21032): fix the FSM model to add the disconnected (success) transitions

* refactor(21032): change handle type based on success/failure of the terminal state

* refactor(21032): add terminal status to the metadata of the options

* refactor(21032): add end state type to the transition payload

* test(21032): fix tests

* fix(21032): fix

Author: vanch3d

hivemq-edge/src/frontend/src/extensions/datahub/api/__generated__/schemas/BehaviorPolicyData.json

@@ -38,7 +38,7 @@ describe('TransitionSelect', () => {
     cy.get('label#transition-label + div').click()
 
     cy.get('div#react-select-transition-listbox').find('[role="option"]').as('optionList')
-    cy.get('@optionList').should('have.length', 7)
+    cy.get('@optionList').should('have.length', 8)
     cy.get('#react-select-transition-option-0').should('contain.text', 'Mqtt.OnInboundConnect')
 
     cy.checkAccessibility(undefined, {

hivemq-edge/src/frontend/src/extensions/datahub/components/forms/TransitionSelect.spec.cy.tsx

@@ -11,11 +11,12 @@ import {
   createFilter,
 } from 'chakra-react-select'
 
-import { FiniteStateMachine, FsmTransition } from '@datahub/types.ts'
+import { FiniteStateMachine, FsmState, FsmTransition } from '@datahub/types.ts'
 import { useTranslation } from 'react-i18next'
 
 interface FsmTransitionWithId extends FsmTransition {
   id: string
+  endStateType?: FsmState.Type
 }
 
 const SingleValue = (props: SingleValueProps<FsmTransitionWithId>) => {
@@ -38,6 +39,8 @@ const Option = (props: OptionProps<FsmTransitionWithId>) => {
   if (__isNew__) {
     return <chakraComponents.Option {...props}>{props.children}</chakraComponents.Option>
   }
+  const isTerminal =
+    props.data.endStateType === FsmState.Type.FAILED || props.data.endStateType === FsmState.Type.SUCCESS
 
   return (
     <chakraComponents.Option {...rest} isSelected={selectedTransition && selectedTransition.id === props.data.id}>
@@ -56,6 +59,7 @@ const Option = (props: OptionProps<FsmTransitionWithId>) => {
           </Text>
           <Text fontSize="sm" whiteSpace="nowrap">
             {t('workspace.transition.select.toState', { state: props.data.toState })}
+            {isTerminal && ` [${props.data.endStateType}]`}
           </Text>
         </VStack>
       </HStack>
@@ -79,10 +83,16 @@ export const TransitionSelect = (props: WidgetProps) => {
     const metadata = props.options.metadata as FiniteStateMachine | null
     if (!metadata) return []
 
-    const opts = metadata.transitions.map<FsmTransitionWithId>((transition) => ({
-      ...transition,
-      id: `${transition.event}-${transition.fromState}-${transition.toState}`,
-    }))
+    const states = metadata.states
+    const opts = metadata.transitions.map<FsmTransitionWithId>((transition) => {
+      const endState = states.find((state) => state.name === transition.toState)
+
+      return {
+        ...transition,
+        id: `${transition.event}-${transition.fromState}-${transition.toState}-${endState?.type}`,
+        endStateType: endState?.type,
+      }
+    })
     opts.push({
       id: 'Event.OnAny-Any.*-Any.*',
       event: 'Event.OnAny',

hivemq-edge/src/frontend/src/extensions/datahub/components/forms/TransitionSelect.tsx

@@ -1,16 +1,22 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { HStack, Text, VStack } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import { NodeProps, Position } from 'reactflow'
 
-import { DataHubNodeType, TransitionData } from '@datahub/types.ts'
+import { DataHubNodeType, FsmState, TransitionData } from '@datahub/types.ts'
 import { CustomHandle, NodeWrapper } from '@datahub/components/nodes'
 import { NodeIcon, NodeParams } from '@datahub/components/helpers'
 
 export const TransitionNode: FC<NodeProps<TransitionData>> = (props) => {
   const { t } = useTranslation('datahub')
   const { data, id, type } = props
 
+  const className = useMemo(() => {
+    if (data.type === FsmState.Type.SUCCESS) return TransitionData.Handle.ON_SUCCESS
+    if (data.type === FsmState.Type.FAILED) return TransitionData.Handle.ON_ERROR
+    return undefined
+  }, [data.type])
+
   return (
     <>
       <NodeWrapper route={`node/${DataHubNodeType.TRANSITION}/${id}`} {...props}>
@@ -23,7 +29,13 @@ export const TransitionNode: FC<NodeProps<TransitionData>> = (props) => {
         </HStack>
       </NodeWrapper>
       <CustomHandle type="target" position={Position.Left} id={TransitionData.Handle.BEHAVIOR_POLICY} />
-      <CustomHandle type="source" id={TransitionData.Handle.OPERATION} position={Position.Right} isConnectable={1} />
+      <CustomHandle
+        type="source"
+        id={TransitionData.Handle.OPERATION}
+        position={Position.Right}
+        isConnectable={1}
+        className={className}
+      />
     </>
   )
 }

hivemq-edge/src/frontend/src/extensions/datahub/designer/transition/TransitionNode.tsx

@@ -53,7 +53,7 @@ describe('TransitionPanel', () => {
     cy.get('label#root_event-label + div').click()
 
     cy.get('div#react-select-root_event-listbox').find('[role="option"]').as('optionList')
-    cy.get('@optionList').should('have.length', 7)
+    cy.get('@optionList').should('have.length', 8)
     cy.get('@optionList').eq(0).should('contain.text', 'Mqtt.OnInboundConnect')
   })
 

hivemq-edge/src/frontend/src/extensions/datahub/designer/transition/TransitionPanel.spec.cy.tsx

@@ -7,6 +7,7 @@ import {
   BehaviorPolicyData,
   DataHubNodeType,
   FiniteStateMachineSchema,
+  FsmState,
   PanelProps,
   StateType,
   TransitionData,
@@ -53,12 +54,12 @@ export const TransitionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit })
       return null
     }
 
-    const { event, from, to } = adapterNode.data
+    const { event, from, to, type } = adapterNode.data
     const tempData: TransitionData = {
       ...adapterNode.data,
       model: parentPolicy ? parentPolicy.data.model : undefined,
       // @ts-ignore
-      event: `${event || ''}-${from || ''}-${to || ''}`,
+      event: `${event || ''}-${from || ''}-${to || ''}-${type || ''}`,
     }
     return tempData
   }, [nodes, parentPolicy, selectedNode])
@@ -90,12 +91,18 @@ export const TransitionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit })
       if (formData) {
         const { event: originalEvent } = formData
         if (originalEvent) {
-          const [event, from, to] = originalEvent.split('-') as [TransitionType, StateType, StateType]
+          const [event, from, to, type] = originalEvent.split('-') as [
+            TransitionType,
+            StateType,
+            StateType,
+            FsmState.Type | undefined
+          ]
           initData.formData = {
             ...initData.formData,
             event,
             from,
             to,
+            type: type,
           }
         }
       }

hivemq-edge/src/frontend/src/extensions/datahub/designer/transition/TransitionPanel.tsx

@@ -286,6 +286,7 @@ export interface TransitionData extends DataHubNodeData {
   event?: TransitionType
   from?: StateType
   to?: StateType
+  type?: FsmState.Type
   core?: BehaviorPolicyOnTransition
 }
 
@@ -294,14 +295,27 @@ export namespace TransitionData {
   export enum Handle {
     BEHAVIOR_POLICY = 'target',
     OPERATION = 'source',
+    ON_SUCCESS = 'onSuccess',
+    ON_ERROR = 'onError',
   }
 }
 
 export interface FsmState {
   name: string
   description: string
-  type: string
+  type: FsmState.Type
 }
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace FsmState {
+  export enum Type {
+    INITIAL = 'INITIAL',
+    INTERMEDIATE = 'INTERMEDIATE',
+    SUCCESS = 'SUCCESS',
+    FAILED = 'FAILED',
+  }
+}
+
 export interface FsmTransition {
   fromState: string
   toState: string