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

fix: update nav bar UI, changed user menu to use shadcn dropdown, fix responsivity issues (#4454)

Browse source 
* Updated saved color

* Removed selection from header /

* hide text from 1200px

* Updated github star style

* Fixed hover state on account menu

* Fix misalignment of store

* Changed user menu to use dropdown menu from shadcn

* Fixed notification dot

* Change mobile responsivity

* Fixed flow settings name

* Implement opening the sidebar when hitting /

* Fixed code opening when hitting space on sidebar

* Fixed errors with tests
This commit is contained in:
Lucas Oliveira 2024-11-08 14:20:36 -03:00 • committed by GitHub
commit 6761df6110
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 120 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
View file

@ -98,7 +98,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
return <div className="truncate">Saving...</div>;
}
// return savedText;
return <div className="truncate text-[#059669]">Saved</div>;
return (
<div className="shrink-0 text-xs font-medium text-accent-emerald-foreground">
Saved
</div>
);
}
const handleSave = () => {
@ -111,10 +115,10 @@ export const MenuBar = ({}: {}): JSX.Element => {
useHotkeys(changes, handleSave, { preventDefault: true });
return currentFlow && onFlowPage ? (
<div className="flex items-baseline gap-2 truncate">
<div className="header-menu-bar w-full justify-end truncate">
<div className="flex items-center justify-center gap-2 truncate">
<div className="header-menu-bar hidden justify-end truncate md:flex">
{currentFolder?.name && (
<div className="flex hidden truncate md:flex">
<div className="hidden truncate md:flex">
<div
className="cursor-pointer truncate text-muted-foreground hover:text-primary"
onClick={() => {
@ -126,11 +130,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
</div>
)}
</div>
<div className="hidden w-fit font-normal text-muted-foreground md:flex">
<div className="hidden w-fit shrink-0 select-none font-normal text-muted-foreground md:flex">
/
</div>
<div className="w-fit truncate text-sm sm:overflow-visible sm:whitespace-normal">
<div className="w-fit overflow-hidden truncate text-sm sm:whitespace-normal">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="header-menu-bar-display-2 group truncate">
@ -170,7 +174,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
className="cursor-pointer"
>
<IconComponent name="Settings2" className="header-menu-options" />
Settings
Flow Settings
</DropdownMenuItem>
{!autoSaving && (
<DropdownMenuItem onClick={handleSave} className="cursor-pointer">
@ -279,7 +283,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
></FlowSettingsModal>
<FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
</div>
<div className="hidden w-full items-center truncate sm:flex">
<div className="hidden shrink-0 items-center sm:flex">
{!autoSaving && (
<Button
variant="primary"

10
src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx
View file

@ -7,12 +7,10 @@ export const GithubStarComponent = () => {
return (
<ShadTooltip content="Go to Github repo" side="bottom" styleClasses="z-10">
<div className="header-github-link-box gap-1 bg-muted hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
<FaGithub className="h-4 w-4 text-black dark:text-[white]" />
<div className="hidden text-xs font-semibold text-black dark:text-[white] lg:block">
Star
</div>
<div className="header-github-display text-xs font-semibold text-black dark:text-[white]">
<div className="group inline-flex h-8 items-center justify-center gap-1 rounded-md border bg-muted px-2 pr-0 hover:border-input hover:bg-secondary-hover">
<FaGithub className="h-4 w-4" />
<div className="hidden text-xs font-semibold lg:block">Star</div>
<div className="-mr-px ml-1 flex h-8 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-xs font-semibold text-secondary-foreground group-hover:border-input">
{stars.toLocaleString() ?? 0}
</div>
</div>

156
src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx
View file

@ -1,110 +1,68 @@
import ForwardedIconComponent from "@/components/genericIconComponent";
import { Skeleton } from "@/components/ui/skeleton";
import { Menu, Transition } from "@headlessui/react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/utils/utils";
import { ChevronsUpDown } from "lucide-react";
import React from "react";
import { Fragment } from "react/jsx-runtime";
import ExpandMoreIcon from "../../assets/ExpandMoreIcon.svg?react";
import ScienceOutlinedIcon from "../../assets/ScienceOutlinedIcon.svg?react";
export const HeaderMenu = ({ children }) => (
<Menu as="div" className="relative text-left">
{children}
</Menu>
<DropdownMenu>{children}</DropdownMenu>
);
export const HeaderMenuToggle = ({ children }) => (
<Menu.Button className="inline-flex w-full items-center justify-center gap-1 rounded-md px-2 py-2 text-sm font-medium text-white hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75">
{children}
<ChevronsUpDown
className="text-zinc-500"
size={"15px"}
strokeWidth={"2px"}
/>
</Menu.Button>
<DropdownMenuTrigger className="group inline-flex w-full items-center justify-center gap-1 rounded-md px-2 py-2 pr-0">
<div className="flex items-center gap-1 rounded-full group-hover:bg-muted">
{children}
<ChevronsUpDown
className="mr-2 text-muted-foreground group-hover:text-foreground"
size={"15px"}
strokeWidth={"2px"}
/>
</div>
</DropdownMenuTrigger>
);
export const HeaderMenuSelector = ({
Icon,
loading,
children,
Preview,
}: React.PropsWithChildren<{
Icon?: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & {
title?: string | undefined;
}
>;
loading?: boolean;
Preview?: boolean;
}>) => (
<Menu.Button className="group inline-flex h-8 w-full items-center justify-center gap-2 rounded-md border border-solid border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 dark:border-zinc-700 dark:hover:bg-zinc-800">
{Icon ? <Icon className="h-4 w-4 fill-black dark:fill-zinc-400" /> : null}
{loading ? (
<Skeleton className="min-w-28 bg-gray-100 text-left">&nbsp;</Skeleton>
) : (
<span className="min-w-0 max-w-48 overflow-x-clip text-ellipsis text-nowrap font-semibold">
{children}
</span>
)}
{Preview ? (
<ScienceOutlinedIcon className="h-5 w-6 rounded border bg-zinc-100 fill-gray-500 group-hover:bg-purple-100 group-hover:fill-purple-700 dark:bg-zinc-800 dark:fill-zinc-400 dark:group-hover:bg-purple-500 dark:group-hover:fill-purple-100" />
) : null}
<ExpandMoreIcon className="fill-gray-400 group-hover:fill-black dark:group-hover:fill-zinc-400" />
</Menu.Button>
);
const BASE_ITEM_STYLES =
"group flex w-full items-center justify-between h-[40px] my-1 rounded-md px-3 text-sm text-gray-900 dark:text-[white] dark:hover:bg-zinc-800 hover:bg-gray-100";
export const HeaderMenuItemLink = ({
href = "#",
selected = false,
children,
newPage = false,
icon = "external-link",
}) => (
<Menu.Item>
{({ active }) => (
<a
className={`group ${selected ? "bg-gray-50" : ""} ${BASE_ITEM_STYLES}`}
href={href}
{...(newPage ? { rel: "noreferrer", target: "_blank" } : {})}
>
{children}
{icon && (
<ForwardedIconComponent
name={icon}
className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
/>
)}
</a>
)}
</Menu.Item>
<DropdownMenuItem className="cursor-pointer p-3 px-4" asChild>
<a
href={href}
className="group flex w-full items-center justify-between"
{...(newPage ? { rel: "noreferrer", target: "_blank" } : {})}
>
{children}
{icon && (
<ForwardedIconComponent
name={icon}
className="side-bar-button-size h-[18px] w-[18px] opacity-0 transition-all group-hover:opacity-100"
/>
)}
</a>
</DropdownMenuItem>
);
export const HeaderMenuItemButton = ({
icon = "",
onClick,
selected = false,
children,
}) => (
<Menu.Item>
{({ active }) => (
<button
className={`${selected ? "bg-gray-50 dark:bg-zinc-800" : ""} ${BASE_ITEM_STYLES}`}
onClick={onClick}
>
{children}
{icon && (
<ForwardedIconComponent
name={icon}
className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
/>
)}
</button>
export const HeaderMenuItemButton = ({ icon = "", onClick, children }) => (
<DropdownMenuItem
className="group flex cursor-pointer items-center justify-between p-3 px-4"
onClick={onClick}
>
{children}
{icon && (
<ForwardedIconComponent
name={icon}
className="side-bar-button-size h-[18px] w-[18px] opacity-0 transition-all group-hover:opacity-100"
/>
)}
</Menu.Item>
</DropdownMenuItem>
);
export const HeaderMenuItems = ({
@ -113,28 +71,16 @@ export const HeaderMenuItems = ({
}: React.PropsWithChildren<{ position?: "left" | "right" }>) => {
const positionClass = position === "left" ? "left-0" : "right-0";
return (
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
className={`absolute dark:bg-black ${positionClass} z-[999] mt-2 w-[20rem] origin-top-right rounded-md border bg-[white] shadow-lg ring-1 ring-black/5 focus:outline-none dark:border-zinc-800`}
>
{children}
</Menu.Items>
</Transition>
<DropdownMenuContent className={cn("w-[20rem] p-1", positionClass)}>
{children}
</DropdownMenuContent>
);
};
export const HeaderMenuItemsSection = ({ children }) => (
<>
<div className="px-1">{children}</div>
<hr className="border-gray-200 last:hidden dark:border-zinc-700" />
{children}
<DropdownMenuSeparator className="last:hidden" />
</>
);

20
src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx
View file

@ -30,7 +30,7 @@ export const ThemeButtons = () => {
};
return (
<div className="relative ml-auto inline-flex rounded-full border border-zinc-200 p-0.5 dark:border-zinc-700">
<div className="relative ml-auto inline-flex rounded-full border border-border p-0.5">
{/* Sliding Indicator - Behind the Buttons */}
<div
className={`absolute bottom-0.5 left-[1px] top-0.5 w-[30%] rounded-full bg-amber-400 ${
@ -53,12 +53,12 @@ export const ThemeButtons = () => {
unstyled
className={`relative z-10 inline-flex items-center rounded-full px-1 ${
selectedTheme === "light"
? "text-black dark:text-[black]"
: "hover:text-black dark:text-[white] dark:hover:bg-amber-400 dark:hover:text-[black]"
? "text-foreground"
: "text-foreground hover:text-background dark:hover:bg-amber-400"
}`}
onClick={() => handleThemeChange("light")}
>
<ForwardedIconComponent name="sun" className="w-4" />
<ForwardedIconComponent name="Sun" className="w-4" />
</Button>
{/* Dark Theme Button */}
@ -66,12 +66,12 @@ export const ThemeButtons = () => {
unstyled
className={`relative z-10 mx-1 inline-flex items-center rounded-full px-1 ${
selectedTheme === "dark"
? "text-black dark:text-[black] dark:hover:bg-purple-400 dark:hover:text-[black]"
: "hover:bg-purple-400 hover:text-[black] hover:text-[white] dark:hover:text-[black]"
? "text-background dark:hover:bg-purple-400"
: "text-foreground hover:bg-purple-400 hover:text-background"
}`}
onClick={() => handleThemeChange("dark")}
>
<ForwardedIconComponent name="moon" className="w-4" />
<ForwardedIconComponent name="Moon" className="w-4" />
</Button>
{/* System Theme Button */}
@ -79,12 +79,12 @@ export const ThemeButtons = () => {
unstyled
className={`relative z-10 inline-flex items-center rounded-full px-1 ${
selectedTheme === "system"
? "text-black dark:bg-[white] dark:text-[black]"
: "hover:bg-[black] hover:text-[white] dark:hover:bg-[white] dark:hover:text-[black]"
? "bg-foreground text-background"
: "hover:bg-foreground hover:text-background"
}`}
onClick={() => handleThemeChange("system")}
>
<ForwardedIconComponent name="monitor" className="w-4" />
<ForwardedIconComponent name="Monitor" className="w-4" />
</Button>
</div>
);

20
src/frontend/src/components/appHeaderComponent/index.tsx
View file

@ -47,9 +47,9 @@ export default function AppHeader(): JSX.Element {
}, []);
return (
<div className="fixed left-0 top-0 z-[1] flex h-[62px] w-full items-center border-b px-5 py-2.5 dark:bg-background">
<div className="z-[1] flex h-[62px] w-full items-center justify-between gap-2 border-b px-5 py-2.5 dark:bg-background">
{/* Left Section */}
<div className={`absolute left-[20px] flex gap-2`}>
<div className={`flex gap-2`}>
<Button
unstyled
onClick={() => navigate("/")}
@ -73,17 +73,17 @@ export default function AppHeader(): JSX.Element {
</div>
{/* Middle Section */}
<div className="absolute left-[225px] right-[225px] truncate md:left-[230px] md:right-[230px] lg:left-[350px] lg:right-[350px] xl:left-[350px] xl:right-[350px] 2xl:left-[500px] 2xl:right-[500px]">
<div className="w-full flex-1 truncate md:max-w-[57%] lg:absolute lg:left-1/2 lg:max-w-[43%] lg:-translate-x-1/2 xl:max-w-[31%]">
<FlowMenu />
</div>
{/* Right Section */}
<div className={`absolute right-[20px] flex gap-2`}>
<div className={`flex items-center gap-2`}>
{!ENABLE_DATASTAX_LANGFLOW && (
<>
<Button
unstyled
className="flex hidden items-center whitespace-nowrap 2xl:inline"
className="hidden items-center whitespace-nowrap 2xl:inline"
onClick={() =>
window.open("https://github.com/langflow-ai/langflow", "_blank")
}
@ -113,7 +113,9 @@ export default function AppHeader(): JSX.Element {
>
<span
className={
notificationCenter ? `header-notifications-dot` : "hidden"
notificationCenter
? `absolute left-[31px] top-[10px] block h-1 w-1 rounded-full bg-destructive`
: "hidden"
}
/>
<ForwardedIconComponent
@ -121,7 +123,7 @@ export default function AppHeader(): JSX.Element {
className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true"
/>
<span className="hidden whitespace-nowrap lg:inline">
<span className="hidden whitespace-nowrap xl:inline">
Notifications
</span>
</Button>
@ -136,7 +138,7 @@ export default function AppHeader(): JSX.Element {
>
<Button
variant="ghost"
className={`flex items-center text-sm font-medium ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""}`}
className={` ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""}`}
onClick={() => {
navigate("/store");
}}
@ -146,7 +148,7 @@ export default function AppHeader(): JSX.Element {
name="Store"
className="side-bar-button-size h-[18px] w-[18px]"
/>
<span className="hidden whitespace-nowrap lg:inline">
<span className="hidden whitespace-nowrap xl:inline">
Store
</span>
</Button>

2
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -161,7 +161,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
));

2
src/frontend/src/pages/DashboardWrapperPage/index.tsx
View file

@ -8,7 +8,7 @@ export function DashboardWrapperPage() {
return (
<div className="flex h-screen w-full flex-col">
<AppHeader />
<div className="mt-[62px] flex h-[calc(100vh-62px)] w-full flex-row">
<div className="flex h-full w-full flex-row">
<Outlet />
</div>
</div>

16
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
View file

@ -4,7 +4,6 @@ import { useHotkeys } from "react-hotkeys-hook"; // Import useHotkeys
import ForwardedIconComponent from "@/components/genericIconComponent";
import ShadTooltip from "@/components/shadTooltipComponent";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Disclosure,
@ -25,9 +24,8 @@ import {
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarTrigger,
useSidebar,
} from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch";
import { CustomLink } from "@/customization/components/custom-link";
import { useAddComponent } from "@/hooks/useAddComponent";
import { useStoreStore } from "@/stores/storeStore";
import { checkChatInput } from "@/utils/reactflowUtils";
@ -36,7 +34,6 @@ import {
SIDEBAR_BUNDLES,
SIDEBAR_CATEGORIES,
} from "@/utils/styleUtils";
import { removeCountFromString } from "@/utils/utils";
import { cloneDeep } from "lodash";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
@ -47,7 +44,6 @@ import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort";
import ShortcutDisplay from "../nodeToolbarComponent/shortcutDisplay";
import NoResultsMessage from "./components/emptySearchComponent";
import FeatureToggles from "./components/featureTogglesComponent";
import SidebarDraggableComponent from "./components/sidebarDraggableComponent";
import SidebarMenuButtons from "./components/sidebarFooterButtons";
import SidebarItemsList from "./components/sidebarItemsList";
import { applyBetaFilter } from "./helpers/apply-beta-filter";
@ -85,9 +81,13 @@ export function FlowSidebarComponent() {
const [showBeta, setShowBeta] = useState(true);
const [showLegacy, setShowLegacy] = useState(false);
const { setOpen } = useSidebar();
useHotkeys("/", (event) => {
event.preventDefault();
searchInputRef.current?.focus();
setOpen(true);
});
useHotkeys(
@ -268,7 +268,11 @@ export function FlowSidebarComponent() {
const chatInputAdded = checkChatInput(nodes);
return (
<Sidebar collapsible="offcanvas" data-testid="shad-sidebar">
<Sidebar
collapsible="offcanvas"
data-testid="shad-sidebar"
className="noflow"
>
<SidebarHeader className="flex w-full flex-col gap-4 p-4 pb-1">
<Disclosure open={showConfig} onOpenChange={setShowConfig}>
<div className="flex w-full items-center gap-2">

1
src/frontend/src/pages/MainPage/components/header/index.tsx
View file

@ -77,6 +77,7 @@ const HeaderComponent = ({
key={type}
unstyled
id={`${type}-btn`}
data-testid={`${type}-btn`}
onClick={() => setFlowType(type as "flows" | "components")}
className={`border-b ${
flowType === type

8
src/frontend/src/style/applies.css
View file

@ -606,18 +606,12 @@
.header-github-link:hover {
@apply hover:bg-accent hover:text-accent-foreground;
}
.header-github-display {
@apply -mr-px ml-1 flex h-8 items-center justify-center rounded-md rounded-l-none border bg-[white] px-2 text-sm dark:bg-[black];
}
.header-notifications-box {
@apply fixed left-0 top-0 h-screen w-screen;
}
.header-notifications {
@apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive;
}
.header-notifications-dot {
@apply absolute left-[33px] top-[9px] block h-1.5 w-1.5 rounded-full bg-destructive dark:bg-red-500;
}
.input-component-div {
@apply pointer-events-none relative cursor-not-allowed;
}
@ -1272,7 +1266,7 @@
}
.toolbar-wrapper {
@apply flex items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm h-10;
@apply flex h-10 items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm;
}
}

1
src/frontend/src/style/index.css
View file

@ -282,6 +282,5 @@
--accent-indigo: 229.7 93.5% 81.8%;
--accent-indigo-foreground: 243.4 75.4% 58.6%;
--node-ring: 240 6% 90%;
}
}

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

@ -115,6 +115,8 @@ import {
MessagesSquare,
Minimize2,
Minus,
Monitor,
Moon,
MoonIcon,
MoreHorizontal,
Network,
@ -166,6 +168,7 @@ import {
SquarePlay,
StickyNote,
Store,
Sun,
SunIcon,
Table,
TerminalIcon,
@ -797,6 +800,9 @@ export const nodeIconsLucide: iconsType = {
FolderPlusIcon,
PaperclipIcon,
Settings,
Monitor,
Moon,
Sun,
PanelLeftClose,
PanelLeftOpen,
ArrowUpRight,

4
src/frontend/tailwind.config.mjs
View file

@ -36,6 +36,10 @@ const config = {
},
},
extend: {
screens: {
xl: "1200px",
"2xl": "1400px",
},
keyframes: {
wiggle: {
"0%, 100%": { transform: "scale(100%)" },

6
src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
View file

@ -182,11 +182,7 @@ test("search components", async ({ page }) => {
await page.getByText("Exit", { exact: true }).click();
}
await page
.getByText("Components", {
exact: true,
})
.click();
await page.getByTestId("components-btn").click();
await page.getByPlaceholder("Search components").fill("Chat Input");
await page.getByText("Chat Input", { exact: true }).isVisible();

4
src/frontend/tests/core/features/auto-login-off.spec.ts
View file

@ -136,7 +136,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings", { exact: true }).last().click();
await page.getByText("Flow Settings", { exact: true }).last().click();
await page.getByPlaceholder("Flow Name").fill(randomFlowName);
@ -210,7 +210,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings", { exact: true }).last().click();
await page.getByText("Flow Settings", { exact: true }).last().click();
await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName);

2
src/frontend/tests/core/features/store-shard-2.spec.ts
View file

@ -119,7 +119,7 @@ test("should share component with share button", async ({ page }) => {
await page.waitForTimeout(1000);
const flowName = await page.getByTestId("flow_name").innerText();
await page.getByTestId("flow_name").click();
await page.getByText("Settings").click();
await page.getByText("Flow Settings").click();
const flowDescription = await page
.getByPlaceholder("Flow description")
.inputValue();

4
src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
View file

@ -42,7 +42,7 @@ test("should be able to move flow from folder, rename it and be displayed on cor
await page.getByTestId("fit_view").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings").click();
await page.getByText("Flow Settings").click();
await page.getByPlaceholder("Flow name").fill(randomName);
await page.getByText("Save").last().click();
await page.getByTestId("icon-ChevronLeft").last().click();
@ -89,7 +89,7 @@ test("should be able to move flow from folder, rename it and be displayed on cor
await page.getByTestId(`card-${randomName}`).first().click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings").click();
await page.getByText("Flow Settings").click();
await page.getByPlaceholder("Flow name").fill(secondRandomName);
await page.getByText("Save").last().click();
await page.getByTestId("icon-ChevronLeft").last().click();

4
src/frontend/tests/extended/features/flowSettings.spec.ts
View file

@ -32,7 +32,7 @@ test("flowSettings", async ({ page }) => {
await page.waitForTimeout(1000);
await page.getByTestId("flow_name").click();
await page.getByText("Settings").first().click();
await page.getByText("Flow Settings").first().click();
await page
.getByPlaceholder("Flow name")
.fill(
@ -56,7 +56,7 @@ test("flowSettings", async ({ page }) => {
await page.getByText("Changes saved successfully").isVisible();
await page.getByTestId("flow_name").click();
await page.getByText("Settings").first().click();
await page.getByText("Flow Settings").first().click();
const flowName = await page.getByPlaceholder("Flow name").inputValue();
const flowDescription = await page