Added filter in Teams and fixed spacing & height issues in Teams tabs (…

…BerriAI#6192) (BerriAI#8357)

* [Bug] UI: Newly created key does not display on the View Key Page (BerriAI#8039)

- Fixed issue where all keys appeared blank for admin users.
- Implemented filtering of data via team settings to ensure all keys are displayed correctly.

* Fix:
- Updated the validator to allow model editing when `keyTeam.team_alias === "Default Team"`.
- Ensured other teams still follow the original validation rules.

* - added some classes in global.css
- added text wrap in output of request,response and metadata in index.tsx
- fixed styles of table in table.tsx

* - added full payload when we open single log entry
- added Combined Info Card in index.tsx

* fix: keys not showing on refresh for internal user

* add: search added in teams

ui/litellm-dashboard/src/components/team/available_teams.tsx

@@ -25,11 +25,13 @@ interface AvailableTeam {
 interface AvailableTeamsProps {
   accessToken: string | null;
   userID: string | null;
+  searchTerm : string | null;
 }
 
 const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
   accessToken,
   userID,
+  searchTerm,
 }) => {
   const [availableTeams, setAvailableTeams] = useState<AvailableTeam[]>([]);
 
@@ -70,7 +72,7 @@ const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
 
 
   return (
-    <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
+    <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[70vh]">
       <Table>
         <TableHead>
           <TableRow>
@@ -82,7 +84,9 @@ const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
           </TableRow>
         </TableHead>
         <TableBody>
-          {availableTeams.map((team) => (
+          {availableTeams
+          ?.filter((team) => team["team_alias"].toLowerCase().includes(searchTerm?.toLowerCase() || ''))
+          ?.map((team) => (
             <TableRow key={team.team_id}>
               <TableCell>
                 <Text>{team.team_alias}</Text>

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

@@ -140,6 +140,7 @@ const Team: React.FC<TeamProps> = ({
   const [userModels, setUserModels] = useState<string[]>([]);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [teamToDelete, setTeamToDelete] = useState<string | null>(null);
+  const [searchTerm,setSearchTerm] = useState<string>()
 
 
 
@@ -362,6 +363,24 @@ const Team: React.FC<TeamProps> = ({
       />
     ) : (
       <TabGroup className="gap-2 p-8 h-[75vh] w-full mt-2">
+     <div className="flex items-center justify-between mb-4">
+        <h1 className="text-xl font-semibold">Teams</h1>
+       <div className="flex space-x-2">
+         <input
+          type="text"
+          placeholder="Search by team name"
+          className=" py-2 px-3 custom-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+          <Button
+              className="mx-auto"
+              onClick={() => setIsTeamModalVisible(true)}
+            >
+            + Create New Team
+          </Button>
+      </div>
+    </div>
       <TabList className="flex justify-between mt-2 w-full items-center">
         <div className="flex">
           <Tab>Your Teams</Tab>
@@ -385,7 +404,7 @@ const Team: React.FC<TeamProps> = ({
       </Text>
       <Grid numItems={1} className="gap-2 pt-2 pb-2 h-[75vh] w-full mt-2">
         <Col numColSpan={1}>
-          <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
+          <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[70vh]">
             <Table>
               <TableHead>
                 <TableRow>
@@ -403,7 +422,8 @@ const Team: React.FC<TeamProps> = ({
               <TableBody>
                 {teams && teams.length > 0
                   ? teams
-                      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                      ?.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                      ?.filter((team) => team["team_alias"].toLowerCase().includes(searchTerm?.toLowerCase() || ''))
                       .map((team: any) => (
                       <TableRow key={team.team_id}>
                         <TableCell
@@ -415,7 +435,6 @@ const Team: React.FC<TeamProps> = ({
                         >
                           {team["team_alias"]}
                         </TableCell>
-                        <TableRow>
                         <TableCell>
                           <div className="overflow-hidden">
                             <Tooltip title={team.team_id}>
@@ -434,7 +453,6 @@ const Team: React.FC<TeamProps> = ({
                             </Tooltip>
                           </div>
                         </TableCell>
-                      </TableRow>
 
                         <TableCell
                           style={{
@@ -566,6 +584,14 @@ const Team: React.FC<TeamProps> = ({
                       </TableRow>
                     ))
                   : null}
+
+            {teams && teams?.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={12} className="text-center">
+                <Text>No available teams</Text>
+                </TableCell>
+              </TableRow>
+            )}
               </TableBody>
             </Table>
             {isDeleteModalOpen && (
@@ -620,12 +646,6 @@ const Team: React.FC<TeamProps> = ({
         </Col>
         {userRole == "Admin"? (
           <Col numColSpan={1}>
-            <Button
-              className="mx-auto"
-              onClick={() => setIsTeamModalVisible(true)}
-            >
-            + Create New Team
-          </Button>
           <Modal
             title="Create Team"
             visible={isTeamModalVisible}
@@ -768,6 +788,7 @@ const Team: React.FC<TeamProps> = ({
         <AvailableTeamsPanel
           accessToken={accessToken}
           userID={userID}
+          searchTerm={searchTerm || null}
         />
       </TabPanel>
       </TabPanels>