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

@ -56,18 +56,18 @@ test("chat_io_teste", 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"]')
@ -104,7 +104,7 @@ test("chat_io_teste", 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

@ -45,10 +45,10 @@ test("CodeAreaModalComponent", async ({ page }) => {
.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.getByTestId("div-generic-node").click();
await page.getByTestId("code-button-modal").click();

View file

@ -46,10 +46,10 @@ test("dropDownComponent", async ({ page }) => {
.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.getByTestId("title-Amazon Bedrock").click();
await page.getByTestId("dropdown_str_model_id").click();

View file

@ -46,10 +46,10 @@ test("should be able to upload a file", async ({ page }) => {
.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 fileChooserPromise = page.waitForEvent("filechooser");
await page.getByTestId("icon-FileSearch2").click();
const fileChooser = await fileChooserPromise;
@ -67,10 +67,10 @@ test("should be able to upload a file", async ({ page }) => {
.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("parse data");
@ -81,10 +81,10 @@ test("should be able to upload a file", async ({ page }) => {
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();
let visibleElementHandle;

View file

@ -43,10 +43,10 @@ test("FloatComponent", async ({ page }) => {
.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(1000);
await page.locator('//*[@id="float-input"]').click();

View file

@ -43,14 +43,14 @@ test("InputComponent", async ({ page }) => {
.dragTo(page.locator('//*[@id="react-flow-id"]'));
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")

View file

@ -34,10 +34,10 @@ test("InputListComponent", async ({ page }) => {
.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.getByTestId("inputlist_str_urls_0").fill("test test test test");

View file

@ -44,14 +44,14 @@ test("IntComponent", async ({ page }) => {
.dragTo(page.locator('//*[@id="react-flow-id"]'));
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("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
@ -78,14 +78,14 @@ test("IntComponent", async ({ page }) => {
await page.getByTestId("title-OpenAI").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("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();

View file

@ -43,10 +43,10 @@ test("KeypairListComponent", async ({ page }) => {
.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.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();

View file

@ -60,8 +60,8 @@ test("user should interact with link component", async ({ context, page }) => {
.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();
@ -90,8 +90,8 @@ test("user should interact with link component", async ({ context, page }) => {
await page.locator('//*[@id="checkAndSaveBtn"]').click();
await page.waitForTimeout(500);
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
expect(await page.getByText("BUTTON").isVisible()).toBeTruthy();
expect(await page.getByText("Click me").isVisible()).toBeTruthy();

View file

@ -44,10 +44,10 @@ test("NestedComponent", async ({ page }) => {
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.click('//*[@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("dict_nesteddict_headers").first().click();
await page

View file

@ -43,10 +43,10 @@ test("PromptTemplateComponent", async ({ page }) => {
.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.getByTestId("promptarea_prompt_template").click();
await page

View file

@ -53,9 +53,9 @@ test("user should be able to use slider input", async ({ page }) => {
.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.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("title-Ollama").click();
await page.getByTestId("code-button-modal").click();
@ -80,7 +80,7 @@ test("user should be able to use slider input", async ({ page }) => {
await page.locator('//*[@id="checkAndSaveBtn"]').click();
await page.waitForTimeout(500);
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await mutualValidation(page);
@ -88,7 +88,7 @@ test("user should be able to use slider input", async ({ page }) => {
await page.waitForTimeout(500);
await page.getByTitle("zoom out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("more-options-modal").click();
await page.getByText("Advanced", { exact: true }).click();

View file

@ -57,8 +57,8 @@ test("user must be able to interact with table input component", async ({
.getByTestId("helpersCustom Component")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
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("div-generic-node").click();
await page.getByTestId("code-button-modal").click();

View file

@ -44,14 +44,14 @@ test("TextAreaModalComponent", async ({ page }) => {
.dragTo(page.locator('//*[@id="react-flow-id"]'));
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("promptarea_prompt_template").click();
await page.getByTestId("modal-promptarea_prompt_template").fill("{text}");

View file

@ -49,14 +49,14 @@ test("ToggleComponent", 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.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").click();
@ -70,11 +70,11 @@ test("ToggleComponent", async ({ page }) => {
await page.getByText("Close").last().click();
await page.waitForSelector('[title="fit view"]', {
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTitle("fit view").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("toggle_bool_load_hidden").click();
expect(
@ -103,14 +103,14 @@ test("ToggleComponent", async ({ page }) => {
await page.getByTestId("div-generic-node").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("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();