Merge: + client: handle client block and unblock from the top clients table

Closes #896

Squashed commit of the following:

commit 776de2ae0a62823b8968cff79a9fa7ba350d7f1c
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Thu Jan 30 11:13:41 2020 +0300

    - client: fix normalizeTextarea and blocking button

commit 399e6bc3893093632b09247eaf6493521a668c84
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Jan 29 17:19:50 2020 +0300

    + client: handle client block and unblock from the top clients table

client/src/components/Dashboard/Clients.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { Trans, withNamespaces } from 'react-i18next';
@@ -28,17 +28,58 @@ const countCell = dnsQueries =>
         return <Cell value={value} percent={percent} color={percentColor} />;
     };
 
-const clientCell = t =>
+const renderBlockingButton = (blocked, ip, handleClick, processing) => {
+    let buttonProps = {
+        className: 'btn-outline-danger',
+        text: 'block_btn',
+        type: 'block',
+    };
+
+    if (blocked) {
+        buttonProps = {
+            className: 'btn-outline-secondary',
+            text: 'unblock_btn',
+            type: 'unblock',
+        };
+    }
+
+    return (
+        <div className="table__action">
+            <button
+                type="button"
+                className={`btn btn-sm ${buttonProps.className}`}
+                onClick={() => handleClick(buttonProps.type, ip)}
+                disabled={processing}
+            >
+                <Trans>{buttonProps.text}</Trans>
+            </button>
+        </div>
+    );
+};
+
+const clientCell = (t, toggleClientStatus, processing) =>
     function cell(row) {
+        const { original, value } = row;
+        const { blocked } = original;
+
         return (
-            <div className="logs__row logs__row--overflow logs__row--column">
-                {formatClientCell(row, t)}
-            </div>
+            <Fragment>
+                <div className="logs__row logs__row--overflow logs__row--column">
+                    {formatClientCell(row, t)}
+                </div>
+                {renderBlockingButton(blocked, value, toggleClientStatus, processing)}
+            </Fragment>
         );
     };
 
 const Clients = ({
-    t, refreshButton, topClients, subtitle, dnsQueries,
+    t,
+    refreshButton,
+    topClients,
+    subtitle,
+    dnsQueries,
+    toggleClientStatus,
+    processingAccessSet,
 }) => (
     <Card
         title={t('top_clients')}
@@ -47,10 +88,13 @@ const Clients = ({
         refresh={refreshButton}
     >
         <ReactTable
-            data={topClients.map(({ name: ip, count, info }) => ({
+            data={topClients.map(({
+                name: ip, count, info, blocked,
+            }) => ({
                 ip,
                 count,
                 info,
+                blocked,
             }))}
             columns={[
                 {
@@ -58,7 +102,7 @@ const Clients = ({
                     accessor: 'ip',
                     sortMethod: (a, b) =>
                         parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
-                    Cell: clientCell(t),
+                    Cell: clientCell(t, toggleClientStatus, processingAccessSet),
                 },
                 {
                     Header: <Trans>requests_count</Trans>,
@@ -72,7 +116,24 @@ const Clients = ({
             noDataText={t('no_clients_found')}
             minRows={6}
             defaultPageSize={100}
-            className="-striped -highlight card-table-overflow"
+            className="-highlight card-table-overflow clients__table"
+            getTrProps={(_state, rowInfo) => {
+                if (!rowInfo) {
+                    return {};
+                }
+
+                const { blocked } = rowInfo.original;
+
+                if (blocked) {
+                    return {
+                        className: 'red',
+                    };
+                }
+
+                return {
+                    className: '',
+                };
+            }}
         />
     </Card>
 );
@@ -85,6 +146,8 @@ Clients.propTypes = {
     autoClients: PropTypes.array.isRequired,
     subtitle: PropTypes.string.isRequired,
     t: PropTypes.func.isRequired,
+    toggleClientStatus: PropTypes.func.isRequired,
+    processingAccessSet: PropTypes.bool.isRequired,
 };
 
 export default withNamespaces()(Clients);