From 7e7103dc08cd7e062d6ec6ebd4aaec1ee044f3d2 Mon Sep 17 00:00:00 2001
From: ArtemBaskal <a.baskal@adguard.com>
Date: Thu, 18 Jun 2020 14:21:54 +0300
Subject: [PATCH] -client: Fix query log bugs

---
 client/src/components/Dashboard/Clients.js    |  6 ++---
 .../components/Logs/Cells/getHintElement.js   | 15 +++++++-----
 .../components/Logs/Cells/getResponseCell.js  |  7 ++++++
 client/src/components/Logs/Logs.css           | 24 +++----------------
 .../components/Logs/Tooltip/ReactTooltip.css  | 11 +++------
 client/src/components/Logs/Tooltip/index.js   |  8 +++----
 client/src/helpers/constants.js               |  2 --
 client/src/helpers/formatClientCell.js        | 15 ++++++------
 8 files changed, 35 insertions(+), 53 deletions(-)

diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js
index acb46a57..8cd30234 100644
--- 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/client/src/components/Logs/Cells/getHintElement.js b/client/src/components/Logs/Cells/getHintElement.js
index ad38fe2d..f1a2e151 100644
--- a/client/src/components/Logs/Cells/getHintElement.js
+++ b/client/src/components/Logs/Cells/getHintElement.js
@@ -19,13 +19,16 @@ const getHintElement = ({
 }) => {
     const id = 'id';
 
-    const [isHovered, hover] = useState(false);
+    const [isTooltipOpen, setTooltipOpen] = useState(false);
 
-    const openTooltip = () => hover(true);
-    const closeTooltip = () => hover(false);
+    const closeTooltip = () => setTooltipOpen(false);
 
-    return <div onMouseEnter={openTooltip}
-                onMouseLeave={closeTooltip}>
+    const openTooltip = () => {
+        window.document.addEventListener('click', closeTooltip);
+        setTooltipOpen(true);
+    };
+    // TODO: close previous tooltip on new tooltip open
+    return <div onMouseEnter={openTooltip}>
         <div data-tip={dataTip}
              data-for={dataTip ? id : undefined}
              data-event={trigger}
@@ -34,7 +37,7 @@ const getHintElement = ({
                 <use xlinkHref={`#${xlinkHref}`} />
             </svg>}
         </div>
-        {isHovered && dataTip
+        {isTooltipOpen && dataTip
         && <CustomTooltip
             className={tooltipClass}
             id={id}
diff --git a/client/src/components/Logs/Cells/getResponseCell.js b/client/src/components/Logs/Cells/getResponseCell.js
index f7fec2cf..6532c19f 100644
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/client/src/components/Logs/Cells/getResponseCell.js
@@ -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,
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 35bdd0b0..a8c17940 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -5,7 +5,6 @@
 }
 
 .logs__row {
-    position: relative;
     display: flex;
     min-height: 26px;
     overflow: hidden;
@@ -105,7 +104,7 @@
 
 .logs__action {
     position: absolute;
-    top: 0;
+    top: 1rem !important;
     right: 1rem;
 }
 
@@ -113,10 +112,10 @@
     top: 5px;
 }
 
-.logs__table .rt-td,
+/*.logs__table .rt-td,
 .clients__table .rt-td {
     position: relative;
-}
+}*/
 
 .logs__table .rt-thead, .logs__table .rt-tbody {
     min-width: 100% !important;
@@ -557,20 +556,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;
-    }
-}
diff --git a/client/src/components/Logs/Tooltip/ReactTooltip.css b/client/src/components/Logs/Tooltip/ReactTooltip.css
index bc8de6c5..38084d31 100644
--- a/client/src/components/Logs/Tooltip/ReactTooltip.css
+++ b/client/src/components/Logs/Tooltip/ReactTooltip.css
@@ -4,14 +4,9 @@
     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;
-    }
+    /*may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
+    position: absolute !important;
+    top: 4rem !important;
 }
 
 .white-space--nowrap {
diff --git a/client/src/components/Logs/Tooltip/index.js b/client/src/components/Logs/Tooltip/index.js
index 6844249a..6d967838 100644
--- a/client/src/components/Logs/Tooltip/index.js
+++ b/client/src/components/Logs/Tooltip/index.js
@@ -3,10 +3,9 @@ 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,
+    id, children, className = '', place = 'right', overridePosition, scrollHide = false,
 }) => {
     const tooltipClassName = classNames('custom-tooltip', className);
 
@@ -20,9 +19,8 @@ const Tooltip = ({
             backgroundColor="#fff"
             arrowColor="transparent"
             textColor="#4d4d4d"
-            delayHide={300}
-            scrollHide={window.matchMedia(touchMediaQuery).matches ? false : scrollHide}
-            trigger={trigger}
+            delayHide={30000}
+            scrollHide={scrollHide}
             overridePosition={overridePosition}
             globalEventOff="click touchend"
             clickable
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 4778b085..9f2fad40 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -503,5 +503,3 @@ export const FORM_NAME = {
 };
 
 export const smallScreenSize = 767;
-
-export const touchMediaQuery = '(hover: none)';
diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js
index 2c2d4b5a..22dbd26d 100644
--- 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}