feat: Update components input/output display name and descriptions (#8284)

* 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

* fix input and output

* update input and output

* 🐛 (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

* fix conflicts

* update json

* update jsons

* update test chat output

* fix tests

* fix fe tests

* update test

* update json

* [autofix.ci] apply automated fixes

* fix tests

* fix tests

* [autofix.ci] apply automated fixes

* update tests

* update test

* [autofix.ci] apply automated fixes

* fix tests

* fix format

* [autofix.ci] apply automated fixes

* fix test

---------

Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
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>

.github/workflows/typescript_test.yml

@@ -220,12 +220,12 @@ jobs:
 
           echo "Total tests to run: $TEST_COUNT"
 
-          # Calculate optimal shard count - 1 shard per 5 tests, min 1, max 10
+          # Calculate optimal shard count - 1 shard per 5 tests, min 1, max 40
           SHARD_COUNT=$(( (TEST_COUNT + 4) / 5 ))
           if [ $SHARD_COUNT -lt 1 ]; then
             SHARD_COUNT=1
-          elif [ $SHARD_COUNT -gt 10 ]; then
-            SHARD_COUNT=10
+          elif [ $SHARD_COUNT -gt 40 ]; then
+            SHARD_COUNT=40
           fi
 
           # Create the matrix combinations string

src/backend/base/langflow/base/embeddings/model.py

@@ -7,7 +7,7 @@ class LCEmbeddingsModel(Component):
     trace_type = "embedding"
 
     outputs = [
-        Output(display_name="Embeddings", name="embeddings", method="build_embeddings"),
+        Output(display_name="Embedding Model", name="embeddings", method="build_embeddings"),
     ]
 
     def _validate_outputs(self) -> None:

src/backend/base/langflow/base/models/model.py

@@ -50,7 +50,7 @@ class LCModelComponent(Component):
     ]
 
     outputs = [
-        Output(display_name="Message", name="text_output", method="text_response"),
+        Output(display_name="Model Response", name="text_output", method="text_response"),
         Output(display_name="Language Model", name="model_output", method="build_model"),
     ]
 

src/backend/base/langflow/components/input_output/chat.py

@@ -26,7 +26,7 @@ class ChatInput(ChatComponent):
     inputs = [
         MultilineInput(
             name="input_value",
-            display_name="Text",
+            display_name="Input Text",
             value="",
             info="Message to be passed as input.",
             input_types=[],
@@ -88,7 +88,7 @@ class ChatInput(ChatComponent):
         ),
     ]
     outputs = [
-        Output(display_name="Message", name="message", method="message_response"),
+        Output(display_name="Chat Message", name="message", method="message_response"),
     ]
 
     async def message_response(self) -> Message:

src/backend/base/langflow/components/input_output/chat_output.py

@@ -30,7 +30,7 @@ class ChatOutput(ChatComponent):
     inputs = [
         HandleInput(
             name="input_value",
-            display_name="Text",
+            display_name="Inputs",
             info="Message to be passed as output.",
             input_types=["Data", "DataFrame", "Message"],
             required=True,
@@ -98,7 +98,7 @@ class ChatOutput(ChatComponent):
     ]
     outputs = [
         Output(
-            display_name="Message",
+            display_name="Output Message",
             name="message",
             method="message_response",
         ),

src/backend/base/langflow/components/input_output/text.py

@@ -5,7 +5,7 @@ from langflow.schema.message import Message
 
 class TextInputComponent(TextComponent):
     display_name = "Text Input"
-    description = "Get text inputs from the Playground."
+    description = "Get user text inputs."
     icon = "type"
     name = "TextInput"
 
@@ -17,7 +17,7 @@ class TextInputComponent(TextComponent):
         ),
     ]
     outputs = [
-        Output(display_name="Message", name="text", method="text_response"),
+        Output(display_name="Output Text", name="text", method="text_response"),
     ]
 
     def text_response(self) -> Message:

src/backend/base/langflow/components/input_output/text_output.py

@@ -5,19 +5,19 @@ from langflow.schema.message import Message
 
 class TextOutputComponent(TextComponent):
     display_name = "Text Output"
-    description = "Display a text output in the Playground."
+    description = "Sends text output via API."
     icon = "type"
     name = "TextOutput"
 
     inputs = [
         MultilineInput(
             name="input_value",
-            display_name="Text",
+            display_name="Inputs",
             info="Text to be passed as output.",
         ),
     ]
     outputs = [
-        Output(display_name="Message", name="text", method="text_response"),
+        Output(display_name="Output Text", name="text", method="text_response"),
     ]
 
     def text_response(self) -> Message:

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -46,7 +46,7 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 
@@ -69,7 +69,7 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 
@@ -109,7 +109,7 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 

src/frontend/tests/core/features/freeze.spec.ts

@@ -123,7 +123,7 @@ test(
 
     //connection 2
     await page
-      .getByTestId("handle-textinput-shownode-message-right")
+      .getByTestId("handle-textinput-shownode-output text-right")
       .nth(0)
       .click();
     await page.getByTestId("handle-splittext-shownode-separator-left").click();
@@ -140,7 +140,7 @@ test(
       .getByTestId("handle-parsedata-shownode-message-right")
       .nth(0)
       .click();
-    await page.getByTestId("handle-chatoutput-shownode-text-left").click();
+    await page.getByTestId("handle-chatoutput-shownode-inputs-left").click();
 
     await page
       .getByTestId("textarea_str_input_value")
@@ -156,14 +156,14 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page.waitForSelector(
-      '[data-testid="output-inspection-message-chatoutput"]',
+      '[data-testid="output-inspection-output message-chatoutput"]',
       {
         timeout: 1000,
       },
     );
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 
@@ -180,14 +180,14 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page.waitForSelector(
-      '[data-testid="output-inspection-message-chatoutput"]',
+      '[data-testid="output-inspection-output message-chatoutput"]',
       {
         timeout: 1000,
       },
     );
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 
@@ -233,14 +233,14 @@ test(
     await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
     await page.waitForSelector(
-      '[data-testid="output-inspection-message-chatoutput"]',
+      '[data-testid="output-inspection-output message-chatoutput"]',
       {
         timeout: 1000,
       },
     );
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 
@@ -265,14 +265,14 @@ test(
     });
 
     await page.waitForSelector(
-      '[data-testid="output-inspection-message-chatoutput"]',
+      '[data-testid="output-inspection-output message-chatoutput"]',
       {
         timeout: 1000,
       },
     );
 
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 

src/frontend/tests/core/features/playground.spec.ts

@@ -63,13 +63,17 @@ test(
     await adjustScreenView(page);
 
     await page
-      .getByTestId("handle-chatinput-noshownode-message-source")
+      .getByTestId("handle-chatinput-noshownode-chat message-source")
       .click();
 
-    await page.getByTestId("handle-textoutput-shownode-text-left").click();
+    await page.getByTestId("handle-textoutput-shownode-inputs-left").click();
 
-    await page.getByTestId("handle-textoutput-shownode-message-right").click();
-    await page.getByTestId("handle-chatoutput-noshownode-text-target").click();
+    await page
+      .getByTestId("handle-textoutput-shownode-output text-right")
+      .click();
+    await page
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
+      .click();
 
     await page.getByRole("button", { name: "Playground", exact: true }).click();
     await page.waitForSelector('[data-testid="input-chat-playground"]', {

src/frontend/tests/core/features/stop-building.spec.ts

@@ -85,7 +85,9 @@ test(
       .click();
 
     //connection 2
-    await page.getByTestId("handle-textinput-shownode-message-right").click();
+    await page
+      .getByTestId("handle-textinput-shownode-output text-right")
+      .click();
     await page.getByTestId("handle-splittext-shownode-separator-left").click();
 
     //connection 3
@@ -94,7 +96,9 @@ test(
 
     //connection 4
     await page.getByTestId("handle-parsedata-shownode-message-right").click();
-    await page.getByTestId("handle-chatoutput-noshownode-text-target").click();
+    await page
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
+      .click();
 
     await page.getByTestId("fit_view").click();
 

src/frontend/tests/core/integrations/decisionFlow.spec.ts

@@ -248,7 +248,7 @@ test(
       .nth(1)
       .click();
     await page
-      .getByTestId("handle-chatinput-noshownode-message-source")
+      .getByTestId("handle-chatinput-noshownode-chat message-source")
       .nth(0)
       .click();
     await page
@@ -289,7 +289,7 @@ test(
       .nth(0)
       .click();
     await page
-      .getByTestId("handle-openaimodel-shownode-message-right")
+      .getByTestId("handle-openaimodel-shownode-model response-right")
       .nth(0)
       .click();
     await page
@@ -335,7 +335,7 @@ test(
       .nth(1)
       .click();
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .nth(0)
       .click();
     await page
@@ -343,7 +343,7 @@ test(
       .nth(0)
       .click();
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .nth(1)
       .click();
     const apiKeyInput = page.getByTestId("popover-anchor-input-api_key");

src/frontend/tests/core/integrations/similarity.spec.ts

@@ -159,7 +159,7 @@ test(
 
     //connection 1
     const openAiEmbeddingOutput_0 = await page
-      .getByTestId("handle-openaiembeddings-shownode-embeddings-right")
+      .getByTestId("handle-openaiembeddings-shownode-embedding model-right")
       .nth(0);
     await openAiEmbeddingOutput_0.hover();
     await page.mouse.down();
@@ -172,7 +172,7 @@ test(
 
     //connection 2
     const openAiEmbeddingOutput_1 = await page
-      .getByTestId("handle-openaiembeddings-shownode-embeddings-right")
+      .getByTestId("handle-openaiembeddings-shownode-embedding model-right")
       .nth(0);
     await openAiEmbeddingOutput_1.hover();
     await page.mouse.down();
@@ -238,7 +238,7 @@ test(
     await parseDataOutput.hover();
     await page.mouse.down();
     const textOutputInput = await page
-      .getByTestId("handle-textoutput-shownode-text-left")
+      .getByTestId("handle-textoutput-shownode-inputs-left")
       .nth(0);
     await textOutputInput.hover();
     await page.mouse.up();
@@ -249,7 +249,7 @@ test(
 
     await page
       .getByTestId(/rf__node-TextOutput-[a-zA-Z0-9]{5}/)
-      .getByTestId("output-inspection-message-textoutput")
+      .getByTestId("output-inspection-output text-textoutput")
       .first()
       .click();
     const valueSimilarity = await page.getByTestId("textarea").textContent();

src/frontend/tests/core/integrations/textInputOutput.spec.ts

@@ -41,7 +41,7 @@ test.skip(
     await adjustScreenView(page);
     let visibleElementHandle;
     const elementsTextInputOutput = await page
-      .getByTestId("handle-textinput-shownode-text-right")
+      .getByTestId("handle-textinput-shownode-output text-right")
       .all();
     for (const element of elementsTextInputOutput) {
       if (await element.isVisible()) {
@@ -102,7 +102,7 @@ test.skip(
     await visibleElementHandle.hover();
     await page.mouse.down();
     const elementTextOutputInput = await page
-      .getByTestId("handle-textoutput-shownode-text-left")
+      .getByTestId("handle-textoutput-shownode-inputs-left")
       .all();
     for (const element of elementTextOutputInput) {
       if (await element.isVisible()) {
@@ -146,7 +146,7 @@ test.skip(
     await page.getByTestId("button_run_text_output").click();
     await page
       .getByTestId(/^rf__node-TextOutput-[a-zA-Z0-9]+$/)
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .click();
     await page.getByText("Run Flow", { exact: true }).click();
     await page.waitForTimeout(5000);

src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts

@@ -91,13 +91,13 @@ test(
     await elementCombineTextOutput0.click();
 
     const blockedHandle = page
-      .getByTestId("div-handle-textinput-shownode-message-right")
+      .getByTestId("div-handle-textinput-shownode-output text-right")
       .first();
     const secondBlockedHandle = page
       .getByTestId("div-handle-combinetext-shownode-combined text-right")
       .nth(1);
     const thirdBlockedHandle = page
-      .getByTestId("div-handle-textoutput-shownode-message-right")
+      .getByTestId("div-handle-textoutput-shownode-output text-right")
       .first();
 
     const hasGradient = await blockedHandle?.evaluate((el) => {
@@ -129,7 +129,7 @@ test(
       .getByTestId("div-handle-combinetext-shownode-second text-left")
       .first();
     const fourthUnlockedHandle = page
-      .getByTestId("div-handle-textoutput-shownode-text-left")
+      .getByTestId("div-handle-textoutput-shownode-inputs-left")
       .first();
 
     const hasGradientUnlocked = await unlockedHandle?.evaluate((el) => {
@@ -184,7 +184,7 @@ test(
 
     //connection 1
     const elementTextOutput0 = page
-      .getByTestId("handle-textinput-shownode-message-right")
+      .getByTestId("handle-textinput-shownode-output text-right")
       .nth(0);
     await elementTextOutput0.click();
     const elementGroupInput0 = page.getByTestId(
@@ -194,7 +194,7 @@ test(
 
     //connection 2
     const elementTextOutput1 = page
-      .getByTestId("handle-textinput-shownode-message-right")
+      .getByTestId("handle-textinput-shownode-output text-right")
       .nth(2);
     await elementTextOutput1.click();
     const elementGroupInput1 = page
@@ -204,7 +204,7 @@ test(
 
     //connection 3
     const elementTextOutput2 = page
-      .getByTestId("handle-textinput-shownode-message-right")
+      .getByTestId("handle-textinput-shownode-output text-right")
       .nth(1);
     await elementTextOutput2.click();
 
@@ -220,7 +220,7 @@ test(
       .nth(0);
     await elementGroupOutput.click();
     const elementTextOutputInput = page
-      .getByTestId("handle-textoutput-shownode-text-left")
+      .getByTestId("handle-textoutput-shownode-inputs-left")
       .nth(0);
 
     await elementTextOutputInput.click();

src/frontend/tests/core/unit/chatInputOutput.spec.ts

@@ -43,8 +43,10 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
 
   await page.getByTestId("fit_view").click();
 
-  await page.getByTestId("handle-chatinput-noshownode-message-source").click();
-  await page.getByTestId("handle-chatoutput-noshownode-text-target").click();
+  await page
+    .getByTestId("handle-chatinput-noshownode-chat message-source")
+    .click();
+  await page.getByTestId("handle-chatoutput-noshownode-inputs-target").click();
 
   await page.getByText("Playground", { exact: true }).last().click();
   await page.waitForSelector('[data-testid="input-chat-playground"]', {

src/frontend/tests/core/unit/fileUploadComponent.spec.ts

@@ -278,7 +278,7 @@ test(
       .first()
       .click();
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .first()
       .click();
 

src/frontend/tests/extended/features/loop-component.spec.ts

@@ -153,7 +153,7 @@ test(
       .click();
 
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .first()
       .click();
 
@@ -228,13 +228,13 @@ test(
 
     // Verify output
     await page.waitForSelector(
-      '[data-testid="output-inspection-message-chatoutput"]',
+      '[data-testid="output-inspection-output message-chatoutput"]',
       {
         timeout: 1000,
       },
     );
     await page
-      .getByTestId("output-inspection-message-chatoutput")
+      .getByTestId("output-inspection-output message-chatoutput")
       .first()
       .click();
 

src/frontend/tests/extended/features/stop-button-playground.spec.ts

@@ -98,7 +98,7 @@ class CustomComponent(Component):
     await elementCustomComponentOutput.hover();
     await page.mouse.down();
     const elementChatOutput = await page
-      .getByTestId("handle-chatoutput-shownode-text-left")
+      .getByTestId("handle-chatoutput-shownode-inputs-left")
       .first();
     await elementChatOutput.hover();
     await page.mouse.up();

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts

@@ -108,7 +108,7 @@ test(
     await page.waitForTimeout(600);
 
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .nth(0)
       .click();
 
@@ -130,7 +130,7 @@ test(
     await page.getByText("Close").first().click();
     await page.getByTestId("handle-urlcomponent-shownode-result-right").click();
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .nth(1)
       .click();
     await page.waitForTimeout(2000);
@@ -166,7 +166,7 @@ test(
       .click();
 
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .nth(1)
       .click();
 

src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts

@@ -40,7 +40,7 @@ test(
       .click();
 
     await page
-      .getByTestId("handle-chatoutput-shownode-text-left")
+      .getByTestId("handle-chatoutput-shownode-inputs-left")
       .first()
       .click();
 

src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts

@@ -70,13 +70,15 @@ test(
     await page.getByTestId("fit_view").click();
 
     await page
-      .getByTestId("handle-chatinput-noshownode-message-source")
+      .getByTestId("handle-chatinput-noshownode-chat message-source")
       .click();
     await page.getByTestId("handle-openaimodel-shownode-input-left").click();
 
-    await page.getByTestId("handle-openaimodel-shownode-message-right").click();
     await page
-      .getByTestId("handle-chatoutput-noshownode-text-target")
+      .getByTestId("handle-openaimodel-shownode-model response-right")
+      .click();
+    await page
+      .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .last()
       .click();