From 0c8e973ccfeac1d0d22d97650f160ebf9ba5237c Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Tue, 11 Jun 2024 17:27:58 -0300
Subject: [PATCH] refactor: Update SwitchOutputView to accept outputName prop

Update the SwitchOutputView component to accept the outputName prop, allowing for dynamic rendering of different output views based on the selected output name.
---
 .../components/switchOutputView/index.tsx     | 25 ++++++++++++-------
 .../components/outputModal/index.tsx          |  9 +++++--
 .../components/parameterComponent/index.tsx   |  1 +
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
index 6c22e3ffa..b699bc6e1 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
@@ -9,19 +9,24 @@ import { Case } from "../../../../../../shared/components/caseComponent";
 import TextOutputView from "../../../../../../shared/components/textOutputView";
 import useFlowStore from "../../../../../../stores/flowStore";
 import ErrorOutput from "./components";
-
-export default function SwitchOutputView(nodeId): JSX.Element {
-  const nodeIdentity = nodeId.nodeId;
-
+// Define the props type
+interface SwitchOutputViewProps {
+  nodeId: string;
+  outputName: string;
+}
+const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
+  nodeId,
+  outputName,
+}) => {
   const nodes = useFlowStore((state) => state.nodes);
   const flowPool = useFlowStore((state) => state.flowPool);
-  const node = nodes.find((node) => node?.id === nodeIdentity);
+  const node = nodes.find((node) => node?.id === nodeId);
 
-  const flowPoolNode = (flowPool[nodeIdentity] ?? [])[
-    (flowPool[nodeIdentity]?.length ?? 1) - 1
+  const flowPoolNode = (flowPool[nodeId] ?? [])[
+    (flowPool[nodeId]?.length ?? 1) - 1
   ];
 
-  const results = flowPoolNode?.data?.logs[0] ?? "";
+  const results = flowPoolNode?.data?.logs[outputName] ?? "";
   const resultType = results?.type;
   let resultMessage = results?.message;
   const RECORD_TYPES = ["record", "object", "array", "message"];
@@ -73,4 +78,6 @@ export default function SwitchOutputView(nodeId): JSX.Element {
       </Case>
     </>
   );
-}
+};
+
+export default SwitchOutputView;
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
index b3185acb1..33485387f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
@@ -2,7 +2,12 @@ import { Button } from "../../../../components/ui/button";
 import BaseModal from "../../../../modals/baseModal";
 import SwitchOutputView from "./components/switchOutputView";
 
-export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
+export default function OutputModal({
+  open,
+  setOpen,
+  nodeId,
+  outputName,
+}): JSX.Element {
   return (
     <BaseModal open={open} setOpen={setOpen} size="medium-tall">
       <BaseModal.Header description="Inspect the output of the component below.">
@@ -11,7 +16,7 @@ export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <SwitchOutputView nodeId={nodeId} />
+        <SwitchOutputView nodeId={nodeId} outputName={outputName} />
       </BaseModal.Content>
       <BaseModal.Footer>
         <div className="flex w-full justify-end  pt-2">
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 8e5a214e9..949fe4f83 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -625,6 +625,7 @@ export default function ParameterComponent({
             open={openOutputModal}
             nodeId={data.id}
             setOpen={setOpenOutputModal}
+            outputName={outputName}
           />
         )}
       </>