diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx index f33037ebc..8786cdac6 100644 --- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx +++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx @@ -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"} > diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 52834ee27..958abffb4 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -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" : "", )} diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index d483f95ee..d75688161 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -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 " - : "" + : "", )} > Share ), - [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 )} @@ -120,7 +120,7 @@ export default function FlowToolbar(): JSX.Element {
{ 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" />
)} diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 300aa5cc3..3404444c5 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -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, @@ -17,10 +18,18 @@ const TableComponent = forwardRef<
- + + + + +
); diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 49283ece0..82350b57e 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -117,7 +117,7 @@ export default function IOModal({ return ( 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() { @@ -174,6 +174,8 @@ export default function GlobalVariablesPage() { }} rowSelection="multiple" suppressRowClickSelection={true} + domLayout="autoHeight" + pagination={false} columnDefs={colDefs} rowData={rowData} /> diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx index de2c92b2d..65bb3387f 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx @@ -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 (
@@ -97,22 +90,17 @@ export default function ShortcutsPage() { />

- Manage Shortcuts for quick access to - frequently used actions. + Manage Shortcuts for quick access to frequently used actions.

- - - - - +
); diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 43838bb27..7c269d8e4 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -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)); +} diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts index 6f90bb19c..af7c93824 100644 --- a/src/frontend/tests/end-to-end/userSettings.spec.ts +++ b/src/frontend/tests/end-to-end/userSettings.spec.ts @@ -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 }) => {