From 0e2f27736cefa0030c87bb5db832860a1d380d80 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 14 Aug 2024 12:28:46 -0300 Subject: [PATCH] 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 Co-authored-by: ytkimirti Co-authored-by: Gabriel Luiz Freitas Almeida --- .../components/renderKey/index.tsx | 37 ++++++++++++ .../components/renderIconComponent/index.tsx | 59 ++++++------------- src/frontend/src/constants/constants.ts | 2 + .../shortcutDisplay/index.tsx | 17 +----- .../toolbarSelectItem/index.tsx | 19 +----- .../ShortcutsPage/CellRenderWrapper/index.tsx | 8 +++ .../EditShortcutButton/index.tsx | 11 ++-- .../pages/ShortcutsPage/index.tsx | 6 +- src/frontend/src/utils/styleUtils.ts | 3 + src/frontend/src/utils/utils.ts | 38 +++++++++++- 10 files changed, 115 insertions(+), 85 deletions(-) create mode 100644 src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx create mode 100644 src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx diff --git a/src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx b/src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx new file mode 100644 index 000000000..cce339eb2 --- /dev/null +++ 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 ( +
+ {check === "shift" ? ( + + ) : check === "ctrl" && IS_MAC ? ( + ⌃ + ) : check === "alt" && IS_MAC ? ( + + ) : check === "cmd" ? ( + + ) : ( + {value} + )} +
+ ); +} diff --git a/src/frontend/src/components/renderIconComponent/index.tsx b/src/frontend/src/components/renderIconComponent/index.tsx index ec17cc187..d64426b40 100644 --- 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 ? ( - - {isMac ? ( - - ) : ( - filteredShortcut[0] + const shortcutList = addPlusSignes([...filteredShortcut].sort(sortShortcuts)); + return ( + - {filteredShortcut.map((key, idx) => { - if (idx > 0) { - return key.toUpperCase(); - } - return null; - })} - - ) : ( - - {shortcutWPlus[0].toLowerCase() === "space" ? ( - "Space" - ) : shortcutWPlus[0].length <= 1 ? ( - shortcutWPlus[0] - ) : isMac ? ( - - ) : ( - {shortcutWPlus[0]} - )} - {shortcutWPlus.map((key, idx) => { - if (idx > 0) { - return ( - - {key.toUpperCase()} - - ); - } - return null; - })} + > + {shortcutList.map((key, index) => ( + + + + ))} ); } diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index d6c8c0a83..a45a59d93 100644 --- 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 index ecdc16a76..4edbfba9e 100644 --- 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 (
{name} - +
); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx index 377bc4cc4..0733c53ab 100644 --- 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 (
- +
); diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx new file mode 100644 index 000000000..100475205 --- /dev/null +++ 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 ; +} diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx index 883c99b34..3df817d56 100644 --- 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({ {children}
-
- {key === null - ? shortcutInitialValue?.toUpperCase() - : key.toUpperCase()} +
+ {(key ?? shortcutInitialValue ?? "").split("+").map((k, i) => ( + + ))}
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx index d1940588f..04df1224e 100644 --- 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 && ( { + if (index === 0) return key; + if ( + exceptions.includes(key.trim().toLocaleLowerCase()) || + exceptions.includes(array[index - 1].trim().toLocaleLowerCase()) + ) + return key; + + return "+" + key; + }); +}