Removed closePopup from all of the components that used it

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -13,7 +13,6 @@ import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants";
-import { PopUpContext } from "../../../../contexts/popUpContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
@@ -47,7 +46,6 @@ export default function ParameterComponent({
   const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { closePopUp } = useContext(PopUpContext);
   const { setTabsState, tabId, save } = useContext(TabsContext);
 
   useEffect(() => {
@@ -61,8 +59,6 @@ export default function ParameterComponent({
     updateNodeInternals(data.id);
   }, [data.id, position, updateNodeInternals]);
 
-  useEffect(() => {}, [closePopUp, data.node.template]);
-
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,7 +1,6 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { Fragment, useContext, useEffect, useState } from "react";
+import { Fragment, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
@@ -13,16 +12,10 @@ export default function Dropdown({
   numberOfOptions = 0,
   apiModal = false,
 }: DropDownComponentType) {
-  const { closePopUp } = useContext(PopUpContext);
-
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
   );
 
-  useEffect(() => {
-    setInternalValue(value === "" || !value ? "Choose an option" : value);
-  }, [closePopUp]);
-
   return (
     <>
       <Listbox

src/frontend/src/components/floatComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FloatComponentType } from "../../types/components";
 
@@ -12,7 +11,6 @@ export default function FloatComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
-  const { closePopUp } = useContext(PopUpContext);
 
   const step = 0.1;
   const min = 0;
@@ -25,10 +23,6 @@ export default function FloatComponent({
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setMyValue(value);
-  }, [closePopUp]);
-
   return (
     <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
       <input

src/frontend/src/components/inputComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
@@ -15,7 +14,6 @@ export default function InputComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
   const { setDisableCopyPaste } = useContext(TabsContext);
-  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (disabled) {
@@ -24,10 +22,6 @@ export default function InputComponent({
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setMyValue(value ?? "");
-  }, [closePopUp]);
-
   return (
     <div className={disabled ? "input-component-div" : "relative"}>
       <input

src/frontend/src/components/inputListComponent/index.tsx

@@ -1,9 +1,8 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
 
 import _ from "lodash";
 import { Plus, X } from "lucide-react";
-import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputListComponent({
   value,
@@ -13,7 +12,6 @@ export default function InputListComponent({
   onAddInput,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
-  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (disabled) {
@@ -22,10 +20,6 @@ export default function InputListComponent({
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setInputList(value);
-  }, [closePopUp]);
-
   return (
     <div
       className={

src/frontend/src/components/intComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FloatComponentType } from "../../types/components";
 
@@ -13,7 +12,6 @@ export default function IntComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
   const min = 0;
-  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (disabled) {
@@ -22,10 +20,6 @@ export default function IntComponent({
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setMyValue(value);
-  }, [closePopUp]);
-
   return (
     <div
       className={

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -20,7 +20,6 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
@@ -55,7 +54,6 @@ const EditNodeModal = forwardRef(
       ).length
     );
     const [nodeValue, setNodeValue] = useState(null);
-    const { closePopUp } = useContext(PopUpContext);
     const { types } = useContext(typesContext);
     const { setTabsState, tabId } = useContext(TabsContext);
     const { reactFlowInstance } = useContext(typesContext);
@@ -64,7 +62,7 @@ const EditNodeModal = forwardRef(
       reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
       false;
     if (nodeLength == 0) {
-      closePopUp();
+      setModalOpen(false);
     }
 
     function changeAdvanced(node) {

src/frontend/src/modals/NodeModal/index.tsx

@@ -1,7 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { X } from "lucide-react";
 import { Fragment, useContext, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import {
@@ -14,23 +13,14 @@ import {
 import ModalField from "./components/ModalField";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
-  const [open, setOpen] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
-  const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
   // any to avoid type conflict
   const Icon: any = nodeIconsLucide[types[data.type]];
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
     <Dialog
+      open={modalOpen}
       as="div"
       className="relative z-10"
       onClose={setModalOpen}
@@ -78,8 +68,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     strokeWidth={1.5}
                     className="node-modal-icon"
                     style={{
-                        color:
+                      color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-                          nodeColors[types[data.type]] ?? nodeColors.unknown,
                     }}
                   />
                   <div className="node-modal-title-div">
@@ -158,6 +147,5 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
         </div>
       </div>
     </Dialog>
-    </Transition.Root>
   );
 }

src/frontend/src/modals/exportModal/index.tsx

@@ -4,13 +4,11 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
-  const { closePopUp } = useContext(PopUpContext);
   const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
     useContext(TabsContext);
   const [checked, setChecked] = useState(false);
@@ -18,8 +16,9 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
+  const [open, setOpen] = useState(false);
   return (
-    <BaseModal size="smaller">
+    <BaseModal size="smaller" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
         <span className="pr-2">Export</span>
@@ -67,8 +66,7 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
                 name,
                 description
               );
-
+            setOpen(false);
-            closePopUp();
           }}
           type="submit"
         >

src/frontend/src/modals/importModal/index.tsx

@@ -17,7 +17,6 @@ import {
 } from "../../components/ui/dialog";
 import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
@@ -27,20 +26,11 @@ import ButtonBox from "./buttonBox";
 export default function ImportModal() {
   const [open, setOpen] = useState(true);
   const { setErrorData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
   const ref = useRef();
   const [showExamples, setShowExamples] = useState(false);
   const [loadingExamples, setLoadingExamples] = useState(false);
   const [examples, setExamples] = useState<FlowType[]>([]);
   const { uploadFlow, addFlow } = useContext(TabsContext);
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
 
   function handleExamples() {
     setLoadingExamples(true);
@@ -57,8 +47,10 @@ export default function ImportModal() {
       );
   }
 
+  const [modalOpen, setModalOpen] = useState(false);
+
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
       <DialogContent
         className={classNames(