From 742ebae87855de5e64c43f7cdac6638a1e3c8796 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 22 Sep 2023 14:32:43 -0300
Subject: [PATCH] feat(nodeToolbarComponent): add "Save" option to the select
 dropdown in the node toolbar component to allow saving changes made to the
 node fix(styleUtils): import the "SaveAll" icon from lucide-react to be used
 in the nodeIconsLucide object

---
 .../components/nodeToolbarComponent/index.tsx | 103 ++++++++----------
 src/frontend/src/utils/styleUtils.ts          |   2 +
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index e1e3bd5c4..14984a974 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -131,67 +131,58 @@ export default function NodeToolbarComponent({
             </a>
           </ShadTooltip>
 
-          {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>
+          <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>
-                </SelectTrigger>
-              </ShadTooltip>
-              <SelectContent>
-                <SelectItem value={getRandomKeyByssmm() + "advanced"}>
+                </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>
+              <SelectItem value={getRandomKeyByssmm() + "advanced"}>
+                <div className="flex">
+                  <IconComponent
+                    name="SaveAll"
+                    className="relative top-0.5 mr-2 h-4 w-4"
+                  />{" "}
+                  Save{" "}
+                </div>{" "}
+              </SelectItem>
+              {isMinimal && (
+                <SelectItem value={getRandomKeyByssmm() + "show"}>
                   <div className="flex">
                     <IconComponent
-                      name="Settings2"
+                      name={showNode ? "Minimize2" : "Maximize2"}
                       className="relative top-0.5 mr-2 h-4 w-4"
-                    />{" "}
-                    Edit{" "}
-                  </div>{" "}
+                    />
+                    {showNode ? "Minimize" : "Expand"}
+                  </div>
                 </SelectItem>
-                {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>
-          )}
+              )}
+            </SelectContent>
+          </Select>
 
           {showModalAdvanced && (
             <EditNodeModal
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 14bafb78b..32ec86dd6 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -60,6 +60,7 @@ import {
   Redo,
   Rocket,
   Save,
+  SaveAll,
   Scissors,
   Search,
   Settings2,
@@ -318,4 +319,5 @@ export const nodeIconsLucide: iconsType = {
   Square,
   Minimize2,
   Maximize2,
+  SaveAll,
 };