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

fix: Mcp composer tool header fix (#9161)

Browse source 
* fix header and button alignment

* color enhancement

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Mike Fortman 2025-07-24 15:18:01 -05:00 • committed by GitHub
commit 242cecea0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx
View file

@ -61,47 +61,36 @@ export default function ToolsComponent({
icon={icon}
/>
<div
className="relative flex flex-col w-full gap-3"
className="relative flex items-center w-full gap-3"
data-testid={"div-" + id}
>
<div className="flex flex-row justify-between">
<div className="flex flex-row justify-between">
<ShadTooltip
content="Flows in this project can be exposed as callable MCP tools."
side="right"
>
<div
className={cn(
"flex items-center hover:cursor-help",
!ENABLE_MCP_COMPOSER && "text-mmd",
)}
>
Flows/Tools
<ForwardedIconComponent
name="info"
className="ml-1.5 h-4 w-4 text-muted-foreground"
aria-hidden="true"
/>
</div>
</ShadTooltip>
</div>
{(visibleActions.length > 0 || isAction) && (
<Button
variant={ENABLE_MCP_COMPOSER ? "outline" : "ghost"}
disabled={!value || disabled}
size="sm"
data-testid="button_open_actions"
onClick={() => setIsModalOpen(true)}
>
<ForwardedIconComponent
name={ENABLE_MCP_COMPOSER ? "wrench" : "Settings2"}
className="icon-size"
strokeWidth={ICON_STROKE_WIDTH}
/>
{button_description}
</Button>
)}
</div>
{(visibleActions.length > 0 || isAction) && (
<Button
variant={
ENABLE_MCP_COMPOSER && button_description ? "outline" : "ghost"
}
disabled={!value || disabled}
size="sm"
data-testid="button_open_actions"
onClick={() => setIsModalOpen(true)}
className={cn(
"absolute -top-8 right-0 !text-mmd font-normal group-hover:text-primary",
!button_description ? "text-muted-foreground" : "",
)}
>
<ForwardedIconComponent
name={
ENABLE_MCP_COMPOSER && button_description
? "wrench"
: "Settings2"
}
className="icon-size"
strokeWidth={ICON_STROKE_WIDTH}
/>
{button_description}
</Button>
)}
{!value ? (
<div className="flex w-full flex-wrap gap-1 overflow-hidden py-1.5">
{[...Array(4)].map((_, index) => (

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

@ -390,7 +390,22 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
</div>
<div className="flex flex-col justify-between gap-8 xl:flex-row">
<div className="w-full xl:w-2/5">
<div className="flex flex-row flex-wrap gap-2">
<div className="flex flex-row justify-between pt-1">
<ShadTooltip
content="Flows in this project can be exposed as callable MCP tools."
side="right"
>
<div className="flex items-center text-mmd font-medium hover:cursor-help">
Flows/Tools
<ForwardedIconComponent
name="info"
className="ml-1.5 h-4 w-4 text-muted-foreground"
aria-hidden="true"
/>
</div>
</ShadTooltip>
</div>
<div className="flex flex-row flex-wrap gap-2 pt-2">
<ToolsComponent
value={flowsMCPData}
title="MCP Server Tools"

4
src/frontend/tests/core/features/filterSidebar.spec.ts
View file

@ -73,7 +73,9 @@ test(
await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
await expect(page.getByTestId("processingPrompt Template")).toBeVisible();
await expect(page.getByTestId("langchain_utilitiesCSV Agent")).toBeVisible();
await expect(
page.getByTestId("langchain_utilitiesCSV Agent"),
).toBeVisible();
await expect(
page.getByTestId("langchain_utilitiesConversationChain"),
).toBeVisible();