address review: use AntD Flex/Space, extract vault API from networking

ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/hashicorpVaultApi.ts

@@ -0,0 +1,86 @@
+import { getProxyBaseUrl, getGlobalLitellmHeaderName, deriveErrorMessage } from "@/components/networking";
+
+export const getHashicorpVaultConfig = async (accessToken: string) => {
+  const proxyBaseUrl = getProxyBaseUrl();
+  const url = proxyBaseUrl
+    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
+    : `/config_overrides/hashicorp_vault`;
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+    },
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    throw new Error(errorMessage);
+  }
+  const data = await response.json();
+  return data;
+};
+
+export const updateHashicorpVaultConfig = async (
+  accessToken: string,
+  config: Record<string, any>,
+) => {
+  const proxyBaseUrl = getProxyBaseUrl();
+  const url = proxyBaseUrl
+    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
+    : `/config_overrides/hashicorp_vault`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(config),
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    throw new Error(errorMessage);
+  }
+  const data = await response.json();
+  return data;
+};
+
+export const deleteHashicorpVaultConfig = async (accessToken: string) => {
+  const proxyBaseUrl = getProxyBaseUrl();
+  const url = proxyBaseUrl
+    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
+    : `/config_overrides/hashicorp_vault`;
+  const response = await fetch(url, {
+    method: "DELETE",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+    },
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    throw new Error(errorMessage);
+  }
+  const data = await response.json();
+  return data;
+};
+
+export const testHashicorpVaultConnection = async (accessToken: string) => {
+  const proxyBaseUrl = getProxyBaseUrl();
+  const url = proxyBaseUrl
+    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault/test_connection`
+    : `/config_overrides/hashicorp_vault/test_connection`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+    },
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    throw new Error(errorMessage);
+  }
+  const data = await response.json();
+  return data;
+};

ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useDeleteHashicorpVaultConfig.ts

@@ -1,4 +1,4 @@
-import { deleteHashicorpVaultConfig } from "@/components/networking";
+import { deleteHashicorpVaultConfig } from "./hashicorpVaultApi";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { hashicorpVaultKeys } from "./useHashicorpVaultConfig";
 

ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useHashicorpVaultConfig.ts

@@ -1,4 +1,4 @@
-import { getHashicorpVaultConfig } from "@/components/networking";
+import { getHashicorpVaultConfig } from "./hashicorpVaultApi";
 import { useQuery } from "@tanstack/react-query";
 import useAuthorized from "../useAuthorized";
 import { createQueryKeys } from "../common/queryKeysFactory";

ui/litellm-dashboard/src/app/(dashboard)/hooks/configOverrides/useUpdateHashicorpVaultConfig.ts

@@ -1,4 +1,4 @@
-import { updateHashicorpVaultConfig } from "@/components/networking";
+import { updateHashicorpVaultConfig } from "./hashicorpVaultApi";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { hashicorpVaultKeys } from "./useHashicorpVaultConfig";
 

ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVault.tsx

@@ -7,8 +7,8 @@ import { useUpdateHashicorpVaultConfig } from "@/app/(dashboard)/hooks/configOve
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import DeleteResourceModal from "@/components/common_components/DeleteResourceModal";
 import NotificationManager from "@/components/molecules/notifications_manager";
-import { testHashicorpVaultConnection } from "@/components/networking";
-import { Alert, Button, Card, Descriptions, Skeleton, Space, Typography } from "antd";
+import { testHashicorpVaultConnection } from "@/app/(dashboard)/hooks/configOverrides/hashicorpVaultApi";
+import { Alert, Button, Card, Descriptions, Flex, Skeleton, Space, Typography } from "antd";
 import { Edit, KeyRound, PlugZap, Trash2 } from "lucide-react";
 import { SENSITIVE_FIELDS, FIELD_LABELS } from "./constants";
 import EditHashicorpVaultModal from "./EditHashicorpVaultModal";
@@ -85,7 +85,7 @@ export default function HashicorpVault() {
     }
     if (SENSITIVE_FIELDS.has(key)) {
       return (
-        <div className="flex items-center justify-between">
+        <Flex justify="space-between" align="center">
           <Text className="font-mono text-gray-600">{value}</Text>
           <Button
             type="text"
@@ -94,7 +94,7 @@ export default function HashicorpVault() {
             icon={<Trash2 className="w-3.5 h-3.5" />}
             onClick={() => setClearingField(key)}
           />
-        </div>
+        </Flex>
       );
     }
     return <Text className="font-mono text-gray-600">{value}</Text>;
@@ -140,16 +140,16 @@ export default function HashicorpVault() {
         <Card>
           <Space direction="vertical" size="large" className="w-full">
             {/* Header */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
+            <Flex justify="space-between" align="center">
+              <Flex align="center" gap={12}>
                 <KeyRound className="w-6 h-6 text-gray-400" />
                 <div>
                   <Title level={3} style={{ marginBottom: 0 }}>Hashicorp Vault</Title>
                   <Text type="secondary">Manage secret manager configuration</Text>
                 </div>
-              </div>
+              </Flex>
 
-              <div className="flex items-center gap-3">
+              <Space>
                 {isConfigured && (
                   <>
                     <Button
@@ -174,8 +174,8 @@ export default function HashicorpVault() {
                     </Button>
                   </>
                 )}
-              </div>
-            </div>
+              </Space>
+            </Flex>
 
             {isConfigured && (
               <Alert

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

@@ -8880,90 +8880,6 @@ export const updateUiSettings = async (accessToken: string, settings: Record<str
   return data;
 };
 
-export const getHashicorpVaultConfig = async (accessToken: string) => {
-  const proxyBaseUrl = getProxyBaseUrl();
-  const url = proxyBaseUrl
-    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
-    : `/config_overrides/hashicorp_vault`;
-  const response = await fetch(url, {
-    method: "GET",
-    headers: {
-      [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-    },
-  });
-  if (!response.ok) {
-    const errorData = await response.json();
-    const errorMessage = deriveErrorMessage(errorData);
-    throw new Error(errorMessage);
-  }
-  const data = await response.json();
-  return data;
-};
-
-export const updateHashicorpVaultConfig = async (
-  accessToken: string,
-  config: Record<string, any>,
-) => {
-  const proxyBaseUrl = getProxyBaseUrl();
-  const url = proxyBaseUrl
-    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
-    : `/config_overrides/hashicorp_vault`;
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(config),
-  });
-  if (!response.ok) {
-    const errorData = await response.json();
-    const errorMessage = deriveErrorMessage(errorData);
-    throw new Error(errorMessage);
-  }
-  const data = await response.json();
-  return data;
-};
-
-export const deleteHashicorpVaultConfig = async (accessToken: string) => {
-  const proxyBaseUrl = getProxyBaseUrl();
-  const url = proxyBaseUrl
-    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault`
-    : `/config_overrides/hashicorp_vault`;
-  const response = await fetch(url, {
-    method: "DELETE",
-    headers: {
-      [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-    },
-  });
-  if (!response.ok) {
-    const errorData = await response.json();
-    const errorMessage = deriveErrorMessage(errorData);
-    throw new Error(errorMessage);
-  }
-  const data = await response.json();
-  return data;
-};
-
-export const testHashicorpVaultConnection = async (accessToken: string) => {
-  const proxyBaseUrl = getProxyBaseUrl();
-  const url = proxyBaseUrl
-    ? `${proxyBaseUrl}/config_overrides/hashicorp_vault/test_connection`
-    : `/config_overrides/hashicorp_vault/test_connection`;
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-    },
-  });
-  if (!response.ok) {
-    const errorData = await response.json();
-    const errorMessage = deriveErrorMessage(errorData);
-    throw new Error(errorMessage);
-  }
-  const data = await response.json();
-  return data;
-};
 
 // ============================================================
 // Claude Code Marketplace Networking Functions