feat: Add updateHiddenOutputs helper function to manage output visibility (#6932)

✨ (update-hidden-outputs.ts): add a new helper function to update hidden outputs in the frontend CustomNodes module
♻️ (use-update-all-nodes.ts): refactor useUpdateAllNodes hook to update hidden outputs for all nodes in the frontend CustomNodes module
♻️ (use-update-node-code.ts): refactor useUpdateNodeCode hook to update hidden outputs for a specific node's code in the frontend CustomNodes module
♻️ (index.ts): refactor types in the flow module to include OutputFieldType for better type checking and consistency

src/frontend/src/CustomNodes/helpers/update-hidden-outputs.ts

@@ -0,0 +1,19 @@
+import { OutputFieldType } from "@/types/api";
+
+export const updateHiddenOutputs = (
+  outputs: OutputFieldType[],
+  updatedOutputs: OutputFieldType[],
+) => {
+  if (outputs && updatedOutputs) {
+    outputs.forEach((output) => {
+      const indexOutput = updatedOutputs?.findIndex(
+        (o) => o.name === output.name,
+      );
+      if (indexOutput === -1 || indexOutput === undefined) return;
+      updatedOutputs![indexOutput].hidden = output.hidden;
+    });
+    return updatedOutputs;
+  }
+
+  return outputs;
+};

src/frontend/src/CustomNodes/hooks/use-update-all-nodes.ts

@@ -1,7 +1,8 @@
 import { AllNodeType } from "@/types/flow";
 import { cloneDeep } from "lodash";
 import { useCallback } from "react";
-import { APIClassType } from "../../types/api";
+import { APIClassType, OutputFieldType } from "../../types/api";
+import { updateHiddenOutputs } from "../helpers/update-hidden-outputs";
 
 export type UpdateNodesType = {
   nodeId: string;
@@ -27,6 +28,8 @@ const useUpdateAllNodes = (
           if (nodeIndex === -1) return;
 
           const updatedNode = newNodes[nodeIndex];
+          const outputs = updatedNode?.data.node?.outputs;
+
           updatedNode.data = {
             ...updatedNode.data,
             node: {
@@ -44,6 +47,13 @@ const useUpdateAllNodes = (
           }
 
           updatedNode.data.node!.template[name].value = code;
+
+          const updatedOutputs = updatedNode.data.node?.outputs;
+          updatedNode.data.node!.outputs = updateHiddenOutputs(
+            outputs!,
+            updatedOutputs!,
+          );
+
           updateNodeInternals(nodeId);
         });
 

src/frontend/src/CustomNodes/hooks/use-update-node-code.ts

@@ -2,6 +2,7 @@ import useFlowStore from "@/stores/flowStore";
 import { cloneDeep } from "lodash"; // or any other deep cloning library you prefer
 import { useCallback } from "react";
 import { APIClassType } from "../../types/api";
+import { updateHiddenOutputs } from "../helpers/update-hidden-outputs";
 
 const useUpdateNodeCode = (
   dataId: string,
@@ -32,6 +33,14 @@ const useUpdateNodeCode = (
         setIsOutdated(false);
         setIsUserEdited(false);
 
+        const outputs = dataNode.outputs;
+        const updatedOutputs = newNodeClass.outputs;
+
+        newNode.data.node!.outputs = updateHiddenOutputs(
+          outputs!,
+          updatedOutputs!,
+        );
+
         return newNode;
       });
 

src/frontend/src/types/flow/index.ts

@@ -1,6 +1,6 @@
 import { Edge, Node, ReactFlowJsonObject } from "@xyflow/react";
 import { BuildStatus } from "../../constants/enums";
-import { APIClassType } from "../api/index";
+import { APIClassType, OutputFieldType } from "../api/index";
 
 export type PaginatedFlowsType = {
   items: FlowType[];
@@ -48,6 +48,7 @@ export type noteClassType = Pick<
     backgroundColor?: string;
     [key: string]: any;
   };
+  outputs?: OutputFieldType[];
 };
 
 export type NoteDataType = {