From 01775bc95f551b506889b99352f711d9fc7b5cc2 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 11 Mar 2025 11:07:42 -0700
Subject: [PATCH 1/3] don't show test key page to internal user

---
 ui/litellm-dashboard/src/components/leftnav.tsx | 4 ++--
 ui/litellm-dashboard/src/utils/roles.ts         | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 0bf5da57c6f..5990a50f9e5 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -21,7 +21,7 @@ import {
   ExperimentOutlined,
   ThunderboltOutlined,
 } from '@ant-design/icons';
-import { old_admin_roles, v2_admin_role_names, all_admin_roles, rolesAllowedToSeeUsage } from '../utils/roles';
+import { old_admin_roles, v2_admin_role_names, all_admin_roles, rolesAllowedToSeeUsage, rolesWithWriteAccess } from '../utils/roles';
 
 const { Sider } = Layout;
 
@@ -45,7 +45,7 @@ interface MenuItem {
 // Note: If a menu item does not have a role, it is visible to all roles.
 const menuItems: MenuItem[] = [
   { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined /> },
-  { key: "3", page: "llm-playground", label: "Test Key", icon: <PlayCircleOutlined /> },
+  { key: "3", page: "llm-playground", label: "Test Key", icon: <PlayCircleOutlined />, roles: rolesWithWriteAccess },
   { key: "2", page: "models", label: "Models", icon: <BlockOutlined />, roles: all_admin_roles },
   { key: "4", page: "usage", label: "Usage", icon: <BarChartOutlined /> },
   { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined /> },
diff --git a/ui/litellm-dashboard/src/utils/roles.ts b/ui/litellm-dashboard/src/utils/roles.ts
index 8ac2d7632ba..a50f06697b6 100644
--- a/ui/litellm-dashboard/src/utils/roles.ts
+++ b/ui/litellm-dashboard/src/utils/roles.ts
@@ -4,4 +4,5 @@ export const v2_admin_role_names = ["proxy_admin", "proxy_admin_viewer", "org_ad
 export const all_admin_roles = [...old_admin_roles, ...v2_admin_role_names];
 
 export const internalUserRoles = ["Internal User", "Internal Viewer"];
-export const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"]; 
\ No newline at end of file
+export const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"]; 
+export const rolesWithWriteAccess = ["Internal User", "Admin"]; 
\ No newline at end of file

From 6096f3aa9f935e5bea36ef85d66c34f6c9c97f13 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 11 Mar 2025 11:16:55 -0700
Subject: [PATCH 2/3] only show create key / actions for users with write
 access

---
 .../src/components/create_key_button.tsx      | 11 +++--
 .../src/components/key_info_view.tsx          | 41 ++++++++++---------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 0ec06348e81..205d4226dc2 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -39,6 +39,9 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import Createuser from "./create_user_button";
 import debounce from 'lodash/debounce';
+import { rolesWithWriteAccess } from '../utils/roles';
+
+
 
 const { Option } = Select;
 
@@ -335,9 +338,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
 
   return (
     <div>
-      <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
-        + Create New Key
-      </Button>
+      {userRole && rolesWithWriteAccess.includes(userRole) && (
+        <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
+          + Create New Key
+        </Button>
+      )}
       <Modal
         // title="Create Key"
         visible={isModalVisible}
diff --git a/ui/litellm-dashboard/src/components/key_info_view.tsx b/ui/litellm-dashboard/src/components/key_info_view.tsx
index cadc365ada2..9d50be6cf70 100644
--- a/ui/litellm-dashboard/src/components/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/key_info_view.tsx
@@ -21,6 +21,7 @@ import { KeyResponse } from "./key_team_helpers/key_list";
 import { Form, Input, InputNumber, message, Select } from "antd";
 import { KeyEditView } from "./key_edit_view";
 import { RegenerateKeyModal } from "./regenerate_key_modal";
+import { rolesWithWriteAccess } from '../utils/roles';
 
 interface KeyInfoViewProps {
   keyId: string;
@@ -128,24 +129,26 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
           <Title>{keyData.key_alias || "API Key"}</Title>
           <Text className="text-gray-500 font-mono">{keyData.token}</Text>
         </div>
-        <div className="flex gap-2">
-          <Button
-            icon={RefreshIcon}
-            variant="secondary"
-            onClick={() => setIsRegenerateModalOpen(true)}
-            className="flex items-center"
-          >
-            Regenerate Key
-          </Button>
-          <Button
-            icon={TrashIcon}
-            variant="secondary"
-            onClick={() => setIsDeleteModalOpen(true)}
-            className="flex items-center"
-          >
-            Delete Key
-          </Button>
-        </div>
+        {userRole && rolesWithWriteAccess.includes(userRole) && (
+          <div className="flex gap-2">
+            <Button
+              icon={RefreshIcon}
+              variant="secondary"
+              onClick={() => setIsRegenerateModalOpen(true)}
+              className="flex items-center"
+            >
+              Regenerate Key
+            </Button>
+            <Button
+              icon={TrashIcon}
+              variant="secondary"
+              onClick={() => setIsDeleteModalOpen(true)}
+              className="flex items-center"
+            >
+              Delete Key
+            </Button>
+          </div>
+        )}
       </div>
 
       {/* Add RegenerateKeyModal */}
@@ -246,7 +249,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
             <Card>
               <div className="flex justify-between items-center mb-4">
                 <Title>Key Settings</Title>
-                {!isEditing && (
+                {!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
                   <Button variant="light" onClick={() => setIsEditing(true)}>
                     Edit Settings
                   </Button>

From 1b6f0ed43b36ebfea8c46da02e73f012af401d25 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 11 Mar 2025 11:50:33 -0700
Subject: [PATCH 3/3] fix viewing page as internal user viewer

---
 ui/litellm-dashboard/src/components/team/team_info.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
index 7de7396980b..d268f137f64 100644
--- a/ui/litellm-dashboard/src/components/team/team_info.tsx
+++ b/ui/litellm-dashboard/src/components/team/team_info.tsx
@@ -222,9 +222,13 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
 
       <TabGroup defaultIndex={editTeam ? 2 : 0}>
         <TabList className="mb-4">
-          <Tab>Overview</Tab>
-          <Tab>Members</Tab>
-          <Tab>Settings</Tab>
+          {[
+            <Tab key="overview">Overview</Tab>,
+            ...(canEditTeam ? [
+              <Tab key="members">Members</Tab>,
+              <Tab key="settings">Settings</Tab>
+            ] : [])
+          ]}
         </TabList>
 
         <TabPanels>