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

fix UI errors

Browse source
This commit is contained in:
cristhianzl 2024-05-03 18:17:49 -03:00
commit 2dc4ffd99f
11 changed files with 59 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -5,6 +5,7 @@ import useAlertStore from "../../stores/alertStore";
import { useGlobalVariablesStore } from "../../stores/globalVariables";
import { useTypesStore } from "../../stores/typesStore";
import { ResponseErrorDetailAPI } from "../../types/api";
import { sortByName } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import InputComponent from "../inputComponent";
import { Button } from "../ui/button";
@ -23,14 +24,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields);
const unavaliableFields = new Set(
Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
);
const availableFields = Array.from(componentFields).filter(
(field) => !unavaliableFields.has(field)
);
const availableFields = () => {
const fields = Array.from(componentFields).filter(
(field) => !unavaliableFields.has(field),
);
return sortByName(fields);
};
const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable
(state) => state.addGlobalVariable,
);
function handleSaveVariable() {
@ -113,7 +119,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
setSelectedOptions={(value) => setFields(value)}
selectedOptions={fields}
password={false}
options={availableFields}
options={availableFields()}
placeholder="Choose a field for the variable..."
id={"apply-to-fields"}
></InputComponent>

3
src/frontend/src/components/cardComponent/index.tsx
View file

@ -11,7 +11,6 @@ import cloneFLowWithParent from "../../utils/storeUtils";
import { cn, convertTestName } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
import ShadTooltip from "../shadTooltipComponent";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import {
Card,
@ -172,7 +171,7 @@ export default function CollectionCardComponent({
data-testid={`card-${convertTestName(data.name)}`}
//TODO check color schema
className={cn(
"group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#202635]",
"group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
disabled ? "pointer-events-none opacity-50" : "",
onClick ? "cursor-pointer" : "",
)}

10
src/frontend/src/components/chatComponent/index.tsx
View file

@ -50,7 +50,7 @@ export default function FlowToolbar(): JSX.Element {
"relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
!hasApiKey || !validApiKey || !hasStore
? " button-disable text-muted-foreground "
: ""
: "",
)}
>
<ForwardedIconComponent
@ -59,14 +59,14 @@ export default function FlowToolbar(): JSX.Element {
"-m-0.5 -ml-1 h-6 w-6",
!hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable"
: ""
: "",
)}
/>
Share
</button>
</ShareModal>
),
[hasApiKey, validApiKey, currentFlow, hasStore]
[hasApiKey, validApiKey, currentFlow, hasStore],
);
return (
@ -108,7 +108,7 @@ export default function FlowToolbar(): JSX.Element {
"message-button-icon h-5 w-5 fill-muted-foreground stroke-muted-foreground transition-all"
}
/>
Run
Playground
</div>
)}
</div>
@ -120,7 +120,7 @@ export default function FlowToolbar(): JSX.Element {
<ApiModal flow={currentFlow}>
<div
className={classNames(
"relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
"relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
)}
>
<ForwardedIconComponent

7
src/frontend/src/components/csvOutputComponent/index.tsx
View file

@ -69,7 +69,7 @@ function CsvOutputComponent({
if (file) {
const { rowData: data, colDefs: columns } = convertCSVToData(
file,
separator
separator,
);
setRowData(data);
setColDefs(columns);
@ -114,14 +114,14 @@ function CsvOutputComponent({
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight]
[updateRowHeight],
);
const onGridSizeChanged = useCallback(
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight]
[updateRowHeight],
);
return (
@ -167,6 +167,7 @@ function CsvOutputComponent({
onFirstDataRendered={onFirstDataRendered}
onGridSizeChanged={onGridSizeChanged}
scrollbarWidth={8}
overlayNoRowsTemplate="No data available"
/>
</div>
)}

13
src/frontend/src/components/tableComponent/index.tsx
View file

@ -5,6 +5,7 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
import { useDarkStore } from "../../stores/darkStore";
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn } from "../../utils/utils";
import { Card, CardContent } from "../ui/card";
const TableComponent = forwardRef<
ElementRef<typeof AgGridReact>,
@ -17,10 +18,18 @@ const TableComponent = forwardRef<
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col"
"ag-theme-shadcn flex h-full flex-col",
)} // applying the grid theme
>
<AgGridReact ref={ref} {...props} />
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
<CardContent>
<AgGridReact
overlayNoRowsTemplate="No data available"
ref={ref}
{...props}
/>
</CardContent>
</Card>
</div>
</div>
);

