feat: Flow's canvas actions design uplift (#4260)

* init

* move panels and make custom

* post review changes

* [autofix.ci] apply automated fixes

* pr comment fix

* design review fixes

* [autofix.ci] apply automated fixes

* action toolbar positioning feedback

* [autofix.ci] apply automated fixes

* remove extra imports

* test selector updates

* missed a couple

* one more

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Mike Fortman 2024-10-30 19:51:33 -05:00 • committed by GitHub
commit 20b3a6b46e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
75 changed files with 584 additions and 452 deletions

View file

@ -32,14 +32,14 @@ test("user should be able to download a flow or a component", async ({
await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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.getByText("Chat Input", { exact: true }).click();
await page.getByTestId("more-options-modal").click();
@ -135,14 +135,14 @@ test("user should be able to duplicate a flow or a component", async ({
await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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.getByText("Chat Input", { exact: true }).click();
await page.getByTestId("more-options-modal").click();

View file

@ -65,11 +65,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
await page.mouse.up();
await page.mouse.down();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 5000,
});
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
expect(await page.getByText("Saved").isVisible()).toBeTruthy();
@ -122,11 +122,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
await page.mouse.up();
await page.mouse.down();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 5000,
});
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("icon-ChevronLeft").last().click();
@ -154,11 +154,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
await page.mouse.up();
await page.mouse.down();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 5000,
});
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("save-flow-button").click();
await page.getByTestId("icon-ChevronLeft").last().click();

View file

@ -47,10 +47,10 @@ test("user must see on handle click the possibility connections - RetrievalQA",
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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.waitForTimeout(500);
let visibleElementHandle;

View file

@ -42,9 +42,9 @@ test.describe("Flow Page tests", () => {
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
});
});

View file

@ -50,14 +50,14 @@ test("LangflowShortcuts", async ({ page }) => {
await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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("generic-node-title-arrangement").click();
await page.keyboard.press(`${control}+Shift+A`);
await page.getByText("Close").last().click();

View file

@ -51,14 +51,14 @@ test("user should not be able to upload a file larger than the limit", async ({
await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();

View file

@ -80,13 +80,13 @@ The future of AI is both exciting and uncertain. As the technology continues to
await page.mouse.up();
await page.mouse.down();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("note_node").click();
@ -145,9 +145,9 @@ The future of AI is both exciting and uncertain. As the technology continues to
await page.waitForTimeout(1000);
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
targetElement.focus();
targetElement.click();

View file

@ -44,10 +44,10 @@ test("User must be able to stop building from inside Playground", async ({
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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.getByPlaceholder("Search").click();
await page.getByPlaceholder("Search").fill("chat output");
@ -58,10 +58,10 @@ test("User must be able to stop building from inside Playground", async ({
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
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("div-generic-node").nth(0).click();
@ -112,9 +112,9 @@ class CustomComponent(Component):
await page.waitForTimeout(1000);
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
//connection 1
const elementCustomComponentOutput = await page

View file

@ -35,16 +35,16 @@ test("user should be able to see multiple edges and interact with them", async (
await page.getByText("Search Results", { exact: true }).first().isVisible();
const focusElementsOnBoard = async ({ page }) => {
await page.waitForSelector('[title="fit view"]', { timeout: 30000 });
const focusElements = await page.getByTitle("fit view");
await page.waitForSelector('[data-testid="fit_view"]', { timeout: 30000 });
const focusElements = await page.getByTestId("fit_view");
await focusElements.click();
};
await focusElementsOnBoard({ page });
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("input-inspection-retriever").first().click();
await page.getByText("Retriever", { exact: true }).first().isHidden();