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

Added shortcuts into right page

Browse source
This commit is contained in:
Lucas Oliveira 2024-04-30 00:18:24 +02:00
commit d503b74a3f
3 changed files with 76 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/frontend/src/components/shortcutsComponent/index.tsx
View file

@ -1,104 +0,0 @@
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
import { AgGridReact } from "ag-grid-react";
import { ColDef,ColGroupDef } from 'ag-grid-community';
import { useState } from "react";
import { Card, CardContent, CardFooter } from "../ui/card";
export default function ShortcutsComponent() {
const advancedShortcut = "Ctrl + shift + A";
const minizmizeShortcut = "Ctrl + shift + Q";
const codeShortcut = "Ctrl + shift + C";
const copyShortcut = "Ctrl + C";
const duplicateShortcut = "Ctrl + D";
const shareShortcut = "Ctrl + shift + S";
const docsShortcut = "Ctrl + shift + D";
const saveShortcut = "Ctrl + S";
const deleteShortcut = "Backspace";
const interactionShortcut = "Ctrl + K";
const undoShortcut = "Ctrl + Z";
const redoShortcut = "Ctrl + Y";
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
{ headerName: "Functionality",
field: "name",
flex: 1,
editable: false
}, //This column will be twice as wide as the others
{
field: "shortcut",
flex: 2,
editable: false,
}
]);
const [rowData, setRowData] = useState([
{
name: "Open node advanced settings",
shortcut: advancedShortcut,
},
{
name: "Minimize",
shortcut: minizmizeShortcut
},
{
name: "Open Code modal",
shortcut: codeShortcut,
},
{
name: "Copy",
shortcut: copyShortcut,
},
{
name: "Duplicate",
shortcut: duplicateShortcut,
},
{
name: "Share",
shortcut: shareShortcut,
},
{
name: "Open docs",
shortcut: docsShortcut,
},
{
name: "Save",
shortcut: saveShortcut,
},
{
name: "Delete",
shortcut: deleteShortcut,
},
{
name: "Open interaction panel",
shortcut: interactionShortcut,
},
{
name: "Undo",
shortcut: undoShortcut,
},
{
name: "Redo",
shortcut: redoShortcut,
},
]);
return (
<Card className="mb-12 h-full">
<CardContent className="flex h-full flex-col pt-4">
<div
className="ag-theme-quartz h-full" // applying the grid theme
>
<AgGridReact columnDefs={colDefs} rowData={rowData} />
</div>
</CardContent>
<CardFooter>
<div className="text-xs text-muted-foreground">
Showing <strong>1-3</strong> of <strong>3</strong> products
</div>
</CardFooter>
</Card>
);
}

25
src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
View file

@ -1,25 +0,0 @@
import ForwardedIconComponent from "../../../../components/genericIconComponent";
import ShortcutsComponent from "../../../../components/shortcutsComponent";
import { Button } from "../../../../components/ui/button";
export default function ShortcutsPage() {
return (
<div className="flex h-full w-full flex-col justify-between gap-6">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
<div className="flex w-full flex-col">
<h2 className="text-xl font-bold tracking-tight">Shortcuts</h2>
<p className="text-muted-foreground">
Manage and assign global shortcuts
</p>
</div>
</div>
<div className="flex h-full w-full flex-col justify-between">
<ShortcutsComponent />
</div>
</div>
);
}

89
src/frontend/src/pages/ShortcutsPage/index.tsx
View file

@ -1,11 +1,82 @@
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
import { ColDef, ColGroupDef } from "ag-grid-community";
import { useState } from "react";
import ForwardedIconComponent from "../../components/genericIconComponent";
import TableComponent from "../../components/tableComponent";
export default function ShortcutsPage() {
const advancedShortcut = "Ctrl + shift + A";
const minizmizeShortcut = "Ctrl + shift + Q";
const codeShortcut = "Ctrl + shift + C";
const copyShortcut = "Ctrl + C";
const duplicateShortcut = "Ctrl + D";
const shareShortcut = "Ctrl + shift + S";
const docsShortcut = "Ctrl + shift + D";
const saveShortcut = "Ctrl + S";
const deleteShortcut = "Backspace";
const interactionShortcut = "Ctrl + K";
const undoShortcut = "Ctrl + Z";
const redoShortcut = "Ctrl + Y";
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
{ headerName: "Functionality", field: "name", flex: 1, editable: false }, //This column will be twice as wide as the others
{
field: "shortcut",
flex: 2,
editable: false,
},
]);
const [rowData, setRowData] = useState([
{
name: "Open node advanced settings",
shortcut: advancedShortcut,
},
{
name: "Minimize",
shortcut: minizmizeShortcut,
},
{
name: "Open Code modal",
shortcut: codeShortcut,
},
{
name: "Copy",
shortcut: copyShortcut,
},
{
name: "Duplicate",
shortcut: duplicateShortcut,
},
{
name: "Share",
shortcut: shareShortcut,
},
{
name: "Open docs",
shortcut: docsShortcut,
},
{
name: "Save",
shortcut: saveShortcut,
},
{
name: "Delete",
shortcut: deleteShortcut,
},
{
name: "Open interaction panel",
shortcut: interactionShortcut,
},
{
name: "Undo",
shortcut: undoShortcut,
},
{
name: "Redo",
shortcut: redoShortcut,
},
]);
return (
<div className="flex h-full w-full flex-col justify-between gap-6">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@ -22,18 +93,10 @@ export default function ShortcutsPage() {
frequently used actions.
</p>
</div>
<div className="flex-shrink-0">
<AddNewVariableButton>
<Button data-testid="api-key-button-store" variant="primary">
<IconComponent name="Plus" className="mr-2 w-4" />
Add New
</Button>
</AddNewVariableButton>
</div>
</div>
<div className="flex h-full w-full flex-col justify-between">
<TableComponent />
<TableComponent columnDefs={colDefs} rowData={rowData} />
</div>
</div>
);