From 1796e349c24ee81610ba842ef53973ca511bdc79 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 21 Sep 2023 20:03:47 -0300
Subject: [PATCH] fix(nodeToolbarComponent): fix indentation and formatting
 issues in the code feat(nodeToolbarComponent): add support for minimal mode
 in the toolbar feat(nodeToolbarComponent): add functionality to show/hide
 advanced options in the toolbar

---
 .../components/nodeToolbarComponent/index.tsx | 96 +++++++++++--------
 1 file changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 953b5d54f..e1e3bd5c4 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -46,7 +46,7 @@ export default function NodeToolbarComponent({
     if (countHandles > 1) return false;
     return true;
   }
-
+  const isMinimal = canMinimize();
   const { paste } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@@ -131,49 +131,67 @@ export default function NodeToolbarComponent({
             </a>
           </ShadTooltip>
 
-          <Select onValueChange={handleSelectChange} value={selectedValue}>
-            <ShadTooltip content="More" side="top">
-              <SelectTrigger>
-                <div>
-                  <div
-                    className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
-                        (nodeLength == 0
-                          ? " text-muted-foreground"
-                          : " text-foreground")
-                    )}
-                  >
-                    <IconComponent
-                      name="MoreHorizontal"
-                      className="relative left-2 h-4 w-4"
-                    />
+          {isMinimal ? (
+            <Select onValueChange={handleSelectChange} value={selectedValue}>
+              <ShadTooltip content="More" side="top">
+                <SelectTrigger>
+                  <div>
+                    <div
+                      className={classNames(
+                        "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
+                          (nodeLength == 0
+                            ? " text-muted-foreground"
+                            : " text-foreground")
+                      )}
+                    >
+                      <IconComponent
+                        name="MoreHorizontal"
+                        className="relative left-2 h-4 w-4"
+                      />
+                    </div>
                   </div>
-                </div>
-              </SelectTrigger>
-            </ShadTooltip>
-            <SelectContent>
-              <SelectItem value={getRandomKeyByssmm() + "advanced"}>
-                <div className="flex">
-                  <IconComponent
-                    name="Settings2"
-                    className="relative top-0.5 mr-2 h-4 w-4"
-                  />{" "}
-                  Edit{" "}
-                </div>{" "}
-              </SelectItem>
-              {canMinimize() && (
-                <SelectItem value={getRandomKeyByssmm() + "show"}>
+                </SelectTrigger>
+              </ShadTooltip>
+              <SelectContent>
+                <SelectItem value={getRandomKeyByssmm() + "advanced"}>
                   <div className="flex">
                     <IconComponent
-                      name={showNode ? "Minimize2" : "Maximize2"}
+                      name="Settings2"
                       className="relative top-0.5 mr-2 h-4 w-4"
-                    />
-                    {showNode ? "Minimize" : "Expand"}
-                  </div>
+                    />{" "}
+                    Edit{" "}
+                  </div>{" "}
                 </SelectItem>
-              )}
-            </SelectContent>
-          </Select>
+                {isMinimal && (
+                  <SelectItem value={getRandomKeyByssmm() + "show"}>
+                    <div className="flex">
+                      <IconComponent
+                        name={showNode ? "Minimize2" : "Maximize2"}
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />
+                      {showNode ? "Minimize" : "Expand"}
+                    </div>
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          ) : (
+            <ShadTooltip content="Edit" side="top">
+              <div>
+                <button
+                  onClick={() => setShowModalAdvanced(true)}
+                  className={classNames(
+                    "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1  ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
+                      (nodeLength == 0
+                        ? " text-muted-foreground"
+                        : " text-foreground")
+                  )}
+                >
+                  <IconComponent name="Settings2" className="h-4 w-4 " />
+                </button>
+              </div>
+            </ShadTooltip>
+          )}
 
           {showModalAdvanced && (
             <EditNodeModal