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

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;

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

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,

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,

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>

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;
-    }
-}

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;

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;