UI Updates (#8345)

* fix(.globals.css): revert .md hard set

caused regression in invitation link display (and possibly other places)

* Fix keys not showing on refresh for internal users  (#8312)

* [Bug] UI: Newly created key does not display on the View Key Page (#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

* fixed user id passed as null when keyuser is you (#8271)

* fix(user_dashboard.tsx): ensure non admin can't view other keys

---------

Co-authored-by: Taha Ali <123803932+tahaali-dev@users.noreply.github.com>
Co-authored-by: Jaswanth Karani <karani.jaswanth@gmail.com>

ui/litellm-dashboard/src/app/globals.css

@@ -42,8 +42,3 @@ body {
 .custom-border {
   border: 1px solid var(--neutral-border);
 }
-
-.max-w-md {
-  display: flex;
-  max-width: 100px !important;
-}

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

@@ -160,6 +160,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
       message.info("Making API Call");
       setIsModalVisible(true);
       
+      if(keyOwner === "you"){
+        formValues.user_id = userID 
+      }
       // If it's a service account, add the service_account_id to the metadata
       if (keyOwner === "service_account") {
         // Parse existing metadata or create an empty object

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

@@ -206,7 +206,21 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
 
             setUserSpendData(response["user_info"]);
             console.log(`userSpendData: ${JSON.stringify(userSpendData)}`)
-            setKeys(response["keys"]); // Assuming this is the correct path to your data
+
+            // set keys for admin and users
+            if (!response?.teams[0].keys) {
+              setKeys(response["keys"]); 
+            } else {
+              setKeys(
+                response["keys"].concat(
+                  response.teams
+                    .filter((team: any) => userRole === "Admin" || team.user_id === userID)
+                    .flatMap((team: any) => team.keys)
+                )
+              );
+              
+            }
+
             const teamsArray = [...response["teams"]];
             if (teamsArray.length > 0) {
               console.log(`response['teams']: ${JSON.stringify(teamsArray)}`);