2
src/frontend/src/modals/IOModal/index.tsx
View file

@ -117,7 +117,7 @@ export default function IOModal({
return (
<BaseModal
size={selectedTab === 0 ? "large-thin" : "md-thin"}
size={selectedTab === 0 ? "sm-thin" : "md-thin"}
open={open}
setOpen={setOpen}
disable={disable}

6
src/frontend/src/modals/baseModal/index.tsx
View file

@ -79,6 +79,7 @@ interface BaseModalProps {
| "small-h-full"
| "medium-h-full"
| "md-thin"
| "sm-thin"
| "smaller-h-full";
disable?: boolean;
@ -154,6 +155,11 @@ function BaseModal({
height = "h-[70vh]";
break;
case "sm-thin":
minWidth = "min-w-[65vw]";
height = "h-[70vh]";
break;
case "large-h-full":
minWidth = "min-w-[80vw]";
break;

10
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
View file

@ -15,13 +15,13 @@ import { cn } from "../../../../utils/utils";
export default function GlobalVariablesPage() {
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries
(state) => state.globalVariablesEntries,
);
const removeGlobalVariable = useGlobalVariablesStore(
(state) => state.removeGlobalVariable
(state) => state.removeGlobalVariable,
);
const globalVariables = useGlobalVariablesStore(
(state) => state.globalVariables
(state) => state.globalVariables,
);
const setErrorData = useAlertStore((state) => state.setErrorData);
const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
@ -154,7 +154,7 @@ export default function GlobalVariablesPage() {
<IconComponent
name="Trash2"
className={cn(
"h-5 w-5 text-destructive group-disabled:text-primary"
"h-5 w-5 text-destructive group-disabled:text-primary",
)}
/>
</Button>
@ -174,6 +174,8 @@ export default function GlobalVariablesPage() {
}}
rowSelection="multiple"
suppressRowClickSelection={true}
domLayout="autoHeight"
pagination={false}
columnDefs={colDefs}
rowData={rowData}
/>

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

@ -2,13 +2,6 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
import { useState } from "react";
import ForwardedIconComponent from "../../../../components/genericIconComponent";
import TableComponent from "../../../../components/tableComponent";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../../../../components/ui/card";
export default function ShortcutsPage() {
const advancedShortcut = "Ctrl + Shift + A";
@ -84,7 +77,7 @@ export default function ShortcutsPage() {
shortcut: redoShortcut,
},
]);
return (
<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">
@ -97,22 +90,17 @@ export default function ShortcutsPage() {
/>
</h2>
<p className="text-sm text-muted-foreground">
Manage Shortcuts for quick access to
frequently used actions.
Manage Shortcuts for quick access to frequently used actions.
</p>
</div>
</div>
<div className="grid gap-6 pb-8">
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
<CardContent>
<TableComponent
domLayout="autoHeight"
pagination={false}
columnDefs={colDefs}
rowData={nodesRowData}
/>
</CardContent>
</Card>
<TableComponent
domLayout="autoHeight"
pagination={false}
columnDefs={colDefs}
rowData={nodesRowData}
/>
</div>
</div>
);

4
src/frontend/src/utils/utils.ts
View file

@ -719,3 +719,7 @@ export function freezeObject(obj: any) {
export function convertTestName(name: string): string {
return name.replace(/ /g, "-").toLowerCase();
}
export function sortByName(stringList: string[]): string[] {
return stringList.sort((a, b) => a.localeCompare(b));
}

2
src/frontend/tests/end-to-end/userSettings.spec.ts
View file

@ -63,7 +63,7 @@ test("should interact with global variables", async ({ page }) => {
.nth(0)
.click();
await page.getByTestId("icon-Trash2").click();
await page.getByText("No Rows To Show").isVisible();
await page.getByText("No data available").isVisible();
});
test("should see shortcuts", async ({ page }) => {