feat: create an IO Category (#8229)

* create an IO bundle

* Update styleUtils.ts

* [autofix.ci] apply automated fixes

* change folder names

* [autofix.ci] apply automated fixes

* Update test_endpoints.py

* refactor: update test IDs for input/output components in specs

* test: update test IDs for chat input/output components in decisionFlow.spec.ts

* test: update test IDs for input/output components in generalBugs-shard-5.spec.ts

* Update styleUtils.ts

* 🐛 (typescript_test.yml): increase the maximum shard count to 40 to improve test distribution and efficiency

* fix FE Tests Input output component Ids

* [autofix.ci] apply automated fixes

* ✅ (filterEdge-shard-1.spec.ts): update test to log error message when element is not visible before asserting visibility

* ✅ (notifications.spec.ts): update test selectors for better clarity and consistency in the notifications feature test suite

* 🐛 (typescript_test.yml): adjust the maximum shard count to 10 to prevent exceeding the limit and optimize test execution.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: deon-sanchez <deon.sanchez@datastax.com>
Co-authored-by: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
This commit is contained in:
Edwin Jose 2025-05-30 13:58:34 -04:00 • committed by GitHub
commit dc222d93f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
62 changed files with 130 additions and 138 deletions

View file

@ -205,6 +205,7 @@ export const FILE_ICONS = {
export const SIDEBAR_CATEGORIES = [
{ display_name: "Saved", name: "saved_components", icon: "GradientSave" },
{ display_name: "I/O", name: "input_output", icon: "Cable" },
{ display_name: "Inputs", name: "inputs", icon: "Download" },
{ display_name: "Outputs", name: "outputs", icon: "Upload" },
{ display_name: "Prompts", name: "prompts", icon: "TerminalSquare" },
@ -284,6 +285,7 @@ export const SIDEBAR_BUNDLES = [
export const categoryIcons: Record<string, string> = {
saved_components: "GradientSave",
input_output: "Cable",
inputs: "Download",
outputs: "Upload",
prompts: "TerminalSquare",
@ -311,6 +313,7 @@ export const categoryIcons: Record<string, string> = {
export const nodeIconToDisplayIconMap: Record<string, string> = {
//Category Icons
input_output: "Cable",
inputs: "Download",
outputs: "Upload",
prompts: "TerminalSquare",

View file

@ -19,11 +19,11 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page.waitForSelector('[data-testid="inputsChat Input"]', {
await page.waitForSelector('[data-testid="input_outputChat Input"]', {
timeout: 2000,
});
// Hover over the component and verify plus icon
const componentLocator = page.getByTestId("inputsChat Input");
const componentLocator = page.getByTestId("input_outputChat Input");
// Find the plus icon within the specific component container
const plusIcon = componentLocator.getByTestId("icon-Plus");

View file

@ -56,8 +56,7 @@ test(
.isVisible();
});
await expect(page.getByTestId("disclosure-inputs")).toBeVisible();
await expect(page.getByTestId("disclosure-outputs")).toBeVisible();
await expect(page.getByTestId("disclosure-i/o")).toBeVisible();
await expect(page.getByTestId("disclosure-prompts")).toBeVisible();
await expect(page.getByTestId("disclosure-models")).toBeVisible();
await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
@ -72,8 +71,8 @@ test(
await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
await expect(page.getByTestId("outputsChat Output")).toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
await expect(page.getByTestId("promptsPrompt")).toBeVisible();
await expect(page.getByTestId("helpersMessage History")).toBeVisible();
await expect(page.getByTestId("langchain_utilitiesCSVAgent")).toBeVisible();
@ -97,8 +96,8 @@ test(
await page.getByTestId("sidebar-filter-reset").click();
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("outputsChat Output")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Output")).not.toBeVisible();
await expect(page.getByTestId("promptsPrompt")).not.toBeVisible();
await expect(page.getByTestId("helpersMessage History")).not.toBeVisible();
await expect(

View file

@ -17,14 +17,14 @@ test(
//first component
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text input");
await page.waitForSelector('[data-testid="inputsText Input"]', {
await page.waitForSelector('[data-testid="input_outputText Input"]', {
timeout: 1000,
});
await zoomOut(page, 3);
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
@ -75,12 +75,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 1000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 600, y: 200 },
});

View file

@ -22,25 +22,25 @@ test(
await expect(page.getByTestId("sidebar-search-input")).toBeFocused({
timeout: 1000,
});
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
// Type "chat" to search for chat components
await page.keyboard.type("chat");
await expect(page.getByTestId("inputsChat Input")).toBeVisible({
await expect(page.getByTestId("input_outputChat Input")).toBeVisible({
timeout: 1000,
});
// Verify disclosures open when search has content
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
// Press Tab to focus first result
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
// Verify some expected chat-related components are visible
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
await expect(page.getByTestId("outputsChat Output")).toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
// Press Space to select the component
await page.keyboard.press("Space");
@ -51,7 +51,7 @@ test(
// Clear search input and verify disclosures are closed
await page.getByTestId("sidebar-search-input").clear();
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
// Test Enter key selection
await page.keyboard.press("/");
@ -72,11 +72,11 @@ test(
await page.keyboard.press("/");
await page.getByTestId("sidebar-search-input").clear();
await expect(page.getByTestId("sidebar-search-input")).toHaveValue("");
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
await expect(page.getByTestId("sidebar-search-input")).toBeFocused();
await page.keyboard.press("Escape");
await expect(page.getByTestId("sidebar-search-input")).not.toBeFocused();
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("input_outputChat Input")).not.toBeVisible();
},
);

View file

@ -22,12 +22,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 100000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-chat-output").click();
@ -38,24 +38,24 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page.waitForSelector('[data-testid="inputsChat Input"]', {
await page.waitForSelector('[data-testid="input_outputChat Input"]', {
timeout: 100000,
});
await page
.getByTestId("inputsChat Input")
.getByTestId("input_outputChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text output");
await page.waitForSelector('[data-testid="outputsText Output"]', {
await page.waitForSelector('[data-testid="input_outputText Output"]', {
timeout: 100000,
});
await page
.getByTestId("outputsText Output")
.getByTestId("input_outputText Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 300, y: 300 },
});

View file

@ -20,12 +20,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page.waitForSelector('[data-testid="inputsChat Input"]', {
await page.waitForSelector('[data-testid="input_outputChat Input"]', {
timeout: 3000,
});
await page
.getByTestId("inputsChat Input")
.getByTestId("input_outputChat Input")
.hover({ timeout: 3000 })
.then(async () => {
await page

View file

@ -20,7 +20,7 @@ test(
await page.getByTestId("sidebar-search-input").fill("text input");
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 0, y: 0 },
});
@ -66,7 +66,7 @@ test(
await page.getByTestId("sidebar-search-input").fill("chat output");
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 600, y: 300 },
});

View file

@ -29,14 +29,14 @@ test(
//---------------------------------- CHAT INPUT
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page.waitForSelector('[data-testid="inputsChat Input"]', {
await page.waitForSelector('[data-testid="input_outputChat Input"]', {
timeout: 2000,
});
await zoomOut(page, 6);
await page
.getByTestId("inputsChat Input")
.getByTestId("input_outputChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
@ -190,29 +190,29 @@ test(
//---------------------------------- CHAT OUTPUT
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 2000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 800, y: 300 },
});
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 2000,
});
//---------------------------------- CHAT OUTPUT
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 2000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 800, y: 400 },
});
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 2000,
});
//----------------------------------

View file

@ -92,7 +92,7 @@ test(
});
await page
.getByTestId("outputsText Output")
.getByTestId("input_outputText Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 500, y: 100 },
});

View file

@ -26,7 +26,7 @@ test.skip(
await page.getByTestId("sidebar-search-input").fill("text input");
await page.waitForTimeout(1000);
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
@ -72,7 +72,7 @@ test.skip(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text output");
await page
.getByTestId("outputsText Output")
.getByTestId("input_outputText Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();

View file

@ -19,12 +19,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text input");
await page.waitForSelector('[data-testid="inputsText Input"]', {
await page.waitForSelector('[data-testid="input_outputText Input"]', {
timeout: 3000,
});
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {});
await zoomOut(page, 4);
@ -32,7 +32,7 @@ test(
await page.waitForTimeout(500);
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 500, y: 150 },
});
@ -40,7 +40,7 @@ test(
await page.waitForTimeout(500);
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 670, y: 200 },
});
@ -75,12 +75,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text");
await page.waitForSelector('[data-testid="outputsText Output"]', {
await page.waitForSelector('[data-testid="input_outputText Output"]', {
timeout: 3000,
});
await page
.getByTestId("outputsText Output")
.getByTestId("input_outputText Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 10, y: 400 },
});

View file

@ -14,12 +14,12 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
});
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 2000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-chat-output").click();
@ -27,12 +27,12 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page.waitForSelector('[data-testid="inputsChat Input"]', {
await page.waitForSelector('[data-testid="input_outputChat Input"]', {
timeout: 2000,
});
await page
.getByTestId("inputsChat Input")
.getByTestId("input_outputChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});

View file

@ -242,7 +242,7 @@ test(
await page.getByTestId("sidebar-search-input").fill("chat output");
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.first()
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 0, y: 0 },

View file

@ -56,8 +56,7 @@ test(
});
const disclosureTestIds = [
"disclosure-inputs",
"disclosure-outputs",
"disclosure-i/o",
"disclosure-data",
"disclosure-models",
"disclosure-helpers",
@ -72,7 +71,7 @@ test(
];
const elementTestIds = [
"outputsChat Output",
"input_outputChat Output",
"dataAPI Request",
"vectorstoresAstra DB",
"langchain_utilitiesTool Calling Agent",
@ -84,7 +83,12 @@ test(
];
await Promise.all(
disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
disclosureTestIds.map((id) => {
if (!expect(page.getByTestId(id)).toBeVisible()) {
console.error(`${id} is not visible`);
}
return expect(page.getByTestId(id)).toBeVisible();
}),
);
await Promise.all(
@ -118,9 +122,12 @@ test(
];
await Promise.all(
visibleModelSpecsTestIds.map((id) =>
expect(page.getByTestId(id)).toBeVisible(),
),
visibleModelSpecsTestIds.map((id) => {
if (!expect(page.getByTestId(id)).toBeVisible()) {
console.error(`${id} is not visible`);
}
return expect(page.getByTestId(id)).toBeVisible();
}),
);
const chainInputElements1 = await page

View file

@ -105,7 +105,7 @@ test(
await page.waitForTimeout(1000);
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 940, y: 100 },
});

View file

@ -13,12 +13,12 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text input");
await page.waitForSelector("data-testid=inputsText Input", {
await page.waitForSelector("data-testid=input_outputText Input", {
timeout: 3000,
});
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();

View file

@ -7,18 +7,18 @@ test(
async ({ page }) => {
await awaitBootstrapTest(page);
await page.getByTestId("blank-flow").click();
await page.waitForSelector('[data-testid="disclosure-inputs"]', {
await page.waitForSelector('[data-testid="disclosure-i/o"]', {
timeout: 3000,
state: "visible",
});
await page.getByTestId("disclosure-inputs").click();
await page.waitForSelector('[data-testid="inputsText Input"]', {
await page.getByTestId("disclosure-i/o").click();
await page.waitForSelector('[data-testid="input_outputText Input"]', {
timeout: 3000,
state: "visible",
});
await page
.getByTestId("inputsText Input")
.getByTestId("input_outputText Input")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-text-input").click();

View file

@ -29,12 +29,12 @@ test(
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForTimeout(500);
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 3000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 400, y: 400 },
});

View file

@ -74,18 +74,18 @@ test(
// Add two chat outputs
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 1000,
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 700, y: 200 },
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 700, y: 400 },
});

View file

@ -24,7 +24,7 @@ test(
await page.getByTestId("sidebar-search-input").fill("text output");
await page
.getByTestId("outputsText Output")
.getByTestId("input_outputText Output")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-text-output").click();

View file

@ -61,7 +61,9 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text output");
await page.getByTestId("outputsText Output").waitFor({ state: "visible" });
await page
.getByTestId("input_outputText Output")
.waitFor({ state: "visible" });
await page.getByTestId("add-component-button-text-output").click();
await page.waitForSelector('[data-testid="title-Text Output"]', {

View file

@ -33,20 +33,20 @@ test(
await page.getByTestId("sidebar-search-input").fill("chat output");
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 0, y: 0 },
});
await page
.getByTestId("outputsChat Output")
.getByTestId("input_outputChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat input");
await page
.getByTestId("inputsChat Input")
.getByTestId("input_outputChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
@ -137,11 +137,11 @@ test(
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("chat output");
await page.waitForSelector('[data-testid="outputsChat Output"]', {
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
timeout: 30000,
});
await page
.locator('//*[@id="outputsChat Output"]')
.locator('//*[@id="input_outputChat Output"]')
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();