refactor: update keyboard shortcuts display

src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx

@@ -0,0 +1,37 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
+import { IS_MAC } from "@/constants/constants";
+import { cn } from "@/utils/utils";
+
+export default function RenderKey({
+  value,
+  tableRender,
+}: {
+  value: string;
+  tableRender?: boolean;
+}): JSX.Element {
+  const check = value.toLowerCase().trim();
+  return (
+    <div>
+      {check === "shift" ? (
+        <ForwardedIconComponent
+          name="ArrowBigUp"
+          className={cn(tableRender ? "h-5 w-5" : "h-4 w-4")}
+        />
+      ) : check === "ctrl" && IS_MAC ? (
+        <span>⌃</span>
+      ) : check === "alt" && IS_MAC ? (
+        <ForwardedIconComponent
+          name="OptionIcon"
+          className={cn(tableRender ? "h-4 w-4" : "h-3 w-3")}
+        />
+      ) : check === "cmd" ? (
+        <ForwardedIconComponent
+          name="Command"
+          className={cn(tableRender ? "h-4 w-4" : "h-3 w-3")}
+        />
+      ) : (
+        <span>{value}</span>
+      )}
+    </div>
+  );
+}

src/frontend/src/components/renderIconComponent/index.tsx

@@ -1,52 +1,27 @@
-import ForwardedIconComponent from "../genericIconComponent";
+import { IS_MAC } from "@/constants/constants";
+import { addPlusSignes, cn, sortShortcuts } from "@/utils/utils";
+import RenderKey from "./components/renderKey";
 
 export default function RenderIcons({
-  isMac = navigator.platform.toUpperCase().includes("MAC"),
-  hasShift,
   filteredShortcut,
-  shortcutWPlus,
+  tableRender = false,
 }: {
-  isMac?: boolean;
-  hasShift: boolean;
   filteredShortcut: string[];
-  shortcutWPlus: string[];
+  tableRender?: boolean;
 }): JSX.Element {
-  return hasShift ? (
-    <span className="flex items-center justify-center gap-0.5 text-xs">
-      {isMac ? (
-        <ForwardedIconComponent name="Command" className="h-3 w-3" />
-      ) : (
-        filteredShortcut[0]
+  const shortcutList = addPlusSignes([...filteredShortcut].sort(sortShortcuts));
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-0.5",
+        tableRender ? "justify-start" : "justify-center text-xs",
       )}
-      <ForwardedIconComponent name="ArrowBigUp" className="h-4 w-4" />
-      {filteredShortcut.map((key, idx) => {
-        if (idx > 0) {
-          return key.toUpperCase();
-        }
-        return null;
-      })}
-    </span>
-  ) : (
-    <span className="flex items-center justify-center gap-0.5 text-xs">
-      {shortcutWPlus[0].toLowerCase() === "space" ? (
-        "Space"
-      ) : shortcutWPlus[0].length <= 1 ? (
-        shortcutWPlus[0]
-      ) : isMac ? (
-        <ForwardedIconComponent name="Command" className="h-3 w-3" />
-      ) : (
-        <span className="flex items-center">{shortcutWPlus[0]}</span>
-      )}
-      {shortcutWPlus.map((key, idx) => {
-        if (idx > 0) {
-          return (
-            <span key={idx} className="flex items-center">
-              {key.toUpperCase()}
-            </span>
-          );
-        }
-        return null;
-      })}
+    >
+      {shortcutList.map((key, index) => (
+        <span key={index}>
+          <RenderKey value={key} tableRender={tableRender} />
+        </span>
+      ))}
     </span>
   );
 }

src/frontend/src/constants/constants.ts

@@ -886,3 +886,5 @@ export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV =
 export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];
 export const NODE_WIDTH = 400;
 export const NODE_HEIGHT = NODE_WIDTH * 3;
+
+export const SHORTCUT_KEYS = ["cmd", "ctrl", "alt", "shift"];

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx

