Merge pull request #25814 from BerriAI/litellm_/elastic-zhukovsky

[Refactor] UI - Deleted Keys/Teams: Enterprise notice banner

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

@@ -1,9 +1,12 @@
 "use client";
 import { useState } from "react";
+import { Alert } from "antd";
 import { useDeletedKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { DeletedKeysTable } from "./DeletedKeysTable/DeletedKeysTable";
 
 export default function DeletedKeysPage() {
+  const { premiumUser } = useAuthorized();
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize] = useState(50);
 
@@ -14,14 +17,25 @@ export default function DeletedKeysPage() {
   } = useDeletedKeys(pageIndex + 1, pageSize);
 
   return (
-    <DeletedKeysTable
-      keys={keysData?.keys || []}
-      totalCount={keysData?.total_count || 0}
-      isLoading={isLoading}
-      isFetching={isFetching}
-      pageIndex={pageIndex}
-      pageSize={pageSize}
-      onPageChange={setPageIndex}
-    />
+    <div className="flex flex-col gap-4">
+      {!premiumUser && (
+        <Alert
+          type="info"
+          banner
+          showIcon
+          message="Coming soon to Enterprise"
+          description="Deleted key auditing is graduating from beta into our Enterprise audit & compliance suite."
+        />
+      )}
+      <DeletedKeysTable
+        keys={keysData?.keys || []}
+        totalCount={keysData?.total_count || 0}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        onPageChange={setPageIndex}
+      />
+    </div>
   );
 }

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

@@ -1,8 +1,11 @@
 "use client";
+import { Alert } from "antd";
 import { useDeletedTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { DeletedTeamsTable } from "./DeletedTeamsTable/DeletedTeamsTable";
 
 export default function DeletedTeamsPage() {
+  const { premiumUser } = useAuthorized();
   const {
     data: teamsData,
     isPending: isLoading,
@@ -10,10 +13,21 @@ export default function DeletedTeamsPage() {
   } = useDeletedTeams(1, 100);
 
   return (
-    <DeletedTeamsTable
-      teams={teamsData || []}
-      isLoading={isLoading}
-      isFetching={isFetching}
-    />
+    <div className="flex flex-col gap-4">
+      {!premiumUser && (
+        <Alert
+          type="info"
+          banner
+          showIcon
+          message="Coming soon to Enterprise"
+          description="Deleted team auditing is graduating from beta into our Enterprise audit & compliance suite."
+        />
+      )}
+      <DeletedTeamsTable
+        teams={teamsData || []}
+        isLoading={isLoading}
+        isFetching={isFetching}
+      />
+    </div>
   );
 }