fix: isolate logs team filter dropdown from root teams state bleed

The Logs view's Team ID filter dropdown was reading `allTeams` from the
root `teams` state in page.tsx, which the Teams page search overwrites
with its filtered subset. Applying a team search on the Teams page made
filtered-out teams disappear from the Logs filter dropdown.

Swap the Team ID filter to use the existing `TeamDropdown` component via
a small `FilterTeamDropdown` wrapper that adapts it to the filter slot's
`FilterOptionCustomComponentProps` contract. The dropdown now drives its
own `useInfiniteTeams` query against `/v2/team/list` with server-side
search and an isolated react-query cache, unreachable from root state.

Rename the now-unused `hookAllTeams` destructure to `allTeams` so the
`KeyInfoView` passthrough receives the hook's unpolluted fetch instead
of the polluted prop, and drop the dead `allTeams` prop from
`SpendLogsTable` and both of its call sites.
This commit is contained in:
Ryan Crabbe
2026-04-14 14:28:53 -07:00
parent e64d98f725
commit 1beb8037d1
5 changed files with 15 additions and 25 deletions
@@ -2,11 +2,9 @@
import SpendLogsTable from "@/components/view_logs";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import useTeams from "@/app/(dashboard)/hooks/useTeams";
const LogsPage = () => {
const { accessToken, token, userRole, userId, premiumUser } = useAuthorized();
const { teams } = useTeams();
return (
<SpendLogsTable
@@ -14,7 +12,6 @@ const LogsPage = () => {
token={token}
userRole={userRole}
userID={userId}
allTeams={teams || []}
premiumUser={premiumUser}
/>
);
-1
View File
@@ -620,7 +620,6 @@ function CreateKeyPageContent() {
userRole={userRole}
token={token}
accessToken={accessToken}
allTeams={(teams as Team[]) ?? []}
premiumUser={premiumUser}
/>
) : page == "mcp-servers" ? (
@@ -0,0 +1,10 @@
import React from "react";
import TeamDropdown from "./team_dropdown";
import type { FilterOptionCustomComponentProps } from "../molecules/filter";
const FilterTeamDropdown: React.FC<FilterOptionCustomComponentProps> = ({
value,
onChange,
}) => <TeamDropdown value={value} onChange={onChange} />;
export default FilterTeamDropdown;
@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
import SpendLogsTable, { RequestViewer } from "./index";
import type { LogEntry } from "./columns";
import type { Row } from "@tanstack/react-table";
import type { Team } from "../key_team_helpers/key_list";
import { renderWithProviders } from "../../../tests/test-utils";
const mockHandleFilterResetFromHook = vi.fn();
@@ -178,7 +177,6 @@ describe("SpendLogsTable", () => {
token: "test-token",
userRole: "Admin",
userID: "user-1",
allTeams: [] as Team[],
premiumUser: false,
};
@@ -11,7 +11,8 @@ import { Button, Tag, Tooltip } from "antd";
import { internalUserRoles } from "../../utils/roles";
import DeletedKeysPage from "../DeletedKeysPage/DeletedKeysPage";
import DeletedTeamsPage from "../DeletedTeamsPage/DeletedTeamsPage";
import { KeyResponse, Team } from "../key_team_helpers/key_list";
import FilterTeamDropdown from "../common_components/FilterTeamDropdown";
import { KeyResponse } from "../key_team_helpers/key_list";
import { PaginatedKeyAliasSelect } from "../KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect";
import { PaginatedModelSelect } from "../ModelSelect/PaginatedModelSelect/PaginatedModelSelect";
import FilterComponent, { FilterOption } from "../molecules/filter";
@@ -36,7 +37,6 @@ interface SpendLogsTableProps {
token: string | null;
userRole: string | null;
userID: string | null;
allTeams: Team[];
premiumUser: boolean;
}
@@ -53,7 +53,6 @@ export default function SpendLogsTable({
token,
userRole,
userID,
allTeams,
premiumUser,
}: SpendLogsTableProps) {
const [searchTerm, setSearchTerm] = useState("");
@@ -241,7 +240,7 @@ export default function SpendLogsTable({
filters,
filteredLogs,
hasBackendFilters,
allTeams: hookAllTeams,
allTeams,
handleFilterChange,
handleFilterReset: handleFilterResetFromHook,
} = useLogFilterLogic({
@@ -394,20 +393,7 @@ export default function SpendLogsTable({
{
name: "Team ID",
label: "Team ID",
isSearchable: true,
searchFn: async (searchText: string) => {
if (!allTeams || allTeams.length === 0) return [];
const filtered = allTeams.filter((team: Team) => {
return (
team.team_id.toLowerCase().includes(searchText.toLowerCase()) ||
(team.team_alias && team.team_alias.toLowerCase().includes(searchText.toLowerCase()))
);
});
return filtered.map((team: Team) => ({
label: `${team.team_alias || team.team_id} (${team.team_id})`,
value: team.team_id,
}));
},
customComponent: FilterTeamDropdown,
},
{
name: "Status",
@@ -506,7 +492,7 @@ export default function SpendLogsTable({
<KeyInfoView
keyId={selectedKeyIdInfoView}
keyData={selectedKeyInfo}
teams={allTeams}
teams={allTeams ?? []}
onClose={() => setSelectedKeyIdInfoView(null)}
backButtonText="Back to Logs"
/>