Back button added, chevron with dropdown added to flow name

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

@@ -1,18 +1,26 @@
 import React, { useContext } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { PopUpContext } from "../../../../contexts/popUpContext";
-import { Save, Edit, Upload, Download, Code, Plus } from "lucide-react";
 import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarLabel,
-  MenubarSeparator,
-} from "../../../ui/menubar";
+  Save,
+  Edit,
+  Upload,
+  Download,
+  Code,
+  Plus,
+  ChevronDown,
+  ChevronLeft,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "../../../ui/dropdown-menu";
 
 import RenameLabel from "../../../ui/rename-label";
 import _ from "lodash";
@@ -23,7 +31,7 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
 import { Link } from "react-router-dom";
 
-export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
+export const MenuBar = ({ setRename, rename, flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
   const { setErrorData } = useContext(alertContext);
   const { openPopUp } = useContext(PopUpContext);
@@ -47,109 +55,102 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
   }
   let current_flow = flows.find((flow) => flow.id === tabId);
 
-  // robot emoji
-  let emoji = current_flow.style?.emoji || "🤖";
-  let color = current_flow.style?.color || "bg-blue-200";
-
   return (
-          <Menubar>
-            <MenubarMenu>
-              <MenubarTrigger className="px-1">
-              <RenameLabel
-              value={current_flow.name}
-              setValue={(value) => {
-                if (value !== "") {
-                  let newFlow = _.cloneDeep(current_flow);
-                  newFlow.name = value;
-                  updateFlow(newFlow);
-                }
+    <div className="flex gap-2 items-center">
+      <Link to="/">
+        <ChevronLeft className="w-5" />
+      </Link>
+      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 bg-background gap-0.5">
+        <RenameLabel
+          value={current_flow.name}
+          setValue={(value) => {
+            if (value !== "") {
+              let newFlow = _.cloneDeep(current_flow);
+              newFlow.name = value;
+              updateFlow(newFlow);
+            }
+          }}
+          rename={rename}
+          setRename={setRename}
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger className="px-1">
+            <ChevronDown className="w-4 h-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-44">
+            <DropdownMenuLabel>File</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => {
+                openPopUp(<ImportModal />);
               }}
-              rename={rename}
-              setRename={setRename}
-            />
-            
-              </MenubarTrigger>
-              <MenubarContent>
-                <MenubarLabel>
-                  File
-                </MenubarLabel>
-                <MenubarItem
-                  onClick={() => {
-                    openPopUp(<ImportModal />);
-                  }}
-                >
-                  <Upload className="w-4 h-4 mr-2" />
-                  Import
-                </MenubarItem>
-                <MenubarItem
-                  onClick={() => {
-                    openPopUp(<ExportModal />);
-                  }}
-                >
-                  <Download className="w-4 h-4 mr-2" />
-                  Export
-                </MenubarItem>
-                <MenubarItem
-                  onClick={() => {
-                    openPopUp(<ApiModal flow={current_flow} />);
-                  }}
-                >
-                  <Code className="w-4 h-4 mr-2" />
-                  Code
-                </MenubarItem>
-                <MenubarSeparator />
-                <MenubarLabel>
-                  Edit
-                </MenubarLabel>
-                <MenubarItem
-                  onClick={() => {
-                    handleSaveFlow(current_flow);
-                  }}
-                >
-                  <Save className="w-4 h-4 mr-2" />
-                  Save
-                </MenubarItem>
-                <MenubarItem
-                  onClick={() => {
-                    setRename(true);
-                  }}
-                >
-                  <Edit className="w-4 h-4 mr-2" />
-                  Rename
-                </MenubarItem>
-                <MenubarSeparator />
-                <MenubarLabel>
-                  Flows
-                </MenubarLabel>
-                <MenubarRadioGroup
-                  value={tabId}
-                  onValueChange={(value) => {
-                    setTabId(value);
-                  }}
-                >
-                  {flows.map((flow, idx) => {
-                    return (
-                      <Link to={"/flow/" + flow.id}>
-                  <MenubarRadioItem value={flow.id}>
-                        {emoji} {flow.name}
-                      </MenubarRadioItem>
-                </Link>
-                      
-                    );
-                  })}
-                </MenubarRadioGroup>
-                <MenubarItem
-                  onClick={() => {
-                    handleAddFlow();
-                  }}
-                >
-                  <Plus className="w-4 h-4 mr-2" />
-                  Add Flow
-                </MenubarItem>
-              </MenubarContent>
-            </MenubarMenu>
-            
-          </Menubar>
+            >
+              <Upload className="w-4 h-4 mr-2" />
+              Import
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                openPopUp(<ExportModal />);
+              }}
+            >
+              <Download className="w-4 h-4 mr-2" />
+              Export
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                openPopUp(<ApiModal flow={current_flow} />);
+              }}
+            >
+              <Code className="w-4 h-4 mr-2" />
+              Code
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Edit</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => {
+                handleSaveFlow(current_flow);
+              }}
+            >
+              <Save className="w-4 h-4 mr-2" />
+              Save
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setRename(true);
+              }}
+            >
+              <Edit className="w-4 h-4 mr-2" />
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Flows</DropdownMenuLabel>
+            <DropdownMenuRadioGroup
+              value={tabId}
+              onValueChange={(value) => {
+                setTabId(value);
+              }}
+            >
+              {flows.map((flow, idx) => {
+                return (
+                  <Link to={"/flow/" + flow.id}>
+                    <DropdownMenuRadioItem value={flow.id}>
+                      {flow.name}
+                    </DropdownMenuRadioItem>
+                  </Link>
+                );
+              })}
+            </DropdownMenuRadioGroup>
+            <DropdownMenuItem
+              onClick={() => {
+                handleAddFlow();
+              }}
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              Add Flow
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import { SunIcon, MoonIcon, BellIcon} from "lucide-react";
+import { SunIcon, MoonIcon, BellIcon } from "lucide-react";
 import { useContext, useState, useEffect } from "react";
 import { FaGithub } from "react-icons/fa";
 import { Button } from "../ui/button";
