scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-06 08:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 79

Merge pull request #24273 from BerriAI/litellm_fix-create-key-tags-dropdown

Browse source 
Litellm fix create key tags dropdown
This commit is contained in:
ryan-crabbe 2026-03-21 08:45:29 -07:00 • committed by GitHub
commit c68a8aa356
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
View file

@ -119,7 +119,7 @@ vi.mock("antd", () => {
Form.useForm = () => [formMock];
const Select = ({ children, onChange, ...props }: { children?: any; onChange?: (value: string) => void }) =>
const Select = ({ children, onChange, options, ...props }: { children?: any; onChange?: (value: string) => void; options?: Array<{ value: string; label: string }> }) =>
React.createElement(
"select",
{
@ -127,6 +127,7 @@ vi.mock("antd", () => {
onChange: (event: any) => onChange?.(event.target.value),
},
children,
options?.map((opt: any) => React.createElement("option", { key: opt.value, value: opt.value }, opt.label)),
);
Select.Option = ({ children, ...props }: { children?: any }) =>
@ -238,6 +239,16 @@ vi.mock("../key_team_helpers/fetch_available_models_team_key", () => ({
getModelDisplayName: (model: string) => model,
}));
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/projects/useProjects", () => ({
useProjects: vi.fn().mockReturnValue({ data: [], isLoading: false }),
}));
@ -525,4 +536,19 @@ describe("CreateKey", () => {
expect(formStateRef.current["organization_id"]).toBe("org-1");
});
});
describe("tags dropdown", () => {
it("should populate tags dropdown with options from useTags hook", async () => {
renderWithProviders(<CreateKey {...defaultProps} />);
act(() => {
fireEvent.click(screen.getByRole("button", { name: /create new key/i }));
});
await waitFor(() => {
expect(screen.getByText("production")).toBeInTheDocument();
expect(screen.getByText("staging")).toBeInTheDocument();
});
});
});
});

10
ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
View file

@ -2,6 +2,7 @@
import { keyKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
import { useProjects } from "@/app/(dashboard)/hooks/projects/useProjects";
import { useTags } from "@/app/(dashboard)/hooks/tags/useTags";
import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { formatNumberWithCommas } from "@/utils/dataUtils";
@ -165,8 +166,12 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
const { data: organizations, isLoading: isOrganizationsLoading } = useOrganizations();
const { data: projects, isLoading: isProjectsLoading } = useProjects();
const { data: uiSettingsData } = useUISettings();
const { data: tagsData } = useTags();
const enableProjectsUI = Boolean(uiSettingsData?.values?.enable_projects_ui);
const disableCustomApiKeys = Boolean(uiSettingsData?.values?.disable_custom_api_keys);
const tagOptions = tagsData
? Object.values(tagsData).map((tag) => ({ value: tag.name, label: tag.name }))
: [];
const queryClient = useQueryClient();
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
@ -175,7 +180,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
const [userModels, setUserModels] = useState<string[]>([]);
const [modelsToPick, setModelsToPick] = useState<string[]>([]);
const [keyOwner, setKeyOwner] = useState("you");
const [predefinedTags, setPredefinedTags] = useState(getPredefinedTags(data));
const [hasPrefilled, setHasPrefilled] = useState(false);
const [pendingPrefillModels, setPendingPrefillModels] = useState<string[] | null>(null);
const [guardrailsList, setGuardrailsList] = useState<string[]>([]);
@ -1340,9 +1344,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey, autoOp
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Enter tags"
placeholder="Select or enter tags"
tokenSeparators={[","]}
options={predefinedTags}
options={tagOptions}
/>
</Form.Item>
<Accordion className="mt-4 mb-4">