scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-06 02:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

refactor - change key type label

Browse source
This commit is contained in:
yuneng-jiang 2026-02-16 21:08:13 -08:00
parent 96d7585ea4
commit ec19005942
4 changed files with 83 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -72,6 +72,37 @@ describe("CreateKey", () => {
expect(screen.getByRole("button", { name: /create new key/i })).toBeInTheDocument();
});
it("should display 'AI APIs' label for the llm_api key type option", async () => {
renderWithProviders(<CreateKey {...defaultProps} />);
act(() => {
fireEvent.click(screen.getByRole("button", { name: /create new key/i }));
});
await waitFor(() => {
expect(screen.getByText("Key Type")).toBeInTheDocument();
});
// Open the Key Type dropdown
const keyTypeSection = screen.getByText("Key Type").closest(".ant-form-item")!;
const selectElement = keyTypeSection.querySelector(".ant-select-selector")!;
act(() => {
fireEvent.mouseDown(selectElement);
});
await waitFor(() => {
// Verify "AI APIs" appears as an option
const options = document.querySelectorAll(".ant-select-item-option");
const optionTexts = Array.from(options).map((el) => el.textContent);
const hasAIAPIs = optionTexts.some((text) => text?.includes("AI APIs"));
expect(hasAIAPIs).toBe(true);
// Verify old "LLM API" label does NOT appear
const hasLLMAPI = optionTexts.some((text) => text?.includes("LLM API"));
expect(hasLLMAPI).toBe(false);
});
});
it("should include access_group_ids in keyCreateCall payload when access groups are selected", async () => {
renderWithProviders(<CreateKey {...defaultProps} />);

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

@ -728,15 +728,15 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey }) => {
<div style={{ padding: "4px 0" }}>
<div style={{ fontWeight: 500 }}>Default</div>
<div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
Can call LLM API + Management routes
Can call AI APIs + Management routes
</div>
</div>
</Option>
<Option value="llm_api" label="LLM API">
<Option value="llm_api" label="AI APIs">
<div style={{ padding: "4px 0" }}>
<div style={{ fontWeight: 500 }}>LLM API</div>
<div style={{ fontWeight: 500 }}>AI APIs</div>
<div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
Can call only LLM API routes (chat/completions, embeddings, etc.)
Can call only AI API routes (chat/completions, embeddings, etc.)
</div>
</div>
</Option>

45
ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
View file

@ -494,7 +494,50 @@ describe("KeyEditView", () => {
});
});
it("should disable cancel button during submission", async () => {
it("should display 'AI APIs' label for the llm_api key type option", async () => {
const keyDataWithLlmApiRoutes = {
...MOCK_KEY_DATA,
allowed_routes: ["llm_api_routes"],
};
renderWithProviders(
<KeyEditView
keyData={keyDataWithLlmApiRoutes}
onCancel={() => {}}
onSubmit={async () => {}}
accessToken={""}
userID={""}
userRole={""}
premiumUser={false}
/>,
);
await waitFor(() => {
expect(screen.getByText("Key Type")).toBeInTheDocument();
});
// The selected key type label should show "AI APIs" (not "LLM API")
const keyTypeSection = screen.getByText("Key Type").closest(".ant-form-item")!;
expect(keyTypeSection).toBeInTheDocument();
// Open the dropdown to see all options
const selectElement = keyTypeSection.querySelector(".ant-select-selector")!;
await userEvent.click(selectElement);
await waitFor(() => {
// Verify "AI APIs" appears as an option label
const options = document.querySelectorAll(".ant-select-item-option");
const optionTexts = Array.from(options).map((el) => el.textContent);
const hasAIAPIs = optionTexts.some((text) => text?.includes("AI APIs"));
expect(hasAIAPIs).toBe(true);
// Verify old "LLM API" label does NOT appear
const hasLLMAPI = optionTexts.some((text) => text?.includes("LLM API"));
expect(hasLLMAPI).toBe(false);
});
});
it("should display cancel button during submission", async () => {
let resolveSubmit: (() => void) | undefined;
const submitPromise = new Promise<void>((resolve) => {
resolveSubmit = resolve;

8
ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
View file

@ -345,15 +345,15 @@ export function KeyEditView({
<div style={{ padding: "4px 0" }}>
<div style={{ fontWeight: 500 }}>Default</div>
<div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
Can call LLM API + Management routes
Can call AI APIs + Management routes
</div>
</div>
</Select.Option>
<Select.Option value="llm_api" label="LLM API">
<Select.Option value="llm_api" label="AI APIs">
<div style={{ padding: "4px 0" }}>
<div style={{ fontWeight: 500 }}>LLM API</div>
<div style={{ fontWeight: 500 }}>AI APIs</div>
<div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
Can call only LLM API routes (chat/completions, embeddings, etc.)
Can call only AI API routes (chat/completions, embeddings, etc.)
</div>
</div>
</Select.Option>