forked from langflow-ai/langflow
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add minimize and expand functionality for UI nodes (langflow-ai…
…#4388) * ✨ (frontend): improve UI by dynamically showing/hiding elements based on showNode state 🔧 (frontend): update node internals when toggling showNode state 📝 (frontend): add test for minimizing and expanding components * 🔧 (handleRenderComponent/index.tsx): refactor getHandleClasses function to improve code readability and maintainability 🔧 (handleRenderComponent/index.tsx): refactor handleClick function to improve code readability and maintainability --------- Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
- Loading branch information
1 parent
99487e5
commit 08fd8c0
Showing
10 changed files
with
193 additions
and
62 deletions.
There are no files selected for viewing
20 changes: 12 additions & 8 deletions
20
src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { expect, test } from "@playwright/test"; | ||
|
|
||
| test("user must be able to minimize and expand a component", async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto("/"); | ||
| await page.waitForSelector('[data-testid="mainpage_title"]', { | ||
| timeout: 30000, | ||
| }); | ||
|
|
||
| await page.waitForSelector('[id="new-project-btn"]', { | ||
| timeout: 30000, | ||
| }); | ||
|
|
||
| let modalCount = 0; | ||
| try { | ||
| const modalTitleElement = await page?.getByTestId("modal-title"); | ||
| if (modalTitleElement) { | ||
| modalCount = await modalTitleElement.count(); | ||
| } | ||
| } catch (error) { | ||
| modalCount = 0; | ||
| } | ||
|
|
||
| while (modalCount === 0) { | ||
| await page.getByText("New Flow", { exact: true }).click(); | ||
| await page.waitForTimeout(3000); | ||
| modalCount = await page.getByTestId("modal-title")?.count(); | ||
| } | ||
|
|
||
| await page.getByTestId("blank-flow").click(); | ||
|
|
||
| await page.getByTestId("sidebar-search-input").click(); | ||
| await page.getByTestId("sidebar-search-input").fill("text input"); | ||
| await page.waitForTimeout(1000); | ||
|
|
||
| await page | ||
| .getByTestId("inputsText Input") | ||
| .dragTo(page.locator('//*[@id="react-flow-id"]')); | ||
|
|
||
| await page.getByTestId("zoom_out").click(); | ||
| await page | ||
| .locator('//*[@id="react-flow-id"]') | ||
| .hover() | ||
| .then(async () => { | ||
| await page.mouse.down(); | ||
| await page.mouse.move(-800, 300); | ||
| }); | ||
|
|
||
| await page.mouse.up(); | ||
|
|
||
| await page.getByTestId("fit_view").click(); | ||
| await page.getByTestId("zoom_out").click(); | ||
| await page.getByTestId("zoom_out").click(); | ||
| await page.getByTestId("zoom_out").click(); | ||
|
|
||
| await page.getByTestId("more-options-modal").click(); | ||
| await page.waitForTimeout(1000); | ||
|
|
||
| await page.getByTestId("minimize-button-modal").first().click(); | ||
|
|
||
| await page.waitForTimeout(1000); | ||
|
|
||
| await expect( | ||
| page.locator(".react-flow__handle-left.no-show").first(), | ||
| ).toBeVisible(); | ||
|
|
||
| await expect( | ||
| page.locator(".react-flow__handle-right.no-show").first(), | ||
| ).toBeVisible(); | ||
|
|
||
| await page.getByTestId("more-options-modal").click(); | ||
|
|
||
| await page.waitForTimeout(1000); | ||
| await page.getByTestId("expand-button-modal").first().click(); | ||
|
|
||
| await page.waitForTimeout(1000); | ||
|
|
||
| await expect(page.locator(".react-flow__handle-left").first()).toBeVisible(); | ||
|
|
||
| await expect(page.locator(".react-flow__handle-right").first()).toBeVisible(); | ||
| }); |