From 372de1476b696fea44c4027cde74dcf05c10db0f Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 31 May 2025 11:52:59 -0700
Subject: [PATCH] (chore): mark object permissions as enterprise

---
 .../components/object_permissions_view.tsx    | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/object_permissions_view.tsx b/ui/litellm-dashboard/src/components/object_permissions_view.tsx
index 8329731c40f..32f98496bc9 100644
--- a/ui/litellm-dashboard/src/components/object_permissions_view.tsx
+++ b/ui/litellm-dashboard/src/components/object_permissions_view.tsx
@@ -19,18 +19,80 @@ interface ObjectPermissionsViewProps {
   variant?: "card" | "inline";
   className?: string;
   accessToken?: string | null;
+  premiumUser?: boolean;
 }
 
 export function ObjectPermissionsView({ 
   objectPermission, 
   variant = "card",
   className = "",
-  accessToken
+  accessToken,
+  premiumUser = false
 }: ObjectPermissionsViewProps) {
   const vectorStores = objectPermission?.vector_stores || [];
   const mcpServers = objectPermission?.mcp_servers || [];
   const [vectorStoreDetails, setVectorStoreDetails] = useState<VectorStoreDetails[]>([]);
 
+  // Premium user check
+  if (!premiumUser) {
+    const mockContent = (
+      <div className={variant === "card" ? "grid grid-cols-1 md:grid-cols-2 gap-6" : "space-y-4"}>
+        {/* Mock Vector Stores Section */}
+        <div className="space-y-3 opacity-50">
+          <div className="flex items-center gap-2">
+            <DatabaseIcon className="h-4 w-4 text-blue-600" />
+            <Text className="font-semibold text-gray-900">✨ Vector Stores</Text>
+            <Badge color="blue" size="xs">
+              2
+            </Badge>
+          </div>
+          
+          <div className="flex flex-wrap gap-2">
+            <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium">
+              ✨ premium-vector-store-1
+            </div>
+            <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium">
+              ✨ premium-vector-store-2
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+
+    if (variant === "card") {
+      return (
+        <div className={`bg-white border border-gray-200 rounded-lg p-6 ${className}`}>
+          <div className="flex items-center gap-2 mb-6">
+            <div>
+              <Text className="font-semibold text-gray-900">✨ Object Permissions</Text>
+              <Text className="text-xs text-gray-500">
+                Access control for Vector Stores
+              </Text>
+            </div>
+          </div>
+          {mockContent}
+          <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <Text className="text-sm text-yellow-800">
+              This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
+            </Text>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`${className}`}>
+        <Text className="font-medium text-gray-900 mb-3">✨ Object Permissions</Text>
+        {mockContent}
+        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <Text className="text-sm text-yellow-800">
+            This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer" className="underline">here</a>.
+          </Text>
+        </div>
+      </div>
+    );
+  }
+
   // Fetch vector store details when component mounts
   useEffect(() => {
     const fetchVectorStores = async () => {