jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Feat: Add restore button to shortcuts settings

Browse source
This commit is contained in:
igorrCarvalho 2024-05-02 20:53:39 -03:00
commit 61b894c2e8
3 changed files with 49 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
View file

@ -12,7 +12,8 @@ export default function EditShortcutButton({
defaultShortcuts, defaultShortcuts,
defaultCombination, defaultCombination,
open, open,
setOpen setOpen,
disable,
}: { }: {
children: JSX.Element; children: JSX.Element;
shortcut: string[]; shortcut: string[];
@ -20,6 +21,7 @@ export default function EditShortcutButton({
defaultCombination: string; defaultCombination: string;
open: boolean; open: boolean;
setOpen: (bool: boolean) => void; setOpen: (bool: boolean) => void;
disable?: boolean;
}): JSX.Element { }): JSX.Element {
const isMac = navigator.userAgent.toUpperCase().includes("MAC"); const isMac = navigator.userAgent.toUpperCase().includes("MAC");
const [key, setKey] = useState<string>(isMac ? "Meta" : 'Ctrl'); const [key, setKey] = useState<string>(isMac ? "Meta" : 'Ctrl');
@ -88,10 +90,10 @@ export default function EditShortcutButton({
}, [key, setKey]) }, [key, setKey])
return ( return (
<BaseModal open={open} setOpen={setOpen} size="smaller"> <BaseModal open={open} setOpen={setOpen} size="smaller" disable={disable}>
<BaseModal.Header <BaseModal.Header
description={ description={
"Set your new key combination" "Recording your keyboard"
} }
> >
<span className="pr-2"> Key Combination </span> <span className="pr-2"> Key Combination </span>

30
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
View file

@ -12,6 +12,7 @@ import {
import { Button } from "../../../../components/ui/button"; import { Button } from "../../../../components/ui/button";
import EditShortcutButton from "./EditShortcutButton"; import EditShortcutButton from "./EditShortcutButton";
import { useShortcutsStore } from "../../../../stores/shortcuts"; import { useShortcutsStore } from "../../../../stores/shortcuts";
import { defaultShortcuts, unavailableShortcutss } from "../../../../constants/constants";
export default function ShortcutsPage() { export default function ShortcutsPage() {
const [selectedRows, setSelectedRows] = useState<string[]>([]); const [selectedRows, setSelectedRows] = useState<string[]>([]);
@ -54,6 +55,12 @@ export default function ShortcutsPage() {
} }
}, []) }, [])
function handleRestore() {
setShortcuts(defaultShortcuts, unavailableShortcutss);
localStorage.removeItem("langflow-shortcuts");
localStorage.removeItem("langflow-UShortcuts");
}
return ( return (
<div className="flex h-full w-full flex-col gap-6 "> <div className="flex h-full w-full flex-col gap-6 ">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5"> <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@ -70,26 +77,32 @@ export default function ShortcutsPage() {
frequently used actions. frequently used actions.
</p> </p>
</div> </div>
</div> <div>
<div className="grid gap-6 pb-8">
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
<CardContent>
<div className="w-full flex justify-end align-end mb-4"> <div className="w-full flex justify-end align-end mb-4">
<div className=""> <div className="flex items-center justify center">
<EditShortcutButton <EditShortcutButton
disable={selectedRows.length === 0}
defaultCombination={combinationToEdit[0]?.shortcut} defaultCombination={combinationToEdit[0]?.shortcut}
shortcut={selectedRows} shortcut={selectedRows}
defaultShortcuts={shortcuts} defaultShortcuts={shortcuts}
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
> >
<Button data-testid="api-key-button-store" variant="primary"> <Button variant="primary">
<ForwardedIconComponent name="Plus" className="mr-2 w-4" /> <ForwardedIconComponent name="Plus" className="mr-2 w-4" />
New key combination Customize
</Button> </Button>
</EditShortcutButton> </EditShortcutButton>
<Button variant="primary" className="ml-3" onClick={handleRestore}>
<ForwardedIconComponent name="RotateCcw" className="mr-2 w-4" />
Restore
</Button>
</div> </div>
</div> </div>
</div>
</div>
<div className="grid gap-6 pb-8">
<div>
<TableComponent <TableComponent
onSelectionChanged={(event: SelectionChangedEvent) => { onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(event.api.getSelectedRows().map((row) => row.name)); setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
@ -100,8 +113,7 @@ export default function ShortcutsPage() {
columnDefs={colDefs} columnDefs={colDefs}
rowData={nodesRowData} rowData={nodesRowData}
/> />
</CardContent> </div>
</Card>
</div> </div>
</div> </div>
); );

2
src/frontend/src/utils/styleUtils.ts
View file

@ -140,6 +140,7 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
RotateCcw,
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AWSIcon } from "../icons/AWS"; import { AWSIcon } from "../icons/AWS";
@ -514,4 +515,5 @@ export const nodeIconsLucide: iconsType = {
Command, Command,
ArrowBigUp, ArrowBigUp,
Dot, Dot,
RotateCcw
}; };