From f62b3f5d2cf254e4354122c873364bfc7d0cfae9 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 29 Mar 2024 20:20:04 -0700
Subject: [PATCH] (ui) edit teams

---
 .../src/components/networking.tsx             | 36 ++++++++++++
 ui/litellm-dashboard/src/components/teams.tsx | 56 ++++++++++++-------
 2 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index eced60d6d..5f509c5ba 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/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;
diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx
index d0d3e45f4..2c62f7eed 100644
--- a/ui/litellm-dashboard/src/components/teams.tsx
+++ b/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) => {
-    setSelectedTeam(team);
-    setEditModalVisible(true);
-  };
+const handleEditClick = (team: any) => {
+  setSelectedTeam(team);
+  setEditModalVisible(true);
+};
 
-  const handleEditCancel = () => {
-    setEditModalVisible(false);
-    setSelectedTeam(null);
-  };
+const handleEditCancel = () => {
+  setEditModalVisible(false);
+  setSelectedTeam(null);
+};
 
-  const handleEditSubmit = (teamId: string, values) => {
-    // Call API to update team with teamId and values
-    // Handle success or failure accordingly
-    console.log("Editing team:", teamId, "with values:", values);
-    message.success("Team updated successfully");
-    setEditModalVisible(false);
-    setSelectedTeam(null);
-  };
+const handleEditSubmit = async (formValues: Record<string, any>) => {
+  // Call API to update team with teamId and 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);