refactor: update keyboard shortcuts display (#3316)

* remove repeated code * refactor: remove useless code * feat: sort input parameters in GenericNode renderInputParameter * refactor: remove unused code in GenericNode component * refactor: add NodeName component for displaying and editing node names * refactor: add NodeDescription component for displaying and editing node descriptions * fix import and add autofocus on nodeName * feat: add NodeStatus component for displaying and managing node status * [autofix.ci] apply automated fixes * refactor: remove unused code in GenericNode component * fix bugs on minimize * [autofix.ci] apply automated fixes * refactor: remove unused code and handle count in GenericNodeToolbar component * refactor: Add useShortcuts hook for handling keyboard shortcuts in nodeToolbarComponent * refactor: Add keyboard shortcuts handling to nodeToolbarComponent need to test * refactor: Update FreezeAllVertices function in NodeToolbarComponent * feat: Add getNodeLength function to calculate the length of a node's template fields * refactor: Update RenderIcons component to use navigator.platform for detecting macOS * refactor: Add ShortcutDisplay component to nodeToolbarComponent * refactor: Update nodeToolbarComponent to remove RenderIcons and add ShortcutDisplay * refactor: Improve keyboard shortcuts handling in nodeToolbarComponent * [autofix.ci] apply automated fixes * refactor: Add OptionIcon to nodeIconsLucide * feat: Add SHORTCUT_KEYS constant * feat: Add SHORTCUT_KEYS constant * refactor: Add RenderKey component for rendering keyboard shortcuts * refactor: Update RenderIcons component to use RenderKey for rendering keyboard shortcuts * update shortcut page to use shortcut icons * [autofix.ci] apply automated fixes * Update Astra link in README.md (#3314) * Update link in README.md * Update README.md * Update getting-started-installation.md * Update README.KR.md * Update README.ja.md * refactor: Simplify NodeToolbarComponent's save flow logic * [autofix.ci] apply automated fixes * feat: Google Drive Search Component (#3319) * feat: Google Drive Search Component feat: Google Drive Search Component Ability to search Google Drive and get back the relevant Doc id or Doc urls * Updated Google Drive Search.py * feat: Add support for metadata filtering and namespaces for the Upstash Vector component (#3254) * feat: add metadata filtering and namespace support for the upstash vector component * docs: add upstash vector to the vectorstores doc * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * ci: Update pytest configuration and add pytest-flakefinder. (#3330) * chore: Refactor NodeToolbarComponent to simplify code structure * [autofix.ci] apply automated fixes * refactor: Simplify NodeToolbarComponent's save flow logic * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Alex Leventer <3254549+alexleventer@users.noreply.github.com> Co-authored-by: Edwin Jose <edwin.jose@datastax.com> Co-authored-by: ytkimirti <yusuftaha9@gmail.com> Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
langflow-ai · Aug 14, 2024 · 0e2f277 · 0e2f277
1 parent 7fe6c53
commit 0e2f277
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 85 deletions.
diff --git a/src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx b/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>
+  );
+}
diff --git a/src/frontend/src/components/renderIconComponent/index.tsx b/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>
   );
 }
diff --git a/src/frontend/src/constants/constants.ts b/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"];
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx b/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>
   );

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/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>
   );

diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx b/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 />;
+}
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx b/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>

diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/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}

diff --git a/src/frontend/src/utils/styleUtils.ts b/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,
 };
diff --git a/src/frontend/src/utils/utils.ts b/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;
+  });
+}