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

feat: add minimize and expand functionality for UI nodes (#4388)

Browse source 
* ✨ (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>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-11-05 10:02:10 -03:00 • committed by GitHub
commit 84d07d9ec3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 193 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/frontend/tests/extended/features/minimize.spec.ts Normal file
View file

@ -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();
});