Merge pull request #23215 from BerriAI/litellm_migrate_user_buttons_tremor_to_antd

Migrate user management buttons from Tremor to Ant Design

ui/litellm-dashboard/src/components/CreateUserButton.tsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, UserAddOutlined } from "@ant-design/icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
-import { Accordion, AccordionBody, AccordionHeader, Button as Button2, SelectItem, TextInput } from "@tremor/react";
+import { Accordion, AccordionBody, AccordionHeader, SelectItem, TextInput } from "@tremor/react";
 import { Alert, Button, Form, Input, Modal, Select, Select as Select2, Space, Tooltip, Typography } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
 import BulkCreateUsers from "./bulk_create_users_button";
@@ -229,9 +229,9 @@ export const CreateUserButton: React.FC<CreateuserProps> = ({
   // Original return for standalone mode
   return (
     <div className="flex gap-2">
-      <Button2 className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Invite User
-      </Button2>
+      </Button>
       <BulkCreateUsers accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
       <Modal
         title="Invite User"

ui/litellm-dashboard/src/components/bulk_create_users_button.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Button as TremorButton, Text } from "@tremor/react";
-import { Modal, Table, Upload, Typography } from "antd";
+import { Text } from "@tremor/react";
+import { Button, Modal, Table, Upload, Typography } from "antd";
 import {
   UploadOutlined,
   DownloadOutlined,
@@ -540,9 +540,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
   return (
     <>
-      <TremorButton className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Bulk Invite Users
-      </TremorButton>
+      </Button>
 
       <Modal
         title="Bulk Invite Users"
@@ -629,9 +629,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                   </div>
                 </div>
 
-                <TremorButton onClick={downloadTemplate} size="lg" className="w-full md:w-auto">
-                  <DownloadOutlined className="mr-2" /> Download CSV Template
-                </TremorButton>
+                <Button type="primary" size="large" className="w-full md:w-auto" icon={<DownloadOutlined />}>
+                  Download CSV Template
+                </Button>
               </div>
 
               <div className="flex items-center mb-4">
@@ -662,14 +662,14 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                           </Typography.Text>
                         </div>
                       </div>
-                      <TremorButton
-                        size="xs"
-                        variant="secondary"
+                      <Button
+                        size="small"
                         onClick={removeSelectedFile}
                         className="flex items-center"
+                        icon={<DeleteOutlined />}
                       >
-                        <DeleteOutlined className="mr-1" /> Remove
-                      </TremorButton>
+                        Remove
+                      </Button>
                     </div>
 
                     {fileError ? (
@@ -694,7 +694,7 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                       <UploadOutlined className="text-3xl text-gray-400 mb-2" />
                       <p className="mb-1">Drag and drop your CSV file here</p>
                       <p className="text-sm text-gray-500 mb-3">or</p>
-                      <TremorButton size="sm">Browse files</TremorButton>
+                      <Button size="small">Browse files</Button>
                       <p className="text-xs text-gray-500 mt-4">Only CSV files (.csv) are supported</p>
                     </div>
                   </Upload>
@@ -781,21 +781,21 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                   {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                     <div className="flex space-x-3">
-                      <TremorButton
+                      <Button
                         onClick={() => {
                           setParsedData([]);
                           setParseError(null);
                         }}
-                        variant="secondary"
                       >
                         Back
-                      </TremorButton>
-                      <TremorButton
+                      </Button>
+                      <Button
+                        type="primary"
                         onClick={handleBulkCreate}
                         disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                       >
                         {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                      </TremorButton>
+                      </Button>
                     </div>
                   )}
                 </div>
@@ -829,40 +829,39 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                 {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Back
-                    </TremorButton>
-                    <TremorButton
+                    </Button>
+                    <Button
+                      type="primary"
                       onClick={handleBulkCreate}
                       disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                     >
                       {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                    </TremorButton>
+                    </Button>
                   </div>
                 )}
 
                 {parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Start New Bulk Import
-                    </TremorButton>
-                    <TremorButton onClick={downloadResults} variant="primary" className="flex items-center">
-                      <DownloadOutlined className="mr-2" /> Download User Credentials
-                    </TremorButton>
+                    </Button>
+                    <Button type="primary" onClick={downloadResults} icon={<DownloadOutlined />}>
+                      Download User Credentials
+                    </Button>
                   </div>
                 )}
               </div>

ui/litellm-dashboard/src/components/onboarding_link.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal, Typography } from "antd";
+import { Button, Modal, Typography } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Text, Button } from "@tremor/react";
+import { Text } from "@tremor/react";
 import NotificationsManager from "./molecules/notifications_manager";
 
 export interface InvitationLink {
@@ -86,7 +86,7 @@ export default function OnboardingModal({
       </div>
       <div className="flex justify-end mt-5">
         <CopyToClipboard text={getInvitationUrl()} onCopy={() => NotificationsManager.success("Copied!")}>
-          <Button variant="primary">
+          <Button type="primary">
             {modalType === "invitation" ? "Copy invitation link" : "Copy password reset link"}
           </Button>
         </CopyToClipboard>

ui/litellm-dashboard/src/components/view_users.tsx

@@ -1,7 +1,7 @@
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import React, { useEffect, useState } from "react";
 
-import { Button } from "@tremor/react";
+import { Button } from "antd";
 import BulkEditUserModal from "./BulkEditUsers";
 import { CreateUserButton } from "./CreateUserButton";
 import EditUserModal from "./edit_user";
@@ -309,7 +309,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               {isProxyAdmin && (
                 <Button
                   onClick={handleToggleSelectionMode}
-                  variant={selectionMode ? "primary" : "secondary"}
+                  type={selectionMode ? "primary" : "default"}
                   className="flex items-center"
                 >
                   {selectionMode ? "Cancel Selection" : "Select Users"}
@@ -317,7 +317,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               )}
 
               {isProxyAdmin && selectionMode && (
-                <Button onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
+                <Button type="primary" onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
                   Bulk Edit ({selectedUsers.length} selected)
                 </Button>
               )}