@@ -7,29 +7,14 @@ export default function ShortcutDisplay({
   name: string;
   shortcut: string;
 }): JSX.Element {
-  let hasShift: boolean = false;
   const fixedShortcut = shortcut?.split("+");
-  fixedShortcut.forEach((key) => {
-    if (key.toLowerCase().includes("shift")) {
-      hasShift = true;
-    }
-  });
-  const filteredShortcut = fixedShortcut.filter(
-    (key) => !key.toLowerCase().includes("shift"),
-  );
-  let shortcutWPlus: string[] = [];
-  if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
   return (
     <div className="flex justify-center">
       <span> {name} </span>
       <span
         className={`ml-3 flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-lg text-muted-foreground`}
       >
-        <RenderIcons
-          hasShift={hasShift}
-          filteredShortcut={filteredShortcut}
-          shortcutWPlus={shortcutWPlus}
-        />
+        <RenderIcons filteredShortcut={fixedShortcut} />
       </span>
     </div>
   );

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

@@ -11,19 +11,7 @@ export default function ToolbarSelectItem({
   ping,
   shortcut,
 }: toolbarSelectItemProps) {
-  let hasShift = false;
   const fixedShortcut = shortcut?.split("+");
-  fixedShortcut.forEach((key) => {
-    if (key.toLowerCase().includes("shift")) {
-      hasShift = true;
-    }
-  });
-  const filteredShortcut = fixedShortcut.filter(
-    (key) => !key.toLowerCase().includes("shift"),
-  );
-  let shortcutWPlus: string[] = [];
-  if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
-
   return (
     <div className={`flex ${style}`} data-testid={dataTestId}>
       <ForwardedIconComponent
@@ -40,12 +28,7 @@ export default function ToolbarSelectItem({
       <span
         className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-muted-foreground`}
       >
-        <RenderIcons
-          isMac={IS_MAC}
-          hasShift={hasShift}
-          filteredShortcut={filteredShortcut}
-          shortcutWPlus={shortcutWPlus}
-        />
+        <RenderIcons filteredShortcut={fixedShortcut} />
       </span>
     </div>
   );

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

@@ -0,0 +1,8 @@
+import RenderIcons from "@/components/renderIconComponent";
+import { CustomCellRendererProps } from "ag-grid-react";
+
+export default function CellRenderShortcuts(params: CustomCellRendererProps) {
+  const shortcut = params.value;
+  const splitShortcut = shortcut?.split("+");
+  return <RenderIcons filteredShortcut={splitShortcut} tableRender />;
+}

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import useAlertStore from "../../../../../stores/alertStore";
 
+import RenderKey from "@/components/renderIconComponent/components/renderKey";
 import ForwardedIconComponent from "../../../../../components/genericIconComponent";
 import { Button } from "../../../../../components/ui/button";
 import BaseModal from "../../../../../modals/baseModal";
@@ -11,7 +12,6 @@ export default function EditShortcutButton({
   children,
   shortcut,
   defaultShortcuts,
-  defaultCombination,
   open,
   setOpen,
   disable,
@@ -20,7 +20,6 @@ export default function EditShortcutButton({
   children: JSX.Element;
   shortcut: string[];
   defaultShortcuts: Array<{ name: string; shortcut: string }>;
-  defaultCombination: string;
   open: boolean;
   setOpen: (bool: boolean) => void;
   disable?: boolean;
@@ -161,10 +160,10 @@ export default function EditShortcutButton({
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Content>
         <div className="align-center flex h-full w-full justify-center gap-4 rounded-md border border-border py-2">
-          <div className="flex items-center justify-center text-center text-lg font-bold">
-            {key === null
-              ? shortcutInitialValue?.toUpperCase()
-              : key.toUpperCase()}
+          <div className="flex items-center justify-center gap-0.5 text-center text-lg font-bold">
+            {(key ?? shortcutInitialValue ?? "").split("+").map((k, i) => (
+              <RenderKey key={i} value={k} tableRender />
+            ))}
           </div>
         </div>
       </BaseModal.Content>

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

@@ -1,9 +1,11 @@
+import { ColDef } from "ag-grid-community";
 import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Button } from "../../../../components/ui/button";
 import { defaultShortcuts } from "../../../../constants/constants";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
+import CellRenderShortcuts from "./CellRenderWrapper";
 import EditShortcutButton from "./EditShortcutButton";
 
 export default function ShortcutsPage() {
@@ -12,7 +14,7 @@ export default function ShortcutsPage() {
   const setShortcuts = useShortcutsStore((state) => state.setShortcuts);
 
   // Column Definitions: Defines the columns to be displayed.
-  const colDefs = [
+  const colDefs: ColDef[] = [
     {
       headerName: "Functionality",
       field: "name",
@@ -26,6 +28,7 @@ export default function ShortcutsPage() {
       flex: 2,
       editable: false,
       resizable: false,
+      cellRenderer: CellRenderShortcuts,
     },
   ];
 
@@ -73,7 +76,6 @@ export default function ShortcutsPage() {
               {open && (
                 <EditShortcutButton
                   disable={selectedRows.length === 0}
-                  defaultCombination={combinationToEdit[0]?.shortcut}
                   shortcut={selectedRows}
                   defaultShortcuts={shortcuts}
                   open={open}

src/frontend/src/utils/styleUtils.ts

@@ -99,6 +99,7 @@ import {
   MoonIcon,
   MoreHorizontal,
   Network,
+  OptionIcon,
   Package2,
   Palette,
   Paperclip,
@@ -596,4 +597,6 @@ export const nodeIconsLucide: iconsType = {
   "AI/ML": AIMLIcon,
   GitLoader: GitLoaderIcon,
   athenaIcon: AthenaIcon,
+  OptionIcon: OptionIcon,
+  Option: OptionIcon,
 };

src/frontend/src/utils/utils.ts

@@ -3,7 +3,11 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
-import { MESSAGES_TABLE_ORDER, MODAL_CLASSES } from "../constants/constants";
+import {
+  MESSAGES_TABLE_ORDER,
+  MODAL_CLASSES,
+  SHORTCUT_KEYS,
+} from "../constants/constants";
 import { APIDataType, InputFieldType, VertexDataTypeAPI } from "../types/api";
 import {
   groupedObjType,
@@ -584,3 +588,35 @@ export function getNodeLength(data: NodeDataType) {
         data.node.template[templateField]?.type === "NestedDict"),
   ).length;
 }
+
+export function sortShortcuts(a: string, b: string) {
+  const order = SHORTCUT_KEYS;
+  const aTrimmed = a.trim().toLowerCase();
+  const bTrimmed = b.trim().toLowerCase();
+  const aIndex = order.indexOf(aTrimmed);
+  const bIndex = order.indexOf(bTrimmed);
+  if (aIndex === -1 && bIndex === -1) {
+    return aTrimmed.localeCompare(bTrimmed);
+  }
+  if (aIndex === -1) {
+    return 1;
+  }
+  if (bIndex === -1) {
+    return -1;
+  }
+  return aIndex - bIndex;
+}
+export function addPlusSignes(array: string[]): string[] {
+  const exceptions = SHORTCUT_KEYS;
+  // add + sign to the shortcuts beetwen characters that are not in the exceptions
+  return array.map((key, index) => {
+    if (index === 0) return key;
+    if (
+      exceptions.includes(key.trim().toLocaleLowerCase()) ||
+      exceptions.includes(array[index - 1].trim().toLocaleLowerCase())
+    )
+      return key;
+
+    return "+" + key;
+  });
+}