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,150 +13,139 @@ 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
-      <Dialog
+      open={modalOpen}
-        as="div"
+      as="div"
-        className="relative z-10"
+      className="relative z-10"
-        onClose={setModalOpen}
+      onClose={setModalOpen}
-        initialFocus={ref}
+      initialFocus={ref}
+    >
+      <Transition.Child
+        as={Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
       >
-        <Transition.Child
+        <div className="node-modal-div" />
-          as={Fragment}
+      </Transition.Child>
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="node-modal-div" />
-        </Transition.Child>
 
-        <div className="node-modal-dialog-arrangement">
+      <div className="node-modal-dialog-arrangement">
-          <div className="node-modal-dialog-div">
+        <div className="node-modal-dialog-div">
-            <Transition.Child
+          <Transition.Child
-              as={Fragment}
+            as={Fragment}
-              enter="ease-out duration-300"
+            enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
+            leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
+          >
-              <Dialog.Panel className="node-modal-dialog-panel">
+            <Dialog.Panel className="node-modal-dialog-panel">
-                <div className=" node-modal-dialog-panel-div">
+              <div className=" node-modal-dialog-panel-div">
-                  <button
+                <button
-                    type="button"
+                  type="button"
-                    className="node-modal-dialog-button"
+                  className="node-modal-dialog-button"
-                    onClick={() => {
+                  onClick={() => {
-                      setModalOpen(false);
+                    setModalOpen(false);
+                  }}
+                >
+                  <span className="sr-only">Close</span>
+                  <X className="h-6 w-6" aria-hidden="true" />
+                </button>
+              </div>
+              <div className="node-modal-dialog-icon-div">
+                <div className="node-modal-icon-arrangement">
+                  <Icon
+                    strokeWidth={1.5}
+                    className="node-modal-icon"
+                    style={{
+                      color: nodeColors[types[data.type]] ?? nodeColors.unknown,
                     }}
-                  >
+                  />
-                    <span className="sr-only">Close</span>
+                  <div className="node-modal-title-div">
-                    <X className="h-6 w-6" aria-hidden="true" />
+                    <Dialog.Title as="h3" className="node-modal-title">
-                  </button>
+                      {data.type}
-                </div>
+                    </Dialog.Title>
-                <div className="node-modal-dialog-icon-div">
-                  <div className="node-modal-icon-arrangement">
-                    <Icon
-                      strokeWidth={1.5}
-                      className="node-modal-icon"
-                      style={{
-                        color:
-                          nodeColors[types[data.type]] ?? nodeColors.unknown,
-                      }}
-                    />
-                    <div className="node-modal-title-div">
-                      <Dialog.Title as="h3" className="node-modal-title">
-                        {data.type}
-                      </Dialog.Title>
-                    </div>
                   </div>
-                  <div className="node-modal-template-div">
+                </div>
-                    <div className="flex-max-width h-[445px]">
+                <div className="node-modal-template-div">
-                      <div
+                  <div className="flex-max-width h-[445px]">
-                        className={classNames(
+                    <div
-                          "node-modal-template",
+                      className={classNames(
-                          Object.keys(data.node.template).filter(
+                        "node-modal-template",
+                        Object.keys(data.node.template).filter(
+                          (t) =>
+                            t.charAt(0) !== "_" &&
+                            data.node.template[t].advanced &&
+                            data.node.template[t].show
+                        ).length > limitScrollFieldsModal
+                          ? "overflow-scroll overflow-x-hidden custom-scroll"
+                          : "overflow-hidden"
+                      )}
+                    >
+                      <div className="node-modal-template-column">
+                        {Object.keys(data.node.template)
+                          .filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
                               data.node.template[t].advanced &&
                               data.node.template[t].show
-                          ).length > limitScrollFieldsModal
+                          )
-                            ? "overflow-scroll overflow-x-hidden custom-scroll"
+                          .map((t: string, idx) => {
-                            : "overflow-hidden"
+                            return (
-                        )}
+                              <ModalField
-                      >
+                                key={idx}
-                        <div className="node-modal-template-column">
+                                data={data}
-                          {Object.keys(data.node.template)
+                                title={
-                            .filter(
+                                  data.node.template[t].display_name
-                              (t) =>
+                                    ? data.node.template[t].display_name
-                                t.charAt(0) !== "_" &&
+                                    : data.node.template[t].name
-                                data.node.template[t].advanced &&
+                                    ? toTitleCase(data.node.template[t].name)
-                                data.node.template[t].show
+                                    : toTitleCase(t)
-                            )
+                                }
-                            .map((t: string, idx) => {
+                                required={data.node.template[t].required}
-                              return (
+                                id={
-                                <ModalField
+                                  data.node.template[t].type +
-                                  key={idx}
+                                  "|" +
-                                  data={data}
+                                  t +
-                                  title={
+                                  "|" +
-                                    data.node.template[t].display_name
+                                  data.id
-                                      ? data.node.template[t].display_name
+                                }
-                                      : data.node.template[t].name
+                                name={t}
-                                      ? toTitleCase(data.node.template[t].name)
+                                type={data.node.template[t].type}
-                                      : toTitleCase(t)
+                                index={idx}
-                                  }
+                              />
-                                  required={data.node.template[t].required}
+                            );
-                                  id={
+                          })}
-                                    data.node.template[t].type +
-                                    "|" +
-                                    t +
-                                    "|" +
-                                    data.id
-                                  }
-                                  name={t}
-                                  type={data.node.template[t].type}
-                                  index={idx}
-                                />
-                              );
-                            })}
-                        </div>
                       </div>
                     </div>
                   </div>
-                  <div className="node-modal-button-box">
-                    <button
-                      type="button"
-                      className="node-modal-button"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      Done
-                    </button>
-                  </div>
                 </div>
-              </Dialog.Panel>
+                <div className="node-modal-button-box">
-            </Transition.Child>
+                  <button
-          </div>
+                    type="button"
+                    className="node-modal-button"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    Done
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
         </div>
-      </Dialog>
+      </div>
-    </Transition.Root>
+    </Dialog>
   );
 }

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(