Merge branch 'modalRefactor' of https://github.com/logspace-ai/langflow into modalRefactor

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

@@ -5,9 +5,7 @@ import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
-import NodeModal from "../../modals/NodeModal";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { NodeDataType } from "../../types/flow";
 import {
@@ -28,8 +26,6 @@ export default function GenericNode({
   const { setErrorData } = useContext(alertContext);
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
-
-  const { closePopUp, openPopUp } = useContext(PopUpContext);
   // any to avoid type conflict
   const Icon: any =
     nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
@@ -67,13 +63,12 @@ export default function GenericNode({
     deleteNode(data.id);
     return;
   }
-  useEffect(() => {}, [closePopUp, data.node.template]);
+  useEffect(() => {}, [data.node.template]);
   return (
     <>
       <NodeToolbar>
         <NodeToolbarComponent
           data={data}
-          openPopUp={openPopUp}
           deleteNode={deleteNode}
         ></NodeToolbarComponent>
       </NodeToolbar>
@@ -101,15 +96,6 @@ export default function GenericNode({
               </ShadTooltip>
             </div>
           </div>
-          <div className="round-button-div">
-            <button
-              className="relative"
-              onClick={(event) => {
-                event.preventDefault();
-                openPopUp(<NodeModal data={data} />);
-              }}
-            ></button>
-          </div>
           <div className="round-button-div">
             <div>
               <Tooltip

src/frontend/src/components/promptComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 
@@ -17,7 +16,6 @@ export default function PromptAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
-  const { openPopUp } = useContext(PopUpContext);
   const { reactFlowInstance } = useContext(typesContext);
   useEffect(() => {
     if (disabled) {

src/frontend/src/components/textAreaComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 
@@ -13,7 +12,6 @@ export default function TextAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
-  const { openPopUp, closePopUp } = useContext(PopUpContext);
   const { setDisableCopyPaste } = useContext(TabsContext);
 
   useEffect(() => {
@@ -23,10 +21,6 @@ export default function TextAreaComponent({
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setMyValue(value);
-  }, [closePopUp]);
-
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <div className="flex w-full items-center">

src/frontend/src/modals/ApiModal/index.tsx

@@ -3,7 +3,6 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import { ReactNode, useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
 import { Check, Clipboard, Code2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -41,7 +40,6 @@ import {
   getPythonApiCode,
   getPythonCode,
 } from "../../constants";
-import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow/index";
 import { buildTweaks, classNames } from "../../utils";
@@ -54,12 +52,8 @@ export default function ApiModal({
   flow: FlowType;
   children: ReactNode;
 }) {
-  const [open, setOpen] = useState(true);
-  const { dark } = useContext(darkContext);
-  const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
   const [activeTab, setActiveTab] = useState("0");
   const [isCopied, setIsCopied] = useState<Boolean>(false);
-  const [enabled, setEnabled] = useState(null);
   const [openAccordion, setOpenAccordion] = useState([]);
   const tweak = useRef([]);
   const tweaksList = useRef([]);
@@ -103,22 +97,6 @@ export default function ApiModal({
     },
   ];
 
-  useEffect(() => {
-    if (closeEdit !== "") {
-      tweak.current = getTweak;
-      if (tweak.current.length > 0) {
-        setActiveTab("3");
-        openAccordions();
-      } else {
-        startTweaks();
-      }
-    } else {
-      if (tweak?.current) {
-        startTweaks();
-      }
-    }
-  }, [closeEdit]);
-
   useEffect(() => {
     filterNodes();
   }, []);
@@ -132,20 +110,6 @@ export default function ApiModal({
     });
   }
 
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setCloseEdit("");
-      setTweak([]);
-      closePopUp();
-    }
-  }
-
-  function startTweaks() {
-    const t = buildTweaks(flow);
-    tweak?.current?.push(t);
-  }
-
   function filterNodes() {
     let arrNodesWithValues = [];
 
@@ -493,7 +457,6 @@ export default function ApiModal({
                                                         t.data.node.template[
                                                           n
                                                         ].value = e;
-                                                        setEnabled(e);
                                                         buildTweakObject(
                                                           t["data"]["id"],
                                                           e,

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -3,7 +3,6 @@ import { useContext, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
-import { PopUpContext } from "../../../../contexts/popUpContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
@@ -19,7 +18,6 @@ import DisclosureComponent from "../DisclosureComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
-  const { openPopUp } = useContext(PopUpContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow } =
     useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
@@ -56,6 +54,7 @@ export default function ExtraSidebar() {
       return ret;
     });
   }
+  const flow = flows.find((f) => f.id === tabId);
 
   return (
     <div className="side-bar-arrangement">
@@ -64,7 +63,6 @@ export default function ExtraSidebar() {
           <button
             className="extra-side-bar-buttons"
             onClick={() => {
-              // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
@@ -86,18 +84,23 @@ export default function ExtraSidebar() {
           </ExportModal>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
-          <ApiModal flow={flows.find((f) => f.id === tabId)}>
-            <button className={classNames("extra-side-bar-buttons")}>
-              <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
-            </button>
-          </ApiModal>
+          {flow && flow.data && (
+            <ApiModal flow={flow}>
+              <button className={classNames("extra-side-bar-buttons")}>
+                <Code2
+                  strokeWidth={1.5}
+                  className="side-bar-button-size"
+                ></Code2>
+              </button>
+            </ApiModal>
+          )}
         </ShadTooltip>
 
         <ShadTooltip content="Save" side="top">
           <button
             className="extra-side-bar-buttons"
             onClick={(event) => {
-              saveFlow(flows.find((f) => f.id === tabId));
+              saveFlow(flow);
               setSuccessData({ title: "Changes saved successfully" });
             }}
             disabled={!isPending}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -108,99 +108,6 @@ const NodeToolbarComponent = (props) => {
               </button>
             </EditNodeModal>
           </ShadTooltip>
-
-          {/*
-          <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
-              <div>
-                <Menu.Button className="flex items-center">
-                  <EllipsisVerticalIcon
-                    className="w-5 h-5 "
-                    aria-hidden="true"
-                  />
-                </Menu.Button>
-              </div>
-
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items className="absolute z-40 mt-2 w-56 origin-top-right rounded-md bg-background shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none top-[28px]">
-                  <div className="py-1">
-                    <Menu.Item>
-                      {({ active }) => (
-                        <button
-                          onClick={(event) => {
-                            event.preventDefault();
-                            props.openPopUp(
-                              <EditNodeModal data={props.data} />
-                            );
-                          }}
-                          className={classNames(
-                            active
-                              ? "bg-muted text-gray-900"
-                              : "text-foreground",
-                            "w-full group flex items-center px-4 py-2 text-sm"
-                          )}
-                        >
-                          <Settings
-                            className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                            aria-hidden="true"
-                          />
-                          Edit
-                        </button>
-                      )}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => (
-                        <button
-                          onClick={(event) => {
-                            event.preventDefault();
-                            console.log(
-                              reactFlowInstance.getNode(props.data.id)
-                            );
-                            paste(
-                              {
-                                nodes: [
-                                  reactFlowInstance.getNode(props.data.id),
-                                ],
-                                edges: [],
-                              },
-                              {
-                                x: 50,
-                                y: 10,
-                                paneX: reactFlowInstance.getNode(props.data.id)
-                                  .position.x,
-                                paneY: reactFlowInstance.getNode(props.data.id)
-                                  .position.y,
-                              }
-                            );
-                          }}
-                          className={classNames(
-                            active
-                              ? "bg-muted text-gray-900"
-                              : "text-foreground",
-                            "w-full group flex items-center px-4 py-2 text-sm"
-                          )}
-                        >
-                          <DocumentDuplicateIcon
-                            className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                            aria-hidden="true"
-                          />
-                          Duplicate
-                        </button>
-                      )}
-                    </Menu.Item>
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </button>
-          </Menu> */}
         </span>
       </div>
     </>