-client: Fix query log bugs

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

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 = () => setTooltipOpen(false);
-    const closeTooltip = () => hover(false);
 
-    return <div onMouseEnter={openTooltip}
+    const openTooltip = () => {
-                onMouseLeave={closeTooltip}>
+        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}

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,

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

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;
-}
+    /*may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
-
-/*crutch, may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
-@media (hover: none) {
-    .custom-tooltip {
     position: absolute !important;
     top: 4rem !important;
-    }
 }
 
 .white-space--nowrap {

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}
+            delayHide={30000}
-            scrollHide={window.matchMedia(touchMediaQuery).matches ? false : scrollHide}
+            scrollHide={scrollHide}
-            trigger={trigger}
             overridePosition={overridePosition}
             globalEventOff="click touchend"
             clickable

client/src/helpers/constants.js

@@ -503,5 +503,3 @@ export const FORM_NAME = {
 };
 
 export const smallScreenSize = 767;
-
-export const touchMediaQuery = '(hover: none)';

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>
+            nameContainer = isDetailed
-                : <div className="logs__text logs__text--nowrap"
+                ? <small title={value}>{value}</small>
-                       title={`${name} (${client})`}>
+                : <div className="logs__text logs__text--nowrap" title={`${name} (${value})`}>
-                    {name}
+                    {name}<small>{`(${value})`}</small>
-                    <small>{`(${client})`}</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}