(ui) edit teams

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

@@ -51,6 +51,8 @@ const Team: React.FC<TeamProps> = ({
   const [memberForm] = Form.useForm();
   const { Title, Paragraph } = Typography;
   const [value, setValue] = useState("");
+  const [editModalVisible, setEditModalVisible] = useState(false);
+
 
   const [selectedTeam, setSelectedTeam] = useState<null | any>(
     teams ? teams[0] : null
@@ -61,6 +63,102 @@ const Team: React.FC<TeamProps> = ({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [teamToDelete, setTeamToDelete] = useState<string | null>(null);
 
+
+const EditTeamModal = ({ visible, onCancel, team, onSubmit }) => {
+  const [form] = Form.useForm();
+
+  const handleOk = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        onSubmit(team.team_id, values);
+        form.resetFields();
+      })
+      .catch((error) => {
+        console.error("Validation failed:", error);
+      });
+  };
+
+  return (
+      <Modal
+            title="Edit Team"
+            visible={visible}
+            width={800}
+            footer={null}
+            onOk={handleOk}
+            onCancel={onCancel}
+          >
+      <Form
+        form={form}
+        initialValues={team} // Pass initial values here
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        labelAlign="left"
+      >
+              <>
+                <Form.Item 
+                  label="Team Name" 
+                  name="team_alias"
+                  rules={[{ required: true, message: 'Please input a team name' }]}
+                >
+                  <Input />
+                </Form.Item>
+                <Form.Item label="Models" name="models">
+                  <Select2
+                    mode="multiple"
+                    placeholder="Select models"
+                    style={{ width: "100%" }}
+                  >
+                    {userModels && userModels.map((model) => (
+                      <Select2.Option key={model} value={model}>
+                        {model}
+                      </Select2.Option>
+                    ))}
+                  </Select2>
+                </Form.Item>
+                <Form.Item label="Max Budget (USD)" name="max_budget">
+                  <InputNumber step={0.01} precision={2} width={200} />
+                </Form.Item>
+                <Form.Item
+                  label="Tokens per minute Limit (TPM)"
+                  name="tpm_limit"
+                >
+                  <InputNumber step={1} width={400} />
+                </Form.Item>
+                <Form.Item
+                  label="Requests per minute Limit (RPM)"
+                  name="rpm_limit"
+                >
+                  <InputNumber step={1} width={400} />
+                </Form.Item>
+              </>
+              <div style={{ textAlign: "right", marginTop: "10px" }}>
+                <Button2 htmlType="submit">Edit Team</Button2>
+              </div>
+            </Form>
+    </Modal>
+  );
+};
+
+  const handleEditClick = (team: any) => {
+    setSelectedTeam(team);
+    setEditModalVisible(true);
+  };
+
+  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 handleOk = () => {
     setIsTeamModalVisible(false);
     form.resetFields();
@@ -261,6 +359,7 @@ const Team: React.FC<TeamProps> = ({
                         <Icon
                             icon={PencilAltIcon}
                             size="sm"
+                            onClick={() => handleEditClick(team)}
                           />
                         <Icon
                             onClick={() => handleDelete(team.team_id)}
@@ -449,6 +548,14 @@ const Team: React.FC<TeamProps> = ({
               </TableBody>
             </Table>
           </Card>
+          {selectedTeam && (
+        <EditTeamModal
+          visible={editModalVisible}
+          onCancel={handleEditCancel}
+          team={selectedTeam}
+          onSubmit={handleEditSubmit}
+        />
+      )}
         </Col>
         <Col numColSpan={1}>
           <Button