From a87d5b4dbbc344c5c22c1a6a458a6c57ac3afc71 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Mon, 9 Feb 2026 15:50:08 -0800
Subject: [PATCH] test fix

---
 .../components/mcp_tools/mcp_server_edit.tsx  | 226 +-----------------
 1 file changed, 10 insertions(+), 216 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
index 906f0bdfc3a..98ab6bf2f0f 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
@@ -458,222 +458,16 @@ const MCPServerEdit: React.FC<MCPServerEditProps> = ({
             )}
 
             {isOAuthAuthType && (
-              <>
-                <Form.Item
-                  label={<span className="text-sm font-medium text-gray-700">OAuth Flow Type</span>}
-                  name="oauth_flow_type"
-                >
-                  <Select className="rounded-lg" size="large">
-                    <Select.Option value={OAUTH_FLOW.INTERACTIVE}>Interactive (PKCE)</Select.Option>
-                    <Select.Option value={OAUTH_FLOW.M2M}>Machine-to-Machine (M2M)</Select.Option>
-                  </Select>
-                </Form.Item>
-
-                {/* M2M fields: client_id, client_secret, token_url required; scopes optional */}
-                {isM2MFlow && (
-                  <>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Client ID
-                          <Tooltip title="OAuth2 client ID for the client_credentials grant.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "client_id"]}
-                      rules={[{ required: true, message: "Client ID is required for M2M OAuth" }]}
-                    >
-                      <TextInput
-                        type="password"
-                        placeholder="Enter OAuth client ID (leave blank to keep existing)"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Client Secret
-                          <Tooltip title="OAuth2 client secret for the client_credentials grant.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "client_secret"]}
-                      rules={[{ required: true, message: "Client Secret is required for M2M OAuth" }]}
-                    >
-                      <TextInput
-                        type="password"
-                        placeholder="Enter OAuth client secret (leave blank to keep existing)"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Token URL
-                          <Tooltip title="Token endpoint URL for the client_credentials grant.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name="token_url"
-                      rules={[{ required: true, message: "Token URL is required for M2M OAuth" }]}
-                    >
-                      <TextInput
-                        placeholder="https://auth.example.com/oauth/token"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Scopes (optional)
-                          <Tooltip title="Optional scopes to request with the client_credentials grant.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "scopes"]}
-                    >
-                      <Select
-                        mode="tags"
-                        tokenSeparators={[","]}
-                        placeholder="Add scopes"
-                        className="rounded-lg"
-                        size="large"
-                      />
-                    </Form.Item>
-                  </>
-                )}
-
-                {/* Interactive (PKCE) fields: all optional, plus authorize button */}
-                {isInteractiveFlow && (
-                  <>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          OAuth Client ID (optional)
-                          <Tooltip title="Provide only if your MCP server cannot handle dynamic client registration.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "client_id"]}
-                    >
-                      <TextInput
-                        type="password"
-                        placeholder="Enter OAuth client ID (leave blank to keep existing)"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          OAuth Client Secret (optional)
-                          <Tooltip title="Provide only if your MCP server cannot handle dynamic client registration.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "client_secret"]}
-                    >
-                      <TextInput
-                        type="password"
-                        placeholder="Enter OAuth client secret (leave blank to keep existing)"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          OAuth Scopes (optional)
-                          <Tooltip title="Add scopes to override the default scope list used for this MCP server.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name={["credentials", "scopes"]}
-                    >
-                      <Select
-                        mode="tags"
-                        tokenSeparators={[","]}
-                        placeholder="Add scopes"
-                        className="rounded-lg"
-                        size="large"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Authorization URL Override (optional)
-                          <Tooltip title="Optional override for the authorization endpoint.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name="authorization_url"
-                    >
-                      <TextInput
-                        placeholder="https://example.com/oauth/authorize"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Token URL Override (optional)
-                          <Tooltip title="Optional override for the token endpoint.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name="token_url"
-                    >
-                      <TextInput
-                        placeholder="https://example.com/oauth/token"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <Form.Item
-                      label={
-                        <span className="text-sm font-medium text-gray-700 flex items-center">
-                          Registration URL Override (optional)
-                          <Tooltip title="Optional override for the dynamic client registration endpoint.">
-                            <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
-                          </Tooltip>
-                        </span>
-                      }
-                      name="registration_url"
-                    >
-                      <TextInput
-                        placeholder="https://example.com/oauth/register"
-                        className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                      />
-                    </Form.Item>
-                    <div className="rounded-lg border border-dashed border-gray-300 p-4 space-y-2">
-                      <p className="text-sm text-gray-600">Use OAuth to fetch a fresh access token and temporarily save it in the session as the authentication value.</p>
-                      <Button
-                        variant="secondary"
-                        onClick={startOAuthFlow}
-                        disabled={oauthStatus === "authorizing" || oauthStatus === "exchanging"}
-                      >
-                        {oauthStatus === "authorizing"
-                          ? "Waiting for authorization..."
-                          : oauthStatus === "exchanging"
-                            ? "Exchanging authorization code..."
-                            : "Authorize & Fetch Token"}
-                      </Button>
-                      {oauthError && <p className="text-sm text-red-500">{oauthError}</p>}
-                      {oauthStatus === "success" && oauthTokenResponse?.access_token && (
-                        <p className="text-sm text-green-600">
-                          Token fetched. Expires in {oauthTokenResponse.expires_in ?? "?"} seconds.
-                        </p>
-                      )}
-                    </div>
-                  </>
-                )}
-              </>
+              <OAuthFormFields
+                isM2M={isM2MFlow}
+                isEditing
+                oauthFlow={{
+                  startOAuthFlow,
+                  status: oauthStatus,
+                  error: oauthError,
+                  tokenResponse: oauthTokenResponse,
+                }}
+              />
             )}
 
             {/* Permission Management / Access Control Section */}