Fix #1810

- client: Fix query log bugs Squashed commit of the following: commit 188bbad Merge: 15db9e9 ec6e0be Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 22:43:11 2020 +0300 Merge branch 'master' into fix/1810 commit 15db9e9 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 19c0133 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 17:17:46 2020 +0300 Replace tooltip component commit 7e7103d Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 14:21:54 2020 +0300 -client: Fix query log bugs
AdguardTeam · Jun 18, 2020 · aa7b3c3 · aa7b3c3
1 parent ec6e0be
commit aa7b3c3
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 249 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git 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",

diff --git 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>
+        </>
     );
 };
 

diff --git a/.../components/Logs/Tooltip/ReactTooltip.css → client/src/components/Logs/Cells/Tooltip.css b/.../components/Logs/Tooltip/ReactTooltip.css → client/src/components/Logs/Cells/Tooltip.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;

diff --git 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}>