feat(web): add test functionality to MCPForm and integrate with MCPDetailContent

web/src/app/home/mcp/MCPDetailContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
@@ -21,6 +21,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import MCPForm from '@/app/home/mcp/components/mcp-form/MCPForm';
+import type { MCPFormHandle } from '@/app/home/mcp/components/mcp-form/MCPForm';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
 import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 import { useTranslation } from 'react-i18next';
@@ -50,6 +51,10 @@ export default function MCPDetailContent({ id }: { id: string }) {
   // Track whether the form has unsaved changes
   const [formDirty, setFormDirty] = useState(false);
 
+  // Ref to MCPForm for triggering test from header
+  const formRef = useRef<MCPFormHandle>(null);
+  const [mcpTesting, setMcpTesting] = useState(false);
+
   // Enable state managed here so the header switch works
   const [serverEnabled, setServerEnabled] = useState(true);
   const [enableLoaded, setEnableLoaded] = useState(false);
@@ -142,26 +147,38 @@ export default function MCPDetailContent({ id }: { id: string }) {
         {/* Header */}
         <div className="flex items-center justify-between pb-4 shrink-0">
           <h1 className="text-xl font-semibold">{t('mcp.createServer')}</h1>
-          <Button
+          <div className="flex items-center gap-2">
-            type="submit"
+            <Button
-            form="mcp-form"
+              type="button"
-            onClick={async (e) => {
+              variant="outline"
-              if (!(await checkExtensionsLimit())) {
+              onClick={() => formRef.current?.testMcp()}
-                e.preventDefault();
+              disabled={mcpTesting}
-              }
+            >
-            }}
+              {t('common.test')}
-          >
+            </Button>
-            {t('common.submit')}
+            <Button
-          </Button>
+              type="submit"
+              form="mcp-form"
+              onClick={async (e) => {
+                if (!(await checkExtensionsLimit())) {
+                  e.preventDefault();
+                }
+              }}
+            >
+              {t('common.submit')}
+            </Button>
+          </div>
         </div>
 
         {/* Content */}
         <div className="flex-1 overflow-y-auto min-h-0">
           <div className="mx-auto max-w-3xl pb-8">
             <MCPForm
+              ref={formRef}
               initServerName={undefined}
               onFormSubmit={handleFormSubmit}
               onNewServerCreated={handleNewServerCreated}
+              onTestingChange={setMcpTesting}
             />
           </div>
         </div>
@@ -193,19 +210,31 @@ export default function MCPDetailContent({ id }: { id: string }) {
               </div>
             )}
           </div>
-          <Button type="submit" form="mcp-form" disabled={!formDirty}>
+          <div className="flex items-center gap-2">
-            {t('common.save')}
+            <Button
-          </Button>
+              type="button"
+              variant="outline"
+              onClick={() => formRef.current?.testMcp()}
+              disabled={mcpTesting}
+            >
+              {t('common.test')}
+            </Button>
+            <Button type="submit" form="mcp-form" disabled={!formDirty}>
+              {t('common.save')}
+            </Button>
+          </div>
         </div>
 
         {/* Content */}
         <div className="flex-1 overflow-y-auto min-h-0">
           <div className="mx-auto max-w-3xl space-y-6 pb-8">
             <MCPForm
+              ref={formRef}
               initServerName={id}
               onFormSubmit={handleFormSubmit}
               onNewServerCreated={handleNewServerCreated}
               onDirtyChange={setFormDirty}
+              onTestingChange={setMcpTesting}
             />
 
             {/* Card: Danger Zone */}

web/src/app/home/mcp/components/mcp-form/MCPForm.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { Resolver, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -215,14 +221,25 @@ interface MCPFormProps {
   onFormSubmit: () => void;
   onNewServerCreated: (serverName: string) => void;
   onDirtyChange?: (dirty: boolean) => void;
+  onTestingChange?: (testing: boolean) => void;
 }
 
-export default function MCPForm({
+// Handle exposed to parent via ref
-  initServerName,
+export interface MCPFormHandle {
-  onFormSubmit,
+  testMcp: () => void;
-  onNewServerCreated,
+  isTesting: boolean;
-  onDirtyChange,
+}
-}: MCPFormProps) {
+
+const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
+  {
+    initServerName,
+    onFormSubmit,
+    onNewServerCreated,
+    onDirtyChange,
+    onTestingChange,
+  },
+  ref,
+) {
   const { t } = useTranslation();
   const formSchema = getFormSchema(t);
   const isEditMode = !!initServerName;
@@ -262,6 +279,21 @@ export default function MCPForm({
     onDirtyChange?.(isDirty);
   }, [isDirty, onDirtyChange]);
 
+  // Notify parent when testing state changes
+  useEffect(() => {
+    onTestingChange?.(mcpTesting);
+  }, [mcpTesting, onTestingChange]);
+
+  // Expose test action and testing state to parent
+  useImperativeHandle(
+    ref,
+    () => ({
+      testMcp: () => testMcp(),
+      isTesting: mcpTesting,
+    }),
+    [mcpTesting],
+  );
+
   // Load server data
   useEffect(() => {
     isInitializing.current = true;
@@ -647,15 +679,6 @@ export default function MCPForm({
                     <ToolsList tools={runtimeInfo.tools} />
                   </>
                 )}
-
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => testMcp()}
-                disabled={mcpTesting}
-              >
-                {t('common.test')}
-              </Button>
             </CardContent>
           </Card>
         )}
@@ -895,19 +918,9 @@ export default function MCPForm({
             </FormItem>
           </CardContent>
         </Card>
-
-        {/* Test button (create mode only, edit mode has it in the status card) */}
-        {!isEditMode && (
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => testMcp()}
-            disabled={mcpTesting}
-          >
-            {t('common.test')}
-          </Button>
-        )}
       </form>
     </Form>
   );
-}
+});
+
+export default MCPForm;