mirror of
https://github.com/BerriAI/litellm.git
synced 2026-08-28 05:25:59 +00:00
5a899f596b
* fix(ui): restore the cache control Role and Index field hints The add_model cache control editor lost both field hints when it moved off antd Form.Item in #37392. "LiteLLM will mark all messages of this role as cacheable" and "(Optional) If set litellm will mark the message at this index as cacheable" went with the Form.Item tooltip props and neither string exists in dashboard source any more. The Index hint was the only thing telling a user that field is optional, so this is lost information rather than styling. Both come back as shadcn tooltips beside their labels, matching how the surviving switch-level hint is already rendered. Also adds the payload characterization net this graph did not have. Before this commit the seven suites over add_model and model_add held 37 cases, no antd module mock, and zero toStrictEqual, so nothing pinned the submit payload. AddModelPanel.integration.test.tsx drives the real panel, the real antd store and the real prepareModelAddRequest, and asserts the object handed to modelCreateCall. It pins the distinctions only a strict assertion can see: litellm_credential_name arrives as null from its initialValue while api_key, api_base, mode and access_groups arrive as undefined, and team_id is absent entirely until the Team-BYOK switch mounts it. It also pins the mount gate in both directions, since a collapsed Advanced Settings drops both its keys and anything typed into it while re-expanding restores them, and the empty-string skip, since a cleared api_base must vanish rather than arrive as "". Every fixture was captured from the running component rather than written by hand. A 12-mutation battery over the bindings, the empty-string skip, the two required rules and an added keepMounted all go red, each run gated on having executed the expected case count. * refactor(ui): port the add model form off antd Form onto react-hook-form The Add Model form graph is shared by three antd hosts, so it only moves as one piece: AddModelPanel, LlmCredentialsPanel and CredentialModal all mount the same children. Form and Form.Item are replaced everywhere, and every widget inside them is left alone, so the change is the binding layer only. antd submits the mounted fields, react-hook-form submits its whole store. A shared mount registry keeps that difference from reaching the request: each field registers on mount, and the panel projects the store down to the registered names before it builds the payload. shouldUnregister would have been the other option, but it drops a collapsed section's typed values, so re-expanding Advanced Settings would come back empty. The antd rules modules are reused as-is through a thin validator adapter, so the messages stay in one place rather than being reworded per field. Advanced Settings held a Form.useForm() instance in a component that renders no Form, which made ten imperative calls dead. They are removed rather than translated, and the three behaviours they looked like they drove were checked against the antd original first: invalid LiteLLM Params still blocks submit, the pass-through toggle still leaves LiteLLM Params empty, and turning custom pricing off then on still keeps the typed cost. The existing 14 case payload net runs unedited against the port. * test(ui): pin the three add model behaviours the dead form instance looked like it drove Advanced Settings used to hold a form instance it never rendered, and the ten imperative calls against it were dead. The inherited payload net covered none of the three behaviours those calls appeared to own, so removing them looked riskier than it was. These cases characterise what the antd original actually did, checked against it before the port. Invalid LiteLLM Params blocks the submit, which also closes the one mutation the inherited net could not kill: dropping the JSON rule left all 14 green.
24 lines
714 B
TypeScript
24 lines
714 B
TypeScript
import React from "react";
|
|
import { FormProvider, useForm } from "react-hook-form";
|
|
|
|
import {
|
|
MountedFormProvider,
|
|
useMountRegistry,
|
|
type MountedFormValues,
|
|
} from "@/components/common_components/MountedFormField";
|
|
|
|
interface MountedFormHostProps {
|
|
defaultValues?: MountedFormValues;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const MountedFormHost: React.FC<MountedFormHostProps> = ({ defaultValues, children }) => {
|
|
const form = useForm<MountedFormValues>({ mode: "onChange", defaultValues });
|
|
const registry = useMountRegistry();
|
|
|
|
return (
|
|
<FormProvider {...form}>
|
|
<MountedFormProvider value={{ control: form.control, registry }}>{children}</MountedFormProvider>
|
|
</FormProvider>
|
|
);
|
|
};
|