Feat: make possible to change all nodes shortcuts

src/frontend/src/constants/constants.ts

@@ -886,4 +886,5 @@ export const unavailableShortcutss = [
   "CTRL + Z",
   "CTRL + Y",
   "CTRL + J",
+  "CTRL + U",
 ];

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(update, handleUpdateWShortcut);
-  useHotkeys("mod+g", handleGroupWShortcut);
+  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">
+                  <ToolbarSelectItem
-                    <IconComponent
+                    shortcut={
-                      name="Ungroup"
+                      shortcuts.find((obj) => obj.name === "Group")?.shortcut!
-                      className="relative top-0.5 mr-2 h-4 w-4 "
+                    }
-                    />{" "}
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                    <span className="">Ungroup</span>{" "}
+                    value={"Ungroup"}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                    icon={"Ungroup"}
-                      <IconComponent
+                    dataTestId="group-button-modal"
-                        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>
                 </SelectItem>
               )}
 

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,
     },
   ]);
 

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,

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;
 };