🏹 feat: Concurrent MCP Initialization Support (#8677)

* ✨ feat: Enhance MCP Connection Status Management

- Introduced new functions to retrieve and manage connection status for multiple MCP servers, including OAuth flow checks and server-specific status retrieval.
- Refactored the MCP connection status endpoints to support both all servers and individual server queries.
- Replaced the old server initialization hook with a new `useMCPServerManager` hook for improved state management and handling of multiple OAuth flows.
- Updated the MCPPanel component to utilize the new context provider for better state handling and UI updates.
- Fixed a number of UI bugs when initializing servers

* 🗣️ i18n: Remove unused strings from translation.json

* refactor: move helper functions out of the route module into mcp service file

* ci: add tests for newly added functions in mcp service file

* fix: memoize setMCPValues to avoid render loop

packages/data-provider/src/api-endpoints.ts

@@ -134,6 +134,8 @@ export const plugins = () => '/api/plugins';
 
 export const mcpReinitialize = (serverName: string) => `/api/mcp/${serverName}/reinitialize`;
 export const mcpConnectionStatus = () => '/api/mcp/connection/status';
+export const mcpServerConnectionStatus = (serverName: string) =>
+  `/api/mcp/connection/status/${serverName}`;
 export const mcpAuthValues = (serverName: string) => {
   return `/api/mcp/${serverName}/auth-values`;
 };

packages/data-provider/src/data-service.ts

@@ -149,6 +149,12 @@ export const getMCPConnectionStatus = (): Promise<q.MCPConnectionStatusResponse>
   return request.get(endpoints.mcpConnectionStatus());
 };
 
+export const getMCPServerConnectionStatus = (
+  serverName: string,
+): Promise<q.MCPServerConnectionStatusResponse> => {
+  return request.get(endpoints.mcpServerConnectionStatus(serverName));
+};
+
 export const getMCPAuthValues = (serverName: string): Promise<q.MCPAuthValuesResponse> => {
   return request.get(endpoints.mcpAuthValues(serverName));
 };

packages/data-provider/src/react-query/react-query-service.ts

@@ -6,6 +6,7 @@ import type {
 } from '@tanstack/react-query';
 import { Constants, initialModelsConfig } from '../config';
 import { defaultOrderQuery } from '../types/assistants';
+import { MCPServerConnectionStatusResponse } from '../types/queries';
 import * as dataService from '../data-service';
 import * as m from '../types/mutations';
 import { QueryKeys } from '../keys';
@@ -380,3 +381,21 @@ export const useUpdateFeedbackMutation = (
     },
   );
 };
+
+export const useMCPServerConnectionStatusQuery = (
+  serverName: string,
+  config?: UseQueryOptions<MCPServerConnectionStatusResponse>,
+): QueryObserverResult<MCPServerConnectionStatusResponse> => {
+  return useQuery<MCPServerConnectionStatusResponse>(
+    [QueryKeys.mcpConnectionStatus, serverName],
+    () => dataService.getMCPServerConnectionStatus(serverName),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      staleTime: 10000, // 10 seconds
+      enabled: !!serverName,
+      ...config,
+    },
+  );
+};

packages/data-provider/src/types/index.ts

@@ -0,0 +1 @@
+export * from './queries';

packages/data-provider/src/types/queries.ts

@@ -135,6 +135,13 @@ export interface MCPConnectionStatusResponse {
   connectionStatus: Record<string, MCPServerStatus>;
 }
 
+export interface MCPServerConnectionStatusResponse {
+  success: boolean;
+  serverName: string;
+  connectionStatus: string;
+  requiresOAuth: boolean;
+}
+
 export interface MCPAuthValuesResponse {
   success: boolean;
   serverName: string;