diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useDeleteHashicorpVaultConfig.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useDeleteHashicorpVaultConfig.ts index 365ee7bf9a..c11969fb01 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useDeleteHashicorpVaultConfig.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useDeleteHashicorpVaultConfig.ts @@ -1,8 +1,6 @@ import { deleteHashicorpVaultConfig } from "@/components/networking"; import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { createQueryKeys } from "../common/queryKeysFactory"; - -const hashicorpVaultKeys = createQueryKeys("hashicorpVaultConfig"); +import { hashicorpVaultKeys } from "./useHashicorpVaultConfig"; export const useDeleteHashicorpVaultConfig = (accessToken: string | null) => { const queryClient = useQueryClient(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig.ts index 62b6d8cfab..958dac2479 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig.ts @@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query"; import useAuthorized from "../useAuthorized"; import { createQueryKeys } from "../common/queryKeysFactory"; -const hashicorpVaultKeys = createQueryKeys("hashicorpVaultConfig"); +export const hashicorpVaultKeys = createQueryKeys("hashicorpVaultConfig"); export const useHashicorpVaultConfig = () => { const { accessToken } = useAuthorized(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig.ts index cea447c490..4eee6c29ad 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig.ts @@ -1,8 +1,6 @@ import { updateHashicorpVaultConfig } from "@/components/networking"; import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { createQueryKeys } from "../common/queryKeysFactory"; - -const hashicorpVaultKeys = createQueryKeys("hashicorpVaultConfig"); +import { hashicorpVaultKeys } from "./useHashicorpVaultConfig"; export const useUpdateHashicorpVaultConfig = (accessToken: string | null) => { const queryClient = useQueryClient(); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx index 314c5456ab..58be384a66 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.tsx @@ -50,7 +50,7 @@ const EditHashicorpVaultModal: React.FC = ({ const [form] = Form.useForm(); const { accessToken } = useAuthorized(); const { data } = useHashicorpVaultConfig(); - const { mutateAsync, isPending } = useUpdateHashicorpVaultConfig(accessToken); + const { mutate, isPending } = useUpdateHashicorpVaultConfig(accessToken); const schema = data?.field_schema; const properties = schema?.properties ?? {}; @@ -70,7 +70,7 @@ const EditHashicorpVaultModal: React.FC = ({ } }, [isVisible, data, form]); - const handleSubmit = async (formValues: Record) => { + const handleSubmit = (formValues: Record) => { const config: Record = {}; for (const [key, value] of Object.entries(formValues)) { if (value !== undefined && value !== null && value !== "") { @@ -83,7 +83,7 @@ const EditHashicorpVaultModal: React.FC = ({ // Sensitive field left blank → omit from payload (keep existing) } - await mutateAsync(config, { + mutate(config, { onSuccess: () => { NotificationManager.success("Hashicorp Vault configuration updated successfully"); onSuccess(); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVault.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVault.tsx index a2693903c5..d019f6ee01 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVault.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVault.tsx @@ -28,14 +28,13 @@ const descriptionsConfig = { export default function HashicorpVault() { const { accessToken } = useAuthorized(); - const { data, isLoading, isError, error, refetch } = useHashicorpVaultConfig(); + const { data, isLoading, isError, error } = useHashicorpVaultConfig(); const { mutate: deleteConfig, isPending: isDeleting } = useDeleteHashicorpVaultConfig(accessToken); - const { mutateAsync: updateConfig } = useUpdateHashicorpVaultConfig(accessToken); + const { mutate: updateConfig, isPending: isClearingField } = useUpdateHashicorpVaultConfig(accessToken); const [isEditModalVisible, setIsEditModalVisible] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [clearingField, setClearingField] = useState(null); - const [isClearingField, setIsClearingField] = useState(false); const [isTesting, setIsTesting] = useState(false); const rawValues = data?.values ?? {}; @@ -66,19 +65,17 @@ export default function HashicorpVault() { }); }; - const handleClearField = async () => { + const handleClearField = () => { if (!clearingField) return; - setIsClearingField(true); - try { - await updateConfig({ [clearingField]: "" }); - NotificationManager.success(`${FIELD_LABELS[clearingField] ?? clearingField} cleared`); - setClearingField(null); - refetch(); - } catch (err) { - NotificationManager.fromBackend(err); - } finally { - setIsClearingField(false); - } + updateConfig({ [clearingField]: "" }, { + onSuccess: () => { + NotificationManager.success(`${FIELD_LABELS[clearingField] ?? clearingField} cleared`); + setClearingField(null); + }, + onError: (err) => { + NotificationManager.fromBackend(err); + }, + }); }; const renderValue = (key: string) => { @@ -140,84 +137,79 @@ export default function HashicorpVault() { /> ) : ( - - - - {/* Header */} -
-
- -
- Hashicorp Vault - Manage secret manager configuration -
-
- -
- {isConfigured && ( - <> - - - - - )} + + + {/* Header */} +
+
+ +
+ Hashicorp Vault + Manage secret manager configuration
- {isConfigured && ( - - vault kv put secret/SECRET_NAME key=secret_value -
- - View documentation - - - } - /> - )} +
+ {isConfigured && ( + <> + + + + + )} +
+
- {isConfigured ? ( - renderSettings() - ) : ( - setIsEditModalVisible(true)} /> - )} -
-
- + {isConfigured && ( + + vault kv put secret/SECRET_NAME key=secret_value +
+ + View documentation + + + } + /> + )} + + {isConfigured ? ( + renderSettings() + ) : ( + setIsEditModalVisible(true)} /> + )} + + )} setIsEditModalVisible(false)} - onSuccess={() => { - setIsEditModalVisible(false); - refetch(); - }} + onSuccess={() => setIsEditModalVisible(false)} /> { }); if (!response.ok) { const errorData = await response.json(); - const detail = errorData?.detail; - const errorMessage = - (typeof detail === "object" && detail?.error) || - (typeof detail === "string" && detail) || - deriveErrorMessage(errorData); + const errorMessage = deriveErrorMessage(errorData); throw new Error(errorMessage); } const data = await response.json();