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,14 +55,12 @@ 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">
+    <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) => {
@@ -67,61 +73,57 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
           rename={rename}
           setRename={setRename}
         />
-            
-              </MenubarTrigger>
-              <MenubarContent>
-                <MenubarLabel>
-                  File
-                </MenubarLabel>
-                <MenubarItem
+        <DropdownMenu>
+          <DropdownMenuTrigger className="px-1">
+            <ChevronDown className="w-4 h-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-44">
+            <DropdownMenuLabel>File</DropdownMenuLabel>
+            <DropdownMenuItem
               onClick={() => {
                 openPopUp(<ImportModal />);
               }}
             >
               <Upload className="w-4 h-4 mr-2" />
               Import
-                </MenubarItem>
-                <MenubarItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={() => {
                 openPopUp(<ExportModal />);
               }}
             >
               <Download className="w-4 h-4 mr-2" />
               Export
-                </MenubarItem>
-                <MenubarItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={() => {
                 openPopUp(<ApiModal flow={current_flow} />);
               }}
             >
               <Code className="w-4 h-4 mr-2" />
               Code
-                </MenubarItem>
-                <MenubarSeparator />
-                <MenubarLabel>
-                  Edit
-                </MenubarLabel>
-                <MenubarItem
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Edit</DropdownMenuLabel>
+            <DropdownMenuItem
               onClick={() => {
                 handleSaveFlow(current_flow);
               }}
             >
               <Save className="w-4 h-4 mr-2" />
               Save
-                </MenubarItem>
-                <MenubarItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={() => {
                 setRename(true);
               }}
             >
               <Edit className="w-4 h-4 mr-2" />
               Rename
-                </MenubarItem>
-                <MenubarSeparator />
-                <MenubarLabel>
-                  Flows
-                </MenubarLabel>
-                <MenubarRadioGroup
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Flows</DropdownMenuLabel>
+            <DropdownMenuRadioGroup
               value={tabId}
               onValueChange={(value) => {
                 setTabId(value);
@@ -130,26 +132,25 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
               {flows.map((flow, idx) => {
                 return (
                   <Link to={"/flow/" + flow.id}>
-                  <MenubarRadioItem value={flow.id}>
-                        {emoji} {flow.name}
-                      </MenubarRadioItem>
+                    <DropdownMenuRadioItem value={flow.id}>
+                      {flow.name}
+                    </DropdownMenuRadioItem>
                   </Link>
-                      
                 );
               })}
-                </MenubarRadioGroup>
-                <MenubarItem
+            </DropdownMenuRadioGroup>
+            <DropdownMenuItem
               onClick={() => {
                 handleAddFlow();
               }}
             >
               <Plus className="w-4 h-4 mr-2" />
               Add Flow
-                </MenubarItem>
-              </MenubarContent>
-            </MenubarMenu>
-            
-          </Menubar>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
   );
 };
 

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

@@ -9,23 +9,15 @@ 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 { 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 [activeTab, setActiveTab] = useState("myflow");
   const [rename, setRename] = useState(false);
   const { notificationCenter, setNotificationCenter, setErrorData } =
     useContext(alertContext);
@@ -36,20 +28,19 @@ export default function Header(){
     }
   }, [addFlow, flows.length, templates]);
   return (
-        <div className="w-full h-14 flex justify-between items-center border-b bg-muted">
-          
+    <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 && 
+        <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">
@@ -114,5 +105,5 @@ export default function Header(){
         </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"