From 300be557c2106deb8a7239f19c9b7130b65df691 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 31 May 2024 17:42:47 -0300
Subject: [PATCH] feat(frontend): add ErrorOutput component to display error
 messages in output modal feat(frontend): update SwitchOutputView to render
 ErrorOutput component for 'ValueError' fix(frontend): update BaseModal header
 text in OutputModal component fix(frontend): update displayOutputPreview
 logic in ParameterComponent to check for specific log type

---
 .../switchOutputView/components/index.tsx           | 13 +++++++++++++
 .../components/switchOutputView/index.tsx           | 10 +++++-----
 .../genericNode/components/outputModal/index.tsx    |  6 +++---
 .../components/parameterComponent/index.tsx         | 10 +++++++---
 4 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/components/index.tsx

diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/components/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/components/index.tsx
new file mode 100644
index 000000000..d650f543c
--- /dev/null
+++ b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/components/index.tsx
@@ -0,0 +1,13 @@
+import { Textarea } from "../../../../../../../components/ui/textarea";
+
+export default function ErrorOutput({ value }: { value: string }) {
+  console.log(value);
+  return (
+    <Textarea
+      className={`h-full w-full text-destructive custom-scroll`}
+      placeholder={"Empty"}
+      value={value}
+      readOnly
+    />
+  );
+}
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 2689cd3bb..94c6be0d0 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
@@ -2,6 +2,7 @@ import RecordsOutputComponent from "../../../../../../components/recordsOutputCo
 import { Case } from "../../../../../../shared/components/caseComponent";
 import TextOutputView from "../../../../../../shared/components/textOutputView";
 import useFlowStore from "../../../../../../stores/flowStore";
+import ErrorOutput from "./components";
 import { convertToTableRows } from "./helpers/convert-to-table-rows";
 
 export default function SwitchOutputView(nodeId): JSX.Element {
@@ -21,13 +22,12 @@ export default function SwitchOutputView(nodeId): JSX.Element {
 
   return (
     <>
-      <Case
-        condition={
-          !resultType || resultType === "unknown" || resultType === "valueError"
-        }
-      >
+      <Case condition={!resultType || resultType === "unknown"}>
         <div>NO OUTPUT</div>
       </Case>
+      <Case condition={resultType === "ValueError"}>
+        <ErrorOutput value={resultMessage}></ErrorOutput>
+      </Case>
 
       <Case condition={node && resultType === "text"}>
         <TextOutputView left={false} value={resultMessage} />
diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
index 4185a1d50..4dc5a17f8 100644
--- a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
@@ -4,10 +4,10 @@ import SwitchOutputView from "./components/switchOutputView";
 
 export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
   return (
-    <BaseModal open={open} setOpen={setOpen} size="medium-log">
-      <BaseModal.Header description="Output Visualization">
+    <BaseModal open={open} setOpen={setOpen} size="medium">
+      <BaseModal.Header description="DESCRICAO RODRIGO">
         <div className="flex items-center">
-          <span className="pr-2">Output View</span>
+          <span className="pr-2">TITULO RODRIGO</span>
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index 3838b6c68..7d9e742f4 100644
--- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -81,7 +81,11 @@ export default function ParameterComponent({
   const [openOutputModal, setOpenOutputModal] = useState(false);
   const flowPool = useFlowStore((state) => state.flowPool);
 
-  const displayOutputPreview = !!flowPool[data.id];
+  const displayOutputPreview = !!(
+    flowPool[data.id] &&
+    flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type !==
+      "unknown"
+  );
 
   const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
     data,
@@ -272,9 +276,9 @@ export default function ParameterComponent({
                   >
                     <IconComponent
                       className={classNames(
-                        "h-5 w-5",
+                        "h-5 w-5 rounded-md",
                         displayOutputPreview
-                          ? ""
+                          ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
                           : " cursor-not-allowed text-muted-foreground",
                       )}
                       name={"ScanEye"}