Fix select in edit membership

ui/litellm-dashboard/src/components/organization/organization_view.tsx

@@ -39,7 +39,7 @@ import {
 } from "../networking";
 import ObjectPermissionsView from "../object_permissions_view";
 import NumericalInput from "../shared/numerical_input";
-import MemberModal from "../team/edit_membership";
+import MemberModal from "../team/EditMembership";
 import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
 
 interface OrganizationInfoProps {

ui/litellm-dashboard/src/components/team/EditMembership.test.tsx

@@ -0,0 +1,72 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "../../../tests/test-utils";
+import EditMembership from "./EditMembership";
+
+describe("EditMembership", () => {
+  const mockOnCancel = vi.fn();
+  const mockOnSubmit = vi.fn();
+
+  const defaultConfig = {
+    title: "Add Member",
+    roleOptions: [
+      { label: "Admin", value: "admin" },
+      { label: "Member", value: "member" },
+    ],
+    defaultRole: "member",
+    showEmail: true,
+    showUserId: false,
+  };
+
+  it("should render", () => {
+    renderWithProviders(
+      <EditMembership
+        visible={true}
+        onCancel={mockOnCancel}
+        onSubmit={mockOnSubmit}
+        mode="add"
+        config={defaultConfig}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Role")).toBeInTheDocument();
+  });
+
+  it("should submit form data when adding a member", async () => {
+    renderWithProviders(
+      <EditMembership
+        visible={true}
+        onCancel={mockOnCancel}
+        onSubmit={mockOnSubmit}
+        mode="add"
+        config={defaultConfig}
+      />,
+    );
+
+    const emailInput = screen.getByPlaceholderText("user@example.com");
+    const submitButton = screen.getByRole("button", { name: "Add Member" });
+
+    act(() => {
+      fireEvent.change(emailInput, { target: { value: "test@example.com" } });
+    });
+
+    await waitFor(() => {
+      expect(emailInput).toHaveValue("test@example.com");
+    });
+
+    act(() => {
+      fireEvent.click(submitButton);
+    });
+
+    await waitFor(() => {
+      expect(mockOnSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          user_email: "test@example.com",
+          role: "member",
+        }),
+      );
+    });
+  });
+});

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

@@ -1,7 +1,6 @@
+import { Text, TextInput } from "@tremor/react";
+import { Button as AntButton, Form, Modal, Select } from "antd";
 import React, { useEffect } from "react";
-import { Modal, Form, Button as AntButton } from "antd";
-import { Select, SelectItem, TextInput } from "@tremor/react";
-import { Text } from "@tremor/react";
 import NumericalInput from "../shared/numerical_input";
 
 interface BaseMember {
@@ -135,9 +134,9 @@ const MemberModal = <T extends BaseMember>({
         return (
           <Select>
             {field.options?.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
+              <Select.Option key={option.value} value={option.value}>
                 {option.label}
-              </SelectItem>
+              </Select.Option>
             ))}
           </Select>
         );
@@ -199,14 +198,14 @@ const MemberModal = <T extends BaseMember>({
                   // Then all other roles
                   ...config.roleOptions.filter((option) => option.value !== initialData.role),
                 ].map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
+                  <Select.Option key={option.value} value={option.value}>
                     {option.label}
-                  </SelectItem>
+                  </Select.Option>
                 ))
               : config.roleOptions.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
+                  <Select.Option key={option.value} value={option.value}>
                     {option.label}
-                  </SelectItem>
+                  </Select.Option>
                 ))}
           </Select>
         </Form.Item>

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

@@ -32,20 +32,20 @@ import { Button, Form, Input, message, Select, Switch, Tooltip } from "antd";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils";
+import AgentSelector from "../agent_management/AgentSelector";
 import DeleteResourceModal from "../common_components/DeleteResourceModal";
 import PassThroughRoutesSelector from "../common_components/PassThroughRoutesSelector";
 import { getModelDisplayName, unfurlWildcardModelsInList } from "../key_team_helpers/fetch_available_models_team_key";
 import LoggingSettingsView from "../logging_settings_view";
 import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
 import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
-import AgentSelector from "../agent_management/AgentSelector";
 import NotificationsManager from "../molecules/notifications_manager";
 import { fetchMCPAccessGroups } from "../networking";
 import ObjectPermissionsView from "../object_permissions_view";
 import NumericalInput from "../shared/numerical_input";
 import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
-import MemberModal from "./edit_membership";
 import EditLoggingSettings from "./EditLoggingSettings";
+import MemberModal from "./EditMembership";
 import MemberPermissions from "./member_permissions";
 import TeamMembersComponent from "./team_member_view";