fix: resolve MCP tool eye icon state and hide in chat context (#4993) (#4994)

This commit is contained in:
Daniel 2025-06-21 14:22:20 -05:00 committed by GitHub
parent 6a9503da1d
commit 5b9907b925
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 71 additions and 20 deletions

View file

@ -242,6 +242,7 @@ export const McpExecution = ({
serverName={useMcpServer.serverName}
serverSource={server?.source}
alwaysAllowMcp={alwaysAllowMcp}
isInChatContext={true}
/>
</div>
)}
@ -256,6 +257,7 @@ export const McpExecution = ({
serverName={serverName}
serverSource={undefined}
alwaysAllowMcp={alwaysAllowMcp}
isInChatContext={true}
/>
</div>
)}

View file

@ -10,9 +10,10 @@ type McpToolRowProps = {
serverName?: string
serverSource?: "global" | "project"
alwaysAllowMcp?: boolean
isInChatContext?: boolean
}
const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolRowProps) => {
const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatContext = false }: McpToolRowProps) => {
const { t } = useAppTranslation()
const handleAlwaysAllowChange = () => {
if (!serverName) return
@ -66,25 +67,27 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
</VSCodeCheckbox>
)}
{/* Enabled eye button */}
<button
role="button"
aria-pressed={tool.enabledForPrompt}
aria-label={t("mcp:tool.togglePromptInclusion")}
className={`p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors ${
tool.enabledForPrompt
? "text-vscode-foreground"
: "text-vscode-descriptionForeground opacity-60"
}`}
onClick={handleEnabledForPromptChange}
data-tool-prompt-toggle={tool.name}
title={t("mcp:tool.togglePromptInclusion")}>
<span
className={`codicon ${
tool.enabledForPrompt ? "codicon-eye" : "codicon-eye-closed"
} text-base`}
/>
</button>
{/* Enabled eye button - only show in settings context */}
{!isInChatContext && (
<button
role="button"
aria-pressed={tool.enabledForPrompt}
aria-label={t("mcp:tool.togglePromptInclusion")}
className={`p-1 rounded hover:bg-vscode-toolbar-hoverBackground transition-colors ${
tool.enabledForPrompt
? "text-vscode-foreground"
: "text-vscode-descriptionForeground opacity-60"
}`}
onClick={handleEnabledForPromptChange}
data-tool-prompt-toggle={tool.name}
title={t("mcp:tool.togglePromptInclusion")}>
<span
className={`codicon ${
tool.enabledForPrompt ? "codicon-eye-closed" : "codicon-eye"
} text-base`}
/>
</button>
)}
</div>
)}
</div>

View file

@ -12,6 +12,7 @@ vi.mock("@src/i18n/TranslationContext", () => ({
"mcp:tool.alwaysAllow": "Always allow",
"mcp:tool.parameters": "Parameters",
"mcp:tool.noDescription": "No description",
"mcp:tool.togglePromptInclusion": "Toggle prompt inclusion",
}
return translations[key] || key
},
@ -48,6 +49,7 @@ describe("McpToolRow", () => {
name: "test-tool",
description: "A test tool",
alwaysAllow: false,
enabledForPrompt: true,
}
beforeEach(() => {
@ -141,4 +143,48 @@ describe("McpToolRow", () => {
expect(screen.getByText("First parameter")).toBeInTheDocument()
expect(screen.getByText("Second parameter")).toBeInTheDocument()
})
it("shows eye button when serverName is provided and not in chat context", () => {
render(<McpToolRow tool={mockTool} serverName="test-server" />)
const eyeButton = screen.getByRole("button", { name: "Toggle prompt inclusion" })
expect(eyeButton).toBeInTheDocument()
})
it("hides eye button when isInChatContext is true", () => {
render(<McpToolRow tool={mockTool} serverName="test-server" isInChatContext={true} />)
const eyeButton = screen.queryByRole("button", { name: "Toggle prompt inclusion" })
expect(eyeButton).not.toBeInTheDocument()
})
it("shows correct eye icon based on enabledForPrompt state", () => {
// Test when enabled (should show eye-closed icon)
const { rerender } = render(<McpToolRow tool={mockTool} serverName="test-server" />)
let eyeIcon = screen.getByRole("button", { name: "Toggle prompt inclusion" }).querySelector("span")
expect(eyeIcon).toHaveClass("codicon-eye-closed")
// Test when disabled (should show eye icon)
const disabledTool = { ...mockTool, enabledForPrompt: false }
rerender(<McpToolRow tool={disabledTool} serverName="test-server" />)
eyeIcon = screen.getByRole("button", { name: "Toggle prompt inclusion" }).querySelector("span")
expect(eyeIcon).toHaveClass("codicon-eye")
})
it("sends message to toggle enabledForPrompt when eye button is clicked", () => {
render(<McpToolRow tool={mockTool} serverName="test-server" />)
const eyeButton = screen.getByRole("button", { name: "Toggle prompt inclusion" })
fireEvent.click(eyeButton)
expect(vscode.postMessage).toHaveBeenCalledWith({
type: "toggleToolEnabledForPrompt",
serverName: "test-server",
source: "global",
toolName: "test-tool",
isEnabled: false,
})
})
})