Fix/credential list stale on add model

[Bytechoreographer]

PR: fix(ui): credential list stays stale on Add Model page after adding a credential

---

Relevant issues

Pre-Submission checklist

• npm run test passes for affected files (5/5)
• Scope is isolated: 4 files changed, no new dependencies
• Comment @greptileai and get Confidence Score ≥ 4/5 before requesting maintainer review

Type

🐛 Bug Fix

Changes

Root cause

After adding, editing, or deleting a credential in the LLM Credentials tab,
the Existing Credentials dropdown on the Add Model tab does not reflect
the change until a full page refresh.

CredentialsPanel calls refetch() on its own useQuery observer after each
mutation, which refreshes the panel's own list. However, ModelsAndEndpointsView
holds a separate useCredentials() subscription and passes the result down as
credentialsList → AddModelTab → AddModelForm → AntdSelect options. That
subscription is never notified, so the dropdown stays stale:

ModelsAndEndpointsView
  └─ const { data } = useCredentials()     ← never sees the new credential
  └─ <AddModelTab credentials={credentialsList} />
       └─ <AddModelForm credentials={credentials} />
            └─ <AntdSelect options={[...credentials]} />   ← stale list

Reproduce:

1. Open LLM Credentials tab → add a new credential
2. Switch to Add Model tab → open the Existing Credentials dropdown
3. Newly created credential is absent ✗
4. Full page refresh → now it appears ✓

Fix

Replace refetch() with queryClient.invalidateQueries({ queryKey: credentialsKeys.all }),
the established cross-component cache invalidation pattern used throughout this
codebase (accessGroupKeys, projectKeys, cloudZeroSettingsKeys, keyKeys, …).

invalidateQueries marks the shared React Query cache entry as stale and triggers
a background refetch for all active subscribers — including
ModelsAndEndpointsView — so the dropdown updates immediately after any mutation.

- const { data: credentialsResponse, refetch: refetchCredentials } = useCredentials();
+ const { data: credentialsResponse } = useCredentials();
+ const queryClient = useQueryClient();

  // in each mutation handler (add / update / delete):
- await refetchCredentials();
+ await queryClient.invalidateQueries({ queryKey: credentialsKeys.all });

credentialsKeys is exported from useCredentials.ts so consumers can reference
the canonical query key without duplicating the string.

Additional fixes in the same files

credentials.tsx — remove dead Form.useForm() instance that was never
connected to any <Form form={...}>, causing the Ant Design console warning
"Instance created by useForm is not connected to any Form element".

AddModelForm.tsx — fix Ant Design console warning
"value in Select options should not be null": the "None" option used
value: null, which Ant Design v5 rejects. Changed to value: "" and removed
the corresponding initialValue={null} from Form.Item (no-selection is
correctly represented by undefined). The submit handler already deletes
litellm_credential_name from params when the value is absent, so the empty
string is handled safely.

Files changed

File	Change
ui/litellm-dashboard/src/app/(dashboard)/hooks/credentials/useCredentials.ts	Export credentialsKeys so consumers can reference the canonical query key
ui/litellm-dashboard/src/components/model_add/credentials.tsx	Replace refetch() with invalidateQueries on all three mutation handlers; remove dead Form.useForm() + Form import
ui/litellm-dashboard/src/components/add_model/AddModelForm.tsx	Fix null option value in credential AntdSelect; remove initialValue={null}
ui/litellm-dashboard/src/components/model_add/credentials.test.tsx	Remove stale refetch stub; export credentialsKeys in mock; add test verifying invalidateQueries is called on credential add

[greptile-apps]

Greptile Summary

Fixes a stale credentials dropdown on the Add Model tab. After any mutation in the LLM Credentials panel, the Existing Credentials select now updates immediately by using invalidateQueries on the shared React Query cache instead of calling refetch() on a single observer. The PR also removes a disconnected form instance and fixes a null-value warning in a Select option.

Confidence Score: 5/5

Safe to merge — targeted, well-tested fix using an established codebase pattern.

No P0 or P1 findings. The invalidateQueries prefix-match correctly covers the credentialsKeys.list({}) query key used by useCredentials. The value: "" for the "None" option is handled safely by the existing empty-string guard in the submit handler. Tests are strengthened, not weakened.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/hooks/credentials/useCredentials.ts	Exports credentialsKeys so consumers can reference the canonical query key for cross-component cache invalidation.
ui/litellm-dashboard/src/components/model_add/credentials.tsx	Replaces per-observer refetch() with queryClient.invalidateQueries(credentialsKeys.all) on add/update/delete; removes dead Form.useForm() instance and Form import.
ui/litellm-dashboard/src/components/add_model/AddModelForm.tsx	Changes the "None" credential option from value: null to value: "" and removes initialValue={null} to fix the Ant Design v5 warning; empty string is already correctly skipped in the submit handler.
ui/litellm-dashboard/src/components/model_add/credentials.test.tsx	Removes stale refetch stubs, mocks AddCredentialModal for easier form submission in tests, and adds a new test verifying invalidateQueries is called on credential add.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant CP as CredentialsPanel
    participant QC as QueryClient (shared cache)
    participant UC1 as useCredentials (CredentialsPanel)
    participant UC2 as useCredentials (ModelsAndEndpointsView)
    participant AMF as AddModelForm dropdown

    U->>CP: Add / Edit / Delete credential
    CP->>QC: invalidateQueries({ queryKey: ["credentials"] })
    QC-->>UC1: mark stale → background refetch
    QC-->>UC2: mark stale → background refetch
    UC2-->>AMF: fresh credential list
    AMF-->>U: dropdown updated ✓

Loading

_{Reviews (1): Last reviewed commit: "Merge branch 'BerriAI:litellm_internal_s..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[Bytechoreographer]

@yassin-berriai @mateo-berri @Sameerlite gentle nudge on this one.

The Existing Credentials dropdown on the Add Model tab goes stale after you add, edit, or delete a credential in the LLM Credentials panel, so you have to reload the page before your change shows up. This invalidates and refetches the list so the select updates immediately.

Open since late April with no maintainer review yet. Could you take a look?