feat: updated components header styling (#8085)

* Removed unused styles

* Updated node icon to follow design

* Updated node name to follow design and include Beta

* Removed Beta from node status

* Removed unused classes and parameters from GenericNode

* Changed node description padding on input

* Changed paddings and gaps

* removed unused classes

* Added accent purple foreground color to Experimental

* Fixed classes and gaps in generic node

* Fixed node name gaps

* Fixed node status classes and styling

* Removed unused classes and changed run-bg size

* Changed test to use new test id

* Changed Node Name to have beta tooltip

* Changed Build Failed icon to be a circle alert

* Changed Node Status gap and conditions to show spacings correctly

* Changed padding to not change height of other components

* Changed nodeStatus to show validation on small node

* Changed classes to show correct spacing and overflow

* Changed description size

* Fixed description text size

* Fixed input margin

* Fixed description editing not appearing when no description is available

* Fixed status not breaking words

* Updated colors

* Updated node output color

* [autofix.ci] apply automated fixes

* Changed duration style in chat

* Re-added output color

* Updated timeout on mcp server tab test

* Added more timeout to mcp server tab test

* fixed loop component test

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Oliveira 2025-05-22 15:32:16 -03:00 • committed by GitHub
commit 4f9e2705d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 148 additions and 221 deletions

View file

@ -31,7 +31,7 @@ test(
await page
.getByTestId("dataURL")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
targetPosition: { x: 50, y: 100 },
});
// Add Loop component
@ -44,7 +44,7 @@ test(
await page
.getByTestId("logicLoop")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 300, y: 100 },
targetPosition: { x: 280, y: 100 },
});
// Add Update Data component
@ -70,14 +70,14 @@ test(
await page
.getByTestId("processingData to Message")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 700, y: 100 },
targetPosition: { x: 720, y: 100 },
});
//This one is for testing the wrong loop message
await page
.getByTestId("processingData to Message")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 700, y: 400 },
targetPosition: { x: 720, y: 400 },
});
await page
@ -100,7 +100,7 @@ test(
await page
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 900, y: 100 },
targetPosition: { x: 940, y: 100 },
});
await page.getByTestId("fit_view").click();

View file

@ -64,7 +64,7 @@ test(
expect(cellsCount).toBeGreaterThan(0);
await page.getByRole("gridcell").first().click();
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
const isChecked = await page
.locator('input[data-ref="eInput"]')
@ -73,7 +73,7 @@ test(
if (!isChecked) {
await page.locator('input[data-ref="eInput"]').first().click();
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
}
const isCheckedAgain = await page
.locator('input[data-ref="eInput"]')
@ -82,7 +82,7 @@ test(
if (isCheckedAgain) {
await page.locator('input[data-ref="eInput"]').first().click();
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
}
const isCheckedAgainAgain = await page
@ -97,13 +97,13 @@ test(
.locator('input[data-ref="eInput"]')
.nth(rowsCount + 1)
.click();
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
await page
.getByRole("gridcell")
.nth(cellsCount - 1)
.click();
await page.waitForTimeout(500);
await page.waitForTimeout(1000);
const isLastChecked = await page
.locator('input[data-ref="eInput"]')
@ -224,8 +224,9 @@ test(
}
// Verify tools are available
await page.waitForTimeout(3000);
await page.getByTestId("dropdown_str_tool").click();
await page.waitForTimeout(2000);
await page.waitForTimeout(3000);
const fetchOptionCount = await page.getByText("mcp_test_name").count();
expect(fetchOptionCount).toBeGreaterThan(0);

View file

@ -2,10 +2,10 @@ import { expect, Page, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
async function toggleNodeState(page: Page, action: "minimize" | "expand") {
const expectedCount = action === "minimize" ? 0 : 1;
const expectedCount = action === "minimize" ? 1 : 0;
await page.getByTestId("more-options-modal").click();
await page.getByTestId(`${action}-button-modal`).click();
expect(await page.getByTestId("show-node-content").count()).toBe(
expect(await page.getByTestId("hide-node-content").count()).toBe(
expectedCount,
);
}
@ -36,7 +36,7 @@ test(
expect(await page.getByText("Toolset", { exact: true }).count()).toBe(0);
await page.getByTestId("title-Text Output").click();
expect(await page.getByTestId("show-node-content").count()).toBe(1);
expect(await page.getByTestId("hide-node-content").count()).toBe(0);
for (let i = 0; i < 5; i++) {
await toggleNodeState(page, "minimize");