Merge pull request #192 from FlowFuse/171-add-flow

Support add flow action

Author: Steve-Mcl

resources/expertActionsInterface.js

@@ -1,13 +1,19 @@
+import { RedOps } from './redOps.js'
+
 // abstract class for other classes to implement invokable actions
 export class ExpertActionsInterface {
     /** @type {import('node-red').NodeRedInstance} - Node RED client API */
     RED = null
     /** @type {import('./expertComms.js').ExpertComms} - Owner Instance for comms to Expert */
     expertComms = null
+    /** @type { RedOps } */
+    redOps = null
 
     init (expertComms, RED) {
         this.expertComms = expertComms
         this.RED = RED
+        this.redOps = new RedOps()
+        this.redOps.init(RED)
     }
 
     get supportedActions () {
@@ -18,7 +24,7 @@ export class ExpertActionsInterface {
         throw new Error('hasAction method not implemented')
     }
 
-    invokeAction (actionName, { event, params } = {}, result = {}) {
+    async invokeAction (actionName, { event, params } = {}, result = {}) {
         throw new Error('invokeAction method not implemented')
     }
 }

resources/expertAutomations.js

@@ -5,9 +5,10 @@ const SELECT_NODES = 'automation/select-nodes'
 const GET_NODES = 'automation/get-nodes'
 const EDIT_NODE = 'automation/open-node-edit'
 const SEARCH = 'automation/search'
+const ADD_FLOW_TAB = 'automation/add-flow-tab'
 
 /**
- * @typedef {SELECT_NODES|GET_NODES|EDIT_NODE|SEARCH} ExpertAutomationsActionsEnum
+ * @typedef {SELECT_NODES|GET_NODES|EDIT_NODE|SEARCH|ADD_FLOW_TAB} ExpertAutomationsActionsEnum
  */
 
 export class ExpertAutomations extends ExpertActionsInterface {
@@ -85,6 +86,17 @@ export class ExpertAutomations extends ExpertActionsInterface {
                     }
                 }
             }
+        },
+        [ADD_FLOW_TAB]: {
+            params: {
+                type: 'object',
+                properties: {
+                    title: {
+                        type: 'string',
+                        description: 'Optional title for the new flow tab'
+                    }
+                }
+            }
         }
     })
 
@@ -165,6 +177,58 @@ export class ExpertAutomations extends ExpertActionsInterface {
         }
     }
 
+    /// Function extracted from Node-RED source `editor-client/src/js/ui/clipboard.js`
+    /**
+     * Performs the import of nodes, handling any conflicts that may arise
+     * @param {string} nodesStr the nodes to import as a string
+     * @param {object} importOptions
+     * @param {boolean} importOptions.addFlow whether to add the nodes to a new flow or to the current flow
+     * @param {boolean} [importOptions.notify=true] whether to show notifications for import success/failure (default true)
+     */
+    importFlow (nodesStr, { addFlow = false, generateIds = true, notify = true } = { addFlow: false, generateIds: true, notify: true }) {
+        let newNodes = nodesStr
+        if (typeof nodesStr === 'string') {
+            try {
+                nodesStr = nodesStr.trim()
+                if (nodesStr.length === 0) {
+                    return
+                }
+                newNodes = this.redOps.validateFlowString(nodesStr)
+            } catch (err) {
+                const e = new Error(this.RED._('clipboard.invalidFlow', { message: err.message }))
+                e.code = 'NODE_RED'
+                throw e
+            }
+        }
+        this.RED.view.importNodes(newNodes, { generateIds, addFlow, notify })
+    }
+
+    async addFlowTab (title) {
+        const cmd = () => {
+            if (!title) {
+                // if no title is specified, we let the core action perform this (auto naming)
+                // NOTE: core action does not support setting the flow name.
+                this.redOps.invoke('core:add-flow')
+            } else {
+                // As a title is provided, we have take a different approach: import a new flow with the label prop set.
+                const importOptions = { generateIds: true, addFlow: false, notify: false }
+                this.importFlow([{ id: '', type: 'tab', label: title, disabled: false, info: '', env: [] }], importOptions)
+            }
+        }
+        let newTab = await this.redOps.commandAndWait(cmd, 'flows:add')
+        if (!newTab) {
+            return null
+        }
+        if (Array.isArray(newTab)) {
+            newTab = newTab[0]
+        }
+        if (newTab && newTab.type === 'tab') {
+            // select the new tab
+            RED.workspaces.show(newTab.id)
+        }
+        return newTab
+    }
+
     get supportedActions () {
         return this.actions
     }
