From 3a5f9a7ad35aa7f0f0dc5eac5dfcb9b9a3276fc0 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Mon, 8 Jul 2019 17:36:32 +0300
Subject: [PATCH] + client: add link to the DNS filterting rules article

---
 client/src/__locales/en.json               |  2 +-
 client/src/components/Filters/UserRules.js | 40 +++++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index b032abfc..78f8e94f 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -139,7 +139,7 @@
     "example_comment": "! Here goes a comment",
     "example_comment_meaning": "just a comment",
     "example_comment_hash": "# Also a comment",
-    "example_regex_meaning": "block access to the domains matching the specified regular expression",
+    "example_regex_meaning": "block access to the domains matching the <0>specified regular expression</0>",
     "example_upstream_regular": "regular DNS (over UDP)",
     "example_upstream_dot": "encrypted <0>DNS-over-TLS<\/0>",
     "example_upstream_doh": "encrypted <0>DNS-over-HTTPS<\/0>",
diff --git a/client/src/components/Filters/UserRules.js b/client/src/components/Filters/UserRules.js
index 7a251f3a..39d39351 100644
--- a/client/src/components/Filters/UserRules.js
+++ b/client/src/components/Filters/UserRules.js
@@ -17,12 +17,13 @@ class UserRules extends Component {
     render() {
         const { t } = this.props;
         return (
-            <Card
-                title={ t('custom_filter_rules') }
-                subtitle={ t('custom_filter_rules_hint') }
-            >
+            <Card title={t('custom_filter_rules')} subtitle={t('custom_filter_rules_hint')}>
                 <form onSubmit={this.handleSubmit}>
-                    <textarea className="form-control form-control--textarea-large" value={this.props.userRules} onChange={this.handleChange} />
+                    <textarea
+                        className="form-control form-control--textarea-large"
+                        value={this.props.userRules}
+                        onChange={this.handleChange}
+                    />
                     <div className="card-actions">
                         <button
                             className="btn btn-success btn-standard"
@@ -33,27 +34,42 @@ class UserRules extends Component {
                         </button>
                     </div>
                 </form>
-                <hr/>
+                <hr />
                 <div className="list leading-loose">
                     <Trans>examples_title</Trans>:
                     <ol className="leading-loose">
                         <li>
-                            <code>||example.org^</code> - { t('example_meaning_filter_block') }
+                            <code>||example.org^</code> – {t('example_meaning_filter_block')}
                         </li>
                         <li>
-                            <code> @@||example.org^</code> - { t('example_meaning_filter_whitelist') }
+                            <code> @@||example.org^</code> – {t('example_meaning_filter_whitelist')}
                         </li>
                         <li>
-                            <code>127.0.0.1 example.org</code> - { t('example_meaning_host_block') }
+                            <code>127.0.0.1 example.org</code> – {t('example_meaning_host_block')}
                         </li>
                         <li>
-                            <code>{ t('example_comment') }</code> - { t('example_comment_meaning') }
+                            <code>{t('example_comment')}</code> – {t('example_comment_meaning')}
                         </li>
                         <li>
-                            <code>{ t('example_comment_hash') }</code> - { t('example_comment_meaning') }
+                            <code>{t('example_comment_hash')}</code> –&nbsp;
+                            {t('example_comment_meaning')}
                         </li>
                         <li>
-                            <code>/REGEX/</code> - { t('example_regex_meaning') }
+                            <code>/REGEX/</code> –&nbsp;
+                            <Trans
+                                components={[
+                                    <a
+                                        href="https://kb.adguard.com/general/dns-filtering-syntax"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        key="0"
+                                    >
+                                        link
+                                    </a>,
+                                ]}
+                            >
+                                example_regex_meaning
+                            </Trans>
                         </li>
                     </ol>
                 </div>