From 6e4eb8e648974d178dbe0afca57a5aa4ab4ed6d5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 18:10:58 +0000
Subject: [PATCH] feat(ui): model_add/reuse_credentials to shadcn Dialog

- antd Modal/Button/Tooltip/Typography + @tremor TextInput \u2192 shadcn
  Dialog/Button/Input + plain styled anchor for Need Help link.
- antd Form/Form.Item preserved (parent drives it + rules +
  initialValue over dynamic credential_values keys).

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../model_add/reuse_credentials.tsx           | 112 +++++++++++-------
 1 file changed, 66 insertions(+), 46 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_add/reuse_credentials.tsx b/ui/litellm-dashboard/src/components/model_add/reuse_credentials.tsx
index e16c0b73ac3..4b5d03b772b 100644
--- a/ui/litellm-dashboard/src/components/model_add/reuse_credentials.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/reuse_credentials.tsx
@@ -1,12 +1,19 @@
 import React from "react";
-import { Form, Button, Tooltip, Typography, Modal } from "antd";
-import { TextInput } from "@tremor/react";
+import { Form } from "antd";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { CredentialItem } from "../networking";
-const { Title, Link } = Typography;
 
 interface ReuseCredentialsModalProps {
   isVisible: boolean;
   onCancel: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onAddCredential: (values: any) => void;
   existingCredential: CredentialItem | null;
   setIsCredentialModalOpen: (isVisible: boolean) => void;
@@ -21,8 +28,7 @@ const ReuseCredentialsModal: React.FC<ReuseCredentialsModalProps> = ({
 }) => {
   const [form] = Form.useForm();
 
-  console.log(`existingCredential in add credentials tab: ${JSON.stringify(existingCredential)}`);
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleSubmit = (values: any) => {
     onAddCredential(values);
     form.resetFields();
@@ -30,55 +36,69 @@ const ReuseCredentialsModal: React.FC<ReuseCredentialsModalProps> = ({
   };
 
   return (
-    <Modal
-      title="Reuse Credentials"
+    <Dialog
       open={isVisible}
-      onCancel={() => {
-        onCancel();
-        form.resetFields();
+      onOpenChange={(o) => {
+        if (!o) {
+          onCancel();
+          form.resetFields();
+        }
       }}
-      footer={null}
-      width={600}
     >
-      <Form form={form} onFinish={handleSubmit} layout="vertical">
-        {/* Credential Name */}
-        <Form.Item
-          label="Credential Name:"
-          name="credential_name"
-          rules={[{ required: true, message: "Credential name is required" }]}
-          initialValue={existingCredential?.credential_name}
-        >
-          <TextInput placeholder="Enter a friendly name for these credentials" />
-        </Form.Item>
-
-        {/* Display Credential Values of existingCredential, don't allow user to edit. Credential values is a dictionary */}
-        {Object.entries(existingCredential?.credential_values || {}).map(([key, value]) => (
-          <Form.Item key={key} label={key} name={key} initialValue={value}>
-            <TextInput placeholder={`Enter ${key}`} disabled={true} />
+      <DialogContent className="max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Reuse Credentials</DialogTitle>
+        </DialogHeader>
+        <Form form={form} onFinish={handleSubmit} layout="vertical">
+          {/* Credential Name */}
+          <Form.Item
+            label="Credential Name:"
+            name="credential_name"
+            rules={[
+              { required: true, message: "Credential name is required" },
+            ]}
+            initialValue={existingCredential?.credential_name}
+          >
+            <Input placeholder="Enter a friendly name for these credentials" />
           </Form.Item>
-        ))}
 
-        {/* Modal Footer */}
-        <div className="flex justify-between items-center">
-          <Tooltip title="Get help on our github">
-            <Link href="https://github.com/BerriAI/litellm/issues">Need Help?</Link>
-          </Tooltip>
+          {/* Display Credential Values of existingCredential, don't allow user to edit. */}
+          {Object.entries(existingCredential?.credential_values || {}).map(
+            ([key, value]) => (
+              <Form.Item key={key} label={key} name={key} initialValue={value}>
+                <Input placeholder={`Enter ${key}`} disabled={true} />
+              </Form.Item>
+            ),
+          )}
 
-          <div>
-            <Button
-              onClick={() => {
-                onCancel();
-                form.resetFields();
-              }}
-              style={{ marginRight: 10 }}
+          <div className="flex justify-between items-center">
+            <a
+              href="https://github.com/BerriAI/litellm/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:text-primary/80 text-sm"
+              title="Get help on our github"
             >
-              Cancel
-            </Button>
-            <Button htmlType="submit">Reuse Credentials</Button>
+              Need Help?
+            </a>
+
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  onCancel();
+                  form.resetFields();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button type="submit">Reuse Credentials</Button>
+            </div>
           </div>
-        </div>
-      </Form>
-    </Modal>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 };