diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx index 403070c6fb..0edf3d8b3f 100644 --- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx @@ -1,5 +1,6 @@ import { useState, useCallback } from "react"; import { Modal, Form, Button, Select, Tooltip } from "antd"; +import { UserAddOutlined } from "@ant-design/icons"; import debounce from "lodash/debounce"; import { userFilterUICall } from "@/components/networking"; interface User { @@ -29,7 +30,7 @@ interface FormValues { interface UserSearchModalProps { isVisible: boolean; onCancel: () => void; - onSubmit: (values: FormValues) => void; + onSubmit: (values: FormValues) => void | Promise; accessToken: string | null; title?: string; roles?: Role[]; @@ -56,6 +57,7 @@ const UserSearchModal: React.FC = ({ const [userOptions, setUserOptions] = useState([]); const [loading, setLoading] = useState(false); const [selectedField, setSelectedField] = useState<"user_email" | "user_id">("user_email"); + const [isSubmitting, setIsSubmitting] = useState(false); const fetchUsers = async (searchText: string, fieldName: "user_email" | "user_id"): Promise => { if (!searchText) { @@ -105,6 +107,15 @@ const UserSearchModal: React.FC = ({ }); }; + const handleSubmit = async (values: FormValues): Promise => { + setIsSubmitting(true); + try { + await onSubmit(values); + } finally { + setIsSubmitting(false); + } + }; + const handleClose = (): void => { form.resetFields(); setUserOptions([]); @@ -112,10 +123,10 @@ const UserSearchModal: React.FC = ({ }; return ( - + form={form} - onFinish={onSubmit} + onFinish={handleSubmit} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left" @@ -167,8 +178,8 @@ const UserSearchModal: React.FC = ({
-