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

@ -172,14 +172,14 @@ test("search components", async ({ page }) => {
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").first().click();
await page.getByTestId("more-options-modal").click();

View file

@ -128,12 +128,12 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
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.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings", { exact: true }).last().click();
@ -199,12 +199,12 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
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.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Settings", { exact: true }).last().click();

View file

@ -35,14 +35,14 @@ test("user must be able to send an image on chat", async ({ page }) => {
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

@ -36,10 +36,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
.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();
const outputElements = await page
.getByTestId("handle-retrievalqa-shownode-text-right")
@ -71,10 +71,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
).toBeVisible();
});
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();
const rqaChainInputElements1 = await page
.getByTestId("handle-retrievalqa-shownode-language model-left")
@ -104,10 +104,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
page.getByTestId("input-tooltip-languagemodel").first(),
).toBeVisible();
});
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();
const rqaChainInputElements0 = await page
.getByTestId("handle-retrievalqa-shownode-retriever-left")
@ -138,10 +138,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
).toBeVisible();
});
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();
const rqaChainInputElements2 = await page
.getByTestId("handle-retrievalqa-shownode-memory-left")

View file

@ -46,10 +46,10 @@ test("user must see on handle click the possibility connections - LLMChain", asy
.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);
await page.getByTestId("handle-apirequest-shownode-urls-left").click();

View file

@ -40,14 +40,14 @@ test("user must be able to freeze a path", async ({ page }) => {
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

@ -39,7 +39,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
.getByTestId("inputsText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -61,7 +61,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
.getByTestId("dataURL")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -83,7 +83,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
.getByTestId("helpersSplit Text")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -105,7 +105,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
.getByTestId("helpersParse Data")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -127,7 +127,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -146,7 +146,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
}
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
//connection 1
const urlOutput = await page
@ -172,7 +172,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
await splitTextInput.hover();
await page.mouse.up();
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
//connection 3
const splitTextOutput = await page
@ -198,7 +198,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
await chatOutputInput.hover();
await page.mouse.up();
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await page
.getByTestId("textarea_str_input_value")

View file

@ -46,14 +46,14 @@ test("user must be able to save or delete a global variable", async ({
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.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();
const genericName = Math.random().toString();
const credentialName = Math.random().toString();

View file

@ -26,7 +26,7 @@ test.describe("group node test", () => {
.first()
.click();
await page.waitForTimeout(1000);
await page.getByLabel("fit view").first().click();
await page.getByTestId("fit_view").first().click();
await page.getByTestId("title-OpenAI").click();
await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });

View file

@ -62,18 +62,18 @@ test("fresh start playground", async ({ page }) => {
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.getByTitle("zoom out").click();
await page.getByTitle("zoom out").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("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
const elementsChatInput = await page
.locator('[data-testid="handle-chatinput-shownode-message-right"]')
@ -110,7 +110,7 @@ test("fresh start playground", async ({ page }) => {
// Release the mouse
await page.mouse.up();
await page.getByLabel("fit view").click();
await page.getByTestId("fit_view").click();
await page.getByText("Playground", { exact: true }).last().click();
await page.waitForSelector('[data-testid="input-chat-playground"]', {
timeout: 100000,

View file

@ -117,10 +117,10 @@ test.describe("save component 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();
textArea = page.getByTestId("div-textarea-description");
elementCountText = await textArea?.count();
if (elementCountText > 0) {

View file

@ -42,7 +42,7 @@ test("user must be able to stop a building", async ({ page }) => {
.getByTestId("inputsText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -64,7 +64,7 @@ test("user must be able to stop a building", async ({ page }) => {
.getByTestId("dataURL")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -86,7 +86,7 @@ test("user must be able to stop a building", async ({ page }) => {
.getByTestId("helpersSplit Text")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -108,7 +108,7 @@ test("user must be able to stop a building", async ({ page }) => {
.getByTestId("helpersParse Data")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -130,7 +130,7 @@ test("user must be able to stop a building", async ({ page }) => {
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
@ -149,7 +149,7 @@ test("user must be able to stop a building", async ({ page }) => {
outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
}
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
//connection 1
const urlOutput = await page
@ -175,7 +175,7 @@ test("user must be able to stop a building", async ({ page }) => {
await splitTextInput.hover();
await page.mouse.up();
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
//connection 3
const splitTextOutput = await page
@ -201,7 +201,7 @@ test("user must be able to stop a building", async ({ page }) => {
await chatOutputInput.hover();
await page.mouse.up();
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("textarea_str_input_value").first().fill(",");
@ -252,8 +252,8 @@ class CustomComponent(Component):
.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.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("title-Custom Component").first().click();

View file

@ -103,14 +103,14 @@ test("check if tweaks are updating when someothing on the flow changes", async (
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.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("popover-anchor-input-collection_name").click();
await page
.getByTestId("popover-anchor-input-collection_name")