Fix #1810

- client: Fix query log bugs Squashed commit of the following: commit 188bbad32a2af8a1867fc3ef91d81cda6aa94853 Merge: 15db9e9c ec6e0bea Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 22:43:11 2020 +0300 Merge branch 'master' into fix/1810 commit 15db9e9c1d Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 19:01:10 2020 +0300 Open tooltip on hover, show scroll on overflow y commit 19c013378d Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 17:17:46 2020 +0300 Replace tooltip component commit 7e7103dc08 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 14:21:54 2020 +0300 -client: Fix query log bugs
2020-06-18 22:53:02 +03:00 · 2020-06-18 22:53:02 +03:00 · aa7b3c33d5
parent ec6e0bea07
commit aa7b3c33d5
13 changed files with 122 additions and 249 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -4498,6 +4498,15 @@
        "sha.js": "^2.4.8"
      }
    },
+    "create-react-context": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "cross-env": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@ -4800,7 +4809,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
      "requires": {
        "is-arguments": "^1.0.4",
        "is-date-object": "^1.0.1",
@ -4836,7 +4844,6 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
      "requires": {
        "object-keys": "^1.0.12"
      }
@ -5264,7 +5271,6 @@
      "version": "1.17.5",
      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
      "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
-      "dev": true,
      "requires": {
        "es-to-primitive": "^1.2.1",
        "function-bind": "^1.1.1",
@ -5283,7 +5289,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
      "requires": {
        "is-callable": "^1.1.4",
        "is-date-object": "^1.0.1",
@ -6706,8 +6711,7 @@
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
    },
    "functional-red-black-tree": {
      "version": "1.0.1",
@ -6989,6 +6993,11 @@
      "dev": true,
      "optional": true
    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
    "handle-thing": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -7021,7 +7030,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
      "requires": {
        "function-bind": "^1.1.1"
      }
@ -7034,8 +7042,7 @@
    "has-symbols": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-      "dev": true
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
    },
    "has-value": {
      "version": "1.0.0",
@ -7759,8 +7766,7 @@
    "is-arguments": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
-      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
-      "dev": true
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
    },
    "is-arrayish": {
      "version": "0.2.1",
@ -7785,8 +7791,7 @@
    "is-callable": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
-      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
-      "dev": true
+      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
    },
    "is-ci": {
      "version": "2.0.0",
@ -7820,8 +7825,7 @@
    "is-date-object": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
-      "dev": true
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
    },
    "is-decimal": {
      "version": "1.0.4",
@ -7974,7 +7978,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
      "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
-      "dev": true,
      "requires": {
        "has": "^1.0.3"
      }
@ -8000,7 +8003,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-      "dev": true,
      "requires": {
        "has-symbols": "^1.0.1"
      }
@ -11117,14 +11119,12 @@
    "object-inspect": {
      "version": "1.7.0",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
-      "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==",
-      "dev": true
+      "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
    },
    "object-is": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.5"
@ -11133,8 +11133,7 @@
    "object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
    },
    "object-visit": {
      "version": "1.0.1",
@ -11149,7 +11148,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.2",
        "function-bind": "^1.1.1",
@ -11630,6 +11628,11 @@
        "find-up": "^2.1.0"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
    "portfinder": {
      "version": "1.0.26",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@ -12300,6 +12303,29 @@
        "raf": "^3.1.0"
      }
    },
+    "react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "^0.3.0",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper-tooltip": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz",
+      "integrity": "sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "react-popper": "^1.3.7"
+      }
+    },
    "react-redux": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
@ -12427,22 +12453,6 @@
        "react-is": "^16.8.1"
      }
    },
-    "react-tooltip": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.6.tgz",
-      "integrity": "sha512-KX/zCsPFCI8RuulzBX86U+Ur7FvgGNRBdb7dUu0ndo8Urinn48nANq9wfq4ABlehweQjPzLl7XdNAtLKza+I3w==",
-      "requires": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
-        }
-      }
-    },
    "react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -12632,7 +12642,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.0-next.1"
@ -13892,7 +13901,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.5"
@ -13902,7 +13910,6 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz",
      "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.5",
@ -13913,7 +13920,6 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz",
      "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.5",
@ -13924,7 +13930,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.3",
        "es-abstract": "^1.17.5"
@ -14924,6 +14929,11 @@
        "mime-types": "~2.1.24"
      }
    },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -27,13 +27,13 @@
        "react-dom": "^16.13.1",
        "react-i18next": "^11.4.0",
        "react-modal": "^3.11.2",
