fix dont show extra modal

ui/litellm-dashboard/src/components/add_model/ConnectionErrorDisplay.tsx

@@ -24,8 +24,11 @@ const ConnectionErrorDisplay: React.FC<ConnectionErrorDisplayProps> = ({
   const [error, setError] = React.useState<Error | string | null>(null);
   const [rawRequest, setRawRequest] = React.useState<any>(null);
   const [rawResponse, setRawResponse] = React.useState<any>(null);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isSuccess, setIsSuccess] = React.useState<boolean>(false);
 
   const testModelConnection = async () => {
+    setIsLoading(true);
     try {
       const result = await prepareModelAddRequest(formValues, accessToken, null);
       if (!result) throw new Error("Failed to prepare model data");
@@ -37,15 +40,20 @@ const ConnectionErrorDisplay: React.FC<ConnectionErrorDisplayProps> = ({
       if (response.status === "success") {
         message.success("Connection test successful!");
         setError(null);
+        setIsSuccess(true);
       } else {
         const errorMessage = response.result?.error || response.message || "Unknown error";
         setError(errorMessage);
         setRawRequest(requestBody);
         setRawResponse(response.result?.raw_request_typed_dict);
+        setIsSuccess(false);
       }
     } catch (error) {
       console.error("Test connection error:", error);
       setError(error instanceof Error ? error.message : String(error));
+      setIsSuccess(false);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -81,28 +89,42 @@ ${formattedBody}
 
   return (
     <div style={{ padding: '16px 24px' }}>
-      <Divider style={{ margin: '16px 0' }} />
-      {error && (
-        <div>
-          <Text type="danger">{errorMessage}</Text>
-          <Divider style={{ margin: '16px 0' }} />
-          <div>
-            <h3>Raw Request</h3>
-            <pre style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '6px' }}>
-              {curlCommand || "No request data"}
-            </pre>
-            <Button 
-              type="text" 
-              icon={<CopyOutlined />} 
-              onClick={() => {
-                navigator.clipboard.writeText(curlCommand || '');
-                message.success('Copied to clipboard');
-              }}
-            >
-              Copy to Clipboard
-            </Button>
-          </div>
+      {isLoading ? (
+        <div style={{ textAlign: 'center', padding: '20px' }}>
+          <div>Testing connection to {modelName}...</div>
+          {/* You could add a spinner here */}
         </div>
+      ) : isSuccess ? (
+        <div style={{ textAlign: 'center', padding: '20px' }}>
+          <Text type="success" style={{ fontSize: '16px' }}>
+            Connection to {modelName} successful!
+          </Text>
+        </div>
+      ) : (
+        <>
+          <div>
+            <Text type="danger" style={{ fontSize: '16px' }}>Connection to {modelName} failed</Text>
+            <Divider style={{ margin: '16px 0' }} />
+            <Text type="danger">{errorMessage}</Text>
+            <Divider style={{ margin: '16px 0' }} />
+            <div>
+              <h3>Raw Request</h3>
+              <pre style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '6px' }}>
+                {curlCommand || "No request data"}
+              </pre>
+              <Button 
+                type="text" 
+                icon={<CopyOutlined />} 
+                onClick={() => {
+                  navigator.clipboard.writeText(curlCommand || '');
+                  message.success('Copied to clipboard');
+                }}
+              >
+                Copy to Clipboard
+              </Button>
+            </div>
+          </div>
+        </>
       )}
       <Divider style={{ margin: '16px 0' }} />
       <div style={{ display: 'flex', justifyContent: 'flex-start' }}>

ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx

@@ -57,13 +57,14 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
 }) => {
   // Add state for test mode and connection error
   const [testMode, setTestMode] = useState<string>("chat");
-  const [isTestModalVisible, setIsTestModalVisible] = useState<boolean>(false);
-  const [connectionError, setConnectionError] = useState<Error | string | null>(null);
+  const [isResultModalVisible, setIsResultModalVisible] = useState<boolean>(false);
+  const [isTestingConnection, setIsTestingConnection] = useState<boolean>(false);
 
-  // Show test modal with mode selection
-  const showTestModal = () => {
-    setConnectionError(null);
-    setIsTestModalVisible(true);
+  // Test connection directly when button is clicked
+  const handleTestConnection = async () => {
+    setIsTestingConnection(true);
+    setIsResultModalVisible(true);
+    // The actual testing is handled in ConnectionErrorDisplay component
   };
 
   return (
@@ -135,6 +136,20 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
             
             {/* Conditionally Render "Public Model Name" */}
             <ConditionalPublicModelName  />
+                        
+            {/* Select Mode */}
+            <Form.Item
+              label="Test Mode"
+              name="test_mode"
+              tooltip="Select the mode to test this model with"
+            >
+              <AntdSelect
+                style={{ width: '100%' }}
+                value={testMode}
+                onChange={(value) => setTestMode(value)}
+                options={TEST_MODES}
+              />
+            </Form.Item>
 
             {/* Credentials */}
             <div className="mb-4">
@@ -202,7 +217,6 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
               setShowAdvancedSettings={setShowAdvancedSettings}
               teams={teams}
             />
-            
 
             <div className="flex justify-between items-center mb-4">
               <Tooltip title="Get help on our github">
@@ -211,7 +225,7 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
                 </Typography.Link>
               </Tooltip>
               <div className="space-x-2">
-                <Button onClick={showTestModal}>Test Connect</Button>
+                <Button onClick={handleTestConnection} loading={isTestingConnection}>Test Connect</Button>
                 <Button htmlType="submit">Add Model</Button>
               </div>
             </div>
@@ -219,56 +233,34 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
         </Form>
       </Card>
       
-      {/* Test Connection Modal */}
+      {/* Test Connection Results Modal */}
       <Modal
-        title="Test Model Connection"
-        open={isTestModalVisible}
-        onCancel={() => setIsTestModalVisible(false)}
+        title="Connection Test Results"
+        open={isResultModalVisible}
+        onCancel={() => {
+          setIsResultModalVisible(false);
+          setIsTestingConnection(false);
+        }}
         footer={[
-          <Button key="cancel" onClick={() => setIsTestModalVisible(false)}>
-            Cancel
-          </Button>,
-          <Button 
-            key="test" 
-            type="primary" 
-            onClick={() => setConnectionError("Test connection logic is now in ConnectionErrorDisplay")}
-            loading={false} // You might want to add a loading state
-          >
-            Test Connection
+          <Button key="close" onClick={() => {
+            setIsResultModalVisible(false);
+            setIsTestingConnection(false);
+          }}>
+            Close
           </Button>
         ]}
-        width={connectionError ? 700 : 520}
+        width={700}
       >
-        <div className="mb-4">
-          <Typography.Text>Select the mode to test this model with:</Typography.Text>
-        </div>
-        <AntdSelect
-          style={{ width: '100%' }}
-          value={testMode}
-          onChange={(value) => setTestMode(value)}
-          options={TEST_MODES}
+        <ConnectionErrorDisplay 
+          formValues={form.getFieldsValue()}
+          accessToken={accessToken}
+          testMode={testMode}
+          modelName={form.getFieldValue('model_name') || form.getFieldValue('model')}
+          onClose={() => {
+            setIsResultModalVisible(false);
+            setIsTestingConnection(false);
+          }}
         />
-        <div className="mt-4">
-          <Typography.Text type="secondary">
-            Different models support different modes. Choose the appropriate mode for your model.
-          </Typography.Text>
-        </div>
-        
-        {/* Render the ConnectionErrorDisplay when there's an error */}
-        {connectionError && (
-          <div className="mt-4">
-            <Typography.Title level={5} type="danger">Connection Test Failed</Typography.Title>
-            <div className="border border-red-300 rounded-md overflow-hidden">
-              <ConnectionErrorDisplay 
-                formValues={form.getFieldsValue()}
-                accessToken={accessToken}
-                testMode={testMode}
-                modelName={form.getFieldValue('model_name') || form.getFieldValue('model')}
-                onClose={() => setIsTestModalVisible(false)}
-              />
-            </div>
-          </div>
-        )}
       </Modal>
     </>
   );