client: 2451 Support multiple matched rules in the UI

Close #2451

Squashed commit of the following:

commit f6d0a8fe4fa575dff67b2d2f4c9f6aaf6a6414d3
Merge: 3b13e529d 955b735c8
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Dec 25 14:53:16 2020 +0300

    Merge branch 'master' into feature/2451

commit 3b13e529da01823cbc674d81be065b68cd08bbd3
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Thu Dec 24 12:53:13 2020 +0300

    Update JSXElement in jsdocs

commit f0749cd0466ef69d964b1c2575dffacb33f71b31
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 13:23:48 2020 +0300

    minor

commit bd014b00e762a1895c132bc962c06f107c50fe17
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:49:29 2020 +0300

    Minor helper update

commit 260a66b7b78eb80596b88fec14f409838727e4bb
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:31:08 2020 +0300

    Rule locale update

commit c960cf9f658e52cb587676dceb97506880a9db94
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:27:50 2020 +0300

    Add styles for filters list

commit 6f3b2176fd52598cddb147ad7828adb95abf08f0
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Dec 18 18:34:17 2020 +0300

    client: 2451 Support multiple matched rules in the UI

client/src/helpers/helpers.js

@@ -7,6 +7,7 @@ import i18n from 'i18next';
 import uniqBy from 'lodash/uniqBy';
 import ipaddr from 'ipaddr.js';
 import queryString from 'query-string';
+import React from 'react';
 import { getTrackerData } from './trackers/trackers';
 
 import {
@@ -68,6 +69,7 @@ export const normalizeLogs = (logs) => logs.map((log) => {
         time,
         filterId,
         rule,
+        rules,
         service_name,
         original_answer,
         upstream,
@@ -80,6 +82,15 @@ export const normalizeLogs = (logs) => logs.map((log) => {
         return `${type}: ${value} (ttl=${ttl})`;
     }) : []);
 
+    let newRules = rules;
+    /* TODO 'filterId' and 'rule' are deprecated, will be removed in 0.106 */
+    if (rule !== undefined && filterId !== undefined && rules !== undefined && rules.length === 0) {
+        newRules = {
+            filter_list_id: filterId,
+            text: rule,
+        };
+    }
+
     return {
         time,
         domain,
@@ -88,8 +99,10 @@ export const normalizeLogs = (logs) => logs.map((log) => {
         reason,
         client,
         client_proto,
+        /* TODO 'filterId' and 'rule' are deprecated, will be removed in 0.106 */
         filterId,
         rule,
+        rules: newRules,
         status,
         service_name,
         originalAnswer: original_answer,
@@ -726,6 +739,75 @@ export const getFilterName = (
     return resolveFilterName(filter);
 };
 
+/**
+ * @param {array} rules
+ * @param {array} filters
+ * @param {array} whitelistFilters
+ * @returns {string[]}
+ */
+export const getFilterNames = (rules, filters, whitelistFilters) => rules.map(
+    ({ filter_list_id }) => getFilterName(filters, whitelistFilters, filter_list_id),
+);
+
+/**
+ * @param {array} rules
+ * @returns {string[]}
+ */
+export const getRuleNames = (rules) => rules.map(({ text }) => text);
+
+/**
+ * @param {array} rules
+ * @param {array} filters
+ * @param {array} whitelistFilters
+ * @returns {object}
+ */
+export const getFilterNameToRulesMap = (rules, filters, whitelistFilters) => rules.reduce(
+    (acc, { text, filter_list_id }) => {
+        const filterName = getFilterName(filters, whitelistFilters, filter_list_id);
+
+        acc[filterName] = (acc[filterName] || []).concat(text);
+        return acc;
+    }, {},
+);
+
+/**
+ * @param {array} rules
+ * @param {array} filters
+ * @param {array} whitelistFilters
+ * @param {object} classes
+ * @returns {JSXElement}
+ */
+export const getRulesToFilterList = (rules, filters, whitelistFilters, classes = {
+    list: 'filteringRules',
+    rule: 'filteringRules__rule font-monospace',
+    filter: 'filteringRules__filter',
+}) => {
+    const filterNameToRulesMap = getFilterNameToRulesMap(rules, filters, whitelistFilters);
+
+    return <dl className={classes.list}>
+        {Object.entries(filterNameToRulesMap).reduce(
+            (acc, [filterName, rulesArr]) => acc
+                .concat(rulesArr.map((rule, i) => <dd key={i} className={classes.rule}>{rule}</dd>))
+                .concat(<dt className={classes.filter} key={classes.filter}>{filterName}</dt>),
+            [],
+        )}
+</dl>;
+};
+
+/**
+* @param {array} rules
+* @param {array} filters
+* @param {array} whitelistFilters
+* @returns {string}
+*/
+export const getRulesAndFilterNames = (rules, filters, whitelistFilters) => {
+    const filterNameToRulesMap = getFilterNameToRulesMap(rules, filters, whitelistFilters);
+
+    return Object.entries(filterNameToRulesMap).map(
+        ([filterName, filterRules]) => filterRules.concat(filterName).join('\n'),
+    ).join('\n\n');
+};
+
 /**
  * @param ip {string}
  * @param gateway_ip {string}

client/src/helpers/renderFormattedClientCell.js

@@ -31,7 +31,7 @@ const getFormattedWhois = (whois) => {
  * @param {object} info.whois_info
  * @param {boolean} [isDetailed]
  * @param {boolean} [isLogs]
- * @returns {JSX.Element}
+ * @returns {JSXElement}
  */
 export const renderFormattedClientCell = (value, info, isDetailed = false, isLogs = false) => {
     let whoisContainer = null;