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

src/backend/base/langflow/components/tools/mcp_component.py

@@ -77,8 +77,8 @@ class MCPToolsComponent(Component):
         "headers_input",
     ]
 
-    display_name = "MCP Server"
+    display_name = "MCP Connection"
-    description = "Connect to an MCP server and expose tools."
+    description = "Connect to an MCP server to use its tools."
     icon = "Mcp"
     name = "MCPTools"
 

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);
 

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"

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,

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 },
       });

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 },
       });