From a3e7c6f8f66b1f7e6b4c538fe5866dcf3a39d205 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Fri, 1 Mar 2024 00:32:33 -0300
Subject: [PATCH] Feat: Implement ctrl s shortcut for save and override nodes

---
 .../components/nodeToolbarComponent/index.tsx | 60 ++++++++++++++-----
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index bbdd166cb..39bc6b75e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -24,6 +24,7 @@ import {
   createFlowComponent,
   downloadNode,
   expandGroupNode,
+  unselectAllNodes,
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn } from "../../../../utils/utils";
@@ -68,7 +69,7 @@ export default function NodeToolbarComponent({
   const edges = useFlowStore((state) => state.edges);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
-
+  const unselectAll = useFlowStore(state => state.unselectAll);
   const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
   const flows = useFlowsManagerStore((state) => state.flows);
   const version = useDarkStore((state) => state.version);
@@ -216,6 +217,25 @@ export default function NodeToolbarComponent({
         event.preventDefault();
         setShowModalAdvanced(state => !state);
       }
+      if (
+        selected &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "s" &&
+        isSaved
+      ) {
+        event.preventDefault();
+        return setShowOverrideModal(state => !state);
+      }
+      if (
+        selected &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "s" &&
+        hasCode
+      ) {
+        event.preventDefault();
+        saveComponent(cloneDeep(data), false);
+        unselectAll()
+      }
     }
 
     document.addEventListener("keydown", onKeyDown);
@@ -371,24 +391,34 @@ export default function NodeToolbarComponent({
 
               {isSaved ? (
                 <SelectItem value={"override"}>
-                  <div className="flex" data-testid="save-button-modal">
-                    <IconComponent
-                      name="SaveAll"
-                      className="relative top-0.5 mr-2 h-4 w-4"
-                    />{" "}
-                    Save{" "}
-                  </div>{" "}
+                  <div className="flex">
+                  <IconComponent
+                    name="Settings2"
+                    className="relative top-0.5 mr-2 h-4 w-4 "
+                  />{" "}
+                  <span className="">Save</span>{" "}
+                  <IconComponent
+                    name="Command"
+                    className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                  ></IconComponent>
+                  <span className="absolute right-2 top-[0.46em]">S</span>
+                </div>
                 </SelectItem>
               ) : (
                 hasCode && (
                   <SelectItem value={"SaveAll"}>
-                    <div className="flex" data-testid="save-button-modal">
-                      <IconComponent
-                        name="SaveAll"
-                        className="relative top-0.5 mr-2 h-4 w-4"
-                      />{" "}
-                      Save{" "}
-                    </div>{" "}
+                    <div className="flex">
+                  <IconComponent
+                    name="Settings2"
+                    className="relative top-0.5 mr-2 h-4 w-4 "
+                  />{" "}
+                  <span className="">Save</span>{" "}
+                  <IconComponent
+                    name="Command"
+                    className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                  ></IconComponent>
+                  <span className="absolute right-2 top-[0.46em]">S</span>
+                </div>
                   </SelectItem>
                 )
               )}