From b06cb9507f0511d682d184916dead4110ad9f0ba Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 12 Sep 2023 14:25:04 -0300
Subject: [PATCH] Feat: Add minimize icon and conditional render

---
 .../src/CustomNodes/GenericNode/index.tsx     | 151 ++++++++++--------
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/utils/styleUtils.ts          |   2 +
 3 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 30dda4034..8d8d4aefd 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -14,6 +14,7 @@ import { cleanEdges } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, toTitleCase } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
+import { Button } from "@mui/material";
 
 export default function GenericNode({
   data: olddata,
@@ -29,6 +30,7 @@ export default function GenericNode({
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
+  const [showNode, setShowNode] = useState<boolean>(true);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
   useEffect(() => {
@@ -84,76 +86,84 @@ export default function GenericNode({
             <div className="beta-badge-content">BETA</div>
           </div>
         )}
-        <div className="generic-node-div-title">
-          <div className="generic-node-title-arrangement">
-            <IconComponent
-              name={name}
-              className="generic-node-icon"
-              iconColor={`${nodeColors[types[data.type]]}`}
-            />
-            <div className="generic-node-tooltip-div">
-              <ShadTooltip content={data.node?.display_name}>
-                <div className="generic-node-tooltip-div text-primary">
-                  {data.node?.display_name}
-                </div>
-              </ShadTooltip>
-            </div>
+        <div>
+          <div className="grid justify-items-end bg-muted pt-2 pr-2 border-b rounded-t-lg">
+              <IconComponent
+                name="Minus"
+                className="hover:text-accent-foreground text-muted-foreground"
+              />
           </div>
-          <div className="round-button-div">
-            <div>
-              <Tooltip
-                title={
-                  isBuilding ? (
-                    <span>Building...</span>
-                  ) : !validationStatus ? (
-                    <span className="flex">
-                      Build{" "}
-                      <IconComponent
-                        name="Zap"
-                        className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
-                      />{" "}
-                      flow to validate status.
-                    </span>
-                  ) : (
-                    <div className="max-h-96 overflow-auto">
-                      {typeof validationStatus.params === "string"
-                        ? validationStatus.params
-                            .split("\n")
-                            .map((line: string, index: number) => (
-                              <div key={index}>{line}</div>
-                            ))
-                        : ""}
-                    </div>
-                  )
-                }
-              >
-                <div className="generic-node-status-position">
-                  <div
-                    className={classNames(
-                      validationStatus && validationStatus.valid
-                        ? "green-status"
-                        : "status-build-animation",
-                      "status-div"
-                    )}
-                  ></div>
-                  <div
-                    className={classNames(
-                      validationStatus && !validationStatus.valid
-                        ? "red-status"
-                        : "status-build-animation",
-                      "status-div"
-                    )}
-                  ></div>
-                  <div
-                    className={classNames(
-                      !validationStatus || isBuilding
-                        ? "yellow-status"
-                        : "status-build-animation",
-                      "status-div"
-                    )}
-                  ></div>
-                </div>
-              </Tooltip>
+          <div className="generic-node-div-title">
+            <div className="generic-node-title-arrangement">
+              <IconComponent
+                name={name}
+                className="generic-node-icon"
+                iconColor={`${nodeColors[types[data.type]]}`}
+              />
+              <div className="generic-node-tooltip-div">
+                <ShadTooltip content={data.node?.display_name}>
+                  <div className="generic-node-tooltip-div text-primary">
+                    {data.node?.display_name}
+                  </div>
+                </ShadTooltip>
+              </div>
+            </div>
+            <div className="round-button-div">
+              <div>
+                <Tooltip
+                  title={
+                    isBuilding ? (
+                      <span>Building...</span>
+                    ) : !validationStatus ? (
+                      <span className="flex">
+                        Build{" "}
+                        <IconComponent
+                          name="Zap"
+                          className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        />{" "}
+                        flow to validate status.
+                      </span>
+                    ) : (
+                      <div className="max-h-96 overflow-auto">
+                        {typeof validationStatus.params === "string"
+                          ? validationStatus.params
+                              .split("\n")
+                              .map((line: string, index: number) => (
+                                <div key={index}>{line}</div>
+                              ))
+                          : ""}
+                      </div>
+                    )
+                  }
+                >
+                  <div className="generic-node-status-position">
+                    <div
+                      className={classNames(
+                        validationStatus && validationStatus.valid
+                          ? "green-status"
+                          : "status-build-animation",
+                        "status-div"
+                      )}
+                    ></div>
+                    <div
+                      className={classNames(
+                        validationStatus && !validationStatus.valid
+                          ? "red-status"
+                          : "status-build-animation",
+                        "status-div"
+                      )}
+                    ></div>
+                    <div
+                      className={classNames(
+                        !validationStatus || isBuilding
+                          ? "yellow-status"
+                          : "status-build-animation",
+                        "status-div"
+                      )}
+                    ></div>
+                  </div>
+                </Tooltip>
+              </div>
             </div>
           </div>
         </div>
@@ -167,7 +177,8 @@ export default function GenericNode({
               .map((templateField: string, idx) => (
                 <div key={idx}>
                   {data.node!.template[templateField].show &&
-                  !data.node!.template[templateField].advanced ? (
+                  !data.node!.template[templateField].advanced &&
+                  showNode ? (
                     <ParameterComponent
                       key={
                         (data.node!.template[templateField].input_types?.join(
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 9396cdc38..d64d4227c 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -267,7 +267,7 @@
     @apply relative flex w-96 flex-col justify-center rounded-lg bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4;
+    @apply flex w-full items-center justify-between gap-8  border-b bg-muted p-4;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index bd658ac7e..7f0461410 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -78,6 +78,7 @@ import {
   X,
   XCircle,
   Zap,
+  Minus
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";
@@ -308,4 +309,5 @@ export const nodeIconsLucide: iconsType = {
   Key,
   Unplug,
   ChevronUp,
+  Minus,
 };