+        "react-popper-tooltip": "^2.11.1",
        "react-redux": "^7.2.0",
        "react-redux-loading-bar": "^4.6.0",
        "react-router-dom": "^5.2.0",
        "react-router-hash-link": "^1.2.2",
        "react-select": "^3.1.0",
        "react-table": "^6.11.4",
-        "react-tooltip": "^4.2.6",
        "react-transition-group": "^4.4.1",
        "redux": "^4.0.5",
        "redux-actions": "^2.6.5",
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
@ -60,13 +60,13 @@ const clientCell = (t, toggleClientStatus, processing, disallowedClients) => fun
    const ipMatchListStatus = getIpMatchListStatus(value, disallowedClients);

    return (
-        <Fragment>
+        <>
            <div className="logs__row logs__row--overflow logs__row--column">
                {formatClientCell(row, t)}
            </div>
            {ipMatchListStatus !== IP_MATCH_LIST_STATUS.CIDR
            && renderBlockingButton(ipMatchListStatus, value, toggleClientStatus, processing)}
-        </Fragment>
+        </>
    );
 };

--- a/client/src/components/Logs/Tooltip/ReactTooltip.css
+++ b/client/src/components/Logs/Tooltip/ReactTooltip.css
@ -1,29 +1,22 @@
-.custom-tooltip {
+.tooltip__container {
    padding: 1rem 1.5rem 1.25rem 1.5rem;
    font-size: 16px !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px !important;
    pointer-events: auto !important;
-}
-
-/*crutch, may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
-@media (hover: none) {
-    .custom-tooltip {
-        position: absolute !important;
-        top: 4rem !important;
-    }
+    background-color: var(--white);
+    z-index: 102;
+    overflow-y: scroll;
+    max-height: 100%;
 }

 .white-space--nowrap {
    white-space: nowrap !important;
 }

-.white-space--normal {
+.overflow-break {
    white-space: normal !important;
-}
-
-.word-break--break-all {
-    word-break: break-all !important;
+    overflow-wrap: break-word;
 }

 .grid {
@ -74,10 +67,6 @@
    .grid .key-colon, .grid .title--border {
        font-weight: bold;
    }
-
-    .custom-tooltip {
-        overflow-y: scroll;
-    }
 }

 .grid .key-colon:nth-child(odd)::after {
@ -92,14 +81,6 @@
    grid-auto-flow: column;
 }

-.custom-tooltip.show {
-    opacity: 1 !important;
-}
-
-.custom-tooltip:hover {
-    opacity: 1 !important;
-}
-
 .grid-content > * {
    justify-content: space-between !important;
    width: 100% !important;
--- a/client/src/components/Logs/Cells/getClientCell.js
+++ b/client/src/components/Logs/Cells/getClientCell.js
@ -75,12 +75,11 @@ const getClientCell = ({
                className: hintClass,
                columnClass: 'grid grid--limited',
                tooltipClass: 'px-5 pb-5 pt-4 mw-75',
-                dataTip: true,
                xlinkHref: 'question',
                contentItemClass: 'text-truncate key-colon',
                title: 'client_details',
                content: processedData,
-                place: 'bottom',
+                placement: 'bottom',
            })}
            <div
                className={nameClass}>
--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/client/src/components/Logs/Cells/getDomainCell.js
@ -37,11 +37,11 @@ const getDomainCell = (props) => {
    const dnssecHint = getHintElement({
        className: lockIconClass,
        tooltipClass: 'py-4 px-5 pb-45',
-        dataTip: answer_dnssec,
+        canShowTooltip: answer_dnssec,
        xlinkHref: 'lock',
        columnClass: 'w-100',
        content: 'validated_with_dnssec',
-        place: 'bottom',
+        placement: 'bottom',
    });

    const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
@ -64,7 +64,7 @@ const getDomainCell = (props) => {
    const renderGrid = (content, idx) => {
        const preparedContent = typeof content === 'string' ? t(content) : content;
        const className = classNames('text-truncate key-colon o-hidden', {
-            'word-break--break-all white-space--normal': preparedContent.length > 100,
+            'overflow-break': preparedContent.length > 100,
        });
        return <div key={idx} className={className}>{preparedContent}</div>;
    };
@ -81,7 +81,6 @@ const getDomainCell = (props) => {
    const trackerHint = getHintElement({
        className: privacyIconClass,
        tooltipClass: 'pt-4 pb-5 px-5 mw-75',
-        dataTip: true,
        xlinkHref: 'privacy',
        contentItemClass: 'key-colon',
        renderContent,
--- a/client/src/components/Logs/Cells/getHintElement.js
+++ b/client/src/components/Logs/Cells/getHintElement.js
@ -1,55 +1,50 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import CustomTooltip from '../Tooltip/CustomTooltip';
+import TooltipTrigger from 'react-popper-tooltip';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
+import './Tooltip.css';
+import 'react-popper-tooltip/dist/styles.css';
+import { HIDE_TOOLTIP_DELAY } from '../../../helpers/constants';

 const getHintElement = ({
    className,
    contentItemClass,
    columnClass,
-    dataTip,
+    canShowTooltip = true,
    xlinkHref,
-    content,
    title,
-    place,
+    placement,
    tooltipClass,
-    trigger,
-    overridePosition,
-    scrollHide,
-    renderContent,
-}) => {
-    const id = 'id';
-
-    const [isHovered, hover] = useState(false);
-
-    const openTooltip = () => hover(true);
-    const closeTooltip = () => hover(false);
-
-    return <div onMouseEnter={openTooltip}
-                onMouseLeave={closeTooltip}>
-        <div data-tip={dataTip}
-             data-for={dataTip ? id : undefined}
-             data-event={trigger}
+    content,
+    renderContent = React.Children.map(
+        content,
+        (item, idx) => <div key={idx} className={contentItemClass}>
+            <Trans>{item || '—'}</Trans>
+        </div>,
+    ),
+}) => <TooltipTrigger placement={placement} trigger="hover" delayHide={HIDE_TOOLTIP_DELAY} tooltip={
+        ({
+            tooltipRef,
+            getTooltipProps,
+        }) => <div {...getTooltipProps({
+            ref: tooltipRef,
+            className: classNames('tooltip__container', tooltipClass, { 'd-none': !canShowTooltip }),
+        })}
        >
+            {title && <div className="pb-4 h-25 grid-content font-weight-bold">
+                <Trans>{title}</Trans>
+            </div>}
+            <div className={classNames(columnClass)}>{renderContent}</div>
+        </div>
+    }>{({
+        getTriggerProps, triggerRef,
+    }) => <span {...getTriggerProps({ ref: triggerRef })}>
            {xlinkHref && <svg className={className}>
                <use xlinkHref={`#${xlinkHref}`} />
            </svg>}
-        </div>
-        {isHovered && dataTip
-        && <CustomTooltip
-            className={tooltipClass}
-            id={id}
-            columnClass={columnClass}
-            contentItemClass={contentItemClass}
-            title={title}
-            place={place}
-            content={content}
-            trigger={trigger}
-            overridePosition={overridePosition}
-            scrollHide={scrollHide}
-            renderContent={renderContent}
-        />}
-    </div>;
-};
+  </span>}
+    </TooltipTrigger>;

 getHintElement.propTypes = {
    className: PropTypes.string,
@ -57,15 +52,9 @@ getHintElement.propTypes = {
    columnClass: PropTypes.string,
    tooltipClass: PropTypes.string,
    title: PropTypes.string,
-    place: PropTypes.string,
-    dataTip: PropTypes.string,
+    placement: PropTypes.string,
+    canShowTooltip: PropTypes.string,
    xlinkHref: PropTypes.string,
-    overridePosition: PropTypes.func,
-    scrollHide: PropTypes.bool,
-    trigger: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-    ]),
    content: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.array,
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/client/src/components/Logs/Cells/getResponseCell.js
@ -48,7 +48,7 @@ const getResponseCell = (row, filtering, t, isDetailed) => {

        return <div>{responseArr.map((response) => {
            const className = classNames('white-space--nowrap', {
-                'white-space--normal': response.length > 100,
+                'overflow-break': response.length > 100,
            });

            return <div key={response} className={className}>{`${response}\n`}</div>;
@ -71,6 +71,13 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
            rule_label: rule,
            response_code: status,
        },
+        [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
+            domain,
+            encryption_status: boldStatusLabel,
+            filter,
+            rule_label: rule,
+            response_code: status,
+        },
        [FILTERED_STATUS.FILTERED_SAFE_SEARCH]: {
            domain,
            encryption_status: boldStatusLabel,
@ -102,11 +109,10 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
                columnClass: 'grid grid--limited',
                tooltipClass: 'px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details',
                contentItemClass: 'text-truncate key-colon o-hidden',
-                dataTip: true,
                xlinkHref: 'question',
                title: 'response_details',
                content: fields,
-                place: 'bottom',
+                placement: 'bottom',
            })}
            <div className="text-truncate">
                <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@ -557,20 +557,3 @@
 .loading__text {
    transform: translateY(3rem);
 }
-
-/*reset position to make absolute position of tooltip on tablets, may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
-@media (hover: none) {
-    .logs__action {
-        top: 1rem !important;
-        right: 1rem;
-    }
-
-    .logs__table .rt-td,
-    .clients__table .rt-td {
-        position: initial;
-    }
-
-    .logs__row {
-        position: initial;
-    }
-}
--- a/client/src/components/Logs/Tooltip/CustomTooltip.js
+++ b/client/src/components/Logs/Tooltip/CustomTooltip.js
@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
-import classNames from 'classnames';
-import Tooltip from './index';
-
-const CustomTooltip = ({
-    id, title, className, contentItemClass, place = 'right', columnClass = '', content, trigger, overridePosition, scrollHide,
-    renderContent = React.Children.map(
-        content,
-        (item, idx) => <div key={idx} className={contentItemClass}>
-            <Trans>{item || '—'}</Trans>
-        </div>,
-    ),
-}) => <Tooltip id={id} className={className} place={place} trigger={trigger}
-                    overridePosition={overridePosition}
-                    scrollHide={scrollHide}
-    >
-        {title
-        && <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
-        <div className={classNames(columnClass)}>{renderContent}</div>
-    </Tooltip>;
-
-CustomTooltip.propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    place: PropTypes.string,
-    className: PropTypes.string,
-    columnClass: PropTypes.string,
-    contentItemClass: PropTypes.string,
-    overridePosition: PropTypes.func,
-    scrollHide: PropTypes.bool,
-    content: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-    ]),
-    trigger: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-    ]),
-    renderContent: PropTypes.arrayOf(PropTypes.element),
-};
-
-export default CustomTooltip;
--- a/client/src/components/Logs/Tooltip/index.js
+++ b/client/src/components/Logs/Tooltip/index.js
@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-import classNames from 'classnames';
-import './ReactTooltip.css';
-import { touchMediaQuery } from '../../../helpers/constants';
-
-const Tooltip = ({
-    id, children, className = '', place = 'right', trigger = 'hover', overridePosition, scrollHide = true,
-}) => {
-    const tooltipClassName = classNames('custom-tooltip', className);
-
-    return (
-        <ReactTooltip
-            id={id}
-            aria-haspopup="true"
-            effect="solid"
-            place={place}
-            className={tooltipClassName}
-            backgroundColor="#fff"
-            arrowColor="transparent"
-            textColor="#4d4d4d"
-            delayHide={300}
-            scrollHide={window.matchMedia(touchMediaQuery).matches ? false : scrollHide}
-            trigger={trigger}
-            overridePosition={overridePosition}
-            globalEventOff="click touchend"
-            clickable
-        >
-            {children}
-        </ReactTooltip>
-    );
-};
-
-Tooltip.propTypes = {
-    id: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    place: PropTypes.string,
-    overridePosition: PropTypes.func,
-    scrollHide: PropTypes.bool,
-    trigger: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-    ]),
-};
-
-export default Tooltip;
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@ -57,6 +57,7 @@ export const DEBOUNCE_FILTER_TIMEOUT = 500;
 export const CHECK_TIMEOUT = 1000;
 export const SUCCESS_TOAST_TIMEOUT = 5000;
 export const FAILURE_TOAST_TIMEOUT = 30000;
+export const HIDE_TOOLTIP_DELAY = 300;

 export const UNSAFE_PORTS = [
    1,
@ -503,5 +504,3 @@ export const FORM_NAME = {
 };

 export const smallScreenSize = 767;
-
-export const touchMediaQuery = '(hover: none)';
--- a/client/src/helpers/formatClientCell.js
+++ b/client/src/helpers/formatClientCell.js
@ -25,19 +25,18 @@ const getFormattedWhois = (whois, t) => {
 };

 export const formatClientCell = (row, t, isDetailed = false) => {
-    const { info, client } = row.original;
+    const { value, original: { info } } = row;
    let whoisContainer = '';
-    let nameContainer = client;
+    let nameContainer = value;

    if (info) {
        const { name, whois_info } = info;

        if (name) {
-            nameContainer = isDetailed ? <small title={client}>{client}</small>
-                : <div className="logs__text logs__text--nowrap"
-                       title={`${name} (${client})`}>
-                    {name}
-                    <small>{`(${client})`}</small>
+            nameContainer = isDetailed
+                ? <small title={value}>{value}</small>
+                : <div className="logs__text logs__text--nowrap" title={`${name} (${value})`}>
+                    {name}<small>{`(${value})`}</small>
                </div>;
        }

@ -51,7 +50,7 @@ export const formatClientCell = (row, t, isDetailed = false) => {
    }

    return (
-        <div className="logs__text" title={client}>
+        <div className="logs__text" title={value}>
            <>
                {nameContainer}
                {whoisContainer}