Litellm dev 01 24 2025 p4 (#7992)

* feat(team_endpoints.py): new `/teams/available` endpoint - allows proxy admin to expose available teams for users to join on UI

* build(ui/): available_teams.tsx

allow user to join available teams on UI

makes it easier to onboard new users to teams

* fix(navbar.tsx): cleanup title

* fix(team_endpoints.py): fix linting error

* test: update groq model in test

* build(model_prices_and_context_window.json): update groq 3.3 model with 'supports function calling'

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

@@ -7,6 +7,7 @@ import {
   InformationCircleIcon,
   PencilAltIcon,
   PencilIcon,
+  RefreshIcon,
   StatusOnlineIcon,
   TrashIcon,
 } from "@heroicons/react/outline";
@@ -42,8 +43,14 @@ import {
   Accordion,
   AccordionHeader,
   AccordionBody,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tab
 } from "@tremor/react";
 import { CogIcon } from "@heroicons/react/outline";
+import AvailableTeamsPanel from "@/components/team/available_teams";
 const isLocal = process.env.NODE_ENV === "development";
 const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
 if (isLocal != true) {
@@ -83,26 +90,36 @@ const Team: React.FC<TeamProps> = ({
   userID,
   userRole,
 }) => {
+  const [lastRefreshed, setLastRefreshed] = useState("");
 
+  const fetchTeams = async (accessToken: string, userID: string | null, userRole: string | null) => {
+    let givenTeams;
+    if (userRole != "Admin" && userRole != "Admin Viewer") {
+      givenTeams = await teamListCall(accessToken, userID)
+    } else {
+      givenTeams = await teamListCall(accessToken)
+    }
+    
+    console.log(`givenTeams: ${givenTeams}`)
+
+    setTeams(givenTeams)
+  }
   useEffect(() => {
     console.log(`inside useeffect - ${teams}`)
     if (teams === null && accessToken) {
       // Call your function here
-      const fetchData = async () => {
-        let givenTeams;
-        if (userRole != "Admin" && userRole != "Admin Viewer") {
-          givenTeams = await teamListCall(accessToken, userID)
-        } else {
-          givenTeams = await teamListCall(accessToken)
-        }
-        
-        console.log(`givenTeams: ${givenTeams}`)
-
-        setTeams(givenTeams)
-      }
-      fetchData()
+      fetchTeams(accessToken, userID, userRole)
     }
   }, [teams]);
+  
+  useEffect(() => {
+    console.log(`inside useeffect - ${lastRefreshed}`)
+    if (accessToken) {
+      // Call your function here
+      fetchTeams(accessToken, userID, userRole)
+    }
+    handleRefreshClick()
+  }, [lastRefreshed]);
 
   const [form] = Form.useForm();
   const [memberForm] = Form.useForm();
@@ -121,6 +138,7 @@ const Team: React.FC<TeamProps> = ({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [teamToDelete, setTeamToDelete] = useState<string | null>(null);
   const [selectedEditMember, setSelectedEditMember] = useState<null | TeamMember>(null);
+  
 
 
   const [perTeamInfo, setPerTeamInfo] = useState<Record<string, any>>({});
@@ -552,6 +570,12 @@ const Team: React.FC<TeamProps> = ({
     }
   }
 
+  const handleRefreshClick = () => {
+    // Update the 'lastRefreshed' state to the current date and time
+    const currentDate = new Date();
+    setLastRefreshed(currentDate.toLocaleString());
+  };
+
   const handleMemberCreate = async (formValues: Record<string, any>) => {
     _common_member_update_call(formValues, "add");
   };
@@ -561,9 +585,27 @@ const Team: React.FC<TeamProps> = ({
   }
   return (
     <div className="w-full mx-4">
-      <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
+      <TabGroup className="gap-2 p-8 h-[75vh] w-full mt-2">
+      <TabList className="flex justify-between mt-2 w-full items-center">
+        <div className="flex">
+          <Tab>Your Teams</Tab>
+          <Tab>Available Teams</Tab>
+          </div>
+          <div className="flex items-center space-x-2">
+            {lastRefreshed && <Text>Last Refreshed: {lastRefreshed}</Text>}
+            <Icon
+              icon={RefreshIcon} // Modify as necessary for correct icon name
+              variant="shadow"
+              size="xs"
+              className="self-center"
+              onClick={handleRefreshClick}
+            />
+          </div>
+      </TabList>
+      <TabPanels>
+      <TabPanel>
+      <Grid numItems={1} className="gap-2 pt-2 pb-2 h-[75vh] w-full mt-2">
         <Col numColSpan={1}>
-          <Title level={4}>All Teams</Title>
           <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
             <Table>
               <TableHead>
@@ -1080,6 +1122,16 @@ const Team: React.FC<TeamProps> = ({
           </Modal>
         </Col>
       </Grid>
+      </TabPanel>
+      <TabPanel>  
+        <AvailableTeamsPanel
+          accessToken={accessToken}
+          userID={userID}
+        />
+      </TabPanel>
+      </TabPanels>
+
+    </TabGroup>
     </div>
   );
 };