@@ -182,7 +246,7 @@ export class ExpertAutomations extends ExpertActionsInterface {
      * @param {{[key:string]: any, success:boolean, handled:boolean}} result - an optional object that, if provided, will be mutated to include the result of the action execution
      * @returns {void}
      */
-    invokeAction (actionName, { event, params } = {}, result = {}) {
+    async invokeAction (actionName, { event, params } = {}, result = {}) {
         if (!this.hasAction(actionName)) {
             throw new Error(`Action ${actionName} not found`)
         }
@@ -229,6 +293,12 @@ export class ExpertAutomations extends ExpertActionsInterface {
             result.success = true
         }
             break
+        case ADD_FLOW_TAB: {
+            const newFlowTab = await this.addFlowTab(params?.title || undefined)
+            result.tab = this._formatNodes([newFlowTab], false)[0] || null
+            result.success = true
+        }
+            break
 
         default:
             result.handled = false

resources/expertComms.js

@@ -71,7 +71,7 @@ export class ExpertComms {
     MESSAGE_SCOPE = 'flowfuse-expert'
 
     /** @type {ExpertAutomations} */
-    nodeRedAutomationHelper = new ExpertAutomations() // will set RED instance later in init
+    nrAutomations = new ExpertAutomations() // will set RED instance later in init
 
     /**
      * targetOrigin is set to '*' by default, which allows messages to be sent and received from any origin.
@@ -121,7 +121,7 @@ export class ExpertComms {
         'custom:close-search': { params: null },
         'custom:close-typeSearch': { params: null },
         'custom:close-actionList': { params: null },
-        ...this.nodeRedAutomationHelper.supportedActions
+        ...this.nrAutomations.supportedActions
     }
 
     /**
@@ -201,7 +201,7 @@ export class ExpertComms {
         this.RED = RED
         this.RED.nrAssistant = this
         this.assistantOptions = assistantOptions
-        this.nodeRedAutomationHelper.init(this, RED)
+        this.nrAutomations.init(this, RED)
 
         if (!window.parent?.postMessage || window.self === window.top) {
             console.warn('Parent window not detected - certain interactions with the FlowFuse Expert will not be available')
@@ -327,10 +327,20 @@ export class ExpertComms {
             }
 
             for (const eventName in this.commandMap) {
-                if (type === eventName && typeof this.commandMap[eventName] === 'function') {
+                const handler = this.commandMap[eventName]
+                // identify if the hander is a string, function or async function
+                let handlerType = typeof handler
+                if (handlerType === 'function' && handler.constructor.name === 'AsyncFunction') {
+                    handlerType = 'asyncfunction'
+                }
+                if (type === eventName && handlerType === 'function') {
                     return this.commandMap[eventName](payload)
                 }
 
+                if (type === eventName && handlerType === 'asyncfunction') {
+                    return await this.commandMap[eventName](payload)
+                }
+
                 if (
                     type === eventName &&
                     typeof this.commandMap[eventName] === 'string' &&
@@ -495,7 +505,7 @@ export class ExpertComms {
     /**
      * FlowFuse Expert message handlers
      */
-    handleActionInvocation ({ event, type, action, params } = {}) {
+    async handleActionInvocation ({ event, type, action, params } = {}) {
         this.debug(`Received request to invoke action "${action}" with params`, params)
         // handle action invocation requests (must be registered actions in supportedActions)
         if (typeof action !== 'string') {
@@ -536,9 +546,10 @@ export class ExpertComms {
         case 'custom:import-flow':
             // import-flow is a custom action - handle it here directly
             try {
-                this.importNodes(params.flow, params.addFlow === true)
+                this.nrAutomations.importFlow(params.flow, { addFlow: params.addFlow })
                 this.postReply({ type, success: true }, event)
             } catch (err) {
+                this.RED.notify('Import failed:' + err.message, 'error')
                 this.postReply({ type, error: err?.message }, event)
             }
             return
@@ -547,7 +558,7 @@ export class ExpertComms {
             try {
                 if (actionNamespace === 'automation') {
                     // Handle supported automated actions
-                    this.nodeRedAutomationHelper.invokeAction(action, { event, params }, result)
+                    await this.nrAutomations.invokeAction(action, { event, params }, result)
                 } else {
                     // Handle supported native Node-RED actions
                     this.RED.actions.invoke(action, params)
@@ -708,62 +719,6 @@ export class ExpertComms {
         return { valid: true }
     }
 
-    /// Function extracted from Node-RED source `editor-client/src/js/ui/clipboard.js`
-    /**
-     * Performs the import of nodes, handling any conflicts that may arise
-     * @param {string} nodesStr the nodes to import as a string
-     * @param {boolean} addFlow whether to add the nodes to a new flow or to the current flow
-     */
-    importNodes (nodesStr, addFlow) {
-        let newNodes = nodesStr
-        if (typeof nodesStr === 'string') {
-            try {
-                nodesStr = nodesStr.trim()
-                if (nodesStr.length === 0) {
-                    return
-                }
-                newNodes = this.validateFlowString(nodesStr)
-            } catch (err) {
-                const e = new Error(this.RED._('clipboard.invalidFlow', { message: 'test' }))
-                e.code = 'NODE_RED'
-                throw e
-            }
-        }
-        const importOptions = { generateIds: true, addFlow }
-        try {
-            this.RED.view.importNodes(newNodes, importOptions)
-        } catch (error) {
-            // Thrown for import_conflict
-            this.RED.notify('Import failed:' + error.message, 'error')
-            throw error
-        }
-    }
-
-    /// Function extracted from Node-RED source `editor-client/src/js/ui/clipboard.js`
-    /**
-     * Validates if the provided string looks like valid flow json
-     * @param {string} flowString the string to validate
-     * @returns If valid, returns the node array
-     */
-    validateFlowString (flowString) {
-        const res = JSON.parse(flowString)
-        if (!Array.isArray(res)) {
-            throw new Error(this.RED._('clipboard.import.errors.notArray'))
-        }
-        for (let i = 0; i < res.length; i++) {
-            if (typeof res[i] !== 'object') {
-                throw new Error(this.RED._('clipboard.import.errors.itemNotObject', { index: i }))
-            }
-            if (!Object.hasOwn(res[i], 'id')) {
-                throw new Error(this.RED._('clipboard.import.errors.missingId', { index: i }))
-            }
-            if (!Object.hasOwn(res[i], 'type')) {
-                throw new Error(this.RED._('clipboard.import.errors.missingType', { index: i }))
-            }
-        }
-        return res
-    }
-
     debug (...args) {
         if (this.RED.nrAssistant?.DEBUG) {
             const scriptName = 'assistant-index.html.js' // must match the sourceURL set in the script below

resources/redOps.js

@@ -0,0 +1,111 @@
+export class RedOps {
+    RED = null
+
+    init (RED) {
+        this.RED = RED
+    }
+
+    /// Function extracted from Node-RED source `editor-client/src/js/ui/clipboard.js`
+    /**
+     * Validates if the provided string looks like valid flow json
+     * @param {string} flowString the string to validate
+     * @returns If valid, returns the node array
+     */
+    validateFlowString (flowString) {
+        const res = JSON.parse(flowString)
+        if (!Array.isArray(res)) {
+            throw new Error(this.RED._('clipboard.import.errors.notArray'))
+        }
+        for (let i = 0; i < res.length; i++) {
+            if (typeof res[i] !== 'object') {
+                throw new Error(this.RED._('clipboard.import.errors.itemNotObject', { index: i }))
+            }
+            if (!Object.hasOwn(res[i], 'id')) {
+                throw new Error(this.RED._('clipboard.import.errors.missingId', { index: i }))
+            }
+            if (!Object.hasOwn(res[i], 'type')) {
+                throw new Error(this.RED._('clipboard.import.errors.missingType', { index: i }))
+            }
+        }
+        return res
+    }
+
+    /**
+     * Invokes a Node-RED action by ID with the provided data.
+     * @param {String} action - The action ID to invoke, e.g. 'core:add-flows'
+     * @param {*} actionData - Data to pass to the action, e.g. { flow: [...] }
+     */
+    invoke (action, actionData) {
+        if (!this.RED) {
+            throw new Error('RedOps is not initialized with RED instance')
+        }
+        this.RED.actions.invoke(action, actionData)
+    }
+
+    /**
+     * Invokes a Node-RED action and waits for a specific event to occur before resolving.
+     * The event can be validated with an optional resolveValidator function to ensure it is the expected response for the action.
+     * Event data (if any) will be returned when the promise resolves.
+     * @param {string} action - The action ID to invoke.
+     * @param {object} actionData - Data to pass to the action.
+     * @param {string} event - The event name to listen for.
+     * @param {object} [options] - Options for the invocation.
+     * @param {number} [options.timeout] - Max time to wait in milliseconds (default 2s).
+     * @param {function} [options.resolveValidator] - Optional function to validate that the event/eventData is ours before resolving.
+     * @returns {Promise<any>} Resolves with eventData.
+     */
+    async invokeActionAndWait (action, actionData, event, { timeout = 2000, resolveValidator = null } = {}) {
+        const command = () => {
+            this.invoke(action, actionData)
+        }
+        return this.commandAndWait(command, event, { timeout, resolveValidator })
+    }
+
+    /**
+     * Run a command then wait for a specific event response to occur before resolving.
+     * The event can be validated with an optional resolveValidator function to ensure it is the expected response for the command.
+     * Event data (if any) will be returned when the promise resolves.
+     * @param {function} command - The command function to execute.
+     * @param {string} event - The event name to listen for.
+     * @param {object} [options] - Options for the invocation.
+     * @param {number} [options.timeout] - Max time to wait in milliseconds (default 2s).
+     * @param {function} [options.resolveValidator] - Optional function to validate that the event/eventData is ours before resolving.
+     * @returns {Promise<any>} Resolves with eventData.
+     */
+    async commandAndWait (command, event, { timeout = 2000, resolveValidator = null } = {}) {
+        if (!this.RED) {
+            throw new Error('RedOps is not initialized with RED instance')
+        }
+        resolveValidator = resolveValidator || ((data) => true)
+        return new Promise((resolve, reject) => {
+            let timer = null
+
+            // 1. Define handler
+            const handler = (eventData) => {
+                if (resolveValidator(eventData)) {
+                    clearTimeout(timer)
+                    this.RED.events.off(event, handler) // Clean up listener
+                    resolve(eventData)
+                }
+            }
+
+            // 2. Monitor for timeout
+            timer = setTimeout(() => {
+                this.RED.events.off(event, handler) // Clean up listener
+                reject(new Error(`Timeout waiting for event '${event}'`))
+            }, timeout)
+
+            // 3. Listen for response
+            this.RED.events.on(event, handler)
+
+            // 4. Trigger command
+            try {
+                command()
+            } catch (err) {
+                clearTimeout(timer)
+                this.RED.events.off(event, handler)
+                reject(err)
+            }
+        })
+    }
+}