diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx index 6e972a97e7..4533d99b4a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx @@ -1,14 +1,4 @@ -import { - Button, - Icon, - Table, - TableBody, - TableCell, - TableHead, - TableHeaderCell, - TableRow, - Text, -} from "@tremor/react"; +import { Button, Icon, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Text } from "@tremor/react"; import { Tooltip } from "antd"; import { formatNumberWithCommas } from "@/utils/dataUtils"; import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline"; diff --git a/ui/litellm-dashboard/src/components/OldTeams.tsx b/ui/litellm-dashboard/src/components/OldTeams.tsx index 56c73e8691..df56ab5a5e 100644 --- a/ui/litellm-dashboard/src/components/OldTeams.tsx +++ b/ui/litellm-dashboard/src/components/OldTeams.tsx @@ -755,6 +755,7 @@ const Teams: React.FC = ({ Models Organization Info + Actions @@ -937,20 +938,28 @@ const Teams: React.FC = ({ {userRole == "Admin" ? ( <> - { - setSelectedTeamId(team.team_id); - setEditTeam(true); - }} - /> - handleDelete(team.team_id)} - icon={TrashIcon} - size="sm" - data-testid="delete-team-button" - /> + + {" "} + { + setSelectedTeamId(team.team_id); + setEditTeam(true); + }} + /> + + + {" "} + handleDelete(team.team_id)} + icon={TrashIcon} + size="sm" + className="cursor-pointer hover:text-red-600" + data-testid="delete-team-button" + /> + ) : null} diff --git a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx index 6a2476960f..352f3148e7 100644 --- a/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx +++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx @@ -159,7 +159,7 @@ const GuardrailTable: React.FC = ({ }, { id: "actions", - header: "", + header: "Actions", cell: ({ row }) => { const guardrail = row.original; const isConfigGuardrail = guardrail.guardrail_definition_location === GuardrailDefinitionLocation.CONFIG; @@ -177,16 +177,17 @@ const GuardrailTable: React.FC = ({ /> ) : ( - - guardrail.guardrail_id && - onDeleteClick(guardrail.guardrail_id, guardrail.guardrail_name || "Unnamed Guardrail") - } - className="cursor-pointer hover:text-red-500" - tooltip="Delete guardrail" - /> + + + guardrail.guardrail_id && + onDeleteClick(guardrail.guardrail_id, guardrail.guardrail_name || "Unnamed Guardrail") + } + className="cursor-pointer hover:text-red-500" + /> + )} ); diff --git a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx index b94f4a2d00..d3e01a6632 100644 --- a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx +++ b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx @@ -290,23 +290,25 @@ export const columns = ( }, { id: "actions", - header: "", + header: () => Actions, cell: ({ row }) => { const model = row.original; const canEditModel = userRole === "Admin" || model.model_info?.created_by === userID; return (
- { - if (canEditModel) { - setSelectedModelId(model.model_info.id); - setEditModel(false); - } - }} - className={!canEditModel ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} - /> + + { + if (canEditModel) { + setSelectedModelId(model.model_info.id); + setEditModel(false); + } + }} + className={!canEditModel ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-red-600"} + /> +
); }, diff --git a/ui/litellm-dashboard/src/components/organizations.test.tsx b/ui/litellm-dashboard/src/components/organizations.test.tsx new file mode 100644 index 0000000000..58eb9bb492 --- /dev/null +++ b/ui/litellm-dashboard/src/components/organizations.test.tsx @@ -0,0 +1,33 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import React from "react"; + +vi.mock("./vector_store_management/VectorStoreSelector", () => ({ + __esModule: true, + default: () => null, +})); +vi.mock("./mcp_server_management/MCPServerSelector", () => ({ + __esModule: true, + default: () => null, +})); + +import OrganizationsTable from "./organizations"; + +describe("OrganizationsTable", () => { + it("should render the OrganizationsTable component", () => { + const setOrganizations = vi.fn(); + + const { getByText } = render( + , + ); + + expect(getByText("+ Create New Organization")).toBeInTheDocument(); + }); +}); diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx index 854073d847..71e9030a24 100644 --- a/ui/litellm-dashboard/src/components/organizations.tsx +++ b/ui/litellm-dashboard/src/components/organizations.tsx @@ -370,19 +370,27 @@ const OrganizationsTable: React.FC = ({ {userRole === "Admin" && ( <> - { - setSelectedOrgId(org.organization_id); - setEditOrg(true); - }} - /> - handleDelete(org.organization_id)} - icon={TrashIcon} - size="sm" - /> + + {" "} + { + setSelectedOrgId(org.organization_id); + setEditOrg(true); + }} + /> + + + {" "} + handleDelete(org.organization_id)} + icon={TrashIcon} + size="sm" + className="cursor-pointer hover:text-red-600" + /> + )} diff --git a/ui/litellm-dashboard/src/components/view_users/columns.tsx b/ui/litellm-dashboard/src/components/view_users/columns.tsx index 8946aac228..cb6c54d4d5 100644 --- a/ui/litellm-dashboard/src/components/view_users/columns.tsx +++ b/ui/litellm-dashboard/src/components/view_users/columns.tsx @@ -109,17 +109,32 @@ export const columns = ( }, { id: "actions", - header: "", + header: "Actions", cell: ({ row }) => (
- - handleUserClick(row.original.user_id, true)} /> + + handleUserClick(row.original.user_id, true)} + className="cursor-pointer hover:text-blue-600" + /> - - handleDelete(row.original.user_id)} /> + + handleDelete(row.original.user_id)} + className="cursor-pointer hover:text-red-600" + /> - - handleResetPassword(row.original.user_id)} /> + + handleResetPassword(row.original.user_id)} + className="cursor-pointer hover:text-green-600" + />
), diff --git a/ui/litellm-dashboard/src/components/view_users/table.test.tsx b/ui/litellm-dashboard/src/components/view_users/table.test.tsx new file mode 100644 index 0000000000..5b612b2732 --- /dev/null +++ b/ui/litellm-dashboard/src/components/view_users/table.test.tsx @@ -0,0 +1,46 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import React from "react"; + +import { UserDataTable } from "./table"; + +describe("UserDataTable", () => { + it("should render the UserDataTable component", () => { + const filters = { + email: "", + user_id: "", + user_role: "", + sso_user_id: "", + team: "", + model: "", + min_spend: null, + max_spend: null, + sort_by: "", + sort_order: "asc" as const, + }; + + const updateFilters = vi.fn(); + + const { getByText } = render( + , + ); + + expect(getByText("Filters")).toBeInTheDocument(); + }); +});