From 3baca9b89bb9236e6288a77e79e074e590c1b03f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 28 Mar 2024 23:37:24 -0300
Subject: [PATCH] Fix useState initialization and update keyboard shortcut for
 download button

---
 .../components/nodeToolbarComponent/index.tsx | 32 +++++++------------
 src/frontend/src/utils/reactflowUtils.ts      |  2 +-
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 76506f051..ddbd9866e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -86,7 +86,7 @@ export default function NodeToolbarComponent({
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
-  const [flowComponent, setFlowComponent] = useState<FlowType>();
+  const [flowComponent, setFlowComponent] = useState<FlowType>(createFlowComponent(cloneDeep(data), version));
 
   const openInNewTab = (url) => {
     window.open(url, "_blank", "noreferrer");
@@ -286,7 +286,7 @@ export default function NodeToolbarComponent({
         event.preventDefault();
         setShowconfirmShare((state) => !state);
       }
-      if (selected && (event.ctrlKey || event.metaKey) && event.key === "q") {
+      if (selected && (event.ctrlKey || event.metaKey) && event.shiftKey &&  event.key === "q") {
         event.preventDefault();
         if (isMinimal) {
           setShowState((show) => !show);
@@ -512,7 +512,7 @@ export default function NodeToolbarComponent({
                     isMac={navigator.userAgent.toUpperCase().includes("MAC")}
                     icon="Download"
                     styleObj={{ iconClasses: "relative top-0.5 mr-2 h-4 w-4" }}
-                    keyboardKey={"j"} dataTestId={"Dowload-button-nodeToolbar"} />
+                    keyboardKey={"J"} dataTestId={"Dowload-button-nodeToolbar"} />
                 </SelectItem>
               )}
               <SelectItem
@@ -530,24 +530,14 @@ export default function NodeToolbarComponent({
               </SelectItem>
               {isMinimal && (
                 <SelectItem value={"show"}>
-                  <div className="flex">
-                    <IconComponent
-                      name={showNode ? "Minimize2" : "Maximize2"}
-                      className="relative top-0.5 mr-2 h-4 w-4"
-                    />
-                    {showNode ? "Minimize" : "Expand"}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[1.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
-                    ) : (
-                      <span className="absolute right-[1.30rem] top-[0.40em] stroke-2">
-                        Ctrl +{" "}
-                      </span>
-                    )}
-                    <span className="absolute right-2 top-[0.46em]">Q</span>
-                  </div>
+                  <ToolbarSelectItem
+                    icon={showNode ? "Minimize2" : "Maximize2"}
+                    value={showNode ? "Minimize" : "Expand"}
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    shift={true} 
+                    keyboardKey={"Q"} 
+                    dataTestId={"minimize-button-nodeToolbar"}
+                  />
                 </SelectItem>
               )}
               {isGroup && (
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 0c74979a5..1a803bf82 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1170,7 +1170,7 @@ export function downloadNode(NodeFLow: FlowType) {
     type: "application/json",
   });
   element.href = URL.createObjectURL(file);
-  element.download = `${NodeFLow.name}.json`;
+  element.download = `${NodeFLow?.name??"node"}.json`;
   element.click();
 }