From d3f39b0aa168ddf89755e769a1477ae3c91ece3a Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 10 Jun 2022 12:41:20 +0300
Subject: [PATCH] Pull request: 4637 fix blocked services icons and actions
 highlight

Updates #4637

Squashed commit of the following:

commit d69887586d15582406fab642e576a46f8984107b
Merge: 65453371 e738508d
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Jun 10 12:07:29 2022 +0300

    Merge branch 'master' into 4637-table

commit 65453371fc7309e772a12fb9f522247e1392a64a
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Jun 9 18:43:44 2022 +0300

    client: fix blocked services icons and actions highlight
---
 client/src/components/Filters/Rewrites/Table.js          | 2 ++
 client/src/components/Filters/Table.js                   | 4 +++-
 client/src/components/Logs/Logs.css                      | 9 +++++++++
 client/src/components/Settings/Clients/ClientsTable.js   | 4 +++-
 .../src/components/Settings/Dhcp/StaticLeases/index.js   | 2 ++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Filters/Rewrites/Table.js b/client/src/components/Filters/Rewrites/Table.js
index 45638ec0..28009ca3 100644
--- a/client/src/components/Filters/Rewrites/Table.js
+++ b/client/src/components/Filters/Rewrites/Table.js
@@ -29,6 +29,8 @@ class Table extends Component {
             Header: this.props.t('actions_table_header'),
             accessor: 'actions',
             maxWidth: 100,
+            sortable: false,
+            resizable: false,
             Cell: (value) => (
                 <div className="logs__row logs__row--center">
                     <button
diff --git a/client/src/components/Filters/Table.js b/client/src/components/Filters/Table.js
index 4eee8e9b..3030c0e7 100644
--- a/client/src/components/Filters/Table.js
+++ b/client/src/components/Filters/Table.js
@@ -36,6 +36,7 @@ class Table extends Component {
             Cell: this.renderCheckbox,
             width: 90,
             className: 'text-center',
+            resizable: false,
         },
         {
             Header: <Trans>name_table_header</Trans>,
@@ -77,10 +78,11 @@ class Table extends Component {
         },
         {
             Header: <Trans>actions_table_header</Trans>,
-            accessor: 'url',
+            accessor: 'actions',
             className: 'text-center',
             width: 100,
             sortable: false,
+            resizable: false,
             Cell: (row) => {
                 const { value } = row;
                 const { t, toggleFilteringModal, handleDelete } = this.props;
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 25015461..b6410411 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -338,10 +338,19 @@
     text-overflow: ellipsis;
 }
 
+.logs__row--icons {
+    flex-wrap: wrap;
+}
+
 .logs__table .logs__row {
     border-bottom: 2px solid var(--gray-216);
 }
 
+.logs__tag {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 /* QUERY_STATUS_COLORS */
 .logs__row--blue {
     background-color: var(--blue);
diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js
index 065157bd..2f08eb61 100644
--- a/client/src/components/Settings/Clients/ClientsTable.js
+++ b/client/src/components/Settings/Clients/ClientsTable.js
@@ -193,7 +193,7 @@ class ClientsTable extends Component {
                     <div className="logs__row o-hidden">
                         <span className="logs__text">
                             {value.map((tag) => (
-                                <div key={tag} title={tag} className="small">
+                                <div key={tag} title={tag} className="logs__tag small">
                                     {tag}
                                 </div>
                             ))}
@@ -225,6 +225,8 @@ class ClientsTable extends Component {
             Header: this.props.t('actions_table_header'),
             accessor: 'actions',
             maxWidth: 100,
+            sortable: false,
+            resizable: false,
             Cell: (row) => {
                 const clientName = row.original.name;
                 const {
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/index.js b/client/src/components/Settings/Dhcp/StaticLeases/index.js
index bdd7cec5..a63f78cd 100644
--- a/client/src/components/Settings/Dhcp/StaticLeases/index.js
+++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js
@@ -70,6 +70,8 @@ const StaticLeases = ({
                         Header: <Trans>actions_table_header</Trans>,
                         accessor: 'actions',
                         maxWidth: 150,
+                        sortable: false,
+                        resizable: false,
                         // eslint-disable-next-line react/display-name
                         Cell: (row) => {
                             const { ip, mac, hostname } = row.original;