Merge: - client: show tooltips on tap for mobile devices

Closes #1922

* commit 'dd2c9d96e7f164e5295cf9ca7b68695dd7bc46c1':
  - client: show tooltips on tap for mobile devices

client/src/components/Dashboard/Counters.js

@@ -21,7 +21,7 @@ const Row = ({
             <Trans components={translationComponents}>{label}</Trans>
             <Tooltip content={tooltipTitle} placement="top"
                      className="tooltip-container tooltip-custom--narrow text-center">
-                <svg className="icons icon--20 icon--lightgray ml-1">
+                <svg className="icons icon--20 icon--lightgray ml-2">
                     <use xlinkHref="#question" />
                 </svg>
             </Tooltip>

client/src/components/Logs/index.js

@@ -10,7 +10,7 @@ import {
     BLOCK_ACTIONS,
     TABLE_DEFAULT_PAGE_SIZE,
     TABLE_FIRST_PAGE,
-    smallScreenSize,
+    SMALL_SCREEN_SIZE,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
@@ -76,7 +76,7 @@ const Logs = (props) => {
     const search = filter?.search || search_url_param;
     const response_status = filter?.response_status || response_status_url_param;
 
-    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < smallScreenSize);
+    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_SIZE);
     const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
     const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
     const [isModalOpened, setModalOpened] = useState(false);
@@ -114,7 +114,7 @@ const Logs = (props) => {
         },
     } = props;
 
-    const mediaQuery = window.matchMedia(`(max-width: ${smallScreenSize}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {

client/src/components/ui/Tooltip.css

@@ -1,5 +1,11 @@
+.tooltip-container {
+    border: 0;
+    padding: 0.7rem;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
 .tooltip-custom--narrow {
-    max-width: 13.75rem;
+    max-width: 14rem;
 }
 
 .tooltip-custom--wide {

client/src/components/ui/Tooltip.js

@@ -2,7 +2,12 @@ import React from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
 import propTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { HIDE_TOOLTIP_DELAY } from '../../helpers/constants';
+
+import {
+    HIDE_TOOLTIP_DELAY,
+    HIDE_TOOLTIP_CLICK_DELAY,
+    MEDIUM_SCREEN_SIZE,
+} from '../../helpers/constants';
 import 'react-popper-tooltip/dist/styles.css';
 import './Tooltip.css';
 
@@ -16,27 +21,42 @@ const Tooltip = ({
     delayHide = HIDE_TOOLTIP_DELAY,
 }) => {
     const { t } = useTranslation();
+    let triggerValue = trigger;
+    let delayValue = delayHide;
 
-    return <TooltipTrigger
+    if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) {
-        placement={placement}
+        triggerValue = 'click';
-        trigger={trigger}
+        delayValue = HIDE_TOOLTIP_CLICK_DELAY;
-        delayHide={delayHide}
+    }
-        tooltip={({
+
-            tooltipRef,
+    return (
-            getTooltipProps,
+        <TooltipTrigger
-        }) => <div {...getTooltipProps({
+            placement={placement}
-            ref: tooltipRef,
+            trigger={triggerValue}
-            className,
+            delayHide={delayValue}
-        })}>
+            tooltip={({ tooltipRef, getTooltipProps }) => (
-            {typeof content === 'string' ? t(content) : content}
+                <div
-        </div>
+                    {...getTooltipProps({
-        }>{({ getTriggerProps, triggerRef }) => <span
+                        ref: tooltipRef,
-        {...getTriggerProps({
+                        className,
-            ref: triggerRef,
+                    })}
-            className: triggerClass,
+                >
-        })}
+                    {typeof content === 'string' ? t(content) : content}
-    >{children}</span>}
+                </div>
-    </TooltipTrigger>;
+            )}
+        >
+            {({ getTriggerProps, triggerRef }) => (
+                <span
+                    {...getTriggerProps({
+                        ref: triggerRef,
+                        className: triggerClass,
+                    })}
+                >
+                    {children}
+                </span>
+            )}
+        </TooltipTrigger>
+    );
 };
 
 Tooltip.propTypes = {

client/src/helpers/constants.js

@@ -62,6 +62,7 @@ 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 HIDE_TOOLTIP_CLICK_DELAY = 100;
 export const MODAL_OPEN_TIMEOUT = 150;
 
 export const UNSAFE_PORTS = [
@@ -472,6 +473,7 @@ export const FORM_NAME = {
     CACHE: 'cache',
 };
 
-export const smallScreenSize = 767;
+export const SMALL_SCREEN_SIZE = 767;
+export const MEDIUM_SCREEN_SIZE = 1023;
 
 export const SECONDS_IN_HOUR = 60 * 60;