- client: 2159 Fix general settings link to filters

Close #2159

Squashed commit of the following:

commit 5b6b15b
Merge: b97f6b3 20226ed
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Oct 12 17:52:56 2020 +0300

    Merge branch 'master' into fix/2159

commit b97f6b3
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Oct 8 16:35:16 2020 +0300

    Update CheckboxField props

commit 8c4545f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Oct 8 16:27:17 2020 +0300

    - client: 2159 Fix general settings link to filters

client/src/__locales/en.json

@@ -115,7 +115,7 @@
     "average_processing_time": "Average processing time",
     "average_processing_time_hint": "Average time in milliseconds on processing a DNS request",
     "block_domain_use_filters_and_hosts": "Block domains using filters and hosts files",
-    "filters_block_toggle_hint": "You can setup blocking rules in the <a href='#filters'>Filters</a> settings.",
+    "filters_block_toggle_hint": "You can setup blocking rules in the <a>Filters</a> settings.",
     "use_adguard_browsing_sec": "Use AdGuard browsing security web service",
     "use_adguard_browsing_sec_hint": "AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.",
     "use_adguard_parental": "Use AdGuard parental control web service",

client/src/components/Settings/FiltersConfig/Form.js

@@ -5,7 +5,11 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { CheckboxField, toNumber } from '../../../helpers/form';
-import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
+import {
+    FILTERS_INTERVALS_HOURS,
+    FILTERS_LINK,
+    FORM_NAME,
+} from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
     if (interval === 0) {
@@ -40,6 +44,10 @@ const Form = (props) => {
         handleSubmit, handleChange, processing, t,
     } = props;
 
+    const components = {
+        a: <a href={FILTERS_LINK} rel="noopener noreferrer" />,
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="row">
@@ -51,7 +59,9 @@ const Form = (props) => {
                             modifier="checkbox--settings"
                             component={CheckboxField}
                             placeholder={t('block_domain_use_filters_and_hosts')}
-                            subtitle={t('filters_block_toggle_hint')}
+                            subtitle={<Trans components={components}>
+                                filters_block_toggle_hint
+                            </Trans>}
                             onChange={handleChange}
                             disabled={processing}
                         />

client/src/helpers/constants.js

@@ -53,6 +53,7 @@ export const REPOSITORY = {
 export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
 export const PORT_53_FAQ_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/FAQ#bindinuse';
 export const UPSTREAM_CONFIGURATION_WIKI_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#upstreams';
+export const FILTERS_LINK = '#filters';
 
 export const GETTING_STARTED_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update';
 

client/src/helpers/form.js

@@ -184,7 +184,7 @@ export const CheckboxField = ({
 CheckboxField.propTypes = {
     input: PropTypes.object.isRequired,
     placeholder: PropTypes.string,
-    subtitle: PropTypes.string,
+    subtitle: PropTypes.node,
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
     modifier: PropTypes.string,