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}