From 60dba48703e82639a2283c3e42c0ecfcfb7ed347 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 6 May 2024 19:03:01 -0300
Subject: [PATCH] Feat: make possible to change all nodes shortcuts

---
 src/frontend/src/constants/constants.ts       |  1 +
 .../components/nodeToolbarComponent/index.tsx | 36 ++++++++-----------
 .../pages/ShortcutsPage/index.tsx             |  2 ++
 src/frontend/src/stores/shortcuts.ts          |  2 ++
 src/frontend/src/types/store/index.ts         |  4 ++-
 5 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 4279c71d2..da2ad92be 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -886,4 +886,5 @@ export const unavailableShortcutss = [
   "CTRL + Z",
   "CTRL + Y",
   "CTRL + J",
+  "CTRL + U",
 ];
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index c91f22049..7d737b045 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -153,16 +153,19 @@ export default function NodeToolbarComponent({
   const save = useShortcutsStore((state) => state.save);
   const docs = useShortcutsStore((state) => state.docs);
   const code = useShortcutsStore((state) => state.code);
+  const group = useShortcutsStore((state) => state.group);
+  const update = useShortcutsStore((state) => state.update);
+  const download = useShortcutsStore((state) => state.download);
 
   useHotkeys(minimize, handleMinimizeWShortcut);
-  useHotkeys("mod+u", handleUpdateWShortcut);
-  useHotkeys("mod+g", handleGroupWShortcut);
+  useHotkeys(update, handleUpdateWShortcut);
+  useHotkeys(group, handleGroupWShortcut);
   useHotkeys(share, handleShareWShortcut);
   useHotkeys(code, handleCodeWShortcut);
   useHotkeys(advanced, handleAdvancedWShortcut);
   useHotkeys(save, handleSaveWShortcut);
   useHotkeys(docs, handleDocsWShortcut);
-  useHotkeys("mod+j", handleDownloadWShortcut);
+  useHotkeys(download, handleDownloadWShortcut);
   useHotkeys("space", handleCodeWShortcut);
 
   const isMinimal = numberOfHandles <= 1;
@@ -612,24 +615,15 @@ export default function NodeToolbarComponent({
               )}
               {isGroup && (
                 <SelectItem value="ungroup">
-                  <div className="flex">
-                    <IconComponent
-                      name="Ungroup"
-                      className="relative top-0.5 mr-2 h-4 w-4 "
-                    />{" "}
-                    <span className="">Ungroup</span>{" "}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[1.15rem] 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.43em]">G</span>
-                  </div>
+                  <ToolbarSelectItem
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Group")?.shortcut!
+                    }
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    value={"Ungroup"}
+                    icon={"Ungroup"}
+                    dataTestId="group-button-modal"
+                  />
                 </SelectItem>
               )}
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 9e6580741..2f84b3738 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -25,11 +25,13 @@ export default function ShortcutsPage() {
       headerCheckboxSelection: true,
       checkboxSelection: true,
       showDisabledCheckboxes: true,
+      resizable: false,
     }, //This column will be twice as wide as the others
     {
       field: "shortcut",
       flex: 2,
       editable: false,
+      resizable: false,
     },
   ]);
 
diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts
index 7b817c3f3..2c2391417 100644
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@@ -27,6 +27,8 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   cut: "mod+x",
   paste: "mod+v",
   api: "mod+r",
+  update: "mod+u",
+  download: "mod+j",
   updateUniqueShortcut: (name, combination) => {
     set({
       [name]: combination,
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index fd847c165..5cf866db7 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -37,6 +37,8 @@ export type shortcutsStoreType = {
   docs: string;
   save: string;
   delete: string;
+  update: string;
+  download: string;
   shortcuts: Array<{
     name: string;
     shortcut: string;
@@ -44,6 +46,6 @@ export type shortcutsStoreType = {
   unavailableShortcuts: string[];
   setShortcuts: (
     newShortcuts: Array<{ name: string; shortcut: string }>,
-    unavailable: string[]
+    unavailable: string[],
   ) => void;
 };