diff --git a/client/src/Components/inputs/forms/FormRadioGroupField.tsx b/client/src/Components/inputs/forms/FormRadioGroupField.tsx index a751ff0ed..ed97ae2ee 100644 --- a/client/src/Components/inputs/forms/FormRadioGroupField.tsx +++ b/client/src/Components/inputs/forms/FormRadioGroupField.tsx @@ -8,6 +8,7 @@ import { } from "react-hook-form"; import { LAYOUT } from "@/Utils/Theme/constants"; import { RadioWithDescription } from "@/Components/inputs/Radio"; +import { FieldLabel } from "@/Components/inputs/FieldLabel"; export interface FormRadioOption { value: string; label: string; @@ -17,10 +18,12 @@ export interface FormRadioOption { interface FormRadioGroupProps { name: FieldPath; options: FormRadioOption[]; + fieldLabel?: string; } export const FormRadioGroup = ({ name, options, + fieldLabel, }: FormRadioGroupProps) => { const { control } = useFormContext(); const theme = useTheme(); @@ -30,6 +33,7 @@ export const FormRadioGroup = ({ control={control} render={({ field, fieldState }) => ( + {fieldLabel && {fieldLabel}} { })), [t] ); + const globalProxyName = + appSettings?.settings?.globalProxyEnabled === true + ? proxies?.find((proxy) => proxy.id === appSettings?.settings?.globalProxyId)?.name + : undefined; + const proxyModeOptions = useMemo( () => - ProxyModes.map((mode) => ({ - value: mode, - label: t(`pages.createMonitor.form.general.option.proxyMode.value.${mode}`), - })), - [t] + ProxyModes.map((mode) => { + const key = + mode === "inherit" + ? globalProxyName + ? "inheritGlobal" + : "inheritDirect" + : mode; + return { + value: mode, + label: t(`pages.createMonitor.form.general.option.proxyMode.value.${key}`, { + name: globalProxyName, + }), + description: t( + `pages.createMonitor.form.general.option.proxyMode.description.${key}` + ), + }; + }), + [t, globalProxyName] ); const proxyOptions = useMemo( @@ -502,13 +520,6 @@ const CreateMonitorPage = () => { [proxies] ); - const globalProxyName = - appSettings?.settings?.globalProxyEnabled === true - ? proxies?.find((proxy) => proxy.id === appSettings?.settings?.globalProxyId)?.name - : undefined; - - console.log({ appSettings }); - return ( { {/* Proxy fields - only shown for HTTP */} {generalSettingsConfig.showProxy && ( <> - - {watchedProxyMode === "inherit" && ( - - {globalProxyName - ? t( - "pages.createMonitor.form.general.option.proxyMode.effect.global", - { name: globalProxyName } - ) - : t( - "pages.createMonitor.form.general.option.proxyMode.effect.direct" - )} - - )} {watchedProxyMode === "custom" && (