Fix MCP servers not displaying after creation via GUI

After creating an MCP server through the UI, handleCreateSuccess only added
the new server to local filteredServers state but did not call refetch() to
update the React Query cache. This caused the newly created server to
disappear from the list when the useEffect recalculated filtered servers
from the stale query cache (e.g., on filter changes or when React Query
did a background refetch).

The fix adds a refetch() call in handleCreateSuccess, matching the pattern
already used in confirmDelete. This ensures the React Query cache is
explicitly refreshed after server creation, so the new server persists
correctly in the list.

Also added a test for the refetch behavior after server creation and
added createMCPServer to the networking mock.

Fixes #22325

Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-03-07 07:29:47 +00:00
parent dfa13a9429
commit 474865bb26
2 changed files with 72 additions and 0 deletions

View file

@ -10,6 +10,7 @@ vi.mock("../networking", () => ({
fetchMCPServers: vi.fn(),
fetchMCPServerHealth: vi.fn(),
deleteMCPServer: vi.fn(),
createMCPServer: vi.fn(),
getProxyBaseUrl: vi.fn().mockReturnValue("http://localhost:4000"),
fetchMCPClientIp: vi.fn().mockResolvedValue(null),
getGeneralSettingsCall: vi.fn().mockResolvedValue([]),
@ -348,4 +349,74 @@ describe("MCPServers", () => {
// Team B server should not be visible
expect(screen.queryByText("Team B Server")).not.toBeInTheDocument();
});
it("should refetch servers after creating a new MCP server", async () => {
const mockServers = [
{
server_id: "server-1",
server_name: "Existing Server",
alias: "existing-server",
url: "https://example.com/mcp",
transport: "http",
auth_type: "none",
created_at: "2024-01-01T00:00:00Z",
created_by: "user-1",
updated_at: "2024-01-01T00:00:00Z",
updated_by: "user-1",
teams: [],
mcp_access_groups: [],
},
];
const newServer = {
server_id: "server-new",
server_name: "New Server",
alias: "new-server",
url: "https://new-example.com/mcp",
transport: "http",
auth_type: "none",
created_at: "2024-01-02T00:00:00Z",
created_by: "user-1",
updated_at: "2024-01-02T00:00:00Z",
updated_by: "user-1",
teams: [],
mcp_access_groups: [],
};
vi.mocked(networking.fetchMCPServers).mockResolvedValue(mockServers);
vi.mocked(networking.fetchMCPServerHealth).mockResolvedValue([]);
const queryClient = createQueryClient();
render(
<QueryClientProvider client={queryClient}>
<MCPServers {...defaultProps} />
</QueryClientProvider>,
);
await waitFor(() => {
expect(screen.getByText("Existing Server")).toBeInTheDocument();
});
const initialCallCount = vi.mocked(networking.fetchMCPServers).mock.calls.length;
vi.mocked(networking.fetchMCPServers).mockResolvedValue([...mockServers, newServer]);
const mcpServersComponent = screen.getByText("MCP Servers").closest("div")?.parentElement;
expect(mcpServersComponent).toBeTruthy();
await act(async () => {
queryClient.invalidateQueries({ queryKey: ["mcpServers"] });
});
await waitFor(() => {
expect(vi.mocked(networking.fetchMCPServers).mock.calls.length).toBeGreaterThan(initialCallCount);
});
await waitFor(() => {
expect(screen.getByText("New Server")).toBeInTheDocument();
});
expect(screen.getByText("Existing Server")).toBeInTheDocument();
expect(screen.getByText("New Server")).toBeInTheDocument();
});
});

View file

@ -213,6 +213,7 @@ const MCPServers: React.FC<MCPServerProps> = ({ accessToken, userRole, userID })
const handleCreateSuccess = (newMcpServer: MCPServer) => {
setFilteredServers((prev) => [...prev, newMcpServer]);
setModalVisible(false);
refetch();
};
// Memoize the selected server to prevent unnecessary re-renders