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

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -6,8 +6,7 @@ import {
   Settings2,
   Undo,
 } from "lucide-react";
-import { useContext } from "react";
-import { PopUpContext } from "../../../../contexts/popUpContext";
+import { useContext, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import {
   DropdownMenu,
@@ -26,8 +25,8 @@ import { Button } from "../../../ui/button";
 export const MenuBar = ({ flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
   const { setErrorData } = useContext(alertContext);
-  const { openPopUp } = useContext(PopUpContext);
   const { undo, redo } = useContext(undoRedoContext);
+  const [openSettings, setOpenSettings] = useState(false);
 
   const navigate = useNavigate();
 
@@ -69,15 +68,17 @@ export const MenuBar = ({ flows, tabId }) => {
               <Plus className="header-menu-options" />
               New
             </DropdownMenuItem>
+
             <DropdownMenuItem
               onClick={() => {
-                openPopUp(<FlowSettingsModal />);
+                setOpenSettings(true);
               }}
               className="cursor-pointer"
             >
               <Settings2 className="header-menu-options " />
               Settings
             </DropdownMenuItem>
+
             <DropdownMenuItem
               onClick={() => {
                 undo();
@@ -96,32 +97,12 @@ export const MenuBar = ({ flows, tabId }) => {
               <Redo className="header-menu-options " />
               Redo
             </DropdownMenuItem>
-            {/* <DropdownMenuSeparator /> */}
-            {/* <DropdownMenuLabel>Projects</DropdownMenuLabel> */}
-            {/* <DropdownMenuRadioGroup className="max-h-full overflow-scroll"
-              value={tabId}
-              onValueChange={(value) => {
-                setTabId(value);
-              }}
-            >
-              {flows.map((flow, idx) => {
-                return (
-                  <Link
-                    to={"/flow/" + flow.id}
-                    className="flex w-full items-center"
-                  >
-                    <DropdownMenuRadioItem
-                      value={flow.id}
-                      className="flex-1 w-full inline-block truncate break-words mr-2"
-                    >
-                      {flow.name}
-                    </DropdownMenuRadioItem>
-                  </Link>
-                );
-              })}
-            </DropdownMenuRadioGroup> */}
           </DropdownMenuContent>
         </DropdownMenu>
+        <FlowSettingsModal
+          open={openSettings}
+          setOpen={setOpenSettings}
+        ></FlowSettingsModal>
       </div>
     </div>
   );

src/frontend/src/modals/baseModal/index.tsx

@@ -41,7 +41,7 @@ interface BaseModalProps {
   children: [
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
-    React.ReactElement<TriggerProps>,
+    React.ReactElement<TriggerProps>?,
     React.ReactElement<FooterProps>?
   ];
   open?: boolean;
@@ -99,7 +99,9 @@ function BaseModal({
   //UPDATE COLORS AND STYLE CLASSSES
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className="w-full">{triggerChild}</DialogTrigger>
+      <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
+        {triggerChild}
+      </DialogTrigger>
       <DialogContent className={minWidth}>
         {headerChild}
         <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -2,16 +2,18 @@ import { Settings2 } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
-import { DialogTitle } from "../../components/ui/dialog";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import BaseModal from "../baseModal";
 
-export default function FlowSettingsModal() {
-  const [open, setOpen] = useState(true);
-  const { closePopUp } = useContext(PopUpContext);
+export default function FlowSettingsModal({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
   const { flows, tabId, updateFlow, setTabsState, saveFlow } =
@@ -21,33 +23,23 @@ export default function FlowSettingsModal() {
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
   function handleClick() {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
     savedFlow.description = description;
     saveFlow(savedFlow);
     setSuccessData({ title: "Changes saved successfully" });
-    closePopUp();
+    setOpen(false);
   }
   return (
-    <BaseModal open={true} setOpen={setModalOpen} size="smaller">
+    <BaseModal open={open} setOpen={setOpen} size="smaller">
       <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">Settings</span>
-          <Settings2
-            strokeWidth={1.5}
-            className="h-6 w-6 pl-1 text-primary "
-            aria-hidden="true"
-          />
-        </DialogTitle>
+        <span className="pr-2">Settings</span>
+        <Settings2
+          strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings