Merge pull request #9148 from BerriAI/litellm_fix_role_controls

[UI Fixes RBAC] -  for Internal User Viewer Permissions

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}

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>

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 /> },

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>

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"]; 
+export const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"]; 
+export const rolesWithWriteAccess = ["Internal User", "Admin"];