From 2a6c8ae92e3591707be5a1ca0caaf0d67074c80b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 5 Jun 2023 08:02:35 -0300
Subject: [PATCH] Fixed header to display options only on flow name

---
 .../src/components/ui/dropdown-menu.tsx       |  2 +-
 src/frontend/src/pages/MainPage/index.tsx     | 67 +++++++++----------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx
index c8aa60367..d13ee400e 100644
--- a/src/frontend/src/components/ui/dropdown-menu.tsx
+++ b/src/frontend/src/components/ui/dropdown-menu.tsx
@@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 pl-8 py-1.5 text-sm font-semibold",
+      "px-2 pl-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
       className
     )}
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 4d5753bd0..0cb9f7cb7 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -80,41 +80,8 @@ export default function HomePage() {
         className="w-full h-full flex flex-col"
       >
         <TabsList className="w-full flex justify-between items-center border-b">
-          <div className="flex gap-2 justify-start w-96">
-            <DropdownMenu>
-              <DropdownMenuTrigger className="flex items-center gap-2 text-xl bg-foreground px-2 py-1 font-semibold text-secondary">
-                <span className="text-2xl">⛓️</span>{" "}
-                <ChevronDownIcon className="w-3" />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-40">
-                <DropdownMenuLabel>Flow</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={() => {
-                    openPopUp(<ImportModal />);
-                  }}
-                >
-                  <ArrowUpTrayIcon className="w-4 h-4 mr-2" />
-                  Import
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => {
-                    openPopUp(<ExportModal />);
-                  }}
-                >
-                  <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
-                  Export
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => {
-                    openPopUp(<ApiModal flowName={flows[tabIndex].name} />);
-                  }}
-                >
-                  <CodeBracketSquareIcon className="w-4 h-4 mr-2" />
-                  Code
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+          <div className="flex gap-2 justify-start items-center w-96">
+            <span className="text-2xl ml-4">⛓️</span>
             <div className="flex gap-2 p-2">
               <TabsTrigger value="myflow" className="flex items-center gap-2">
                 {flows[tabIndex].name}
@@ -123,6 +90,33 @@ export default function HomePage() {
                     <ChevronDownIcon className="w-3" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent className="w-40">
+                    <DropdownMenuLabel>Current Flow</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        openPopUp(<ImportModal />);
+                      }}
+                    >
+                      <ArrowUpTrayIcon className="w-4 h-4 mr-2" />
+                      Import
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        openPopUp(<ExportModal />);
+                      }}
+                    >
+                      <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
+                      Export
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        openPopUp(<ApiModal flowName={flows[tabIndex].name} />);
+                      }}
+                    >
+                      <CodeBracketSquareIcon className="w-4 h-4 mr-2" />
+                      Code
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel>Flows</DropdownMenuLabel>
                     <DropdownMenuRadioGroup
                       value={tabIndex.toString()}
                       onValueChange={(value) => {
@@ -132,12 +126,11 @@ export default function HomePage() {
                       {flows.map((flow, idx) => {
                         return (
                           <DropdownMenuRadioItem value={idx.toString()}>
-                            {flow.name}
+                            <span onDoubleClick={() => {}}>{flow.name}</span>
                           </DropdownMenuRadioItem>
                         );
                       })}
                     </DropdownMenuRadioGroup>
-                    <DropdownMenuSeparator />
                     <DropdownMenuItem
                       onClick={() => {
                         addFlow();