refactor: enhance MCP configuration handling in connection settings (#1985)

* refactor: enhance MCP configuration handling in connection settings

- Introduced `useMcpConfiguration` hook to fetch MCP configuration directly, simplifying data management.
- Updated `McpConfigurationForm` to accept `stateSchema`, `isLoading`, and `error` props for improved state handling.
- Removed local state management for MCP scopes in `SettingsTab`, streamlining the component structure.
- Enhanced the `ConnectionInspectorViewContent` to utilize the new hook for better integration of MCP settings.

* refactor: streamline MCP configuration handling in connection settings

- Updated `useMcpConfiguration` to improve data fetching for MCP scopes, enhancing loading state management.
- Simplified the `SettingsTab` component by directly utilizing fetched scopes, improving clarity and reducing local state management.
- Cleaned up comments and formatting for better code organization.

Author: viniciusventura29

apps/mesh/src/web/components/details/connection.tsx

@@ -72,7 +72,10 @@ import { useMcp } from "use-mcp/react";
 import { z } from "zod";
 import { authClient } from "@/web/lib/auth-client";
 import { ViewLayout, ViewTabs, ViewActions } from "./layout";
-import { McpConfigurationForm } from "./mcp-configuration-form";
+import {
+  McpConfigurationForm,
+  useMcpConfiguration,
+} from "./mcp-configuration-form";
 
 function ConnectionInspectorViewContent() {
   const router = useRouter();
@@ -438,7 +441,17 @@ function SettingsTab({
   const [mcpInitialState, setMcpInitialState] = useState<
     Record<string, unknown>
   >(connection.configuration_state ?? {});
-  const [mcpScopes] = useState<string[]>(connection.configuration_scopes ?? []);
+
+  const {
+    stateSchema: mcpStateSchema,
+    scopes: fetchedScopes,
+    isLoading: isMcpConfigLoading,
+    error: mcpConfigError,
+  } = useMcpConfiguration(connection.id);
+
+  const mcpScopes = isMcpConfigLoading
+    ? (connection.configuration_scopes ?? [])
+    : fetchedScopes;
 
   // Reset MCP state when connection changes
   // oxlint-disable-next-line ban-use-effect/ban-use-effect
@@ -541,10 +554,11 @@ function SettingsTab({
         {hasMcpBinding && (
           <div className="w-3/5 min-w-0 overflow-auto">
             <McpConfigurationForm
-              connection={connection}
               formState={mcpFormState}
               onFormStateChange={setMcpFormState}
-              isSaving={isSavingConfig}
+              stateSchema={mcpStateSchema}
+              isLoading={isMcpConfigLoading}
+              error={mcpConfigError}
             />
           </div>
         )}

apps/mesh/src/web/components/details/mcp-configuration-form.tsx

@@ -1,5 +1,4 @@
 import { createToolCaller } from "@/tools/client";
-import type { ConnectionEntity } from "@/tools/connection/schema";
 import { useToolCall } from "@/web/hooks/use-tool-call";
 import { useProjectContext } from "@/web/providers/project-context-provider";
 import { Loader2 } from "lucide-react";
@@ -14,11 +13,36 @@ interface McpConfigurationResult {
   scopes?: string[];
 }
 
+export function useMcpConfiguration(connectionId: string) {
+  const toolCaller = createToolCaller(connectionId);
+
+  const {
+    data: configResult,
+    isLoading,
+    error,
+  } = useToolCall<Record<string, never>, McpConfigurationResult>({
+    toolCaller,
+    toolName: "MCP_CONFIGURATION",
+    toolInputParams: {},
+    enabled: !!connectionId,
+  });
+
+  const stateSchema = configResult?.stateSchema ?? {
+    type: "object",
+    properties: {},
+  };
+
+  const scopes = configResult?.scopes ?? [];
+
+  return { stateSchema, scopes, isLoading, error };
+}
+
 export interface McpConfigurationFormProps {
-  connection: ConnectionEntity;
   formState: Record<string, unknown>;
   onFormStateChange: (state: Record<string, unknown>) => void;
-  isSaving: boolean;
+  stateSchema: Record<string, unknown>;
+  isLoading: boolean;
+  error: Error | null;
 }
 
 interface FormContext {
@@ -197,29 +221,14 @@ function CustomFieldTemplate(props: FieldTemplateProps) {
 }
 
 export function McpConfigurationForm({
-  connection,
   formState,
   onFormStateChange,
+  stateSchema,
+  isLoading,
+  error,
 }: McpConfigurationFormProps) {
   const { org } = useProjectContext();
   const navigate = useNavigate();
-  const toolCaller = createToolCaller(connection.id);
-
-  const {
-    data: configResult,
-    isLoading,
-    error,
-  } = useToolCall<Record<string, never>, McpConfigurationResult>({
-    toolCaller,
-    toolName: "MCP_CONFIGURATION",
-    toolInputParams: {},
-    enabled: !!connection.id,
-  });
-
-  const stateSchema = configResult?.stateSchema ?? {
-    type: "object",
-    properties: {},
-  };
 
   const handleChange = (data: { formData?: Record<string, unknown> }) => {
     if (data.formData) {