review fix

This commit is contained in:
Ildar Kamalov
2025-08-29 16:25:53 +03:00
parent e416ec6552
commit f488d91a1c
6 changed files with 20 additions and 34 deletions

View File

@@ -876,6 +876,8 @@
"cache_config_optimistic": "Optimistic caching", "cache_config_optimistic": "Optimistic caching",
"cache_config_optimistic_desc": "AdGuard Home will respond from the cache even if the entries have expired and will try to update them", "cache_config_optimistic_desc": "AdGuard Home will respond from the cache even if the entries have expired and will try to update them",
"cache_config_clear": "Clear cache", "cache_config_clear": "Clear cache",
"cache_config_size_validation": "The cache size must be greater than zero when enabled",
"cache_config_ttl_validation": "Minimum cache TTL override must be less than or equal to the maximum",
"cache_enabled": "Enable cache", "cache_enabled": "Enable cache",
"cache_enabled_desc": "Store DNS responses locally", "cache_enabled_desc": "Store DNS responses locally",
"cache_confirm_clear_title": "Clear DNS cache", "cache_confirm_clear_title": "Clear DNS cache",

View File

@@ -73,7 +73,7 @@ export const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
control, control,
handleSubmit, handleSubmit,
watch, watch,
formState: { isSubmitting, isDirty }, formState: { isSubmitting },
} = useForm<FormData>({ } = useForm<FormData>({
mode: 'onBlur', mode: 'onBlur',
defaultValues: { defaultValues: {
@@ -83,8 +83,6 @@ export const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
}, },
}); });
const allowedClients = watch('allowed_clients');
const renderField = ({ const renderField = ({
id, id,
title, title,
@@ -96,8 +94,6 @@ export const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
faq: ReactNode; faq: ReactNode;
normalizeOnBlur: (value: string) => string; normalizeOnBlur: (value: string) => string;
}) => { }) => {
const disabled = allowedClients && id === 'disallowed_clients';
return ( return (
<div key={id} className={theme.form.input}> <div key={id} className={theme.form.input}>
<Controller <Controller
@@ -111,11 +107,9 @@ export const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
label={ label={
<> <>
{title} {title}
{disabled && <>&nbsp;({intl.getMessage('disabled')})</>}
<FaqTooltip text={faq} menuSize="large" spacing={id === 'blocked_hosts'} /> <FaqTooltip text={faq} menuSize="large" spacing={id === 'blocked_hosts'} />
</> </>
} }
disabled={disabled || processingSet}
onBlur={(e) => { onBlur={(e) => {
field.onChange(normalizeOnBlur(e.target.value)); field.onChange(normalizeOnBlur(e.target.value));
}} }}
@@ -137,7 +131,7 @@ export const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
id="access_save" id="access_save"
variant="primary" variant="primary"
size="small" size="small"
disabled={isSubmitting || !isDirty || processingSet} disabled={isSubmitting || processingSet}
className={theme.form.button}> className={theme.form.button}>
{intl.getMessage('save')} {intl.getMessage('save')}
</Button> </Button>

View File

@@ -104,7 +104,6 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
data-testid="dns_cache_enabled" data-testid="dns_cache_enabled"
disabled={processingSetConfig}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}>{intl.getMessage('cache_enabled')}</div> <div className={theme.text.t2}>{intl.getMessage('cache_enabled')}</div>
@@ -132,7 +131,6 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
</> </>
} }
placeholder={placeholder} placeholder={placeholder}
disabled={processingSetConfig}
min={0} min={0}
max={UINT32_RANGE.MAX} max={UINT32_RANGE.MAX}
onChange={(e) => { onChange={(e) => {
@@ -145,12 +143,14 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
/> />
{name === CACHE_CONFIG_FIELDS.cache_size && cacheSizeZeroWhenEnabled && ( {name === CACHE_CONFIG_FIELDS.cache_size && cacheSizeZeroWhenEnabled && (
<span className={theme.form.error}>{intl.getMessage('cache_size_validation')}</span> <div className={theme.form.error}>{intl.getMessage('cache_config_size_validation')}</div>
)} )}
</div> </div>
))} ))}
{minExceedsMax && <div className={theme.form.error}>{intl.getMessage('ttl_cache_validation')}</div>} {minExceedsMax && (
<div className={theme.form.error}>{intl.getMessage('cache_config_ttl_validation')}</div>
)}
<div className={theme.form.input}> <div className={theme.form.input}>
<Controller <Controller
@@ -163,7 +163,6 @@ export const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
data-testid="dns_cache_optimistic" data-testid="dns_cache_optimistic"
disabled={processingSetConfig}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}>{intl.getMessage('cache_config_optimistic')}</div> <div className={theme.text.t2}>{intl.getMessage('cache_config_optimistic')}</div>

View File

