build(ui/): show teams in leftnav + allow team admin to add new members

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

@@ -32,7 +32,7 @@ const menuItems: MenuItem[] = [
   { key: "3", page: "llm-playground", label: "Test Key" }, // all roles
   { key: "2", page: "models", label: "Models", roles: all_admin_roles },
   { key: "4", page: "usage", label: "Usage"}, // all roles
-  { key: "6", page: "teams", label: "Teams", roles: all_admin_roles },
+  { key: "6", page: "teams", label: "Teams" },
   { key: "5", page: "users", label: "Internal Users", roles: all_admin_roles },
   { key: "8", page: "settings", label: "Logging & Alerts", roles: all_admin_roles },
   { key: "9", page: "caching", label: "Caching", roles: all_admin_roles },

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

@@ -671,7 +671,8 @@ export const teamInfoCall = async (
 };
 
 export const teamListCall = async (
-  accessToken: String,
+  accessToken: String, 
+  userID: String | null = null
 ) => {
   /**
    * Get all available teams on proxy
@@ -679,6 +680,9 @@ export const teamListCall = async (
   try {
     let url = proxyBaseUrl ? `${proxyBaseUrl}/team/list` : `/team/list`;
     console.log("in teamInfoCall");
+    if (userID) {
+      url += `?user_id=${userID}`;
+    }
     const response = await fetch(url, {
       method: "GET",
       headers: {

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

@@ -80,7 +80,13 @@ const Team: React.FC<TeamProps> = ({
     if (teams === null && accessToken) {
       // Call your function here
       const fetchData = async () => {
-        const givenTeams = await teamListCall(accessToken)
+        let givenTeams;
+        if (userRole != "Admin" && userRole != "Admin Viewer") {
+          givenTeams = await teamListCall(accessToken, userID)
+        } else {
+          givenTeams = await teamListCall(accessToken)
+        }
+        
         console.log(`givenTeams: ${givenTeams}`)
 
         setTeams(givenTeams)
@@ -98,6 +104,7 @@ const Team: React.FC<TeamProps> = ({
   const [selectedTeam, setSelectedTeam] = useState<null | any>(
     teams ? teams[0] : null
   );
+
   const [isTeamModalVisible, setIsTeamModalVisible] = useState(false);
   const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
   const [userModels, setUserModels] = useState([]);
@@ -327,7 +334,13 @@ const Team: React.FC<TeamProps> = ({
         }
 
         let _team_id_to_info: Record<string, any> = {};
-        const teamList = await teamListCall(accessToken)
+        let teamList;
+        if (userRole != "Admin" && userRole != "Admin Viewer") {
+          teamList = await teamListCall(accessToken, userID)
+        } else {
+          teamList = await teamListCall(accessToken)
+        }
+        
         for (let i = 0; i < teamList.length; i++) {
           let team = teamList[i];
           let _team_id = team.team_id;
@@ -376,6 +389,16 @@ const Team: React.FC<TeamProps> = ({
     }
   };
 
+  const is_team_admin = (team: any) => {
+    for (let i = 0; i < team.members_with_roles.length; i++) {
+      let member = team.members_with_roles[i];
+      if (member.user_id == userID && member.role == "admin") {
+        return true;
+      }
+    }
+    return false;
+  }
+
   const handleMemberCreate = async (formValues: Record<string, any>) => {
     try {
       if (accessToken != null && teams != null) {
@@ -557,16 +580,20 @@ const Team: React.FC<TeamProps> = ({
                           </Text>
                         </TableCell>
                         <TableCell>
-                          <Icon
+                          {userRole == "Admin" ? (
-                            icon={PencilAltIcon}
+                            <>
-                            size="sm"
+                            <Icon
-                            onClick={() => handleEditClick(team)}
+                              icon={PencilAltIcon}
-                          />
+                              size="sm"
-                          <Icon
+                              onClick={() => handleEditClick(team)}
-                            onClick={() => handleDelete(team.team_id)}
+                            />
-                            icon={TrashIcon}
+                            <Icon
-                            size="sm"
+                              onClick={() => handleDelete(team.team_id)}
-                          />
+                              icon={TrashIcon}
+                              size="sm"
+                            />
+                            </>
+                          ) : null}
                         </TableCell>
                       </TableRow>
                     ))
@@ -623,8 +650,9 @@ const Team: React.FC<TeamProps> = ({
             )}
           </Card>
         </Col>
-        <Col numColSpan={1}>
+        {userRole == "Admin"? (
-          <Button
+          <Col numColSpan={1}>
+            <Button
             className="mx-auto"
             onClick={() => setIsTeamModalVisible(true)}
           >
@@ -707,7 +735,8 @@ const Team: React.FC<TeamProps> = ({
               </div>
             </Form>
           </Modal>
-        </Col>
+          </Col>
+        ) : null}
         <Col numColSpan={1}>
           <Title level={4}>Team Members</Title>
           <Paragraph>
@@ -774,12 +803,14 @@ const Team: React.FC<TeamProps> = ({
           )}
         </Col>
         <Col numColSpan={1}>
-          <Button
+          {userRole == "Admin" || (selectedTeam && is_team_admin(selectedTeam)) ? (
-            className="mx-auto mb-5"
+            <Button
-            onClick={() => setIsAddMemberModalVisible(true)}
+              className="mx-auto mb-5"
-          >
+              onClick={() => setIsAddMemberModalVisible(true)}
-            + Add member
+            >
-          </Button>
+              + Add member
+            </Button>
+          ) : null}
           <Modal
             title="Add member"
             visible={isAddMemberModalVisible}