scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-11-14 09:03:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 214

fix(ui): preserve credential action menus across panel renders

Browse source 
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
mateo 2026-11-07 10:48:05 +00:00
parent 709b27e268
commit 95b4eabffb
2 changed files with 34 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/litellm-dashboard/src/components/model_add/CredentialsPanel.test.tsx
View file

@ -115,6 +115,35 @@ describe("CredentialsPanel", () => {
vi.clearAllMocks();
});
it("keeps credential actions usable when the panel rerenders with refreshed data", async () => {
const user = userEvent.setup();
mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "Admin" });
mockUseCredentials.mockReturnValue({ data: { credentials }, isLoading: false, refetch: vi.fn() });
const client = createQueryClient();
const panel = (
<QueryClientProvider client={client}>
<CredentialsPanel />
</QueryClientProvider>
);
const { rerender } = render(panel);
await user.click(screen.getByTestId("credential-actions-openai-key"));
expect(await screen.findByTestId("credential-action-edit")).toBeVisible();
mockUseCredentials.mockReturnValue({
data: { credentials: credentials.map((credential) => ({ ...credential })) },
isLoading: false,
refetch: vi.fn(),
});
rerender(
<QueryClientProvider client={client}>
<CredentialsPanel />
</QueryClientProvider>,
);
await user.click(screen.getByTestId("credential-action-edit"));
expect(screen.getByTestId("credential-modal-edit-submit")).toBeInTheDocument();
});
it("renders the Add Credential button for an admin", () => {
mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "Admin" });
mockUseCredentials.mockReturnValue({ data: { credentials: [] }, isLoading: false, refetch: vi.fn() });

10
ui/litellm-dashboard/src/components/model_add/CredentialsPanel.tsx
View file

@ -2,7 +2,7 @@
import { useTerminology } from "@/contexts/TerminologyContext";
import { Plus } from "lucide-react";
import { useState } from "react";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { useCredentials } from "@/app/(dashboard)/hooks/credentials/useCredentials";
@ -91,15 +91,15 @@ export default function CredentialsPanel() {
}
};
const openEditModal = (credential: CredentialItem) => {
const openEditModal = useCallback((credential: CredentialItem) => {
setSelectedCredential(credential);
setIsUpdateModalOpen(true);
};
}, []);
const openDeleteModal = (credential: CredentialItem) => {
const openDeleteModal = useCallback((credential: CredentialItem) => {
setCredentialToDelete(credential);
setIsDeleteModalOpen(true);
};
}, []);
const closeDeleteModal = () => {
setCredentialToDelete(null);