Litellm fix create key tags dropdown

[ryan-crabbe]

Type

🐛 Bug Fix

Changes

The create key form used getPredefinedTags() which only extracted tags from existing keys' metadata. If no keys had tags, the dropdown was empty. Switch to the existing useTags() React Query hook that fetches from /tag/list, matching the edit key form behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Mar 21, 2026 6:00am

[greptile-apps]

Greptile Summary

This PR fixes the tags dropdown in the Create Key form by switching from getPredefinedTags() — which scraped tags from existing keys' metadata and produced an empty list when no keys existed — to the useTags() React Query hook that fetches from /tag/list, aligning the Create Key form with the existing Edit Key form behavior.

Key changes:

• create_key_button.tsx: Imports and calls useTags(), derives tagOptions via Object.values(tagsData), removes the predefinedTags state. The old getPredefinedTags function (lines 87–108) is now dead code and was not removed, including two embedded console.log debug statements.
• create_key_button.test.tsx: Adds a vi.mock for useTags and a new test asserting the dropdown renders the mocked tag options. The mock's data is typed as an array, while the real TagListResponse is Record<string, Tag> — the test passes incidentally because Object.values() works on arrays, but the mock shape doesn't faithfully represent the real API response.

Confidence Score: 4/5

• Safe to merge — the fix is straightforward and correct; two minor cleanup items remain.
• The core logic change is correct and well-tested. The two issues found are both P2: dead code left behind (getPredefinedTags with console.log) and an imprecise mock data shape in the test (array vs Record). Neither affects runtime behavior or correctness of the fix.
• Mild attention to create_key_button.tsx (lines 87–108, dead getPredefinedTags function) and the useTags mock shape in create_key_button.test.tsx.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/organisms/create_key_button.tsx	Replaces getPredefinedTags(data) state with useTags() React Query hook; the fix is correct and consistent with the edit-key form. The old getPredefinedTags function (lines 87-108) is now dead code and should be removed, along with its embedded console.log statements.
ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx	Adds useTags mock and a new test validating that the tags dropdown is populated. The mock's data field is typed as an array instead of a Record<string, Tag>, which is an inaccuracy relative to the real API response shape, though the test still passes due to Object.values() working on arrays.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User opens Create Key modal] --> B[CreateKey component mounts]
    B --> C[useTags hook fetches /tag/list]
    C --> D{API response received?}
    D -- Yes --> E[Map response values to select options]
    D -- No --> F[Render empty dropdown]
    E --> G[Tags dropdown populated]
    F --> G

Loading

Comments Outside Diff (1)

1. ui/litellm-dashboard/src/components/organisms/create_key_button.tsx, line 87-108 (link)

   Dead code: getPredefinedTags is now unused

   The getPredefinedTags function (and the predefinedTags state it powered) was the previous source of tag options. Since this PR replaces it with useTags(), the function is now entirely dead code. It should be removed to keep the file clean.

   Additionally, it still contains console.log debug statements at lines 90 and 106 that would generate noise in production console output even though they're unreachable.

   (Remove lines 87–108 entirely)

_{Last reviewed commit: "test(ui): add unit t..."}

[greptile-apps]

Mock shape doesn't match TagListResponse

TagListResponse is defined as Record<string, Tag> — an object keyed by tag name — but the mock returns data as a plain array:

// Actual shape returned by the real API
{ "production": { name: "production", ... }, "staging": { name: "staging", ... } }

// What the mock returns
[{ name: "production", ... }, { name: "staging", ... }]

The test passes today because Object.values() happens to work on arrays too (returning the elements), so the component's mapping logic produces the same result. However, the mock inaccurately represents the real response, which means any future branch that checks the shape of tagsData (e.g. Array.isArray, key access, Object.keys) would behave differently under test than in production.

Consider updating the mock to match the real Record<string, Tag> shape:

Suggested change

	vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({
	useTags: vi.fn().mockReturnValue({
	data: [
	{ name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
	{ name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
	],
	isLoading: false,
	}),
	}));
	vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({
	useTags: vi.fn().mockReturnValue({
	data: {
	production: { name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
	staging: { name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
	},
	isLoading: false,
	}),
	}));

Rule Used: # Code Review Rule: Mock Test Integrity

What:... (source)