fix: make MCP naming changes, change actions to tools (#8860)
* Changed actions to tools * Changed connections to servers * Added no tools found * Changed actions to tools in mcp * Added new label for mcp servers description * Added better descriptions
This commit is contained in:
parent
f4101f9031
commit
180a94a7f3
10 changed files with 30 additions and 30 deletions
|
|
@ -24,7 +24,7 @@ export const MCPServerNotice: FC<{
|
||||||
</div>
|
</div>
|
||||||
<img src={MCPLangflow} alt="MCP Notice Modal" className="rounded-xl" />
|
<img src={MCPLangflow} alt="MCP Notice Modal" className="rounded-xl" />
|
||||||
<p className="text-sm text-secondary-foreground">
|
<p className="text-sm text-secondary-foreground">
|
||||||
Expose flows as actions from clients like Cursor or Claude.
|
Expose flows as tools from clients like Cursor or Claude.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,8 @@ export default function McpComponent({
|
||||||
: "Error"
|
: "Error"
|
||||||
: "Loading..."
|
: "Loading..."
|
||||||
: !server.toolsCount
|
: !server.toolsCount
|
||||||
? "No actions found"
|
? "No tools found"
|
||||||
: `${server.toolsCount} action${server.toolsCount === 1 ? "" : "s"}`,
|
: `${server.toolsCount} tool${server.toolsCount === 1 ? "" : "s"}`,
|
||||||
})),
|
})),
|
||||||
[mcpServers],
|
[mcpServers],
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -256,7 +256,7 @@ export default function AddMcpServerModal({
|
||||||
{initialData ? "Update MCP Server" : "Add MCP Server"}
|
{initialData ? "Update MCP Server" : "Add MCP Server"}
|
||||||
</div>
|
</div>
|
||||||
<span className="text-mmd font-normal text-muted-foreground">
|
<span className="text-mmd font-normal text-muted-foreground">
|
||||||
Save MCP Servers. Manage added connections in{" "}
|
Save MCP Servers. Manage added servers in{" "}
|
||||||
<CustomLink className="underline" to="/settings/mcp-servers">
|
<CustomLink className="underline" to="/settings/mcp-servers">
|
||||||
settings
|
settings
|
||||||
</CustomLink>
|
</CustomLink>
|
||||||
|
|
|
||||||
|
|
@ -162,7 +162,7 @@ export default function ToolsTable({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "name",
|
field: "name",
|
||||||
headerName: isAction ? "Action" : "Slug",
|
headerName: isAction ? "Tool" : "Slug",
|
||||||
flex: 1,
|
flex: 1,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
valueGetter: (params) =>
|
valueGetter: (params) =>
|
||||||
|
|
@ -263,7 +263,7 @@ export default function ToolsTable({
|
||||||
<div className="flex-none px-4">
|
<div className="flex-none px-4">
|
||||||
<Input
|
<Input
|
||||||
icon="Search"
|
icon="Search"
|
||||||
placeholder="Search actions..."
|
placeholder="Search tools..."
|
||||||
inputClassName="h-8"
|
inputClassName="h-8"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
|
|
@ -300,7 +300,7 @@ export default function ToolsTable({
|
||||||
className="text-mmd font-medium"
|
className="text-mmd font-medium"
|
||||||
htmlFor="sidebar-name-input"
|
htmlFor="sidebar-name-input"
|
||||||
>
|
>
|
||||||
Name
|
{isAction ? "Tool name" : "Name"}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -322,7 +322,7 @@ export default function ToolsTable({
|
||||||
className="text-mmd font-medium"
|
className="text-mmd font-medium"
|
||||||
htmlFor="sidebar-desc-input"
|
htmlFor="sidebar-desc-input"
|
||||||
>
|
>
|
||||||
Description
|
{isAction ? "Tool description" : "Description"}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<Textarea
|
<Textarea
|
||||||
|
|
@ -335,7 +335,7 @@ export default function ToolsTable({
|
||||||
/>
|
/>
|
||||||
<div className="text-xs text-muted-foreground">
|
<div className="text-xs text-muted-foreground">
|
||||||
{isAction
|
{isAction
|
||||||
? "This is the description for the action exposed to the clients."
|
? "This is the description for the tool exposed to a client."
|
||||||
: "This is the description for the tool exposed to the agents."}
|
: "This is the description for the tool exposed to the agents."}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -370,7 +370,7 @@ export default function ToolsTable({
|
||||||
Parameters
|
Parameters
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-mmd text-muted-foreground">
|
<p className="text-mmd text-muted-foreground">
|
||||||
Manage inputs for this action
|
Manage inputs for this tool
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -253,8 +253,8 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
|
||||||
MCP Server
|
MCP Server
|
||||||
</div>
|
</div>
|
||||||
<div className="pb-4 text-mmd text-muted-foreground">
|
<div className="pb-4 text-mmd text-muted-foreground">
|
||||||
Access your Project's flows as Actions within a MCP Server. Learn more
|
Access your Project's flows as Tools within a MCP Server. Learn more in
|
||||||
in our
|
our
|
||||||
<a
|
<a
|
||||||
className="text-accent-pink-foreground"
|
className="text-accent-pink-foreground"
|
||||||
href={MCP_SERVER_DEPLOY_TUTORIAL_LINK}
|
href={MCP_SERVER_DEPLOY_TUTORIAL_LINK}
|
||||||
|
|
@ -269,11 +269,11 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
|
||||||
<div className="w-full xl:w-2/5">
|
<div className="w-full xl:w-2/5">
|
||||||
<div className="flex flex-row justify-between">
|
<div className="flex flex-row justify-between">
|
||||||
<ShadTooltip
|
<ShadTooltip
|
||||||
content="Flows in this project can be exposed as callable MCP actions."
|
content="Flows in this project can be exposed as callable MCP tools."
|
||||||
side="right"
|
side="right"
|
||||||
>
|
>
|
||||||
<div className="flex items-center text-mmd font-medium hover:cursor-help">
|
<div className="flex items-center text-mmd font-medium hover:cursor-help">
|
||||||
Flows/Actions
|
Flows/Tools
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
name="info"
|
name="info"
|
||||||
className="ml-1.5 h-4 w-4 text-muted-foreground"
|
className="ml-1.5 h-4 w-4 text-muted-foreground"
|
||||||
|
|
@ -285,11 +285,11 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
|
||||||
<div className="flex flex-row flex-wrap gap-2 pt-2">
|
<div className="flex flex-row flex-wrap gap-2 pt-2">
|
||||||
<ToolsComponent
|
<ToolsComponent
|
||||||
value={flowsMCPData}
|
value={flowsMCPData}
|
||||||
title="MCP Server Actions"
|
title="MCP Server Tools"
|
||||||
description="Select actions to add to this server"
|
description="Select tools to add to this server"
|
||||||
handleOnNewValue={handleOnNewValue}
|
handleOnNewValue={handleOnNewValue}
|
||||||
id="mcp-server-tools"
|
id="mcp-server-tools"
|
||||||
button_description="Edit Actions"
|
button_description="Edit Tools"
|
||||||
editNode={false}
|
editNode={false}
|
||||||
isAction
|
isAction
|
||||||
disabled={false}
|
disabled={false}
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export default function SettingsPage(): JSX.Element {
|
||||||
|
|
||||||
sidebarNavItems.push(
|
sidebarNavItems.push(
|
||||||
{
|
{
|
||||||
title: "MCP Connections",
|
title: "MCP Servers",
|
||||||
href: "/settings/mcp-servers",
|
href: "/settings/mcp-servers",
|
||||||
icon: (
|
icon: (
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ export default function MCPServersPage() {
|
||||||
<div className="flex w-full items-start justify-between gap-6">
|
<div className="flex w-full items-start justify-between gap-6">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<h2 className="flex items-center text-lg font-semibold tracking-tight">
|
<h2 className="flex items-center text-lg font-semibold tracking-tight">
|
||||||
MCP Connections
|
MCP Servers
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
name="Mcp"
|
name="Mcp"
|
||||||
className="ml-2 h-5 w-5 text-primary"
|
className="ml-2 h-5 w-5 text-primary"
|
||||||
|
|
@ -92,7 +92,7 @@ export default function MCPServersPage() {
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-sm font-medium text-muted-foreground">
|
<div className="text-sm font-medium text-muted-foreground">
|
||||||
Servers
|
Added MCP Servers
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
|
|
@ -116,7 +116,9 @@ export default function MCPServersPage() {
|
||||||
? "Timeout"
|
? "Timeout"
|
||||||
: "Error"
|
: "Error"
|
||||||
: "Loading..."
|
: "Loading..."
|
||||||
: `${server.toolsCount} action${server.toolsCount === 1 ? "" : "s"}`}
|
: !server.toolsCount
|
||||||
|
? "No tools found"
|
||||||
|
: `${server.toolsCount} tool${server.toolsCount === 1 ? "" : "s"}`}
|
||||||
</span>
|
</span>
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ test(
|
||||||
state: "visible",
|
state: "visible",
|
||||||
});
|
});
|
||||||
|
|
||||||
await page.waitForSelector("text=actions", { timeout: 30000 });
|
await page.waitForSelector("text=tools", { timeout: 30000 });
|
||||||
|
|
||||||
await page.getByTestId("button_open_actions").click();
|
await page.getByTestId("button_open_actions").click();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
|
||||||
import { zoomOut } from "../../utils/zoom-out";
|
import { zoomOut } from "../../utils/zoom-out";
|
||||||
|
|
||||||
test(
|
test(
|
||||||
"user should be able to manage MCP server actions and configuration",
|
"user should be able to manage MCP server tools and configuration",
|
||||||
{ tag: ["@release", "@workspace", "@components"] },
|
{ tag: ["@release", "@workspace", "@components"] },
|
||||||
async ({ page }) => {
|
async ({ page }) => {
|
||||||
const maxRetries = 5;
|
const maxRetries = 5;
|
||||||
|
|
@ -47,14 +47,14 @@ test(
|
||||||
|
|
||||||
// Verify MCP server tab is visible
|
// Verify MCP server tab is visible
|
||||||
await expect(page.getByTestId("mcp-server-title")).toBeVisible();
|
await expect(page.getByTestId("mcp-server-title")).toBeVisible();
|
||||||
await expect(page.getByText("Flows/Actions")).toBeVisible();
|
await expect(page.getByText("Flows/Tools")).toBeVisible();
|
||||||
|
|
||||||
// Click on Edit Actions button
|
// Click on Edit Tools button
|
||||||
await page.getByTestId("button_open_actions").click();
|
await page.getByTestId("button_open_actions").click();
|
||||||
await page.waitForTimeout(500);
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
// Verify actions modal is open
|
// Verify actions modal is open
|
||||||
await expect(page.getByText("MCP Server Actions")).toBeVisible();
|
await expect(page.getByText("MCP Server Tools")).toBeVisible();
|
||||||
|
|
||||||
// Select some actions
|
// Select some actions
|
||||||
const rowsCount = await page.getByRole("row").count();
|
const rowsCount = await page.getByRole("row").count();
|
||||||
|
|
|
||||||
|
|
@ -105,13 +105,11 @@ test(
|
||||||
|
|
||||||
await page.getByTestId("menu_settings_button").click({ timeout: 3000 });
|
await page.getByTestId("menu_settings_button").click({ timeout: 3000 });
|
||||||
|
|
||||||
await page.waitForSelector('[data-testid="sidebar-nav-MCP Connections"]', {
|
await page.waitForSelector('[data-testid="sidebar-nav-MCP Servers"]', {
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
});
|
});
|
||||||
|
|
||||||
await page
|
await page.getByTestId("sidebar-nav-MCP Servers").click({ timeout: 3000 });
|
||||||
.getByTestId("sidebar-nav-MCP Connections")
|
|
||||||
.click({ timeout: 3000 });
|
|
||||||
|
|
||||||
await page.waitForSelector('[data-testid="add-mcp-server-button-page"]', {
|
await page.waitForSelector('[data-testid="add-mcp-server-button-page"]', {
|
||||||
timeout: 3000,
|
timeout: 3000,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue