From 9c0dcac270fd4f1f5609f7d95486141e0234a7cb Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 29 Apr 2025 17:39:07 -0300
Subject: [PATCH] fix: update texts on mcp component and tab, fix icons not
 updating (#7850)

* Update texts about mcp

* Change generic icon when name changes

* Remove unused imports

* Updated tests
---
 .../base/langflow/components/tools/mcp_component.py       | 4 ++--
 .../src/components/common/genericIconComponent/index.tsx  | 4 +++-
 .../MainPage/pages/homePage/components/McpServerTab.tsx   | 7 ++++---
 .../src/shared/components/delete-confirmation-modal.tsx   | 2 --
 .../tests/extended/features/mcp-server-tab.spec.ts        | 6 +++---
 src/frontend/tests/extended/features/mcp-server.spec.ts   | 8 ++++----
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/backend/base/langflow/components/tools/mcp_component.py b/src/backend/base/langflow/components/tools/mcp_component.py
index b9c47c2f6..90396b56a 100644
--- a/src/backend/base/langflow/components/tools/mcp_component.py
+++ b/src/backend/base/langflow/components/tools/mcp_component.py
@@ -77,8 +77,8 @@ class MCPToolsComponent(Component):
         "headers_input",
     ]
 
-    display_name = "MCP Server"
-    description = "Connect to an MCP server and expose tools."
+    display_name = "MCP Connection"
+    description = "Connect to an MCP server to use its tools."
     icon = "Mcp"
     name = "MCPTools"
 
diff --git a/src/frontend/src/components/common/genericIconComponent/index.tsx b/src/frontend/src/components/common/genericIconComponent/index.tsx
index 85535b0f1..e38c3d2ca 100644
--- a/src/frontend/src/components/common/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/common/genericIconComponent/index.tsx
@@ -23,11 +23,13 @@ export const ForwardedIconComponent = memo(
     ) => {
       const [showFallback, setShowFallback] = useState(false);
       const [iconError, setIconError] = useState(false);
+      const [initialName, setInitialName] = useState(name);
       const [TargetIcon, setTargetIcon] = useState<any>(null);
 
       useEffect(() => {
         // Reset states when icon name changes
-        if (!TargetIcon) {
+        if (!TargetIcon || initialName !== name) {
+          setInitialName(name);
           setIconError(false);
           setTargetIcon(null);
 
diff --git a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
index e3e82f319..0536ead59 100644
--- a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
+++ b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
@@ -122,7 +122,8 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
         MCP Server
       </div>
       <div className="pb-4 text-sm text-muted-foreground">
-        Access your Project's flows as Actions within a MCP Server. Learn how to
+        Access your Project's flows as Actions within a MCP Server. Learn more
+        in our
         <a
           className="text-accent-pink-foreground"
           href={MCP_SERVER_DEPLOY_TUTORIAL_LINK}
@@ -130,7 +131,7 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
           rel="noreferrer"
         >
           {" "}
-          deploy your MCP server to the internet.
+          Projects as MCP Servers guide.
         </a>
       </div>
       <div className="flex flex-row">
@@ -215,7 +216,7 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
             </SyntaxHighlighter>
           </div>
           <div className="p-2 text-sm text-muted-foreground">
-            Use this config in your client. Need help? See the{" "}
+            Add this config to your client of choice. Need help? See the{" "}
             <a
               href={MCP_SERVER_TUTORIAL_LINK}
               target="_blank"
diff --git a/src/frontend/src/shared/components/delete-confirmation-modal.tsx b/src/frontend/src/shared/components/delete-confirmation-modal.tsx
index 8d5c011d1..1ba5068ec 100644
--- a/src/frontend/src/shared/components/delete-confirmation-modal.tsx
+++ b/src/frontend/src/shared/components/delete-confirmation-modal.tsx
@@ -1,6 +1,4 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import { Button } from "@/components/ui/button";
-import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import {
   useDeleteGlobalVariables,
   useGetGlobalVariables,
diff --git a/src/frontend/tests/extended/features/mcp-server-tab.spec.ts b/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
index add0f8290..6ab051601 100644
--- a/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
+++ b/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
@@ -157,14 +157,14 @@ test(
     await page.getByTestId("blank-flow").click();
 
     await page.getByTestId("sidebar-search-input").click();
-    await page.getByTestId("sidebar-search-input").fill("mcp server");
+    await page.getByTestId("sidebar-search-input").fill("mcp connection");
 
-    await page.waitForSelector('[data-testid="toolsMCP Server"]', {
+    await page.waitForSelector('[data-testid="toolsMCP Connection"]', {
       timeout: 30000,
     });
 
     await page
-      .getByTestId("toolsMCP Server")
+      .getByTestId("toolsMCP Connection")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
diff --git a/src/frontend/tests/extended/features/mcp-server.spec.ts b/src/frontend/tests/extended/features/mcp-server.spec.ts
index 6b5088673..4b2f56c0b 100644
--- a/src/frontend/tests/extended/features/mcp-server.spec.ts
+++ b/src/frontend/tests/extended/features/mcp-server.spec.ts
@@ -3,7 +3,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 import { zoomOut } from "../../utils/zoom-out";
 
 test(
-  "user must be able to change mode of MCP server without any issues",
+  "user must be able to change mode of MCP connection without any issues",
   { tag: ["@release", "@workspace", "@components"] },
   async ({ page }) => {
     await awaitBootstrapTest(page);
@@ -13,14 +13,14 @@ test(
     });
     await page.getByTestId("blank-flow").click();
     await page.getByTestId("sidebar-search-input").click();
-    await page.getByTestId("sidebar-search-input").fill("mcp server");
+    await page.getByTestId("sidebar-search-input").fill("mcp connection");
 
-    await page.waitForSelector('[data-testid="toolsMCP Server"]', {
+    await page.waitForSelector('[data-testid="toolsMCP Connection"]', {
       timeout: 30000,
     });
 
     await page
-      .getByTestId("toolsMCP Server")
+      .getByTestId("toolsMCP Connection")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });