jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: update texts on mcp component and tab, fix icons not updating (#7850)

Browse source 
* Update texts about mcp

* Change generic icon when name changes

* Remove unused imports

* Updated tests
This commit is contained in:
Lucas Oliveira 2025-04-29 17:39:07 -03:00 • committed by GitHub
commit 9c0dcac270
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 16 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/backend/base/langflow/components/tools/mcp_component.py
View file

@ -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"

4
src/frontend/src/components/common/genericIconComponent/index.tsx
View file

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

7
src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
View file

@ -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"

2
src/frontend/src/shared/components/delete-confirmation-modal.tsx
View file

@ -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,

6
src/frontend/tests/extended/features/mcp-server-tab.spec.ts
View file

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

8
src/frontend/tests/extended/features/mcp-server.spec.ts
View file

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