Merge pull request #2024 from botpress/ya-flow-problems

fix(flow-builder): displaying problems (missing nodes)

src/bp/ui-studio/src/web/actions/index.js

@@ -33,21 +33,23 @@ export const saveAllFlows = () => (dispatch, getState) => {
     .difference(dirtyFlows)
     .value()
 
-  dirtyFlows = dirtyFlows.filter(name => !!flowsByName[name]).map(name => {
-    const flow = flowsByName[name]
-    return {
-      name,
-      version: '0.0.1',
-      flow: name,
-      location: flow.location,
-      startNode: flow.startNode,
-      catchAll: flow.catchAll,
-      links: flow.links,
-      nodes: flow.nodes,
-      skillData: flow.skillData,
-      timeoutNode: flow.timeoutNode
-    }
-  })
+  dirtyFlows = dirtyFlows
+    .filter(name => !!flowsByName[name])
+    .map(name => {
+      const flow = flowsByName[name]
+      return {
+        name,
+        version: '0.0.1',
+        flow: name,
+        location: flow.location,
+        startNode: flow.startNode,
+        catchAll: flow.catchAll,
+        links: flow.links,
+        nodes: flow.nodes,
+        skillData: flow.skillData,
+        timeoutNode: flow.timeoutNode
+      }
+    })
 
   axios.post(`${window.BOT_API_PATH}/flows`, { cleanFlows, dirtyFlows }).then(() => {
     dispatch(receiveSaveFlows())
@@ -63,6 +65,7 @@ export const duplicateFlow = createAction('FLOWS/DUPLICATE')
 export const handleRefreshFlowLinks = createAction('FLOWS/FLOW/UPDATE_LINKS')
 export const refreshFlowsLinks = () => dispatch => setTimeout(() => dispatch(handleRefreshFlowLinks()), 10)
 
+export const updateFlowProblems = createAction('FLOWS/FLOW/UPDATE_PROBLEMS')
 export const updateFlowNode = createAction('FLOWS/FLOW/UPDATE_NODE')
 export const switchFlowNode = createAction('FLOWS/FLOW/SWITCH_NODE')
 export const createFlowNode = createAction('FLOWS/FLOW/CREATE')

src/bp/ui-studio/src/web/reducers/flows.ts

@@ -1,38 +1,37 @@
-import { handleActions } from 'redux-actions'
-import reduceReducers from 'reduce-reducers'
 import _ from 'lodash'
-
-import { hashCode, prettyId } from '~/util'
-
+import reduceReducers from 'reduce-reducers'
+import { handleActions } from 'redux-actions'
 import {
-  requestFlows,
-  requestSaveFlows,
-  receiveSaveFlows,
-  receiveFlows,
-  switchFlow,
-  updateFlow,
-  handleRefreshFlowLinks,
-  renameFlow,
-  updateFlowNode,
-  switchFlowNode,
-  openFlowNodeProps,
   closeFlowNodeProps,
-  setDiagramAction,
-  createFlowNode,
   copyFlowNode,
-  pasteFlowNode,
   copyFlowNodeElement,
-  pasteFlowNodeElement,
   createFlow,
+  createFlowNode,
   deleteFlow,
   duplicateFlow,
-  removeFlowNode,
-  handleFlowEditorUndo,
   handleFlowEditorRedo,
+  handleFlowEditorUndo,
+  handleRefreshFlowLinks,
   insertNewSkill,
   insertNewSkillNode,
+  openFlowNodeProps,
+  pasteFlowNode,
+  pasteFlowNodeElement,
+  receiveFlows,
+  receiveSaveFlows,
+  removeFlowNode,
+  renameFlow,
+  requestFlows,
+  requestSaveFlows,
+  setDiagramAction,
+  switchFlow,
+  switchFlowNode,
+  updateFlow,
+  updateFlowNode,
+  updateFlowProblems,
   updateSkill
 } from '~/actions'
+import { hashCode, prettyId } from '~/util'
 
 export interface FlowReducer {
   currentFlow: any
@@ -54,7 +53,8 @@ const defaultState = {
   undoStack: [],
   redoStack: [],
   nodeInBuffer: null, // TODO: move it to buffer.node
-  buffer: { action: null, transition: null }
+  buffer: { action: null, transition: null },
+  flowProblems: []
 }
 
 const findNodesThatReferenceFlow = (state, flowName) =>
@@ -220,6 +220,11 @@ const doCreateNewFlow = name => ({
 
 let reducer = handleActions(
   {
+    [updateFlowProblems]: (state, { payload }) => ({
+      ...state,
+      flowProblems: payload
+    }),
+
     [requestFlows]: state => ({
       ...state,
       fetchingFlows: true

src/bp/ui-studio/src/web/views/FlowBuilder/containers/Diagram.js → src/bp/ui-studio/src/web/views/FlowBuilder/containers/Diagram.ts

@@ -1,22 +1,22 @@
 import { connect } from 'react-redux'
-
-import { getCurrentFlow, getCurrentFlowNode } from '~/reducers'
 import {
+  copyFlowNode,
+  createFlow,
+  createFlowNode,
   fetchFlows,
-  switchFlowNode,
+  insertNewSkillNode,
   openFlowNodeProps,
-  setDiagramAction,
-  createFlowNode,
-  saveAllFlows,
-  updateFlowNode,
-  removeFlowNode,
-  copyFlowNode,
   pasteFlowNode,
-  createFlow,
-  updateFlow,
+  removeFlowNode,
+  saveAllFlows,
+  setDiagramAction,
   switchFlow,
-  insertNewSkillNode
+  switchFlowNode,
+  updateFlow,
+  updateFlowNode,
+  updateFlowProblems
 } from '~/actions'
+import { getCurrentFlow, getCurrentFlowNode } from '~/reducers'
 
 import Diagram from '../diagram'
 
@@ -41,7 +41,8 @@ const mapDispatchToProps = {
   updateFlow,
   copyFlowNode,
   pasteFlowNode,
-  insertNewSkillNode
+  insertNewSkillNode,
+  updateFlowProblems
 }
 
 const ConnectedDiagram = connect(

src/bp/ui-studio/src/web/views/FlowBuilder/containers/SidePanel.ts

@@ -1,7 +1,6 @@
 import values from 'lodash/values'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
-
 import { deleteFlow, duplicateFlow, renameFlow } from '~/actions'
 import { getCurrentFlow, getDirtyFlows } from '~/reducers'
 
@@ -10,7 +9,8 @@ import SidePanel from '../sidePanel'
 const mapStateToProps = (state, ownProps) => ({
   currentFlow: getCurrentFlow(state),
   flows: values(state.flows.flowsByName),
-  dirtyFlows: getDirtyFlows(state)
+  dirtyFlows: getDirtyFlows(state),
+  flowProblems: state.flows.flowProblems
 })
 
 const mapDispatchToProps = {

src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.jsx

@@ -73,6 +73,18 @@ export default class FlowBuilder extends Component {
     }
   }
 
+  checkForProblems() {
+    const nodes = this.activeModel.getNodes()
+    const nodesWithProblems = Object.keys(nodes)
+      .map(node => ({
+        nodeName: nodes[node].name,
+        missingPorts: nodes[node].next.filter(n => n.node === '').length
+      }))
+      .filter(x => x.missingPorts > 0)
+
+    this.props.updateFlowProblems(nodesWithProblems)
+  }
+
   setTranslation(x = 0, y = 0) {
     this.activeModel.setOffset(x, y)
     this.diagramWidget.fireAction()
@@ -136,6 +148,8 @@ export default class FlowBuilder extends Component {
 
       this.diagramWidget && this.diagramWidget.forceUpdate()
     }
+
+    this.checkForProblems()
   }
 
   clearModel() {
@@ -417,6 +431,7 @@ export default class FlowBuilder extends Component {
       this.activeModel.linksHash = newLinksHash
       this.props.updateFlow({ links: newLinks })
     }
+    this.checkForProblems()
   }
 
   serialize = () => {
@@ -502,6 +517,7 @@ export default class FlowBuilder extends Component {
     }
 
     this.diagramWidget.forceUpdate()
+    this.checkForProblems()
   }
 
   copySelectedElementToBuffer() {

src/bp/ui-studio/src/web/views/FlowBuilder/sidePanel/index.jsx

@@ -3,7 +3,8 @@ import React, { Component } from 'react'
 import reject from 'lodash/reject'
 
 import FlowsList from './FlowsList'
-import { SidePanel, SidePanelSection } from '~/components/Shared/Interface'
+import { SidePanel, SidePanelSection, PaddedContent } from '~/components/Shared/Interface'
+import { Tooltip } from '@blueprintjs/core'
 
 export default class PanelContent extends Component {
   createFlow = () => {
@@ -28,6 +29,10 @@ export default class PanelContent extends Component {
 
   goToFlow = flow => this.props.history.push(`/flows/${flow.replace(/\.flow\.json/, '')}`)
 
+  highlightNode = node => {
+    window.highlightNode(this.props.currentFlow && this.props.currentFlow.name, node)
+  }
+
   render() {
     const normalFlows = reject(this.props.flows, x => x.name.startsWith('skills/'))
     const flowsName = normalFlows.map(x => {
@@ -37,6 +42,23 @@ export default class PanelContent extends Component {
 
     return (
       <SidePanel>
+        {!!this.props.flowProblems.length && (
+          <SidePanelSection label="Flow Problems">
+            <PaddedContent>
+              {this.props.flowProblems.map(node => (
+                <div>
+                  <Tooltip content="Click to highlight node">
+                    <a onClick={() => this.highlightNode(node.nodeName)}>
+                      <strong>{node.nodeName}</strong>
+                    </a>
+                  </Tooltip>
+                  : Missing <strong>{node.missingPorts}</strong> links
+                </div>
+              ))}
+            </PaddedContent>
+          </SidePanelSection>
+        )}
+
         <SidePanelSection label={'Flows'} actions={!this.props.readOnly && [createFlowAction]}>
           <FlowsList
             readOnly={this.props.readOnly}