Refactor: Use a single array of shortcuts to prevent bugs on MACOS

src/frontend/src/constants/constants.ts

@@ -815,27 +815,6 @@ export const defaultShortcuts = [
   },
 ];
 
-export const unavailableShortcutss = [
-  "CTRL + R",
-  "CTRL + V",
-  "CTRL + X",
-  "CTRL + G",
-  "CTRL + SHIFT + A",
-  "CTRL + Q",
-  "CTRL + SHIFT + U",
-  "CTRL + C",
-  "CTRL + D",
-  "CTRL + SHIFT + S",
-  "CTRL + SHIFT + D",
-  "CTRL + S",
-  "BACKSPACE",
-  "CTRL + K",
-  "CTRL + Z",
-  "CTRL + Y",
-  "CTRL + J",
-  "CTRL + U",
-  "CTRL + F",
-];
 export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
 
 export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx

@@ -37,15 +37,12 @@ export default function EditShortcutButton({
   const [key, setKey] = useState<string | null>(null);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setShortcuts = useShortcutsStore((state) => state.setShortcuts);
-  const unavaliableShortcuts = useShortcutsStore(
-    (state) => state.unavailableShortcuts,
-  );
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   function canEditCombination(newCombination: string): boolean {
     let canSave = true;
-    unavaliableShortcuts.forEach((s) => {
-      if (s.toLowerCase() === newCombination.toLowerCase()) {
+    defaultShortcuts.forEach(({ shortcut }) => {
+      if (shortcut.toLowerCase() === newCombination.toLowerCase()) {
         canSave = false;
       }
     });
@@ -65,11 +62,6 @@ export default function EditShortcutButton({
           }
           return { name: s.name, shortcut: s.shortcut };
         });
-        const unavailable = unavaliableShortcuts.map((s) => {
-          if (s.toLowerCase() === defaultCombination.toLowerCase())
-            return (s = key.toUpperCase());
-          return s;
-        });
         const fixCombination = key.split(" ");
         if (
           fixCombination[0].toLowerCase().includes("ctrl") ||
@@ -79,23 +71,16 @@ export default function EditShortcutButton({
         }
         const shortcutName = shortcut[0].split(" ")[0].toLowerCase();
         setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase());
-        console.log(newCombination);
-        setShortcuts(newCombination, unavailable);
-        setOpen(false);
-        setSuccessData({
-          title: `${shortcut[0]} shortcut successfully changed`,
-        });
-        setKey(null);
-        localStorage.removeItem("langflow-shortcuts");
-        localStorage.removeItem("langflow-UShortcuts");
+        setShortcuts(newCombination);
         localStorage.setItem(
           "langflow-shortcuts",
           JSON.stringify(newCombination),
         );
-        localStorage.setItem(
-          "langflow-UShortcuts",
-          JSON.stringify(unavailable),
-        );
+        setKey(null);
+        setOpen(false);
+        setSuccessData({
+          title: `${shortcut[0]} shortcut successfully changed`,
+        });
         return;
       }
     }

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

@@ -3,10 +3,7 @@ import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Button } from "../../../../components/ui/button";
-import {
-  defaultShortcuts,
-  unavailableShortcutss,
-} from "../../../../constants/constants";
+import { defaultShortcuts } from "../../../../constants/constants";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import EditShortcutButton from "./EditShortcutButton";
 
@@ -45,9 +42,8 @@ export default function ShortcutsPage() {
   const [open, setOpen] = useState(false);
 
   function handleRestore() {
-    setShortcuts(defaultShortcuts, unavailableShortcutss);
+    setShortcuts(defaultShortcuts);
     localStorage.removeItem("langflow-shortcuts");
-    localStorage.removeItem("langflow-UShortcuts");
   }
 
   return (

src/frontend/src/stores/shortcuts.ts

@@ -1,15 +1,11 @@
 import { create } from "zustand";
-import {
-  defaultShortcuts,
-  unavailableShortcutss,
-} from "../constants/constants";
+import { defaultShortcuts } from "../constants/constants";
 import { shortcutsStoreType } from "../types/store";
 
 export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
-  unavailableShortcuts: unavailableShortcutss,
   shortcuts: defaultShortcuts,
-  setShortcuts: (newShortcuts, unavailable) => {
-    set({ shortcuts: newShortcuts, unavailableShortcuts: unavailable });
+  setShortcuts: (newShortcuts) => {
+    set({ shortcuts: newShortcuts });
   },
   undo: "mod+z",
   redo: "mod+y",
@@ -38,7 +34,6 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   getShortcutsFromStorage: () => {
     if (localStorage.getItem("langflow-shortcuts")) {
       const savedShortcuts = localStorage.getItem("langflow-shortcuts");
-      const savedUShortcuts = localStorage.getItem("langflow-UShortcuts");
       const savedArr = JSON.parse(savedShortcuts!);
       savedArr.forEach(({ name, shortcut }) => {
         let shortcutName = name.split(" ")[0].toLowerCase();
@@ -46,10 +41,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
           [shortcutName]: shortcut,
         });
       });
-      get().setShortcuts(
-        JSON.parse(savedShortcuts!),
-        JSON.parse(savedUShortcuts!),
-      );
+      get().setShortcuts(JSON.parse(savedShortcuts!));
     }
   },
 }));

src/frontend/src/types/store/index.ts

@@ -44,10 +44,8 @@ export type shortcutsStoreType = {
     name: string;
     shortcut: string;
   }>;
-  unavailableShortcuts: string[];
   setShortcuts: (
     newShortcuts: Array<{ name: string; shortcut: string }>,
-    unavailable: string[],
   ) => void;
   getShortcutsFromStorage: () => void;
 };

src/frontend/src/utils/styleUtils.ts

@@ -541,7 +541,6 @@ export const nodeIconsLucide: iconsType = {
   FolderIcon,
   Discord: FaDiscord,
   PaperclipIcon,
-  RotateCcw,
   Settings,
   Streamlit,
 };