first commit
This commit is contained in:
Beyhan Oğur
214
ui/app/workspace/providers/fragments/debuggingFormFragment.tsx
Normal file
214
ui/app/workspace/providers/fragments/debuggingFormFragment.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { getErrorMessage, setProviderFormDirtyState, useAppDispatch } from "@/lib/store";
|
||||
import { useUpdateProviderMutation } from "@/lib/store/apis/providersApi";
|
||||
import { ModelProvider } from "@/lib/types/config";
|
||||
import { debuggingFormSchema, type DebuggingFormSchema } from "@/lib/types/schemas";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Info } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
import { useForm, type Resolver } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { buildProviderUpdatePayload } from "../views/utils";
|
||||
|
||||
interface DebuggingFormFragmentProps {
|
||||
provider: ModelProvider;
|
||||
}
|
||||
|
||||
export function DebuggingFormFragment({ provider }: DebuggingFormFragmentProps) {
|
||||
const dispatch = useAppDispatch();
|
||||
const hasUpdateProviderAccess = useRbac(RbacResource.ModelProvider, RbacOperation.Update);
|
||||
const [updateProvider, { isLoading: isUpdatingProvider }] = useUpdateProviderMutation();
|
||||
const form = useForm<DebuggingFormSchema, any, DebuggingFormSchema>({
|
||||
resolver: zodResolver(debuggingFormSchema) as Resolver<DebuggingFormSchema, any, DebuggingFormSchema>,
|
||||
mode: "onChange",
|
||||
reValidateMode: "onChange",
|
||||
defaultValues: {
|
||||
send_back_raw_request: provider.send_back_raw_request ?? false,
|
||||
send_back_raw_response: provider.send_back_raw_response ?? false,
|
||||
store_raw_request_response: provider.store_raw_request_response ?? false,
|
||||
},
|
||||
});
|
||||
const sendBackRawRequest = form.watch("send_back_raw_request");
|
||||
const sendBackRawResponse = form.watch("send_back_raw_response");
|
||||
const storeRawRequestResponse = form.watch("store_raw_request_response");
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setProviderFormDirtyState(form.formState.isDirty));
|
||||
}, [form.formState.isDirty, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
form.reset({
|
||||
send_back_raw_request: provider.send_back_raw_request ?? false,
|
||||
send_back_raw_response: provider.send_back_raw_response ?? false,
|
||||
store_raw_request_response: provider.store_raw_request_response ?? false,
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [provider.name, provider.send_back_raw_request, provider.send_back_raw_response, provider.store_raw_request_response]);
|
||||
|
||||
const onSubmit = (data: DebuggingFormSchema) => {
|
||||
const updatedProvider = buildProviderUpdatePayload(provider, {
|
||||
send_back_raw_request: data.send_back_raw_request,
|
||||
send_back_raw_response: data.send_back_raw_response,
|
||||
store_raw_request_response: data.store_raw_request_response,
|
||||
});
|
||||
updateProvider(updatedProvider)
|
||||
.unwrap()
|
||||
.then(() => {
|
||||
toast.success("Debugging configuration updated successfully");
|
||||
form.reset(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.error("Failed to update debugging configuration", {
|
||||
description: getErrorMessage(err),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 px-6" data-testid="provider-config-debugging-content">
|
||||
<div className="space-y-4">
|
||||
{/* Send Back Raw Request */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="send_back_raw_request"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<FormLabel>Send Back Raw Request</FormLabel>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild data-testid="provider-debugging-send-back-raw-request-tooltip-trigger">
|
||||
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Override per-request with header: <code>x-bf-send-back-raw-request: {String(!sendBackRawRequest)}</code>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Include the raw provider request alongside the parsed request in the API response.
|
||||
</p>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
size="md"
|
||||
checked={field.value}
|
||||
disabled={!hasUpdateProviderAccess}
|
||||
onCheckedChange={(checked) => {
|
||||
field.onChange(checked);
|
||||
form.trigger("send_back_raw_request");
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Send Back Raw Response */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="send_back_raw_response"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<FormLabel>Send Back Raw Response</FormLabel>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild data-testid="provider-debugging-send-back-raw-response-tooltip-trigger">
|
||||
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Override per-request with header: <code>x-bf-send-back-raw-response: {String(!sendBackRawResponse)}</code>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Include the raw provider response alongside the parsed response in the API response.
|
||||
</p>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
size="md"
|
||||
checked={field.value}
|
||||
disabled={!hasUpdateProviderAccess}
|
||||
onCheckedChange={(checked) => {
|
||||
field.onChange(checked);
|
||||
form.trigger("send_back_raw_response");
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Store Raw Request/Response */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="store_raw_request_response"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<FormLabel>Store Raw Request/Response</FormLabel>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild data-testid="provider-debugging-store-raw-request-response-tooltip-trigger">
|
||||
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Override per-request with header:{" "}
|
||||
<code>x-bf-store-raw-request-response: {String(!storeRawRequestResponse)}</code>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">Persist raw request and response payloads in log records.</p>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
data-testid="provider-debugging-store-raw-request-response-switch"
|
||||
size="md"
|
||||
checked={field.value}
|
||||
disabled={!hasUpdateProviderAccess}
|
||||
onCheckedChange={(checked) => {
|
||||
field.onChange(checked);
|
||||
form.trigger("store_raw_request_response");
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2 pb-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!form.formState.isDirty || !form.formState.isValid || !hasUpdateProviderAccess || isUpdatingProvider}
|
||||
isLoading={isUpdatingProvider}
|
||||
>
|
||||
Save Debugging Configuration
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user