From 0fce61dfad31951c3d5a484a14383c58964b47f0 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 13 Oct 2023 16:38:13 +0300
Subject: [PATCH] fix dashboard clients table block/unblock button

---
 client/src/components/Dashboard/Clients.js    | 47 ++++++++++++++-----
 client/src/components/Dashboard/Dashboard.css | 12 +++--
 .../src/components/Logs/Cells/ClientCell.js   |  3 +-
 .../src/components/Logs/Cells/IconTooltip.css |  1 +
 client/src/components/Logs/Logs.css           |  4 ++
 .../src/helpers/renderFormattedClientCell.js  |  2 +-
 6 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js
index 76cf998a533..ac2434912c4 100644
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
 import { toggleClientBlock } from '../../actions/access';
 import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
 import { getStats } from '../../actions/stats';
+import IconTooltip from '../Logs/Cells/IconTooltip';
 
 const getClientsPercentColor = (percent) => {
     if (percent > 50) {
@@ -40,9 +41,7 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
     const processingSet = useSelector((state) => state.access.processingSet);
     const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
 
-    const buttonClass = classNames('button-action button-action--main', {
-        'button-action--unblock': disallowed,
-    });
+    const [isOptionsOpened, setOptionsOpened] = useState(false);
 
     const toggleClientStatus = async (ip, disallowed, disallowed_rule) => {
         let confirmMessage;
@@ -62,23 +61,49 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
         }
     };
 
-    const onClick = () => toggleClientStatus(ip, disallowed, disallowed_rule);
+    const onClick = () => {
+        toggleClientStatus(ip, disallowed, disallowed_rule);
+        setOptionsOpened(false);
+    };
 
     const text = disallowed ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
 
     const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
     const disabled = processingSet || lastRuleInAllowlist;
     return (
-        <div className="table__action pl-4">
+        <div className="table__action">
             <button
                 type="button"
-                className={buttonClass}
-                onClick={onClick}
-                disabled={disabled}
-                title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
+                className="btn btn-icon btn-sm px-0"
+                onClick={() => setOptionsOpened(true)}
             >
-                <Trans>{text}</Trans>
+                <svg className="icon24 icon--lightgray button-action__icon">
+                    <use xlinkHref="#bullets" />
+                </svg>
             </button>
+            {isOptionsOpened && (
+                <IconTooltip
+                    className="icon24"
+                    tooltipClass="button-action--arrow-option-container"
+                    xlinkHref="bullets"
+                    triggerClass="btn btn-icon btn-sm px-0 button-action__hidden-trigger"
+                    content={(
+                        <button
+                            className={classNames('button-action--arrow-option px-4 py-1', disallowed ? 'bg--green' : 'bg--danger')}
+                            onClick={onClick}
+                            disabled={disabled}
+                            title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
+                        >
+                            <Trans>{text}</Trans>
+                        </button>
+                    )}
+                    placement="bottom-end"
+                    trigger="click"
+                    onVisibilityChange={setOptionsOpened}
+                    defaultTooltipShown={true}
+                    delayHide={0}
+                />
+            )}
         </div>
     );
 };
diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css
index 765c9ed1322..67a69aec406 100644
--- a/client/src/components/Dashboard/Dashboard.css
+++ b/client/src/components/Dashboard/Dashboard.css
@@ -28,11 +28,13 @@
     border-bottom: 6px solid #585965;
 }
 
-@media (max-width: 1279.98px) {
-    .table__action {
-        position: absolute;
-        right: 0;
-    }
+.table__action {
+    position: relative;
+    margin-left: auto;
+}
+
+.table__action .btn-icon {
+    margin: 2px;
 }
 
 .page-title--dashboard {
diff --git a/client/src/components/Logs/Cells/ClientCell.js b/client/src/components/Logs/Cells/ClientCell.js
index 778a3f033c5..d0dd316850a 100644
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -26,7 +26,6 @@ const ClientCell = ({
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
-    const processingRules = useSelector((state) => state.filtering.processingRules);
     const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
     const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
     const [isOptionsOpened, setOptionsOpened] = useState(false);
@@ -197,7 +196,7 @@ const ClientCell = ({
                 </div>
                 {isDetailed && clientName && !whoisAvailable && (
                     <Link
-                        className="detailed-info d-none d-sm-block logs__text logs__text--link"
+                        className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
                         to={`logs?search="${encodeURIComponent(clientName)}"`}
                         title={clientName}
                     >
diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
index 0b55ee6a0fe..bbaf1604f69 100644
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -1,4 +1,5 @@
 .tooltip-custom__container {
+    min-width: 150px;
     padding: 1rem 1.5rem 1.25rem 1.5rem;
     font-size: 16px !important;
     box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index b9fc8cebf8a..4935192a3bd 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -80,6 +80,10 @@
     color: var(--gray-f3);
 }
 
+.logs__text--client {
+    padding-right: 32px;
+}
+
 .icon--selected {
     background-color: var(--gray-f3);
     border: solid 1px var(--gray-d8);
diff --git a/client/src/helpers/renderFormattedClientCell.js b/client/src/helpers/renderFormattedClientCell.js
index 3e610430b90..e70b6548ccb 100644
--- a/client/src/helpers/renderFormattedClientCell.js
+++ b/client/src/helpers/renderFormattedClientCell.js
@@ -43,7 +43,7 @@ export const renderFormattedClientCell = (value, info, isDetailed = false, isLog
         const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
 
         if (name) {
-            const nameValue = <div className="logs__text logs__text--link logs__text--nowrap" title={`${name} (${value})`}>
+            const nameValue = <div className="logs__text logs__text--link logs__text--nowrap logs__text--client" title={`${name} (${value})`}>
                 {name}&nbsp;<small>{`(${value})`}</small>
             </div>;