From 0dab36a108f41034e84b2a1657cd0824ba634b43 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 24 Jul 2020 16:45:59 +0300
Subject: [PATCH 1/2] - client: revert table paginations

---
 .../src/components/Filters/Rewrites/Table.js  | 20 +++++--------------
 client/src/components/Filters/Table.js        | 19 +++++-------------
 client/src/components/Logs/Logs.css           |  8 ++++----
 .../Settings/Clients/AutoClients.js           | 20 +++++--------------
 .../Settings/Clients/ClientsTable.js          | 20 +++++--------------
 5 files changed, 24 insertions(+), 63 deletions(-)

diff --git a/client/src/components/Filters/Rewrites/Table.js b/client/src/components/Filters/Rewrites/Table.js
index bc197f73..5bc1f678 100644
--- a/client/src/components/Filters/Rewrites/Table.js
+++ b/client/src/components/Filters/Rewrites/Table.js
@@ -62,23 +62,13 @@ class Table extends Component {
                 showPagination
                 defaultPageSize={10}
                 minRows={5}
-                previousText={
-                    <svg className="icons icon--24 icon--gray">
-                        <use xlinkHref="#arrow-left" />
-                    </svg>}
-                nextText={
-                    <svg className="icons icon--24 icon--gray">
-                        <use xlinkHref="#arrow-right" />
-                    </svg>}
-                loadingText={t('loading_table_status')}
-                pageText=''
-                ofText=''
+                ofText="/"
+                previousText={t('previous_btn')}
+                nextText={t('next_btn')}
+                pageText={t('page_table_footer_text')}
                 rowsText={t('rows_table_footer_text')}
+                loadingText={t('loading_table_status')}
                 noDataText={t('rewrite_not_found')}
-                showPageSizeOptions={false}
-                showPageJump={false}
-                renderTotalPagesCount={() => false}
-                getPaginationProps={() => ({ className: 'custom-pagination' })}
             />
         );
     }
diff --git a/client/src/components/Filters/Table.js b/client/src/components/Filters/Table.js
index 0ae87097..ed97ac0d 100644
--- a/client/src/components/Filters/Table.js
+++ b/client/src/components/Filters/Table.js
@@ -128,24 +128,15 @@ class Table extends Component {
                 columns={this.columns}
                 showPagination
                 defaultPageSize={10}
-                showPageSizeOptions={false}
-                showPageJump={false}
-                renderTotalPagesCount={() => false}
                 loading={loading}
                 minRows={6}
-                pageText=''
-                ofText=''
+                ofText="/"
+                previousText={t('previous_btn')}
+                nextText={t('next_btn')}
+                pageText={t('page_table_footer_text')}
+                rowsText={t('rows_table_footer_text')}
                 loadingText={t('loading_table_status')}
                 noDataText={whitelist ? t('no_whitelist_added') : t('no_blocklist_added')}
-                getPaginationProps={() => ({ className: 'custom-pagination' })}
-                previousText={
-                    <svg className="icons icon--24 icon--gray w-100 h-100">
-                        <use xlinkHref="#arrow-left" />
-                    </svg>}
-                nextText={
-                    <svg className="icons icon--24 icon--gray w-100 h-100">
-                        <use xlinkHref="#arrow-right" />
-                    </svg>}
             />
         );
     }
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index ed7292e4..82d8a1c9 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -362,7 +362,7 @@
     display: flex !important;
 }
 
-.-pageInfo {
+.logs__table .-pageInfo {
     --side-size: 2rem;
     font-variant-numeric: tabular-nums !important;
     background-color: transparent !important;
@@ -376,18 +376,18 @@
     align-items: center;
 }
 
-.pagination-bottom {
+.logs__table .pagination-bottom {
     justify-content: center !important;
     display: flex !important;
 }
 
-.-center:before {
+.logs__table .-center:before {
     content: '...';
     transform: translateY(-0.25rem);
     margin: auto;
 }
 
-.-center:after {
+.logs__table .-center:after {
     content: '...';
     transform: translateY(-0.25rem);
     margin: auto;
diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js
index 072d7108..743e62f0 100644
--- a/client/src/components/Settings/Clients/AutoClients.js
+++ b/client/src/components/Settings/Clients/AutoClients.js
@@ -85,23 +85,13 @@ class AutoClients extends Component {
                     showPagination
                     defaultPageSize={10}
                     minRows={5}
-                    showPageSizeOptions={false}
-                    showPageJump={false}
-                    renderTotalPagesCount={() => false}
-                    previousText={
-                        <svg className="icons icon--24 icon--gray w-100 h-100">
-                            <use xlinkHref="#arrow-left" />
-                        </svg>}
-                    nextText={
-                        <svg className="icons icon--24 icon--gray w-100 h-100">
-                            <use xlinkHref="#arrow-right" />
-                        </svg>}
-                    loadingText={t('loading_table_status')}
-                    pageText=''
-                    ofText=''
+                    ofText="/"
+                    previousText={t('previous_btn')}
+                    nextText={t('next_btn')}
+                    pageText={t('page_table_footer_text')}
                     rowsText={t('rows_table_footer_text')}
+                    loadingText={t('loading_table_status')}
                     noDataText={t('clients_not_found')}
-                    getPaginationProps={() => ({ className: 'custom-pagination' })}
                 />
             </Card>
         );
diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js
index 76df4021..cb7f2914 100644
--- a/client/src/components/Settings/Clients/ClientsTable.js
+++ b/client/src/components/Settings/Clients/ClientsTable.js
@@ -297,23 +297,13 @@ class ClientsTable extends Component {
                         showPagination
                         defaultPageSize={10}
                         minRows={5}
-                        showPageSizeOptions={false}
-                        showPageJump={false}
-                        renderTotalPagesCount={() => false}
-                        previousText={
-                            <svg className="icons icon--24 icon--gray w-100 h-100">
-                                <use xlinkHref="#arrow-left" />
-                            </svg>}
-                        nextText={
-                            <svg className="icons icon--24 icon--gray w-100 h-100">
-                                <use xlinkHref="#arrow-right" />
-                            </svg>}
-                        loadingText={t('loading_table_status')}
-                        pageText=''
-                        ofText=''
+                        ofText="/"
+                        previousText={t('previous_btn')}
+                        nextText={t('next_btn')}
+                        pageText={t('page_table_footer_text')}
                         rowsText={t('rows_table_footer_text')}
+                        loadingText={t('loading_table_status')}
                         noDataText={t('clients_not_found')}
-                        getPaginationProps={() => ({ className: 'custom-pagination' })}
                     />
                     <button
                         type="button"

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 2/2] - 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)}