@@ -150,7 +150,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
min={UINT32_RANGE.MIN} min={UINT32_RANGE.MIN}
max={UINT32_RANGE.MAX} max={UINT32_RANGE.MAX}
disabled={!!processing}
onChange={(e) => { onChange={(e) => {
const { value } = e.target; const { value } = e.target;
field.onChange(toNumber(value)); field.onChange(toNumber(value));
@@ -183,7 +182,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
min={0} min={0}
max={32} max={32}
disabled={!!processing}
onChange={(e) => { onChange={(e) => {
const { value } = e.target; const { value } = e.target;
field.onChange(toNumber(value)); field.onChange(toNumber(value));
@@ -216,7 +214,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
min={0} min={0}
max={128} max={128}
disabled={!!processing}
onChange={(e) => { onChange={(e) => {
const { value } = e.target; const { value } = e.target;
field.onChange(toNumber(value)); field.onChange(toNumber(value));
@@ -245,7 +242,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
} }
placeholder={intl.getMessage('ip_addresses_placeholder')} placeholder={intl.getMessage('ip_addresses_placeholder')}
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
disabled={!!processing}
size="medium" size="medium"
/> />
)} )}
@@ -263,7 +259,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
data-testid="dns_config_edns_cs_enabled" data-testid="dns_config_edns_cs_enabled"
disabled={!!processing}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}>{intl.getMessage('server_config_edns_enable')}</div> <div className={theme.text.t2}>{intl.getMessage('server_config_edns_enable')}</div>
@@ -286,7 +281,7 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
data-testid="dns_config_edns_use_custom_ip" data-testid="dns_config_edns_use_custom_ip"
disabled={processing || !edns_cs_enabled} disabled={!edns_cs_enabled}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}> <div className={theme.text.t2}>
@@ -318,7 +313,7 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
data-testid="dns_config_edns_cs_custom_ip" data-testid="dns_config_edns_cs_custom_ip"
placeholder={intl.getMessage('enter_ip_address_placeholder')} placeholder={intl.getMessage('enter_ip_address_placeholder')}
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
disabled={processing || !edns_cs_enabled} disabled={!edns_cs_enabled}
/> />
)} )}
/> />
@@ -338,7 +333,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
id={`dns_config_${name}`} id={`dns_config_${name}`}
disabled={!!processing}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}>{placeholder}</div> <div className={theme.text.t2}>{placeholder}</div>
@@ -371,7 +365,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
handleChange={field.onChange} handleChange={field.onChange}
name={field.name} name={field.name}
options={blockingModeOptions} options={blockingModeOptions}
disabled={!!processing}
/> />
)} )}
/> />
@@ -403,7 +396,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
} }
placeholder={placeholder} placeholder={placeholder}
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
disabled={!!processing}
/> />
)} )}
/> />
@@ -435,7 +427,6 @@ export const Form = ({ processing, initialValues, onSubmit }: Props) => {
errorMessage={fieldState.error?.message} errorMessage={fieldState.error?.message}
min={UINT32_RANGE.MIN} min={UINT32_RANGE.MIN}
max={UINT32_RANGE.MAX} max={UINT32_RANGE.MAX}
disabled={!!processing}
onChange={(e) => { onChange={(e) => {
const { value } = e.target; const { value } = e.target;
field.onChange(toNumber(value)); field.onChange(toNumber(value));

View File

@@ -65,7 +65,7 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
control, control,
handleSubmit, handleSubmit,
watch, watch,
formState: { isSubmitting, isDirty }, formState: { isSubmitting },
} = useForm<FormData>({ } = useForm<FormData>({
mode: 'onBlur', mode: 'onBlur',
defaultValues: { defaultValues: {
@@ -97,7 +97,7 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
}; };
const isSavingDisabled = () => { const isSavingDisabled = () => {
return isSubmitting || !isDirty || processingSetConfig || processingTestUpstream; return isSubmitting || processingSetConfig || processingTestUpstream;
}; };
const isTestDisabled = () => { const isTestDisabled = () => {
@@ -145,7 +145,7 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
</> </>
} }
placeholder={intl.getMessage('upstream_dns_placeholder')} placeholder={intl.getMessage('upstream_dns_placeholder')}
disabled={!!upstreamDnsFile || processingSetConfig || processingTestUpstream} disabled={!!upstreamDnsFile || processingTestUpstream}
size="medium" size="medium"
/> />
</> </>
@@ -162,7 +162,7 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
{...field} {...field}
handleChange={field.onChange} handleChange={field.onChange}
options={upstreamModeOptions} options={upstreamModeOptions}
disabled={processingSetConfig || processingTestUpstream} disabled={processingTestUpstream}
verticalAlign="start" verticalAlign="start"
textClassName={s.radioText} textClassName={s.radioText}
/> />
@@ -192,7 +192,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
</> </>
} }
placeholder={intl.getMessage('ip_addresses_placeholder')} placeholder={intl.getMessage('ip_addresses_placeholder')}
disabled={processingSetConfig}
size="medium" size="medium"
/> />
)} )}
@@ -218,7 +217,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
</> </>
} }
placeholder={intl.getMessage('ip_addresses_placeholder')} placeholder={intl.getMessage('ip_addresses_placeholder')}
disabled={processingSetConfig}
size="medium" size="medium"
/> />
)} )}
@@ -262,7 +260,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
</> </>
} }
placeholder={intl.getMessage('ip_addresses_placeholder')} placeholder={intl.getMessage('ip_addresses_placeholder')}
disabled={processingSetConfig}
size="medium" size="medium"
/> />
)} )}
@@ -280,7 +277,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
checked={field.value} checked={field.value}
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
disabled={processingSetConfig}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}> <div className={theme.text.t2}>
@@ -306,7 +302,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
checked={field.value} checked={field.value}
onChange={field.onChange} onChange={field.onChange}
onBlur={field.onBlur} onBlur={field.onBlur}
disabled={processingSetConfig}
verticalAlign="start"> verticalAlign="start">
<div> <div>
<div className={theme.text.t2}> <div className={theme.text.t2}>
@@ -337,7 +332,6 @@ export const Form = ({ initialValues, onSubmit }: FormProps) => {
</> </>
} }
placeholder={intl.getMessage('upstream_timeout_placeholder')} placeholder={intl.getMessage('upstream_timeout_placeholder')}
disabled={processingSetConfig}
min={1} min={1}
max={UINT32_RANGE.MAX} max={UINT32_RANGE.MAX}
onChange={(e) => { onChange={(e) => {

View File

@@ -38,3 +38,9 @@
.inner { .inner {
padding-left: 32px; padding-left: 32px;
} }
.error {
margin-top: 8px;
font-size: 14px;
color: var(--default-error-icon);
}