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)}