Display subflows in node palette

JoshuaCWebDeveloper · May 23, 2024 · fad04fa · fad04fa
1 parent 731ecd2
commit fad04fa
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 11 deletions.
diff --git a/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx b/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx
@@ -303,7 +303,7 @@ export const FlowCanvas: React.FC<FlowCanvasProps> = ({ flowId }) => {
             );
 
             const node = new CustomNodeModel({
-                name: entity.type,
+                name: entity.name,
                 color: entity.color,
                 extras: {
                     entity,

diff --git a/packages/flow-client/src/app/components/node-palette/node-palette.tsx b/packages/flow-client/src/app/components/node-palette/node-palette.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { useAppDispatch, useAppLogic, useAppSelector } from '../../redux/hooks';
 import {
     paletteNodeActions,
     selectFilteredNodes,
@@ -32,16 +32,20 @@ const StyledNodePalette = styled.div`
 
 export const NodePalette = () => {
     const dispatch = useAppDispatch();
-
+    const flowLogic = useAppLogic().flow;
     const nodes = useAppSelector(selectFilteredNodes);
+    const subflows = useAppSelector(
+        flowLogic.node.selectSubflowsAsPaletteNodes
+    );
+
     const handleSearch = (query: string) => {
         dispatch(paletteNodeActions.setSearchQuery(query));
     };
 
     return (
         <StyledNodePalette className="node-palette">
             <SearchBar onSearch={handleSearch} />
-            <NodeList nodes={nodes} />
+            <NodeList nodes={[...nodes, ...subflows]} />
         </StyledNodePalette>
     );
 };

diff --git a/packages/flow-client/src/app/components/node/node-red-node.tsx b/packages/flow-client/src/app/components/node/node-red-node.tsx
@@ -49,7 +49,7 @@ export const NodeRedNode = ({
                     alt="Node Icon"
                 />
             )}
-            <span className="name">{instance?.name || entity.type}</span>
+            <span className="name">{instance?.name || entity.name}</span>
             {children}
         </StyledNode>
     );

diff --git a/packages/flow-client/src/app/redux/modules/api/node.api.ts b/packages/flow-client/src/app/redux/modules/api/node.api.ts
@@ -38,6 +38,8 @@ export const nodeApi = createApi({
                         ...node,
                         id: type,
                         nodeRedId: node.id,
+                        nodeRedName: node.name,
+                        name: type,
                         type, // Assign each type to a new node
                         types: undefined, // Remove the types array
                     }))

diff --git a/packages/flow-client/src/app/redux/modules/flow/graph.logic.ts b/packages/flow-client/src/app/redux/modules/flow/graph.logic.ts
@@ -67,9 +67,6 @@ export class GraphLogic {
     // Method to convert and update the flow based on the serialized graph from react-diagrams
     updateFlowFromSerializedGraph(graph: SerializedGraph) {
         return async (dispatch: AppDispatch, getState: () => RootState) => {
-            // const graph = JSON.parse(serializedGraph) as SerializedGraph;
-
-            // Assuming layers[1] contains nodes and layers[0] contains links
             const nodeModels =
                 (
                     graph.layers.find(

diff --git a/packages/flow-client/src/app/redux/modules/flow/node.logic.ts b/packages/flow-client/src/app/redux/modules/flow/node.logic.ts
@@ -1,18 +1,21 @@
-import { v4 as uuidv4 } from 'uuid';
 import { PortModelAlignment } from '@projectstorm/react-diagrams';
+import { createSelector } from '@reduxjs/toolkit';
+import { v4 as uuidv4 } from 'uuid';
 
 import { executeNodeFn } from '../../../red/execute-script';
+import { AppDispatch, RootState } from '../../store';
 import {
     PaletteNodeEntity,
     selectPaletteNodeById,
 } from '../palette/node.slice';
 import {
     FlowNodeEntity,
     PortModel,
+    SubflowEntity,
     flowActions,
+    selectAllSubflows,
     selectFlowNodeById,
 } from './flow.slice';
-import { AppDispatch, RootState } from '../../store';
 
 type DirtyNodeChanges = Partial<
     Omit<FlowNodeEntity, 'outputs'> & {
@@ -329,4 +332,24 @@ export class NodeLogic {
             );
         };
     };
+
+    selectSubflowsAsPaletteNodes = createSelector(
+        [selectAllSubflows],
+        (subflows: SubflowEntity[]) => {
+            return subflows.map(
+                subflow =>
+                    ({
+                        id: subflow.id,
+                        nodeRedId: '',
+                        nodeRedName: subflow.name,
+                        name: subflow.name,
+                        type: `subflow:${subflow.id}`,
+                        category: subflow.category,
+                        color: subflow.color,
+                        module: 'subflows',
+                        version: '1.0.0',
+                    } as PaletteNodeEntity)
+            );
+        }
+    );
 }
diff --git a/packages/flow-client/src/app/redux/modules/palette/node.slice.ts b/packages/flow-client/src/app/redux/modules/palette/node.slice.ts
@@ -5,6 +5,7 @@ import {
     EntityState,
     PayloadAction,
 } from '@reduxjs/toolkit';
+
 import { RootState } from '../../store';
 
 export const PALETTE_NODE_FEATURE_KEY = 'paletteNode';
@@ -31,6 +32,7 @@ export type PaletteNodeEntity = {
     // Core properties
     id: string;
     nodeRedId: string;
+    nodeRedName: string;
     name: string;
     type: string;
     category?: string;
@@ -123,7 +125,6 @@ export const paletteNodeSlice = createSlice({
         // Custom action to set nodes
         setNodes: paletteNodeAdapter.setAll,
     },
-    // No extraReducers if fetching is handled by RTK Query
 });
 
 // Export reducer and actions