Fix modal opening bug when not supposed to (#1795)

* fix opening modal error

* Fix cleanOnClose behavior in IOModal component

* Refactor useEffect dependency in CollectionCardComponent

* remove console

* add console.log for debugging

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/components/cardComponent/index.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
@@ -18,11 +20,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import IOModal from "../../modals/IOModal";
-import useFlowStore from "../../stores/flowStore";
-import { set } from "lodash";
-import LoadingComponent from "../loadingComponent";
-import { f } from "million/dist/shared/million.9d4df3c1";
 import Loading from "../ui/loading";
 
 export default function CollectionCardComponent({
@@ -31,7 +28,7 @@ export default function CollectionCardComponent({
   disabled = false,
   button,
   onDelete,
-  playground
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -62,25 +59,32 @@ export default function CollectionCardComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
-
   const name = data.is_component ? "Component" : "Flow";
 
   async function getFlowData() {
-    const res = await getComponent(data.id)
+    const res = await getComponent(data.id);
     const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true);
     return newFlow;
   }
 
   useEffect(() => {
     if (currentFlowId && playground) {
+      if(openPlayground){
         setNodes(currentFlow?.data?.nodes ?? [], true);
         setEdges(currentFlow?.data?.edges ?? [], true);
+      }
+      else{
+        setNodes([], true);
+        setEdges([], true);
         cleanFlowPool();
       }
-  }, [currentFlowId]);
+    }
+  }, [openPlayground]);
 
   useEffect(() => {
     if (data) {
@@ -100,7 +104,8 @@ export default function CollectionCardComponent({
         addFlow(true, newFlow)
           .then((id) => {
             setSuccessData({
-              title: `${name} ${isStore ? "Downloaded" : "Installed"
+              title: `${name} ${
+                isStore ? "Downloaded" : "Installed"
               } Successfully.`,
             });
             setLoading(false);
@@ -108,7 +113,8 @@ export default function CollectionCardComponent({
           .catch((error) => {
             setLoading(false);
             setErrorData({
-              title: `Error ${isStore ? "downloading" : "installing"
+              title: `Error ${
+                isStore ? "downloading" : "installing"
               } the ${name}`,
               list: [error["response"]["data"]["detail"]],
             });
@@ -159,6 +165,7 @@ export default function CollectionCardComponent({
   }
 
   return (
+    <>
       <Card
         className={cn(
           "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
@@ -202,7 +209,10 @@ export default function CollectionCardComponent({
                     )}
                     <ShadTooltip content="Likes">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
+                        <IconComponent
+                          name="Heart"
+                          className={cn("h-4 w-4 ")}
+                        />
                         <span data-testid={`likes-${data.name}`}>
                           {likes_count ?? 0}
                         </span>
@@ -210,7 +220,10 @@ export default function CollectionCardComponent({
                     </ShadTooltip>
                     <ShadTooltip content="Downloads">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
+                        <IconComponent
+                          name="DownloadCloud"
+                          className="h-4 w-4"
+                        />
                         <span data-testid={`downloads-${data.name}`}>
                           {downloads_count ?? 0}
                         </span>
@@ -365,7 +378,9 @@ export default function CollectionCardComponent({
                       data-testid={`install-${data.name}`}
                     >
                       <IconComponent
-                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
+                        name={
+                          loading ? "Loader2" : isStore ? "Download" : "Plus"
+                        }
                         className={cn(
                           loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                           !authorized ? " text-ring" : ""
@@ -376,7 +391,7 @@ export default function CollectionCardComponent({
                 </div>
               )}
               {button && button}
-            {playground &&
+              {playground && (
                 <Button
                   disabled={loadingPlayground}
                   key={data.id}
@@ -384,44 +399,49 @@ export default function CollectionCardComponent({
                   variant="outline"
                   size="sm"
                   className="whitespace-nowrap "
-                data-testid={
-                  "playground-flow-button-" + data.id
-                }
+                  data-testid={"playground-flow-button-" + data.id}
                   onClick={() => {
                     setLoadingPlayground(true);
                     if (getFlowById(data.id)) {
                       setCurrentFlowId(data.id);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
-                  }
-                  else {
+                    } else {
                       getFlowData().then((res) => {
                         setCurrentFlow(res);
                         setOpenPlayground(true);
                         setLoadingPlayground(false);
                       });
-
                     }
                   }}
                 >
-                {!loadingPlayground ?
+                  {!loadingPlayground ? (
                     <>
                       <IconComponent
                         name="ExternalLink"
                         className="main-page-nav-button select-none"
                       />
                       Playground
-                  </>:
+                    </>
+                  ) : (
                     <Loading />
-              }
-                {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}>
-                  <></>
-                </IOModal>}
+                  )}
                 </Button>
-            }
+              )}
             </div>
           </div>
         </CardFooter>
-    </Card >
+      </Card>
+
+      {openPlayground && (
+        <IOModal
+          cleanOnClose={true}
+          open={openPlayground}
+          setOpen={setOpenPlayground}
+        >
+          <></>
+        </IOModal>
+      )}
+    </>
   );
 }

src/frontend/src/modals/IOModal/index.tsx

@@ -31,10 +31,8 @@ export default function IOModal({
   open,
   setOpen,
   disable,
-  cleanOnClose=false,
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
-  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
@@ -85,12 +83,6 @@ export default function IOModal({
     return updateVerticesOrder(currentFlow!.id, null);
   }
 
-  // useEffect(() => {
-  //   if (open) {
-  //     updateVertices();
-  //   }
-  // }, [open, currentFlow]);
-
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
     setIsBuilding(true);
@@ -129,13 +121,6 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
-      onChangeOpenModal={(open)=>{
-        if(!open && cleanOnClose){
-          console.log("cleaning flow pool") 
-          cleanFlowPool();
-        }
-      
-      }}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}

src/frontend/src/pages/Playground/index.tsx

@@ -27,6 +27,7 @@ export default function PlaygroundPage() {
 
     // Set flow tab id
     useEffect(() => {
+        console.log("id", id);
         if (getFlowById(id!)) {
             setCurrentFlowId(id!);
         }
@@ -44,6 +45,11 @@ export default function PlaygroundPage() {
             cleanFlowPool();
             setLoading(false);
         }
+        return () => {
+            setNodes([], true);
+            setEdges([], true);
+            cleanFlowPool();
+        };
     }, [currentFlow]);