fix: Fix tool mode switch state persistence in NodeToolbarComponent (#5316)

✨ (toggleShadComponent/index.tsx): Refactor ToggleShadComponent to wrap Switch component in a div to prevent event propagation
📝 (nodeToolbarComponent/index.tsx): Add ShortcutDisplay component to display keyboard shortcuts for tool mode button
📝 (nodeToolbarComponent/index.tsx): Remove unused imports (CodeAreaModal, ConfirmationModal, EditNodeModal, ShareModal) from NodeToolbarComponent
📝 (nodeToolbarComponent/index.tsx): Remove duplicated declaration of updateNodeInternals function in NodeToolbarComponent
📝 (nodeToolbarComponent/index.tsx): Refactor handleActivateToolMode function to update tool mode value and node data more efficiently
📝 (nodeToolbarComponent/index.tsx): Refactor handleNodeClass function to handle node class changes more efficiently
📝 (nodeToolbarComponent/index.tsx): Refactor postToolModeValue function to post tool mode value to API more efficiently
📝 (nodeToolbarComponent/index.tsx): Refactor renderToolbarButtons to include ShortcutDisplay component for tool mode button and improve button functionality

✨ (tool-mode.spec.ts): Add test for user interaction with components as tools in the application to ensure proper functionality and user experience.
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-17 19:00:37 -03:00 • committed by GitHub
commit 201d6c7639
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 236 additions and 57 deletions

View file

@ -0,0 +1,132 @@
import { expect, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
test(
"User should be able to use components as tool",
{ tag: ["@release"] },
async ({ page }) => {
await awaitBootstrapTest(page);
await page.getByTestId("blank-flow").click();
await page.waitForSelector('[data-testid="disclosure-vector stores"]', {
timeout: 3000,
state: "visible",
});
await page.getByTestId("disclosure-vector stores").click();
await page.waitForSelector('[data-testid="vectorstoresAstra DB"]', {
timeout: 3000,
state: "visible",
});
await page
.getByTestId("vectorstoresAstra DB")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-astra-db").click();
});
await page.getByTestId("generic-node-title-arrangement").click();
await page.keyboard.press("ControlOrMeta+Shift+m");
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "visible",
});
expect(await page.getByText("toolset").count()).toBeGreaterThan(0);
await page.keyboard.press("ControlOrMeta+Shift+m");
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "hidden",
});
expect(await page.getByText("toolset").count()).toBe(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "visible",
});
expect(await page.getByText("toolset").count()).toBeGreaterThan(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "hidden",
});
expect(await page.getByText("toolset").count()).toBe(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "visible",
});
expect(await page.getByText("toolset").count()).toBeGreaterThan(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "hidden",
});
expect(await page.getByText("toolset").count()).toBe(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "visible",
});
expect(await page.getByText("toolset").count()).toBeGreaterThan(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "hidden",
});
expect(await page.getByText("toolset").count()).toBe(0);
await page.getByTestId("tool-mode-button").click();
await page.waitForSelector("text=toolset", {
timeout: 3000,
state: "visible",
});
await page.getByTestId("disclosure-vector stores").click();
await page.getByTestId("disclosure-agents").click();
await page.waitForSelector('[data-testid="agentsAgent"]', {
timeout: 3000,
state: "visible",
});
await page
.getByTestId("agentsAgent")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-agent").click();
});
await page
.getByTestId("handle-astradb-shownode-toolset-right")
.first()
.click();
await page.getByTestId("handle-agent-shownode-tools-left").first().click();
expect(await page.locator(".react-flow__edge").count()).toBeGreaterThan(0);
},
);