From 1c9d3acaa8864bca3e17dc3a313630dbc9ebea60 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 24 Jul 2020 17:17:11 +0300
Subject: [PATCH] - client: fix whois wrap and vertical alignment

---
 .../components/Logs/Cells/getClientCell.js    | 22 +++++++++++++------
 client/src/components/Logs/Logs.css           |  4 ++--
 client/src/helpers/constants.js               |  2 +-
 client/src/helpers/formatClientCell.js        |  5 +++--
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Logs/Cells/getClientCell.js b/client/src/components/Logs/Cells/getClientCell.js
index 2891f9b8..6dbc9367 100644
--- a/client/src/components/Logs/Cells/getClientCell.js
+++ b/client/src/components/Logs/Cells/getClientCell.js
@@ -16,6 +16,7 @@ const getClientCell = ({
 
     const autoClient = autoClients.find((autoClient) => autoClient.name === client);
     const source = autoClient?.source;
+    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
 
     const id = nanoid();
 
@@ -33,7 +34,7 @@ const getClientCell = ({
     const isFiltered = checkFiltered(reason);
 
     const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
-        'mt-2': isDetailed && !name && !whois_info,
+        'mt-2': isDetailed && !name && !whoisAvailable,
         'white-space--nowrap': isDetailed,
     });
 
@@ -78,12 +79,19 @@ const getClientCell = ({
                 content: processedData,
                 placement: 'bottom',
             })}
-            <div
-                className={nameClass}>
-                <div data-tip={true} data-for={id}>{formatClientCell(row, isDetailed)}</div>
-                {isDetailed && name
-                && !whois_info && <div className="detailed-info d-none d-sm-block logs__text"
-                        title={name}>{name}</div>}
+            <div className={nameClass}>
+                <div data-tip={true} data-for={id}>
+                    {formatClientCell(row, isDetailed)}
+                </div>
+
+                {isDetailed && name && !whoisAvailable && (
+                    <div
+                        className="detailed-info d-none d-sm-block logs__text"
+                        title={name}
+                    >
+                        {name}
+                    </div>
+                )}
             </div>
             {renderBlockingButton(isFiltered, domain)}
         </div>
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 82d8a1c9..6623f626 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -58,8 +58,7 @@
     width: 100%;
 }
 
-.logs__text--wrap,
-.logs__text--whois {
+.logs__text--wrap {
     line-height: 1.4;
     white-space: normal;
 }
@@ -71,6 +70,7 @@
 
 .logs__text--whois {
     line-height: 1.2;
+    color: #9aa0ac;
 }
 
 .logs__row .tooltip-custom {
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index bc0f6050..8b84e558 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -296,7 +296,7 @@ export const DEFAULT_LOGS_FILTER = {
 
 export const DEFAULT_LANGUAGE = 'en';
 
-export const TABLE_DEFAULT_PAGE_SIZE = 50;
+export const TABLE_DEFAULT_PAGE_SIZE = 25;
 
 export const TABLE_FIRST_PAGE = 0;
 
diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js
index 989cc1d2..48b89665 100644
--- a/client/src/helpers/formatClientCell.js
+++ b/client/src/helpers/formatClientCell.js
@@ -31,10 +31,11 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
 
     if (info) {
         const { name, whois_info } = info;
+        const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
 
         if (name) {
             if (isLogs) {
-                nameContainer = !whois_info && isDetailed
+                nameContainer = !whoisAvailable && isDetailed
                     ? (
                         <small title={value}>{value}</small>
                     ) : (
@@ -54,7 +55,7 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
             }
         }
 
-        if (whois_info && isDetailed) {
+        if (whoisAvailable && isDetailed) {
             whoisContainer = (
                 <div className="logs__text logs__text--wrap logs__text--whois">
                     {getFormattedWhois(whois_info)}