From c6869c2eb5096e1af82b40c89f3525dde7e6e9c7 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 3 May 2024 19:39:27 -0300 Subject: [PATCH] Refactor: Visual shortcut update with the settings configuration --- .../src/components/ui/select-custom.tsx | 8 +- src/frontend/src/constants/constants.ts | 39 ++++++---- .../components/nodeToolbarComponent/index.tsx | 74 +++++++++++-------- .../toolbarSelectItem/index.tsx | 62 ++++++++-------- .../EditShortcutButton/index.tsx | 16 ++-- src/frontend/src/types/components/index.ts | 12 ++- 6 files changed, 118 insertions(+), 93 deletions(-) diff --git a/src/frontend/src/components/ui/select-custom.tsx b/src/frontend/src/components/ui/select-custom.tsx index 8c5223231..82ba540fe 100644 --- a/src/frontend/src/components/ui/select-custom.tsx +++ b/src/frontend/src/components/ui/select-custom.tsx @@ -33,10 +33,10 @@ const SelectContent = React.forwardRef< {children} @@ -75,7 +75,7 @@ const SelectItem = React.forwardRef< ref={ref} className={cn( "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className + className, )} {...props} > diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index d2ceb530d..4279c71d2 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -796,35 +796,35 @@ export const SAVE_DEBOUNCE_TIME = 300; export const defaultShortcuts = [ { name: "Advanced Settings", - shortcut: "Ctrl + Shift + a", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Shift + A`, }, { name: "Minimize", - shortcut: "Ctrl + q", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Q`, }, { name: "Code", - shortcut: "Ctrl + Shift + u", + shortcut: `Space`, }, { name: "Copy", - shortcut: "Ctrl + c", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + C`, }, { name: "Duplicate", - shortcut: "Ctrl + d", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + D`, }, { name: "Share", - shortcut: "Ctrl + Shift + s", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Shift + S`, }, { name: "Docs", - shortcut: "Ctrl + Shift + d", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Shift + D`, }, { name: "Save", - shortcut: "Ctrl + s", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + S`, }, { name: "Delete", @@ -832,31 +832,39 @@ export const defaultShortcuts = [ }, { name: "Open playground", - shortcut: "Ctrl + k", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + K`, }, { name: "Undo", - shortcut: "Ctrl + z", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Z`, }, { name: "Redo", - shortcut: "Ctrl + y", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + Y`, }, { name: "Group", - shortcut: "Ctrl + g", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + G`, }, { name: "Cut", - shortcut: "Ctrl + x", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + X`, }, { name: "Paste", - shortcut: "Ctrl + v", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + V`, }, { name: "API", - shortcut: "Ctrl + r", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + R`, + }, + { + name: "Download", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + J`, + }, + { + name: "Update", + shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + U`, }, ]; @@ -877,4 +885,5 @@ export const unavailableShortcutss = [ "CTRL + K", "CTRL + Z", "CTRL + Y", + "CTRL + J", ]; diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index fcabc130d..c91f22049 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -64,10 +64,12 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "dict" || data.node.template[templateField].type === "NestedDict"), ).length; + const templates = useTypesStore((state) => state.templates); const hasStore = useStoreStore((state) => state.hasStore); const hasApiKey = useStoreStore((state) => state.hasApiKey); const validApiKey = useStoreStore((state) => state.validApiKey); + const shortcuts = useShortcutsStore((state) => state.shortcuts); function handleMinimizeWShortcut(e: KeyboardEvent) { e.preventDefault(); @@ -479,10 +481,10 @@ export default function NodeToolbarComponent({ {hasCode && ( obj.name === "Code")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} - mod={false} value={"Code"} icon={"Code"} dataTestId="code-button-modal" @@ -492,9 +494,11 @@ export default function NodeToolbarComponent({ {nodeLength > 0 && ( obj.name === "Advanced Settings") + ?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={true} value={"Advanced"} icon={"Settings2"} dataTestId="edit-button-modal" @@ -503,9 +507,10 @@ export default function NodeToolbarComponent({ )} obj.name === "Save")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} value={"Save"} icon={"SaveAll"} dataTestId="save-button-modal" @@ -513,19 +518,21 @@ export default function NodeToolbarComponent({ obj.name === "Duplicate")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} value={"Duplicate"} icon={"Copy"} - dataTestId="duplicate-button-modal" + dataTestId="copy-button-modal" /> obj.name === "Copy")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} value={"Copy"} icon={"Clipboard"} dataTestId="copy-button-modal" @@ -534,9 +541,10 @@ export default function NodeToolbarComponent({ {isOutdated && ( obj.name === "Update")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} value={"Update"} icon={"Code"} dataTestId="update-button-modal" @@ -550,14 +558,12 @@ export default function NodeToolbarComponent({ disabled={!hasApiKey || !validApiKey} > obj.name === "Share")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={true} value={"Share"} icon={"Share3"} - styleObj={{ - iconClasses: "relative top-0.5 -m-1 mr-[0.25rem] h-6 w-6", - }} dataTestId="share-button-modal" /> @@ -565,13 +571,14 @@ export default function NodeToolbarComponent({ {(!hasStore || !hasApiKey || !validApiKey) && ( obj.name === "Download") + ?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - icon="Download" - styleObj={{ iconClasses: "relative top-0.5 mr-2 h-4 w-4" }} - keyboardKey={"J"} - dataTestId={"Dowload-button-nodeToolbar"} + value={"Download"} + icon={"Download"} + dataTestId="Download-button-modal" /> )} @@ -580,9 +587,10 @@ export default function NodeToolbarComponent({ disabled={data.node?.documentation === ""} > obj.name === "Docs")?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={true} value={"Docs"} icon={"FileText"} dataTestId="docs-button-modal" @@ -591,12 +599,14 @@ export default function NodeToolbarComponent({ {isMinimal && ( obj.name === "Minimize") + ?.shortcut! + } isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={false} - keyboardKey={"Q"} - dataTestId={"minimize-button-nodeToolbar"} + value={showNode ? "Minimize" : "Expand"} + icon={showNode ? "Minimize2" : "Maximize2"} + dataTestId="minimize-button-modal" /> )} 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 031bd41a7..fc10b74c4 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx @@ -2,16 +2,27 @@ import ForwardedIconComponent from "../../../../../components/genericIconCompone import { toolbarSelectItemProps } from "../../../../../types/components"; export default function ToolbarSelectItem({ - shift, - isMac, - mod = true, - keyboardKey, value, icon, styleObj, dataTestId, ping, + shortcut, + isMac, }: 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 = ""; + if (!hasShift) shortcutWPlus = filteredShortcut.join("+"); + return (
{value} - - {mod && - (isMac ? ( - + + {hasShift ? ( + <> + {filteredShortcut[0]} + + {filteredShortcut.map((key, idx) => { + if (idx > 0) { + return {key.toUpperCase()} ; + } + })} + ) : ( - - {shift ? "Ctrl" : "Ctrl +"} - - ))} - {shift && ( - - )} - - {keyboardKey} + shortcutWPlus + )}
); 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 50e2c8e5f..51e3aa144 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx @@ -5,6 +5,7 @@ import ForwardedIconComponent from "../../../../../components/genericIconCompone import { Button } from "../../../../../components/ui/button"; import BaseModal from "../../../../../modals/baseModal"; import { useShortcutsStore } from "../../../../../stores/shortcuts"; +import { toTitleCase } from "../../../../../utils/utils"; export default function EditShortcutButton({ children, @@ -24,11 +25,11 @@ export default function EditShortcutButton({ disable?: boolean; }): JSX.Element { const isMac = navigator.userAgent.toUpperCase().includes("MAC"); - const [key, setKey] = useState(isMac ? "Meta" : "Ctrl"); + const [key, setKey] = useState(isMac ? "Cmd" : "Ctrl"); const setSuccessData = useAlertStore((state) => state.setSuccessData); const setShortcuts = useShortcutsStore((state) => state.setShortcuts); const unavaliableShortcuts = useShortcutsStore( - (state) => state.unavailableShortcuts + (state) => state.unavailableShortcuts, ); const setErrorData = useAlertStore((state) => state.setErrorData); @@ -43,7 +44,7 @@ export default function EditShortcutButton({ } const setUniqueShortcut = useShortcutsStore( - (state) => state.updateUniqueShortcut + (state) => state.updateUniqueShortcut, ); function editCombination(): void { @@ -70,7 +71,7 @@ export default function EditShortcutButton({ setKey(isMac ? "META" : "CTRL"); localStorage.setItem( "langflow-shortcuts", - JSON.stringify(newCombination) + JSON.stringify(newCombination), ); localStorage.setItem("langflow-UShortcuts", JSON.stringify(unavailable)); return; @@ -82,7 +83,7 @@ export default function EditShortcutButton({ } useEffect(() => { - if (!open) setKey(isMac ? "META" : "CTRL"); + if (!open) setKey(isMac ? "Cmd" : "Ctrl"); console.log(key); }, [open, setOpen, key]); @@ -90,7 +91,10 @@ export default function EditShortcutButton({ function onKeyDown(e: KeyboardEvent) { e.preventDefault(); if (key.toUpperCase().includes(e.key.toUpperCase())) return; - setKey((oldKey) => `${oldKey.toUpperCase()} + ${e.key.toUpperCase()}`); + setKey( + (oldKey) => + `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${e.key.length > 0 ? toTitleCase(e.key) : e.key.toUpperCase()}`, + ); } document.addEventListener("keydown", onKeyDown); diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 5ee1a0fc9..f46bf385f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -513,7 +513,7 @@ export type nodeToolbarPropsType = { updateNodeCode?: ( newNodeClass: APIClassType, code: string, - name: string + name: string, ) => void; setShowState: (show: boolean | SetStateAction) => void; isOutdated?: boolean; @@ -563,7 +563,7 @@ export type chatMessagePropsType = { updateChat: ( chat: ChatMessageType, message: string, - stream_url?: string + stream_url?: string, ) => void; }; @@ -654,12 +654,12 @@ export type codeTabsPropsType = { getValue?: ( value: string, node: NodeType, - template: TemplateVariableType + template: TemplateVariableType, ) => string; buildTweakObject?: ( tw: string, changes: string | string[] | boolean | number | Object[] | Object, - template: TemplateVariableType + template: TemplateVariableType, ) => string | void; }; }; @@ -729,9 +729,6 @@ export type IOFileInputProps = { export type toolbarSelectItemProps = { isMac: boolean; - shift: boolean; - keyboardKey: string; - mod?: boolean; value: string; icon: string; styleObj?: { @@ -744,4 +741,5 @@ export type toolbarSelectItemProps = { }; dataTestId: string; ping?: boolean; + shortcut: string; };