From 0d6547991f33235b78a9285ef220556cb3e56db0 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 29 May 2024 20:06:45 -0300
Subject: [PATCH] feat: Add OutputModal component for displaying output preview

This commit adds the OutputModal component to the ParameterComponent. The OutputModal component is responsible for displaying the output preview when the user clicks on the "Inspect Output" button. It improves the user experience by allowing them to easily view the output without leaving the current page.
---
 .../components/parameterComponent/index.tsx   | 42 +++++++++++++++++--
 .../src/customNodes/genericNode/index.tsx     | 16 -------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index fce391191..33e3d6ddc 100644
--- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -45,6 +45,7 @@ import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
 import TooltipRenderComponent from "../tooltipRenderComponent";
+import OutputModal from "../outputModal";
 
 export default function ParameterComponent({
   left,
@@ -77,6 +78,10 @@ export default function ParameterComponent({
   const flow = currentFlow?.data?.nodes ?? null;
   const groupedEdge = useRef(null);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
+  const [openOutputModal, setOpenOutputModal] = useState(false);
+  const flowPool = useFlowStore((state) => state.flowPool);
+
+  const displayOutputPreview = !!flowPool[data.id];
 
   const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
     data,
@@ -249,9 +254,33 @@ export default function ParameterComponent({
               </span>
             </ShadTooltip>
           ) : (
-            <span className={!left && data.node?.frozen ? " text-ice" : ""}>
-              {title}
-            </span>
+            <div className="flex gap-2">
+              <span className={!left && data.node?.frozen ? " text-ice" : ""}>
+                {title}
+              </span>
+              <ShadTooltip
+                content={
+                  displayOutputPreview
+                    ? "Inspect Output"
+                    : "Please build the component first"
+                }
+              >
+                <button
+                  disabled={!displayOutputPreview}
+                  onClick={() => setOpenOutputModal(true)}
+                >
+                  <IconComponent
+                    className={classNames(
+                      "h-5 w-5",
+                      displayOutputPreview
+                        ? ""
+                        : " cursor-not-allowed text-muted-foreground",
+                    )}
+                    name={"Eye"}
+                  />
+                </button>
+              </ShadTooltip>
+            </div>
           )}
           <span className={(required ? "ml-2 " : "") + "text-status-red"}>
             {required ? "*" : ""}
@@ -582,6 +611,13 @@ export default function ParameterComponent({
             />
           </div>
         </Case>
+        {openOutputModal && (
+          <OutputModal
+            open={openOutputModal}
+            nodeId={data.id}
+            setOpen={setOpenOutputModal}
+          />
+        )}
       </>
     </div>
   );
diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
index d17da3063..6adbafbdf 100644
--- a/src/frontend/src/customNodes/genericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -68,7 +68,6 @@ export default function GenericNode({
   const [nodeDescription, setNodeDescription] = useState(
     data.node?.description!,
   );
-  const [openOutputModal, setOpenOutputModal] = useState(false);
   const [isOutdated, setIsOutdated] = useState(false);
   const [validationStatus, setValidationStatus] =
     useState<VertexBuildTypeAPI | null>(null);
@@ -449,13 +448,6 @@ export default function GenericNode({
             </div>
             {showNode && (
               <>
-                <Button
-                  onClick={() => {
-                    setOpenOutputModal(true);
-                  }}
-                >
-                  STATUS##
-                </Button>
                 <ShadTooltip
                   content={
                     buildStatus === BuildStatus.BUILDING ? (
@@ -706,14 +698,6 @@ export default function GenericNode({
           </div>
         )}
       </div>
-
-      {openOutputModal && (
-        <OutputModal
-          open={openOutputModal}
-          nodeId={data.id}
-          setOpen={setOpenOutputModal}
-        />
-      )}
     </>
   );
 }