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

fix: add collapsible function to templates and fix design bugs (#4305)

Browse source 
* Updated colors

* Fixed design for small screens

* Change border radius

* Changed size of text on templates description

* Fix shine effect on small screens

* Fixed icons on starter templates

* Updated mono font to JetBrains

* Updated icon hit area for X

* Added gradient wrapper and x-gradient

* Changed colors and font weights for nav component

* Added zoom on hover of gradient

* Fixed input size

* Fixed all templates to show everything

* Hide scrollbar

* Change text size of card

* Removed title of the categories

* Removed unused currentTab from templatecategory

* Updated position of search icon

* Updated style of inputs

* Updated search clear button

* Fixed bug on small screens

* Added no results query

* Fixed background on get started cards

* Added focus ring on nav component

* Added tab index to search and sidebar buttons

* Added keyboard navigation to templates

* Updated templatesModal to use ShadCN Sidebar

* Implemented collapsible sidebar

* Fix collapsible to work on mobile but be overlaying content

* Added noise to styleUtils

* Updated padding and sizes for mobile

* Updated text size

* Updated font family to inter

* Made get started components fetch title and description from the flow

* Updated description on get started component

* Updated naming of sidebar

* Updated description of start from scratch

* Updated color of selected sidebar item

* Changed text color for sidebar not active items

* changed description sizes

* changed to line clamp

* Reduced gap between icon and category text

* Fixed no results state

* Fixed X icon only appearing on hover

* Fix auto focus issue

* fixed hover color of primary button

* Fixed gradients to use stops if it exists and stop using random gradient

* removed random gradient

* Fixed design of cards in templates

* Updated nav to go through tests

* Fixed focus on input

* [autofix.ci] apply automated fixes

* New color

* fix testes

* Fixed starter projects test

* ✨ (starter-projects.spec.ts): add Page import to test function parameters for better code readability and maintainability
📝 (starter-projects.spec.ts): refactor test to include a function for waiting for template visibility, improving code readability and reducing duplication

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Oliveira 2024-10-31 16:39:58 -03:00 • committed by GitHub
commit 3279b8a1e8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1312 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/frontend/tests/extended/features/starter-projects.spec.ts
View file

@ -1,4 +1,4 @@
import { expect, test } from "@playwright/test";
import { expect, Page, test } from "@playwright/test";
test("user must be able to interact with starter projects", async ({
page,
@ -22,9 +22,7 @@ test("user must be able to interact with starter projects", async ({
}
expect(page.getByText("Start from scratch")).toBeVisible();
expect(
page.getByRole("button", { name: "Create Blank Project" }),
).toBeVisible();
expect(page.getByRole("button", { name: "Blank Flow" })).toBeVisible();
await page.getByTestId("side_nav_options_all-templates").click();
await page.waitForTimeout(500);
@ -70,15 +68,48 @@ test("user must be able to interact with starter projects", async ({
expect(page.getByTestId(`category_title_agents`)).toBeVisible();
await page.waitForTimeout(500);
expect(
page.getByTestId(`template_basic-prompting-(hello,-world)`),
).not.toBeVisible();
expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
expect(page.getByTestId(`template_vector-store-rag`)).not.toBeVisible();
expect(page.getByTestId(`template_travel-planning-agents`)).toBeVisible();
expect(page.getByTestId(`template_sequential-tasks-agent`)).toBeVisible();
expect(page.getByTestId(`template_dynamic-agent`)).toBeVisible();
expect(page.getByTestId(`template_hierarchical-tasks-agent`)).toBeVisible();
expect(page.getByTestId(`template_simple-agent`)).toBeVisible();
await page.waitForTimeout(500);
await waitForTemplateVisibility(page, templateIds);
});
async function waitForTemplateVisibility(page: Page, templateIds: string[]) {
const timeout = 10000; // Increased timeout for better reliability
for (const templateId of templateIds) {
// Wait for the element to be attached to DOM first
await page.waitForSelector(`[data-testid="${templateId}"]`, {
state: "attached",
timeout,
});
// Wait for the element to be visible
await expect(
page.getByTestId(templateId).last(),
`Template ${templateId} should be visible`,
).toBeVisible({
timeout,
});
// Optional: Ensure element is in viewport
const element = page.getByTestId(templateId).last();
await element.scrollIntoViewIfNeeded();
}
}
// Your test code
const templateIds = [
"template_travel-planning-agents",
"template_sequential-tasks-agent",
"template_dynamic-agent",
"template_hierarchical-tasks-agent",
"template_simple-agent",
];