@@ -9,110 +9,101 @@ import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
 import MenuBar from "./components/menuBar";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 
-export default function Header(){
-    const {
-        flows,
-        addFlow,
-        removeFlow,
-        tabId,
-        setTabId,
-        uploadFlow,
-        downloadFlow,
-      } = useContext(TabsContext);
-      const { openPopUp } = useContext(PopUpContext);
-      const { templates } = useContext(typesContext);
-      const AlertWidth = 384;
-      const { dark, setDark } = useContext(darkContext);
-      const [activeTab, setActiveTab] = useState("myflow");
-      const [rename, setRename] = useState(false);
-      const { notificationCenter, setNotificationCenter, setErrorData } =
-        useContext(alertContext);
-      useEffect(() => {
-        //create the first flow
-        if (flows.length === 0 && Object.keys(templates).length > 0) {
-          addFlow();
-        }
-      }, [addFlow, flows.length, templates]);
-    return (
-        <div className="w-full h-14 flex justify-between items-center border-b bg-muted">
-          
-          <div className="flex gap-2 justify-start items-center w-96">
-          <Link to="/"><span className="text-2xl ml-4">⛓️</span></Link>
-          {flows.findIndex((f) => tabId === f.id) !== -1 && 
+export default function Header() {
+  const { flows, addFlow, tabId } = useContext(TabsContext);
+  const { openPopUp } = useContext(PopUpContext);
+  const { templates } = useContext(typesContext);
+  const { id } = useParams();
+  const AlertWidth = 384;
+  const { dark, setDark } = useContext(darkContext);
+  const [rename, setRename] = useState(false);
+  const { notificationCenter, setNotificationCenter, setErrorData } =
+    useContext(alertContext);
+  useEffect(() => {
+    //create the first flow
+    if (flows.length === 0 && Object.keys(templates).length > 0) {
+      addFlow();
+    }
+  }, [addFlow, flows.length, templates]);
+  return (
+    <div className="w-full h-12 flex justify-between items-center border-b bg-muted">
+      <div className="flex gap-2 justify-start items-center w-96">
+        <Link to="/">
+          <span className="text-2xl ml-4">⛓️</span>
+        </Link>
+        {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar
-            activeTab={activeTab}
             setRename={setRename}
             rename={rename}
             flows={flows}
             tabId={tabId}
           />
-          }
-
-          </div>
-          <div className="flex justify-end px-2 w-96">
-            <div className="ml-auto mr-2 flex gap-5">
-              <Button
-                asChild
-                variant="outline"
-                className="text-gray-600 dark:text-gray-300 "
-              >
-                <a
-                  href="https://github.com/logspace-ai/langflow"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="flex"
-                >
-                  <FaGithub className="h-5 w-5 mr-2" />
-                  Join The Community
-                </a>
-              </Button>
-              <button
-                className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-                onClick={() => {
-                  setDark(!dark);
-                }}
-              >
-                {dark ? (
-                  <SunIcon className="h-5 w-5" />
-                ) : (
-                  <MoonIcon className="h-5 w-5" />
-                )}
-              </button>
-              <button
-                className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
-                onClick={(event: React.MouseEvent<HTMLElement>) => {
-                  setNotificationCenter(false);
-                  const { top, left } = (
-                    event.target as Element
-                  ).getBoundingClientRect();
-                  openPopUp(
-                    <>
-                      <div
-                        className="z-10 absolute"
-                        style={{ top: top + 34, left: left - AlertWidth }}
-                      >
-                        <AlertDropdown />
-                      </div>
-                      <div className="h-screen w-screen fixed top-0 left-0"></div>
-                    </>
-                  );
-                }}
-              >
-                {notificationCenter && (
-                  <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
-                )}
-                <BellIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-              <button>
-                <img
-                  src="https://github.com/shadcn.png"
-                  className="rounded-full w-8"
-                />
-              </button>
-            </div>
-          </div>
+        )}
+      </div>
+      <div className="flex justify-end px-2 w-96">
+        <div className="ml-auto mr-2 flex gap-5">
+          <Button
+            asChild
+            variant="outline"
+            className="text-gray-600 dark:text-gray-300 "
+          >
+            <a
+              href="https://github.com/logspace-ai/langflow"
+              target="_blank"
+              rel="noreferrer"
+              className="flex"
+            >
+              <FaGithub className="h-5 w-5 mr-2" />
+              Join The Community
+            </a>
+          </Button>
+          <button
+            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            onClick={() => {
+              setDark(!dark);
+            }}
+          >
+            {dark ? (
+              <SunIcon className="h-5 w-5" />
+            ) : (
+              <MoonIcon className="h-5 w-5" />
+            )}
+          </button>
+          <button
+            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+            onClick={(event: React.MouseEvent<HTMLElement>) => {
+              setNotificationCenter(false);
+              const { top, left } = (
+                event.target as Element
+              ).getBoundingClientRect();
+              openPopUp(
+                <>
+                  <div
+                    className="z-10 absolute"
+                    style={{ top: top + 34, left: left - AlertWidth }}
+                  >
+                    <AlertDropdown />
+                  </div>
+                  <div className="h-screen w-screen fixed top-0 left-0"></div>
+                </>
+              );
+            }}
+          >
+            {notificationCenter && (
+              <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
+            )}
+            <BellIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+          <button>
+            <img
+              src="https://github.com/shadcn.png"
+              className="rounded-full w-8"
+            />
+          </button>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+}

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

@@ -311,7 +311,7 @@ export default function Page({ flow }: { flow: FlowType }) {
     <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
       <ExtraSidebar />
       {/* Main area */}
-      <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
+      <main className="flex-1 flex">
         {/* Primary column */}
         <div className="w-full h-full">
           <div className="w-full h-full" ref={reactFlowWrapper}>

src/frontend/src/pages/MainPage/index.tsx

@@ -29,6 +29,9 @@ export default function HomePage() {
     removeFlow,
     setTabId,
   } = useContext(TabsContext);
+  useEffect(() => {
+    setTabId("");
+  }, [])
   return (
       <div
         className="w-full h-full flex flex-col bg-muted"