diff --git a/client/src/components/Logs/Cells/getDomainCell.js b/client/src/components/Logs/Cells/getDomainCell.js
index 423211b5..d0a44cff 100644
--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/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
{preparedContent}
;
};
@@ -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,
diff --git a/client/src/components/Logs/Cells/getHintElement.js b/client/src/components/Logs/Cells/getHintElement.js
index ad38fe2d..dcb5fed1 100644
--- a/client/src/components/Logs/Cells/getHintElement.js
+++ b/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
-
+ {item || '—'}
+
,
+ ),
+}) =>
+ {title &&
+ {title}
+
}
+
{renderContent}
+
- {isHovered && dataTip
- &&
}
-
;
-};
+ }
+ ;
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,
diff --git a/client/src/components/Logs/Cells/getResponseCell.js b/client/src/components/Logs/Cells/getResponseCell.js
index f7fec2cf..cbfbb639 100644
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/client/src/components/Logs/Cells/getResponseCell.js
@@ -48,7 +48,7 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
return
{responseArr.map((response) => {
const className = classNames('white-space--nowrap', {
- 'white-space--normal': response.length > 100,
+ 'overflow-break': response.length > 100,
});
return
{`${response}\n`}
;
@@ -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',
})}
{statusLabel}
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 35bdd0b0..abdf9611 100644
--- a/client/src/components/Logs/Logs.css
+++ b/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;
- }
-}
diff --git a/client/src/components/Logs/Tooltip/CustomTooltip.js b/client/src/components/Logs/Tooltip/CustomTooltip.js
deleted file mode 100644
index 1a0cf64f..00000000
--- a/client/src/components/Logs/Tooltip/CustomTooltip.js
+++ /dev/null
@@ -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) =>
- {item || '—'}
-
,
- ),
-}) =>
- {title
- && {title}
}
- {renderContent}
- ;
-
-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;
diff --git a/client/src/components/Logs/Tooltip/index.js b/client/src/components/Logs/Tooltip/index.js
deleted file mode 100644
index 6844249a..00000000
--- a/client/src/components/Logs/Tooltip/index.js
+++ /dev/null
@@ -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 (
-
- {children}
-
- );
-};
-
-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;
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 4778b085..a58d7529 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -57,6 +57,7 @@ export const DEBOUNCE_FILTER_TIMEOUT = 500;
export const CHECK_TIMEOUT = 1000;
export const SUCCESS_TOAST_TIMEOUT = 5000;
export const FAILURE_TOAST_TIMEOUT = 30000;
+export const HIDE_TOOLTIP_DELAY = 300;
export const UNSAFE_PORTS = [
1,
@@ -503,5 +504,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 ?
{client}
- :
- {name}
-
{`(${client})`}
+ nameContainer = isDetailed
+ ?
{value}
+ :
+ {name}{`(${value})`}
;
}
@@ -51,7 +50,7 @@ export const formatClientCell = (row, t, isDetailed = false) => {
}
return (
-
+
<>
{nameContainer}
{whoisContainer}