(ui) edit teams

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

@@ -817,6 +817,42 @@ export const teamCreateCall = async (
   }
 };
 
+
+export const teamUpdateCall = async (
+  accessToken: string,
+  formValues: Record<string, any> // Assuming formValues is an object
+) => {
+  try {
+    console.log("Form Values in teamUpateCall:", formValues); // Log the form values before making the API call
+
+    const url = proxyBaseUrl ? `${proxyBaseUrl}/team/update` : `/team/update`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        ...formValues, // Include formValues in the request body
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error("Failed to update team: " + errorData);
+      console.error("Error response from the server:", errorData);
+      throw new Error("Network response was not ok");
+    }
+    const data = await response.json();
+    console.log("Update Team Response:", data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
 export interface Member {
   role: string;
   user_id: string | null;

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Typography } from "antd";
-import { teamDeleteCall } from "./networking";
+import { teamDeleteCall, teamUpdateCall } from "./networking";
 import { InformationCircleIcon, PencilAltIcon, PencilIcon, StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
 import {
   Button as Button2,
@@ -71,13 +71,14 @@ const EditTeamModal = ({ visible, onCancel, team, onSubmit }) => {
     form
       .validateFields()
       .then((values) => {
-        onSubmit(team.team_id, values);
+        const updatedValues = {...values, team_id: team.team_id};
+        onSubmit(updatedValues);
         form.resetFields();
       })
       .catch((error) => {
         console.error("Validation failed:", error);
       });
-  };
+};
 
   return (
       <Modal
@@ -90,6 +91,7 @@ const EditTeamModal = ({ visible, onCancel, team, onSubmit }) => {
           >
       <Form
         form={form}
+        onFinish={handleEditSubmit}
         initialValues={team} // Pass initial values here
         labelCol={{ span: 8 }}
         wrapperCol={{ span: 16 }}
@@ -140,24 +142,40 @@ const EditTeamModal = ({ visible, onCancel, team, onSubmit }) => {
   );
 };
 
-  const handleEditClick = (team: any) => {
+const handleEditClick = (team: any) => {
   setSelectedTeam(team);
   setEditModalVisible(true);
-  };
+};
 
-  const handleEditCancel = () => {
+const handleEditCancel = () => {
   setEditModalVisible(false);
   setSelectedTeam(null);
-  };
+};
 
-  const handleEditSubmit = (teamId: string, values) => {
+const handleEditSubmit = async (formValues: Record<string, any>) => {
   // Call API to update team with teamId and values
-    // Handle success or failure accordingly
-    console.log("Editing team:", teamId, "with values:", values);
+  const teamId = formValues.team_id; // get team_id
+  
+  console.log("handleEditSubmit:", formValues);
+  if (accessToken == null) {
+    return;
+  }
+
+  // Update the teams state with the updated team data
+  if (teams) {
+    const updatedTeams = teams.map((team) =>
+      team.team_id === teamId ? formValues : team
+    );
+    setTeams(updatedTeams);
+  }
+
+  console.log("Editing team:", teamId, "with values:", formValues);
   message.success("Team updated successfully");
+  teamUpdateCall(accessToken, formValues);
+
   setEditModalVisible(false);
   setSelectedTeam(null);
-  };
+};
 
   const handleOk = () => {
     setIsTeamModalVisible(false);