+ upstream: Allow entering comments to the Upstreams box

Close #2083

Squashed commit of the following:

commit 113ad3c4ae2ca184b3945dcaa357b57303ee5fd6
Merge: 4ca1f005 bf23aa4d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 14:41:30 2020 +0300

    Merge branch 'master' into feature/2083

commit 4ca1f0056708eb23bb751587a0ec284508f35edf
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 13:14:31 2020 +0300

    Simplify filterOutComments, use assert in tests

commit bba03568aa979300e0534a2bd2f03086e25b3f87
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 12:05:00 2020 +0300

    Add ValidateUpstreams test cases

commit 181de508cf266e3a47058f2b7e1b4b4accbab827
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 11:47:03 2020 +0300

    Refactor testUpstream

commit 19c189cf7b64f4d252428dec5a608595c8e4cbc7
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 10:38:37 2020 +0300

    Move functions to utils

commit 003937e90e0ff02e696d45c21045a27a49cd0202
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 19:00:49 2020 +0300

    Review changes

commit b26bf64d8cef0266f33bce51c5bad324c74bb6da
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 17:58:01 2020 +0300

    + upstream: Filter out the upstream comments

commit 920975d2ba14fade07282cdb5c72a699c8083463
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 17:51:00 2020 +0300

    Trim upstreams, extract comment token

commit a9958eb305ed9af10de68ef3bffe63f216805efe
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 10:34:11 2020 +0300

    Fix markup styles

commit 6efa41d944c7b09454a4011d2c9ea52b5ce91bbf
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 17:59:57 2020 +0300

    Fix upstream form positioning

commit 6eb12158d0bca49d4b41eb65a3ebed44eafbe486
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 17:16:49 2020 +0300

    Update example_upstream_comment locale

commit aa9317b0243f5d30f0fcb9cbfcdf502547a8e954
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 13:28:30 2020 +0300

    Highlight comments in custom rules form, extract highlight logic

commit dc55245d3db9edbde60fda0a0e50e1e045e71403
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 17 22:48:29 2020 +0300

    + client: Allow entering comments to the Upstreams box

client/src/helpers/constants.js

@@ -568,3 +568,6 @@ export const CACHE_CONFIG_FIELDS = {
     cache_ttl_min: 'cache_ttl_min',
     cache_ttl_max: 'cache_ttl_max',
 };
+
+export const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
+export const COMMENT_LINE_DEFAULT_TOKEN = '#';

client/src/helpers/form.js

@@ -7,7 +7,7 @@ import { R_UNIX_ABSOLUTE_PATH, R_WIN_ABSOLUTE_PATH } from './constants';
 
 export const renderField = (props, elementType) => {
     const {
-        input, id, className, placeholder, type, disabled, normalizeOnBlur,
+        input, id, className, placeholder, type, disabled, normalizeOnBlur, onScroll,
         autoComplete, meta: { touched, error }, min, max, step,
     } = props;
 
@@ -25,6 +25,7 @@ export const renderField = (props, elementType) => {
         max,
         step,
         onBlur,
+        onScroll,
     });
 
     return (
@@ -48,6 +49,7 @@ renderField.propTypes = {
     min: PropTypes.number,
     max: PropTypes.number,
     step: PropTypes.number,
+    onScroll: PropTypes.func,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
         error: PropTypes.string,

client/src/helpers/helpers.js

@@ -16,6 +16,7 @@ import { getTrackerData } from './trackers/trackers';
 import {
     ADDRESS_TYPES,
     CHECK_TIMEOUT,
+    COMMENT_LINE_DEFAULT_TOKEN,
     CUSTOM_FILTERING_RULES_ID,
     DEFAULT_DATE_FORMAT_OPTIONS,
     DEFAULT_LANGUAGE,
@@ -316,6 +317,12 @@ export const trimMultilineString = (text) => splitByNewLine(text)
 export const removeEmptyLines = (text) => splitByNewLine(text)
     .join('\n');
 
+/**
+ * @param {string} input
+ * @returns {string}
+ */
+export const trimLinesAndRemoveEmpty = (input) => input.split('\n').map((line) => line.trim()).filter(Boolean).join('\n');
+
 /**
  * Normalizes the topClients array
  *
@@ -930,3 +937,10 @@ export const getBlockingClientName = (clients, ip) => {
     }
     return ip;
 };
+
+/**
+ * @param {string[]} lines
+ * @returns {string[]}
+ */
+export const filterOutComments = (lines) => lines
+    .filter((line) => !line.startsWith(COMMENT_LINE_DEFAULT_TOKEN));

client/src/helpers/highlightTextareaComments.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import { COMMENT_LINE_DEFAULT_TOKEN } from './constants';
+
+const renderHighlightedLine = (line, idx, commentLineTokens = [COMMENT_LINE_DEFAULT_TOKEN]) => {
+    const isComment = commentLineTokens.some((token) => line.trim().startsWith(token));
+
+    const lineClassName = classnames({
+        'text-gray': isComment,
+        'text-transparent': !isComment,
+    });
+
+    return <div className={lineClassName} key={idx}>{line || '\n'}</div>;
+};
+export const getTextareaCommentsHighlight = (
+    ref, lines, className = '', commentLineTokens,
+) => {
+    const renderLine = (line, idx) => renderHighlightedLine(line, idx, commentLineTokens);
+
+    return <code className={classnames('text-output', className)} ref={ref}>{lines?.split('\n').map(renderLine)}</code>;
+};
+
+export const syncScroll = (e, ref) => {
+    // eslint-disable-next-line no-param-reassign
+    ref.current.scrollTop = e.target.scrollTop;
+};