Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support

Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master

Squashed commit of the following:

commit daa288ae0d76178af24595cc807055902e6f09ab
Merge: 4c89cf720 1085d59a6
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Jun 10 17:22:20 2024 +0200

    merge

commit 4c89cf7209
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Jun 6 13:27:18 2024 +0300

    remove install from initial state

commit b943f2011f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 23:10:55 2024 +0200

    frontend production build fix

commit cd1be2d66d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 20:23:14 2024 +0200

    production build quickfix

commit 7b8ac01fc2
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Wed Jun 5 19:57:31 2024 +0300

    all: upd node docker

commit 02afed66d5
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:23:12 2024 +0200

    changelog fixes

commit 9c0f736f0c
Merge: 62c4fbf1e e04775c4f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:18:29 2024 +0200

    merge

commit 62c4fbf1e3
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:22:22 2024 +0200

    empty line in changelog

commit 76b1e44a93
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:20:37 2024 +0200

    changelog

commit f783e90040
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:19:13 2024 +0200

    filters.js -> filters.ts

commit 3d4ce6554c
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:18:03 2024 +0200

    generated file removed

commit e35ba58f2a
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:45:21 2024 +0200

    rollback unwanted changes

commit 1f30d4216d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:27:36 2024 +0200

    review fix

commit 6cd4e44f07
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:55:39 2024 +0200

    missing generated file restoresd

commit 2ab738b303
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:40:32 2024 +0200

    Frontend rewritten in TypeScript, added Node 18 support

client/src/components/App/index.css

@@ -15,8 +15,8 @@
     --btn-success-bgcolor: #5eba00;
     --form-disabled-bgcolor: #f8f9fa;
     --form-disabled-color: #495057;
-    --rt-nodata-bgcolor: rgba(255,255,255,0.8);
-    --rt-nodata-color: rgba(0,0,0,0.5);
+    --rt-nodata-bgcolor: rgba(255, 255, 255, 0.8);
+    --rt-nodata-color: rgba(0, 0, 0, 0.5);
     --modal-overlay-bgcolor: rgba(255, 255, 255, 0.75);
     --logs__table-bgcolor: #fff;
     --logs__row--blue-bgcolor: #e5effd;
@@ -28,7 +28,7 @@
     --gray-d8: #d8d8d8;
     --gray-f3: #f3f3f3;
     --loading-bg: rgba(255, 255, 255, 0.48);
-    --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+    --font-family-monospace: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
     --font-size-disable-autozoom: 1rem;
     --alert-message-color: #24426c;
     --alert-message-border: #cbdbf2;
@@ -37,7 +37,7 @@
     --radio-bg: #ffffff;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
     --black: #ffffff;
     --bgcolor: #131313;
     --mcolor: #e6e6e6;
@@ -74,12 +74,14 @@
 body {
     margin: 0;
     padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 }
 
 /* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
 @media screen and (max-width: 767px) {
-    input, select, textarea {
+    input,
+    select,
+    textarea {
         font-size: var(--font-size-disable-autozoom);
     }
 }

client/src/components/App/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+
 import { HashRouter, Route } from 'react-router-dom';
 import LoadingBar from 'react-redux-loading-bar';
 import { hot } from 'react-hot-loader/root';
@@ -9,8 +10,6 @@ import '../ui/ReactTable.css';
 import './index.css';
 
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-
-import propTypes from 'prop-types';
 import Toasts from '../Toasts';
 import Footer from '../ui/Footer';
 import Status from '../ui/Status';
@@ -19,15 +18,14 @@ import UpdateOverlay from '../ui/UpdateOverlay';
 import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
+
 import Loading from '../ui/Loading';
-import {
-    FILTERS_URLS,
-    MENU_URLS,
-    SETTINGS_URLS,
-    THEMES,
-} from '../../helpers/constants';
+import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS, THEMES } from '../../helpers/constants';
+
 import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
+
 import Header from '../Header';
+
 import { changeLanguage, getDnsStatus, getTimerStatus } from '../../actions';
 
 import Dashboard from '../../containers/Dashboard';
@@ -35,15 +33,19 @@ import SetupGuide from '../../containers/SetupGuide';
 import Settings from '../../containers/Settings';
 import Dns from '../../containers/Dns';
 import Encryption from '../../containers/Encryption';
+
 import Dhcp from '../Settings/Dhcp';
 import Clients from '../../containers/Clients';
 import DnsBlocklist from '../../containers/DnsBlocklist';
 import DnsAllowlist from '../../containers/DnsAllowlist';
 import DnsRewrites from '../../containers/DnsRewrites';
 import CustomRules from '../../containers/CustomRules';
+
 import Services from '../Filters/Services';
+
 import Logs from '../Logs';
 import ProtectionTimer from '../ProtectionTimer';
+import { RootState } from '../../initialState';
 
 const ROUTES = [
     {
@@ -101,26 +103,17 @@ const ROUTES = [
     },
 ];
 
-const renderRoute = ({ path, component, exact }, idx) => <Route
-        key={idx}
-        exact={exact}
-        path={path}
-        component={component}
-/>;
-
 const App = () => {
     const dispatch = useDispatch();
-    const {
-        language,
-        isCoreRunning,
-        isUpdateAvailable,
-        processing,
-        theme,
-    } = useSelector((state) => state.dashboard, shallowEqual);
+    const { language, isCoreRunning, isUpdateAvailable, processing, theme } = useSelector<
+        RootState,
+        RootState['dashboard']
+    >((state) => state.dashboard, shallowEqual);
 
-    const { processing: processingEncryption } = useSelector((
-        state,
-    ) => state.encryption, shallowEqual);
+    const { processing: processingEncryption } = useSelector<RootState, RootState['encryption']>(
+        (state) => state.encryption,
+        shallowEqual,
+    );
 
     const updateAvailable = isCoreRunning && isUpdateAvailable;
 
@@ -157,7 +150,7 @@ const App = () => {
         setLanguage();
     }, [language]);
 
-    const handleAutoTheme = (e, accountTheme) => {
+    const handleAutoTheme = (e: any, accountTheme: any) => {
         if (accountTheme !== THEMES.auto) {
             return;
         }
@@ -195,35 +188,50 @@ const App = () => {
         window.location.reload();
     };
 
-    return <HashRouter hashType="noslash">
-        {updateAvailable && <>
-            <UpdateTopline />
-            <UpdateOverlay />
-        </>}
-        {!processingEncryption && <EncryptionTopline />}
-        <LoadingBar className="loading-bar" updateTime={1000} />
-        <Header />
-        <ProtectionTimer />
-        <div className="container container--wrap pb-5 pt-5">
-            {processing && <Loading />}
-            {!isCoreRunning && <div className="row row-cards">
-                <div className="col-lg-12">
-                    <Status reloadPage={reloadPage} message="dns_start" />
-                    <Loading />
-                </div>
-            </div>}
-            {!processing && isCoreRunning && ROUTES.map(renderRoute)}
-        </div>
-        <Footer />
-        <Toasts />
-        <Icons />
-    </HashRouter>;
-};
+    return (
+        <HashRouter hashType="noslash">
+            {updateAvailable && (
+                <>
+                    <UpdateTopline />
 
-renderRoute.propTypes = {
-    path: propTypes.oneOfType([propTypes.string, propTypes.arrayOf(propTypes.string)]).isRequired,
-    component: propTypes.element.isRequired,
-    exact: propTypes.bool,
+                    <UpdateOverlay />
+                </>
+            )}
+
+            {!processingEncryption && <EncryptionTopline />}
+
+            <LoadingBar className="loading-bar" updateTime={1000} />
+
+            <Header />
+
+            <ProtectionTimer />
+
+            <div className="container container--wrap pb-5 pt-5">
+                {processing && <Loading />}
+
+                {!isCoreRunning && (
+                    <div className="row row-cards">
+                        <div className="col-lg-12">
+                            <Status reloadPage={reloadPage} message="dns_start" />
+
+                            <Loading />
+                        </div>
+                    </div>
+                )}
+                {!processing &&
+                    isCoreRunning &&
+                    ROUTES.map((route, index) => (
+                        <Route key={index} exact={route.exact} path={route.path} component={route.component} />
+                    ))}
+            </div>
+
+            <Footer />
+
+            <Toasts />
+
+            <Icons />
+        </HashRouter>
+    );
 };
 
 export default hot(App);

client/src/components/Dashboard/BlockedDomains.tsx

@@ -1,25 +1,37 @@
 import React from 'react';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
-import PropTypes from 'prop-types';
 import { withTranslation, Trans } from 'react-i18next';
 
+import { TFunction } from 'i18next';
 import Card from '../ui/Card';
+
 import Cell from '../ui/Cell';
+
 import DomainCell from './DomainCell';
 
 import { getPercent } from '../../helpers/helpers';
 import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 
-const CountCell = (totalBlocked) => function cell(row) {
-    const { value } = row;
-    const percent = getPercent(totalBlocked, value);
+const CountCell = (totalBlocked: any) =>
+    function cell(row: any) {
+        const { value } = row;
+        const percent = getPercent(totalBlocked, value);
 
-    return <Cell value={value}
-                 percent={percent}
-                 color={STATUS_COLORS.red}
-                 search={row.original.domain}
-    />;
-};
+        return <Cell value={value} percent={percent} color={STATUS_COLORS.red} search={row.original.domain} />;
+    };
+
+interface BlockedDomainsProps {
+    topBlockedDomains: unknown[];
+    blockedFiltering: number;
+    replacedSafebrowsing: number;
+    replacedSafesearch: number;
+    replacedParental: number;
+    refreshButton: React.ReactNode;
+    subtitle: string;
+    t: TFunction;
+}
 
 const BlockedDomains = ({
     t,
@@ -30,20 +42,13 @@ const BlockedDomains = ({
     replacedSafebrowsing,
     replacedParental,
     replacedSafesearch,
-}) => {
-    const totalBlocked = (
-        blockedFiltering + replacedSafebrowsing + replacedParental + replacedSafesearch
-    );
+}: BlockedDomainsProps) => {
+    const totalBlocked = blockedFiltering + replacedSafebrowsing + replacedParental + replacedSafesearch;
 
     return (
-        <Card
-            title={t('top_blocked_domains')}
-            subtitle={subtitle}
-            bodyType="card-table"
-            refresh={refreshButton}
-        >
+        <Card title={t('top_blocked_domains')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
             <ReactTable
-                data={topBlockedDomains.map(({ name: domain, count }) => ({
+                data={topBlockedDomains.map(({ name: domain, count }: any) => ({
                     domain,
                     count,
                 }))}
@@ -70,15 +75,4 @@ const BlockedDomains = ({
     );
 };
 
-BlockedDomains.propTypes = {
-    topBlockedDomains: PropTypes.array.isRequired,
-    blockedFiltering: PropTypes.number.isRequired,
-    replacedSafebrowsing: PropTypes.number.isRequired,
-    replacedSafesearch: PropTypes.number.isRequired,
-    replacedParental: PropTypes.number.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-    subtitle: PropTypes.string.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(BlockedDomains);

client/src/components/Dashboard/Clients.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
-import PropTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
+
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
@@ -16,11 +18,14 @@ import {
     TABLES_MIN_ROWS,
 } from '../../helpers/constants';
 import { toggleClientBlock } from '../../actions/access';
+
 import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
 import { getStats } from '../../actions/stats';
-import IconTooltip from '../Logs/Cells/IconTooltip';
 
-const getClientsPercentColor = (percent) => {
+import IconTooltip from '../Logs/Cells/IconTooltip';
+import { RootState } from '../../initialState';
+
+const getClientsPercentColor = (percent: any) => {
     if (percent > 50) {
         return STATUS_COLORS.green;
     }
@@ -30,9 +35,13 @@ const getClientsPercentColor = (percent) => {
     return STATUS_COLORS.red;
 };
 
-const CountCell = (row) => {
-    const { value, original: { ip } } = row;
-    const numDnsQueries = useSelector((state) => state.stats.numDnsQueries, shallowEqual);
+const CountCell = (row: any) => {
+    const {
+        value,
+        original: { ip },
+    } = row;
+
+    const numDnsQueries = useSelector<RootState>((state) => state.stats.numDnsQueries, shallowEqual);
 
     const percent = getPercent(numDnsQueries, value);
     const percentColor = getClientsPercentColor(percent);
@@ -40,22 +49,29 @@ const CountCell = (row) => {
     return <Cell value={value} percent={percent} color={percentColor} search={ip} />;
 };
 
-const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
+const renderBlockingButton = (ip: any, disallowed: any, disallowed_rule: any) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
-    const processingSet = useSelector((state) => state.access.processingSet);
-    const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
+
+    const processingSet = useSelector<RootState, RootState['access']['processingSet']>(
+        (state) => state.access.processingSet,
+    );
+
+    const allowedClients = useSelector<RootState, RootState['access']['allowed_clients']>(
+        (state) => state.access.allowed_clients,
+        shallowEqual,
+    );
 
     const [isOptionsOpened, setOptionsOpened] = useState(false);
 
-    const toggleClientStatus = async (ip, disallowed, disallowed_rule) => {
+    const toggleClientStatus = async (ip: any, disallowed: any, disallowed_rule: any) => {
         let confirmMessage;
 
         if (disallowed) {
             confirmMessage = t('client_confirm_unblock', { ip: disallowed_rule || ip });
         } else {
             confirmMessage = `${t('adg_will_drop_dns_queries')} ${t('client_confirm_block', { ip })}`;
-            if (allowedСlients.length > 0) {
+            if (allowedClients.length > 0) {
                 confirmMessage = confirmMessage.concat(`\n\n${t('filter_allowlist', { disallowed_rule })}`);
             }
         }
@@ -73,15 +89,11 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
 
     const text = disallowed ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
 
-    const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
+    const lastRuleInAllowlist = !disallowed && allowedClients === disallowed_rule;
     const disabled = processingSet || lastRuleInAllowlist;
     return (
         <div className="table__action">
-            <button
-                type="button"
-                className="btn btn-icon btn-sm px-0"
-                onClick={() => setOptionsOpened(true)}
-            >
+            <button type="button" className="btn btn-icon btn-sm px-0" onClick={() => setOptionsOpened(true)}>
                 <svg className="icon24 icon--lightgray button-action__icon">
                     <use xlinkHref="#bullets" />
                 </svg>
@@ -92,16 +104,18 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
                     tooltipClass="button-action--arrow-option-container"
                     xlinkHref="bullets"
                     triggerClass="btn btn-icon btn-sm px-0 button-action__hidden-trigger"
-                    content={(
+                    content={
                         <button
-                            className={classNames('button-action--arrow-option px-4 py-1', disallowed ? 'bg--green' : 'bg--danger')}
+                            className={classNames(
+                                'button-action--arrow-option px-4 py-1',
+                                disallowed ? 'bg--green' : 'bg--danger',
+                            )}
                             onClick={onClick}
                             disabled={disabled}
-                            title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
-                        >
+                            title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}>
                             <Trans>{text}</Trans>
                         </button>
-                    )}
+                    }
                     placement="bottom-end"
                     trigger="click"
                     onVisibilityChange={setOptionsOpened}
@@ -113,35 +127,42 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
     );
 };
 
-const ClientCell = (row) => {
-    const { value, original: { info, info: { disallowed, disallowed_rule } } } = row;
-
-    return <>
-        <div className="logs__row logs__row--overflow logs__row--column d-flex align-items-center">
-            {renderFormattedClientCell(value, info, true)}
-            {renderBlockingButton(value, disallowed, disallowed_rule)}
-        </div>
-    </>;
-};
-
-const Clients = ({
-    refreshButton,
-    subtitle,
-}) => {
-    const { t } = useTranslation();
-    const topClients = useSelector((state) => state.stats.topClients, shallowEqual);
+const ClientCell = (row: any) => {
+    const {
+        value,
+        original: {
+            info,
+            info: { disallowed, disallowed_rule },
+        },
+    } = row;
 
     return (
-        <Card
-            title={t('top_clients')}
-            subtitle={subtitle}
-            bodyType="card-table"
-            refresh={refreshButton}
-        >
+        <>
+            <div className="logs__row logs__row--overflow logs__row--column d-flex align-items-center">
+                {renderFormattedClientCell(value, info, true)}
+                {renderBlockingButton(value, disallowed, disallowed_rule)}
+            </div>
+        </>
+    );
+};
+
+interface ClientsProps {
+    refreshButton: React.ReactNode;
+    subtitle: string;
+}
+
+const Clients = ({ refreshButton, subtitle }: ClientsProps) => {
+    const { t } = useTranslation();
+
+    const topClients = useSelector<RootState, RootState['stats']['topClients']>(
+        (state) => state.stats.topClients,
+        shallowEqual,
+    );
+
+    return (
+        <Card title={t('top_clients')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
             <ReactTable
-                data={topClients.map(({
-                    name: ip, count, info, blocked,
-                }) => ({
+                data={topClients.map(({ name: ip, count, info, blocked }: any) => ({
                     ip,
                     count,
                     info,
@@ -167,12 +188,14 @@ const Clients = ({
                 minRows={TABLES_MIN_ROWS}
                 defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
                 className="-highlight card-table-overflow--limited clients__table"
-                getTrProps={(_state, rowInfo) => {
+                getTrProps={(_state: any, rowInfo: any) => {
                     if (!rowInfo) {
                         return {};
                     }
 
-                    const { info: { disallowed } } = rowInfo.original;
+                    const {
+                        info: { disallowed },
+                    } = rowInfo.original;
 
                     return disallowed ? { className: 'logs__row--red' } : {};
                 }}
@@ -181,9 +204,4 @@ const Clients = ({
     );
 };
 
-Clients.propTypes = {
-    refreshButton: PropTypes.node.isRequired,
-    subtitle: PropTypes.string.isRequired,
-};
-
 export default Clients;

client/src/components/Dashboard/Counters.tsx

@@ -1,41 +1,52 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
 import round from 'lodash/round';
 import { shallowEqual, useSelector } from 'react-redux';
+
 import Card from '../ui/Card';
+
 import { formatNumber, msToDays, msToHours } from '../../helpers/helpers';
+
 import LogsSearchLink from '../ui/LogsSearchLink';
 import { RESPONSE_FILTER, TIME_UNITS } from '../../helpers/constants';
-import Tooltip from '../ui/Tooltip';
 
-const Row = ({
-    label, count, response_status, tooltipTitle, translationComponents,
-}) => {
-    const content = response_status
-        ? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink>
-        : count;
+import Tooltip from '../ui/Tooltip';
+import { RootState } from '../../initialState';
+
+interface RowProps {
+    label: string;
+    count: string;
+    response_status?: string;
+    tooltipTitle: string;
+    translationComponents?: React.ReactElement[];
+}
+
+const Row = ({ label, count, response_status, tooltipTitle, translationComponents }: RowProps) => {
+    const content = response_status ? (
+        <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink>
+    ) : (
+        count
+    );
 
     return (
         <div className="counters__row" key={label}>
             <div className="counters__column">
                 <span className="counters__title">
-                    <Trans components={translationComponents}>
-                        {label}
-                    </Trans>
+                    <Trans components={translationComponents}>{label}</Trans>
                 </span>
+
                 <span className="counters__tooltip">
                     <Tooltip
                         content={tooltipTitle}
                         placement="top"
-                        className="tooltip-container tooltip-custom--narrow text-center"
-                    >
+                        className="tooltip-container tooltip-custom--narrow text-center">
                         <svg className="icons icon--20 icon--lightgray ml-2">
                             <use xlinkHref="#question" />
                         </svg>
                     </Tooltip>
                 </span>
             </div>
+
             <div className="counters__column counters__column--value">
                 <strong>{content}</strong>
             </div>
@@ -43,7 +54,12 @@ const Row = ({
     );
 };
 
-const Counters = ({ refreshButton, subtitle }) => {
+interface CountersProps {
+    refreshButton: React.ReactNode;
+    subtitle: string;
+}
+
+const Counters = ({ refreshButton, subtitle }: CountersProps) => {
     const {
         interval,
         numDnsQueries,
@@ -53,77 +69,67 @@ const Counters = ({ refreshButton, subtitle }) => {
         numReplacedSafesearch,
         avgProcessingTime,
         timeUnits,
-    } = useSelector((state) => state.stats, shallowEqual);
+    } = useSelector<RootState, RootState['stats']>((state) => state.stats, shallowEqual);
     const { t } = useTranslation();
 
-    const dnsQueryTooltip = timeUnits === TIME_UNITS.HOURS
-        ? t('number_of_dns_query_hours', { count: msToHours(interval) })
-        : t('number_of_dns_query_days', { count: msToDays(interval) });
+    const dnsQueryTooltip =
+        timeUnits === TIME_UNITS.HOURS
+            ? t('number_of_dns_query_hours', { count: msToHours(interval) })
+            : t('number_of_dns_query_days', { count: msToDays(interval) });
 
     const rows = [
         {
             label: 'dns_query',
-            count: numDnsQueries,
+            count: numDnsQueries.toString(),
             tooltipTitle: dnsQueryTooltip,
             response_status: RESPONSE_FILTER.ALL.QUERY,
         },
         {
             label: 'blocked_by',
-            count: numBlockedFiltering,
+            count: numBlockedFiltering.toString(),
             tooltipTitle: 'number_of_dns_query_blocked_24_hours',
             response_status: RESPONSE_FILTER.BLOCKED.QUERY,
-            translationComponents: [<a href="#filters" key="0">link</a>],
+
+            translationComponents: [
+                <a href="#filters" key="0">
+                    link
+                </a>,
+            ],
         },
         {
             label: 'stats_malware_phishing',
-            count: numReplacedSafebrowsing,
+            count: numReplacedSafebrowsing.toString(),
             tooltipTitle: 'number_of_dns_query_blocked_24_hours_by_sec',
             response_status: RESPONSE_FILTER.BLOCKED_THREATS.QUERY,
         },
         {
             label: 'stats_adult',
-            count: numReplacedParental,
+            count: numReplacedParental.toString(),
             tooltipTitle: 'number_of_dns_query_blocked_24_hours_adult',
             response_status: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY,
         },
         {
             label: 'enforced_save_search',
-            count: numReplacedSafesearch,
+            count: numReplacedSafesearch.toString(),
             tooltipTitle: 'number_of_dns_query_to_safe_search',
             response_status: RESPONSE_FILTER.SAFE_SEARCH.QUERY,
         },
         {
             label: 'average_processing_time',
-            count: avgProcessingTime ? `${round(avgProcessingTime)} ms` : 0,
+            count: avgProcessingTime ? `${round(avgProcessingTime)} ms` : '0',
             tooltipTitle: 'average_processing_time_hint',
         },
     ];
 
     return (
-        <Card
-            title={t('general_statistics')}
-            subtitle={subtitle}
-            bodyType="card-table"
-            refresh={refreshButton}
-        >
+        <Card title={t('general_statistics')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
             <div className="counters">
-                {rows.map(Row)}
+                {rows.map((row, index) => {
+                    return <Row {...row} key={index} />;
+                })}
             </div>
         </Card>
     );
 };
 
-Row.propTypes = {
-    label: propTypes.string.isRequired,
-    count: propTypes.string.isRequired,
-    response_status: propTypes.string,
-    tooltipTitle: propTypes.string.isRequired,
-    translationComponents: propTypes.arrayOf(propTypes.element),
-};
-
-Counters.propTypes = {
-    refreshButton: propTypes.node.isRequired,
-    subtitle: propTypes.string.isRequired,
-};
-
 export default Counters;

client/src/components/Dashboard/DomainCell.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Trans } from 'react-i18next';
-import { getSourceData, getTrackerData } from '../../helpers/trackers/trackers';
-import Tooltip from '../ui/Tooltip';
-import { captitalizeWords } from '../../helpers/helpers';
-
-const renderLabel = (value) => <strong><Trans>{value}</Trans></strong>;
-
-const renderLink = ({ url, name }) => <a
-    className="tooltip-custom__content-link"
-    target="_blank"
-    rel="noopener noreferrer"
-    href={url}
->
-    <strong>{name}</strong>
-</a>;
-
-const getTrackerInfo = (trackerData) => [{
-    key: 'name_table_header',
-    value: trackerData,
-    render: renderLink,
-},
-{
-    key: 'category_label',
-    value: captitalizeWords(trackerData.category),
-    render: renderLabel,
-},
-{
-    key: 'source_label',
-    value: getSourceData(trackerData),
-    render: renderLink,
-}];
-
-const DomainCell = ({ value }) => {
-    const trackerData = getTrackerData(value);
-
-    const content = trackerData && <div className="popover__list">
-        <div className="tooltip-custom__content-title mb-1">
-            <Trans>found_in_known_domain_db</Trans>
-        </div>
-        {getTrackerInfo(trackerData)
-            .map(({ key, value, render }) => <div
-                key={key}
-                className="tooltip-custom__content-item"
-            >
-                <Trans>{key}</Trans>: {render(value)}
-            </div>)}
-    </div>;
-
-    return (
-        <div className="logs__row">
-            <div className="logs__text" title={value}>
-                {value}
-            </div>
-            {trackerData
-            && <Tooltip content={content} placement="top"
-                        className="tooltip-container tooltip-custom--wide">
-                <svg className="icons icon--24 icon--green ml-1">
-                    <use xlinkHref="#privacy" />
-                </svg>
-            </Tooltip>}
-        </div>
-    );
-};
-
-DomainCell.propTypes = {
-    value: PropTypes.string.isRequired,
-};
-
-renderLink.propTypes = {
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-};
-
-export default DomainCell;

client/src/components/Dashboard/DomainCell.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { Trans } from 'react-i18next';
+import { getSourceData, getTrackerData } from '../../helpers/trackers/trackers';
+
+import Tooltip from '../ui/Tooltip';
+
+import { captitalizeWords } from '../../helpers/helpers';
+
+const renderLabel = (value: any) => (
+    <strong>
+        <Trans>{value}</Trans>
+    </strong>
+);
+
+interface renderLinkProps {
+    url: string;
+    name: string;
+}
+
+const renderLink = ({ url, name }: renderLinkProps) => (
+    <a className="tooltip-custom__content-link" target="_blank" rel="noopener noreferrer" href={url}>
+        <strong>{name}</strong>
+    </a>
+);
+
+const getTrackerInfo = (trackerData: any) => [
+    {
+        key: 'name_table_header',
+        value: trackerData,
+        render: renderLink,
+    },
+    {
+        key: 'category_label',
+        value: captitalizeWords(trackerData.category),
+        render: renderLabel,
+    },
+    {
+        key: 'source_label',
+        value: getSourceData(trackerData),
+        render: renderLink,
+    },
+];
+
+interface DomainCellProps {
+    value: string;
+}
+
+const DomainCell = ({ value }: DomainCellProps) => {
+    const trackerData = getTrackerData(value);
+
+    const content = trackerData && (
+        <div className="popover__list">
+            <div className="tooltip-custom__content-title mb-1">
+                <Trans>found_in_known_domain_db</Trans>
+            </div>
+            {getTrackerInfo(trackerData).map(({ key, value, render }) => (
+                <div key={key} className="tooltip-custom__content-item">
+                    <Trans>{key}</Trans>: {render(value)}
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <div className="logs__row">
+            <div className="logs__text" title={value}>
+                {value}
+            </div>
+            {trackerData && (
+                <Tooltip content={content} placement="top" className="tooltip-container tooltip-custom--wide">
+                    <svg className="icons icon--24 icon--green ml-1">
+                        <use xlinkHref="#privacy" />
+                    </svg>
+                </Tooltip>
+            )}
+        </div>
+    );
+};
+
+export default DomainCell;

client/src/components/Dashboard/QueriedDomains.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
-import PropTypes from 'prop-types';
 import { withTranslation, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
@@ -8,9 +9,10 @@ import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';
 
 import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
+
 import { getPercent } from '../../helpers/helpers';
 
-const getQueriedPercentColor = (percent) => {
+const getQueriedPercentColor = (percent: any) => {
     if (percent > 10) {
         return STATUS_COLORS.red;
     }
@@ -20,26 +22,27 @@ const getQueriedPercentColor = (percent) => {
     return STATUS_COLORS.green;
 };
 
-const countCell = (dnsQueries) => function cell(row) {
-    const { value } = row;
-    const percent = getPercent(dnsQueries, value);
-    const percentColor = getQueriedPercentColor(percent);
+const countCell = (dnsQueries: any) =>
+    function cell(row: any) {
+        const { value } = row;
+        const percent = getPercent(dnsQueries, value);
+        const percentColor = getQueriedPercentColor(percent);
 
-    return <Cell value={value} percent={percent} color={percentColor}
-                 search={row.original.domain} />;
-};
+        return <Cell value={value} percent={percent} color={percentColor} search={row.original.domain} />;
+    };
 
-const QueriedDomains = ({
-    t, refreshButton, topQueriedDomains, subtitle, dnsQueries,
-}) => (
-    <Card
-        title={t('stats_query_domain')}
-        subtitle={subtitle}
-        bodyType="card-table"
-        refresh={refreshButton}
-    >
+interface QueriedDomainsProps {
+    topQueriedDomains: unknown[];
+    dnsQueries: number;
+    refreshButton: React.ReactNode;
+    subtitle: string;
+    t: (...args: unknown[]) => string;
+}
+
+const QueriedDomains = ({ t, refreshButton, topQueriedDomains, subtitle, dnsQueries }: QueriedDomainsProps) => (
+    <Card title={t('stats_query_domain')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
         <ReactTable
-            data={topQueriedDomains.map(({ name: domain, count }) => ({
+            data={topQueriedDomains.map(({ name: domain, count }: any) => ({
                 domain,
                 count,
             }))}
@@ -65,12 +68,4 @@ const QueriedDomains = ({
     </Card>
 );
 
-QueriedDomains.propTypes = {
-    topQueriedDomains: PropTypes.array.isRequired,
-    dnsQueries: PropTypes.number.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-    subtitle: PropTypes.string.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(QueriedDomains);

client/src/components/Dashboard/Statistics.tsx

@@ -1,15 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Link } from 'react-router-dom';
 import { withTranslation, Trans } from 'react-i18next';
 
 import StatsCard from './StatsCard';
+
 import { getPercent, normalizeHistory } from '../../helpers/helpers';
 import { RESPONSE_FILTER } from '../../helpers/constants';
 
-const getNormalizedHistory = (data, interval, id) => [
-    { data: normalizeHistory(data, interval), id },
-];
+const getNormalizedHistory = (data: any, interval: any, id: any) => [{ data: normalizeHistory(data), id }];
+
+interface StatisticsProps {
+    interval: number;
+    dnsQueries: number[];
+    blockedFiltering: unknown[];
+    replacedSafebrowsing: unknown[];
+    replacedParental: unknown[];
+    numDnsQueries: number;
+    numBlockedFiltering: number;
+    numReplacedSafebrowsing: number;
+    numReplacedParental: number;
+    refreshButton: React.ReactNode;
+}
 
 const Statistics = ({
     interval,
@@ -21,61 +33,68 @@ const Statistics = ({
     numBlockedFiltering,
     numReplacedSafebrowsing,
     numReplacedParental,
-}) => (
+}: StatisticsProps) => (
     <div className="row">
         <div className="col-sm-6 col-lg-3">
             <StatsCard
                 total={numDnsQueries}
                 lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')}
-                title={<Link to="logs"><Trans>dns_query</Trans></Link>}
+                title={
+                    <Link to="logs">
+                        <Trans>dns_query</Trans>
+                    </Link>
+                }
                 color="blue"
             />
         </div>
+
         <div className="col-sm-6 col-lg-3">
             <StatsCard
                 total={numBlockedFiltering}
                 lineData={getNormalizedHistory(blockedFiltering, interval, 'blockedFiltering')}
                 percent={getPercent(numDnsQueries, numBlockedFiltering)}
-                title={<Trans components={[<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED.QUERY}`} key="0">link</Link>]}>blocked_by</Trans>}
+                title={
+                    <Trans
+                        components={[
+                            <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED.QUERY}`} key="0">
+                                link
+                            </Link>,
+                        ]}>
+                        blocked_by
+                    </Trans>
+                }
                 color="red"
             />
         </div>
+
         <div className="col-sm-6 col-lg-3">
             <StatsCard
                 total={numReplacedSafebrowsing}
-                lineData={getNormalizedHistory(
-                    replacedSafebrowsing,
-                    interval,
-                    'replacedSafebrowsing',
-                )}
+                lineData={getNormalizedHistory(replacedSafebrowsing, interval, 'replacedSafebrowsing')}
                 percent={getPercent(numDnsQueries, numReplacedSafebrowsing)}
-                title={<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_THREATS.QUERY}`}><Trans>stats_malware_phishing</Trans></Link>}
+                title={
+                    <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_THREATS.QUERY}`}>
+                        <Trans>stats_malware_phishing</Trans>
+                    </Link>
+                }
                 color="green"
             />
         </div>
+
         <div className="col-sm-6 col-lg-3">
             <StatsCard
                 total={numReplacedParental}
                 lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')}
                 percent={getPercent(numDnsQueries, numReplacedParental)}
-                title={<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY}`}><Trans>stats_adult</Trans></Link>}
+                title={
+                    <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY}`}>
+                        <Trans>stats_adult</Trans>
+                    </Link>
+                }
                 color="yellow"
             />
         </div>
     </div>
 );
 
-Statistics.propTypes = {
-    interval: PropTypes.number.isRequired,
-    dnsQueries: PropTypes.array.isRequired,
-    blockedFiltering: PropTypes.array.isRequired,
-    replacedSafebrowsing: PropTypes.array.isRequired,
-    replacedParental: PropTypes.array.isRequired,
-    numDnsQueries: PropTypes.number.isRequired,
-    numBlockedFiltering: PropTypes.number.isRequired,
-    numReplacedSafebrowsing: PropTypes.number.isRequired,
-    numReplacedParental: PropTypes.number.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-};
-
 export default withTranslation()(Statistics);

client/src/components/Dashboard/StatsCard.tsx

@@ -1,38 +1,34 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { STATUS_COLORS } from '../../helpers/constants';
+
 import { formatNumber } from '../../helpers/helpers';
+
 import Card from '../ui/Card';
+
 import Line from '../ui/Line';
 
-const StatsCard = ({
-    total, lineData, percent, title, color,
-}) => (
+interface StatsCardProps {
+    total: number;
+    lineData: unknown[];
+    title: object;
+    color: string;
+    percent?: number;
+}
+
+const StatsCard = ({ total, lineData, percent, title, color }: StatsCardProps) => (
     <Card type="card--full" bodyType="card-wrap">
         <div className="card-body-stats">
-            <div className={`card-value card-value-stats text-${color}`}>
-                {formatNumber(total)}
-            </div>
+            <div className={`card-value card-value-stats text-${color}`}>{formatNumber(total)}</div>
+
             <div className="card-title-stats">{title}</div>
         </div>
-        {percent >= 0 && (
-            <div className={`card-value card-value-percent text-${color}`}>
-                {percent}
-            </div>
-        )}
+        {percent >= 0 && <div className={`card-value card-value-percent text-${color}`}>{percent}</div>}
+
         <div className="card-chart-bg">
             <Line data={lineData} color={STATUS_COLORS[color]} />
         </div>
     </Card>
 );
 
-StatsCard.propTypes = {
-    total: PropTypes.number.isRequired,
-    lineData: PropTypes.array.isRequired,
-    title: PropTypes.object.isRequired,
-    color: PropTypes.string.isRequired,
-    percent: PropTypes.number,
-};
-
 export default StatsCard;

client/src/components/Dashboard/UpstreamAvgTime.tsx

@@ -1,50 +1,47 @@
 import React from 'react';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
-import PropTypes from 'prop-types';
 import round from 'lodash/round';
 import { withTranslation, Trans } from 'react-i18next';
 
+import { TFunction } from 'i18next';
 import Card from '../ui/Card';
+
 import DomainCell from './DomainCell';
 import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, TABLES_MIN_ROWS } from '../../helpers/constants';
 
-const TimeCell = ({ value }) => {
+interface TimeCellProps {
+    value?: string | number;
+}
+
+const TimeCell = ({ value }: TimeCellProps) => {
     if (!value) {
         return '–';
     }
 
-    const valueInMilliseconds = round(value * 1000);
+    const valueInMilliseconds = round(Number(value) * 1000);
 
     return (
         <div className="logs__row o-hidden">
-            <span className="logs__text logs__text--full" title={valueInMilliseconds}>
+            <span className="logs__text logs__text--full" title={valueInMilliseconds.toString()}>
                 {valueInMilliseconds}&nbsp;ms
             </span>
         </div>
     );
 };
 
-TimeCell.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]),
-};
+interface UpstreamAvgTimeProps {
+    topUpstreamsAvgTime: { name: string; count: number }[];
+    refreshButton: React.ReactNode;
+    subtitle: string;
+    t: TFunction;
+}
 
-const UpstreamAvgTime = ({
-    t,
-    refreshButton,
-    topUpstreamsAvgTime,
-    subtitle,
-}) => (
-    <Card
-        title={t('average_upstream_response_time')}
-        subtitle={subtitle}
-        bodyType="card-table"
-        refresh={refreshButton}
-    >
+const UpstreamAvgTime = ({ t, refreshButton, topUpstreamsAvgTime, subtitle }: UpstreamAvgTimeProps) => (
+    <Card title={t('average_upstream_response_time')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
         <ReactTable
-            data={topUpstreamsAvgTime.map(({ name: domain, count }) => ({
+            data={topUpstreamsAvgTime.map(({ name: domain, count }: { name: string; count: number }) => ({
                 domain,
                 count,
             }))}
@@ -70,11 +67,4 @@ const UpstreamAvgTime = ({
     </Card>
 );
 
-UpstreamAvgTime.propTypes = {
-    topUpstreamsAvgTime: PropTypes.array.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-    subtitle: PropTypes.string.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(UpstreamAvgTime);

client/src/components/Dashboard/UpstreamResponses.tsx

@@ -1,51 +1,47 @@
 import React from 'react';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
-import PropTypes from 'prop-types';
 import { withTranslation, Trans } from 'react-i18next';
 
+import { TFunction } from 'i18next';
 import Card from '../ui/Card';
+
 import Cell from '../ui/Cell';
+
 import DomainCell from './DomainCell';
 
 import { getPercent } from '../../helpers/helpers';
 import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 
-const CountCell = (totalBlocked) => (
-    function cell(row) {
+const CountCell = (totalBlocked: any) =>
+    function cell(row: any) {
         const { value } = row;
         const percent = getPercent(totalBlocked, value);
 
-        return (
-            <Cell
-                value={value}
-                percent={percent}
-                color={STATUS_COLORS.green}
-            />
-        );
-    }
-);
+        return <Cell value={value} percent={percent} color={STATUS_COLORS.green} />;
+    };
 
-const getTotalUpstreamRequests = (stats) => {
+const getTotalUpstreamRequests = (stats: any) => {
     let total = 0;
-    stats.forEach(({ count }) => { total += count; });
+    stats.forEach(({ count }: any) => {
+        total += count;
+    });
 
     return total;
 };
 
-const UpstreamResponses = ({
-    t,
-    refreshButton,
-    topUpstreamsResponses,
-    subtitle,
-}) => (
-    <Card
-        title={t('top_upstreams')}
-        subtitle={subtitle}
-        bodyType="card-table"
-        refresh={refreshButton}
-    >
+interface UpstreamResponsesProps {
+    topUpstreamsResponses: { name: string; count: number }[];
+    refreshButton: React.ReactNode;
+    subtitle: string;
+    t: TFunction;
+}
+
+const UpstreamResponses = ({ t, refreshButton, topUpstreamsResponses, subtitle }: UpstreamResponsesProps) => (
+    <Card title={t('top_upstreams')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
         <ReactTable
-            data={topUpstreamsResponses.map(({ name: domain, count }) => ({
+            data={topUpstreamsResponses.map(({ name: domain, count }: { name: string; count: number }) => ({
                 domain,
                 count,
             }))}
@@ -71,11 +67,4 @@ const UpstreamResponses = ({
     </Card>
 );
 
-UpstreamResponses.propTypes = {
-    topUpstreamsResponses: PropTypes.array.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-    subtitle: PropTypes.string.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(UpstreamResponses);

client/src/components/Dashboard/index.js

@@ -1,276 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { HashLink as Link } from 'react-router-hash-link';
-import { Trans, useTranslation } from 'react-i18next';
-import classNames from 'classnames';
-
-import Statistics from './Statistics';
-import Counters from './Counters';
-import Clients from './Clients';
-import QueriedDomains from './QueriedDomains';
-import BlockedDomains from './BlockedDomains';
-import {
-    DISABLE_PROTECTION_TIMINGS,
-    ONE_SECOND_IN_MS,
-    SETTINGS_URLS,
-    TIME_UNITS,
-} from '../../helpers/constants';
-import {
-    msToSeconds,
-    msToMinutes,
-    msToHours,
-    msToDays,
-} from '../../helpers/helpers';
-
-import PageTitle from '../ui/PageTitle';
-import Loading from '../ui/Loading';
-import './Dashboard.css';
-import Dropdown from '../ui/Dropdown';
-import UpstreamResponses from './UpstreamResponses';
-import UpstreamAvgTime from './UpstreamAvgTime';
-
-const Dashboard = ({
-    getAccessList,
-    getStats,
-    getStatsConfig,
-    dashboard,
-    dashboard: { protectionEnabled, processingProtection, protectionDisabledDuration },
-    toggleProtection,
-    stats,
-    access,
-}) => {
-    const { t } = useTranslation();
-
-    const getAllStats = () => {
-        getAccessList();
-        getStats();
-        getStatsConfig();
-    };
-
-    useEffect(() => {
-        getAllStats();
-    }, []);
-    const getSubtitle = () => {
-        if (!stats.enabled) {
-            return t('stats_disabled_short');
-        }
-
-        const msIn7Days = 604800000;
-
-        if (stats.timeUnits === TIME_UNITS.HOURS && stats.interval === msIn7Days) {
-            return t('for_last_days', { count: msToDays(stats.interval) });
-        }
-
-        return stats.timeUnits === TIME_UNITS.HOURS
-            ? t('for_last_hours', { count: msToHours(stats.interval) })
-            : t('for_last_days', { count: msToDays(stats.interval) });
-    };
-
-    const buttonClass = classNames('btn btn-sm dashboard-protection-button', {
-        'btn-gray': protectionEnabled,
-        'btn-success': !protectionEnabled,
-    });
-
-    const refreshButton = <button
-            type="button"
-            className="btn btn-icon btn-outline-primary btn-sm"
-            title={t('refresh_btn')}
-            onClick={() => getAllStats()}
-    >
-        <svg className="icons icon12">
-            <use xlinkHref="#refresh" />
-        </svg>
-    </button>;
-
-    const statsProcessing = stats.processingStats
-            || stats.processingGetConfig
-            || access.processing;
-
-    const subtitle = getSubtitle();
-
-    const DISABLE_PROTECTION_ITEMS = [
-        {
-            text: t('disable_for_seconds', { count: msToSeconds(DISABLE_PROTECTION_TIMINGS.HALF_MINUTE) }),
-            disableTime: DISABLE_PROTECTION_TIMINGS.HALF_MINUTE,
-        },
-        {
-            text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.MINUTE) }),
-            disableTime: DISABLE_PROTECTION_TIMINGS.MINUTE,
-        },
-        {
-            text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.TEN_MINUTES) }),
-            disableTime: DISABLE_PROTECTION_TIMINGS.TEN_MINUTES,
-        },
-        {
-            text: t('disable_for_hours', { count: msToHours(DISABLE_PROTECTION_TIMINGS.HOUR) }),
-            disableTime: DISABLE_PROTECTION_TIMINGS.HOUR,
-        },
-        {
-            text: t('disable_until_tomorrow'),
-            disableTime: DISABLE_PROTECTION_TIMINGS.TOMORROW,
-        },
-    ];
-
-    const getDisableProtectionItems = () => (
-        Object.values(DISABLE_PROTECTION_ITEMS)
-            .map((item, index) => (
-                <div
-                    key={`disable_timings_${index}`}
-                    className="dropdown-item"
-                    onClick={() => {
-                        toggleProtection(protectionEnabled, item.disableTime - ONE_SECOND_IN_MS);
-                    }}
-                >
-                    {item.text}
-                </div>
-            ))
-    );
-
-    const getRemaningTimeText = (milliseconds) => {
-        if (!milliseconds) {
-            return '';
-        }
-
-        const date = new Date(milliseconds);
-        const hh = date.getUTCHours();
-        const mm = `0${date.getUTCMinutes()}`.slice(-2);
-        const ss = `0${date.getUTCSeconds()}`.slice(-2);
-        const formattedHH = `0${hh}`.slice(-2);
-
-        return hh ? `${formattedHH}:${mm}:${ss}` : `${mm}:${ss}`;
-    };
-
-    const getProtectionBtnText = (status) => (status ? t('disable_protection') : t('enable_protection'));
-
-    return <>
-        <PageTitle title={t('dashboard')} containerClass="page-title--dashboard">
-            <div className="page-title__protection">
-                <button
-                    type="button"
-                    className={buttonClass}
-                    onClick={() => {
-                        toggleProtection(protectionEnabled);
-                    }}
-                    disabled={processingProtection}
-                >
-                    {protectionDisabledDuration
-                        ? `${t('enable_protection_timer')} ${getRemaningTimeText(protectionDisabledDuration)}`
-                        : getProtectionBtnText(protectionEnabled)
-                    }
-                </button>
-
-                {protectionEnabled && <Dropdown
-                    label=""
-                    baseClassName="dropdown-protection"
-                    icon="arrow-down"
-                    controlClassName="dropdown-protection__toggle"
-                    menuClassName="dropdown-menu dropdown-menu-arrow dropdown-menu--protection"
-                >
-                    {getDisableProtectionItems()}
-                </Dropdown>}
-            </div>
-            <button
-                type="button"
-                className="btn btn-outline-primary btn-sm"
-                onClick={getAllStats}
-            >
-                <Trans>refresh_statics</Trans>
-            </button>
-        </PageTitle>
-        {statsProcessing && <Loading />}
-        {!statsProcessing && <div className="row row-cards dashboard">
-            <div className="col-lg-12">
-                {stats.interval === 0 && (
-                    <div className="alert alert-warning" role="alert">
-                        <Trans components={[
-                            <Link
-                                to={`${SETTINGS_URLS.settings}#stats-config`}
-                                key="0"
-                            >
-                                link
-                            </Link>,
-                        ]}>
-                            stats_disabled
-                        </Trans>
-                    </div>
-                )}
-                <Statistics
-                    interval={msToDays(stats.interval)}
-                    dnsQueries={stats.dnsQueries}
-                    blockedFiltering={stats.blockedFiltering}
-                    replacedSafebrowsing={stats.replacedSafebrowsing}
-                    replacedParental={stats.replacedParental}
-                    numDnsQueries={stats.numDnsQueries}
-                    numBlockedFiltering={stats.numBlockedFiltering}
-                    numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                    numReplacedParental={stats.numReplacedParental}
-                    refreshButton={refreshButton}
-                />
-            </div>
-            <div className="col-lg-6">
-                <Counters
-                    subtitle={subtitle}
-                    refreshButton={refreshButton}
-                />
-            </div>
-            <div className="col-lg-6">
-                <Clients
-                    subtitle={subtitle}
-                    dnsQueries={stats.numDnsQueries}
-                    topClients={stats.topClients}
-                    clients={dashboard.clients}
-                    autoClients={dashboard.autoClients}
-                    refreshButton={refreshButton}
-                    processingAccessSet={access.processingSet}
-                    disallowedClients={access.disallowed_clients}
-                />
-            </div>
-            <div className="col-lg-6">
-                <QueriedDomains
-                    subtitle={subtitle}
-                    dnsQueries={stats.numDnsQueries}
-                    topQueriedDomains={stats.topQueriedDomains}
-                    refreshButton={refreshButton}
-                />
-            </div>
-            <div className="col-lg-6">
-                <BlockedDomains
-                    subtitle={subtitle}
-                    topBlockedDomains={stats.topBlockedDomains}
-                    blockedFiltering={stats.numBlockedFiltering}
-                    replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                    replacedSafesearch={stats.numReplacedSafesearch}
-                    replacedParental={stats.numReplacedParental}
-                    refreshButton={refreshButton}
-                />
-            </div>
-            <div className="col-lg-6">
-                <UpstreamResponses
-                    subtitle={subtitle}
-                    topUpstreamsResponses={stats.topUpstreamsResponses}
-                    refreshButton={refreshButton}
-                />
-            </div>
-            <div className="col-lg-6">
-                <UpstreamAvgTime
-                    subtitle={subtitle}
-                    topUpstreamsAvgTime={stats.topUpstreamsAvgTime}
-                    refreshButton={refreshButton}
-                />
-            </div>
-        </div>}
-    </>;
-};
-
-Dashboard.propTypes = {
-    dashboard: PropTypes.object.isRequired,
-    stats: PropTypes.object.isRequired,
-    access: PropTypes.object.isRequired,
-    getStats: PropTypes.func.isRequired,
-    getStatsConfig: PropTypes.func.isRequired,
-    toggleProtection: PropTypes.func.isRequired,
-    getClients: PropTypes.func.isRequired,
-    getAccessList: PropTypes.func.isRequired,
-};
-
-export default Dashboard;

client/src/components/Dashboard/index.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect } from 'react';
+
+import { HashLink as Link } from 'react-router-hash-link';
+import { Trans, useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+import Statistics from './Statistics';
+import Counters from './Counters';
+import Clients from './Clients';
+import QueriedDomains from './QueriedDomains';
+import BlockedDomains from './BlockedDomains';
+import { DISABLE_PROTECTION_TIMINGS, ONE_SECOND_IN_MS, SETTINGS_URLS, TIME_UNITS } from '../../helpers/constants';
+import { msToSeconds, msToMinutes, msToHours, msToDays } from '../../helpers/helpers';
+
+import PageTitle from '../ui/PageTitle';
+
+import Loading from '../ui/Loading';
+import './Dashboard.css';
+
+import Dropdown from '../ui/Dropdown';
+import UpstreamResponses from './UpstreamResponses';
+
+import UpstreamAvgTime from './UpstreamAvgTime';
+import { AccessData, DashboardData, StatsData } from '../../initialState';
+
+interface DashboardProps {
+    dashboard: DashboardData;
+    stats: StatsData;
+    access: AccessData;
+    getStats: (...args: unknown[]) => unknown;
+    getStatsConfig: (...args: unknown[]) => unknown;
+    toggleProtection: (...args: unknown[]) => unknown;
+    getClients: (...args: unknown[]) => unknown;
+    getAccessList: () => (dispatch: any) => void;
+}
+
+const Dashboard = ({
+    getAccessList,
+    getStats,
+    getStatsConfig,
+    dashboard: { protectionEnabled, processingProtection, protectionDisabledDuration },
+    toggleProtection,
+    stats,
+    access,
+}: DashboardProps) => {
+    const { t } = useTranslation();
+
+    const getAllStats = () => {
+        getAccessList();
+        getStats();
+        getStatsConfig();
+    };
+
+    useEffect(() => {
+        getAllStats();
+    }, []);
+    const getSubtitle = () => {
+        if (!stats.enabled) {
+            return t('stats_disabled_short');
+        }
+
+        const msIn7Days = 604800000;
+
+        if (stats.timeUnits === TIME_UNITS.HOURS && stats.interval === msIn7Days) {
+            return t('for_last_days', { count: msToDays(stats.interval) });
+        }
+
+        return stats.timeUnits === TIME_UNITS.HOURS
+            ? t('for_last_hours', { count: msToHours(stats.interval) })
+            : t('for_last_days', { count: msToDays(stats.interval) });
+    };
+
+    const buttonClass = classNames('btn btn-sm dashboard-protection-button', {
+        'btn-gray': protectionEnabled,
+        'btn-success': !protectionEnabled,
+    });
+
+    const refreshButton = (
+        <button
+            type="button"
+            className="btn btn-icon btn-outline-primary btn-sm"
+            title={t('refresh_btn')}
+            onClick={() => getAllStats()}>
+            <svg className="icons icon12">
+                <use xlinkHref="#refresh" />
+            </svg>
+        </button>
+    );
+
+    const statsProcessing = stats.processingStats || stats.processingGetConfig || access.processing;
+
+    const subtitle = getSubtitle();
+
+    const DISABLE_PROTECTION_ITEMS = [
+        {
+            text: t('disable_for_seconds', { count: msToSeconds(DISABLE_PROTECTION_TIMINGS.HALF_MINUTE) }),
+            disableTime: DISABLE_PROTECTION_TIMINGS.HALF_MINUTE,
+        },
+        {
+            text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.MINUTE) }),
+            disableTime: DISABLE_PROTECTION_TIMINGS.MINUTE,
+        },
+        {
+            text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.TEN_MINUTES) }),
+            disableTime: DISABLE_PROTECTION_TIMINGS.TEN_MINUTES,
+        },
+        {
+            text: t('disable_for_hours', { count: msToHours(DISABLE_PROTECTION_TIMINGS.HOUR) }),
+            disableTime: DISABLE_PROTECTION_TIMINGS.HOUR,
+        },
+        {
+            text: t('disable_until_tomorrow'),
+            disableTime: DISABLE_PROTECTION_TIMINGS.TOMORROW,
+        },
+    ];
+
+    const getDisableProtectionItems = () =>
+        Object.values(DISABLE_PROTECTION_ITEMS).map((item: any, index: any) => (
+            <div
+                key={`disable_timings_${index}`}
+                className="dropdown-item"
+                onClick={() => {
+                    toggleProtection(protectionEnabled, item.disableTime - ONE_SECOND_IN_MS);
+                }}>
+                {item.text}
+            </div>
+        ));
+
+    const getRemaningTimeText = (milliseconds: any) => {
+        if (!milliseconds) {
+            return '';
+        }
+
+        const date = new Date(milliseconds);
+        const hh = date.getUTCHours();
+        const mm = `0${date.getUTCMinutes()}`.slice(-2);
+        const ss = `0${date.getUTCSeconds()}`.slice(-2);
+        const formattedHH = `0${hh}`.slice(-2);
+
+        return hh ? `${formattedHH}:${mm}:${ss}` : `${mm}:${ss}`;
+    };
+
+    const getProtectionBtnText = (status: any) => (status ? t('disable_protection') : t('enable_protection'));
+
+    return (
+        <>
+            <PageTitle title={t('dashboard')} containerClass="page-title--dashboard">
+                <div className="page-title__protection">
+                    <button
+                        type="button"
+                        className={buttonClass}
+                        onClick={() => {
+                            toggleProtection(protectionEnabled);
+                        }}
+                        disabled={processingProtection}>
+                        {protectionDisabledDuration
+                            ? `${t('enable_protection_timer')} ${getRemaningTimeText(protectionDisabledDuration)}`
+                            : getProtectionBtnText(protectionEnabled)}
+                    </button>
+
+                    {protectionEnabled && (
+                        <Dropdown
+                            label=""
+                            baseClassName="dropdown-protection"
+                            icon="arrow-down"
+                            controlClassName="dropdown-protection__toggle"
+                            menuClassName="dropdown-menu dropdown-menu-arrow dropdown-menu--protection">
+                            {getDisableProtectionItems()}
+                        </Dropdown>
+                    )}
+                </div>
+
+                <button type="button" className="btn btn-outline-primary btn-sm" onClick={getAllStats}>
+                    <Trans>refresh_statics</Trans>
+                </button>
+            </PageTitle>
+
+            {statsProcessing && <Loading />}
+
+            {!statsProcessing && (
+                <div className="row row-cards dashboard">
+                    <div className="col-lg-12">
+                        {stats.interval === 0 && (
+                            <div className="alert alert-warning" role="alert">
+                                <Trans
+                                    components={[
+                                        <Link to={`${SETTINGS_URLS.settings}#stats-config`} key="0">
+                                            link
+                                        </Link>,
+                                    ]}>
+                                    stats_disabled
+                                </Trans>
+                            </div>
+                        )}
+
+                        <Statistics
+                            interval={msToDays(stats.interval)}
+                            dnsQueries={stats.dnsQueries}
+                            blockedFiltering={stats.blockedFiltering}
+                            replacedSafebrowsing={stats.replacedSafebrowsing}
+                            replacedParental={stats.replacedParental}
+                            numDnsQueries={stats.numDnsQueries}
+                            numBlockedFiltering={stats.numBlockedFiltering}
+                            numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                            numReplacedParental={stats.numReplacedParental}
+                            refreshButton={refreshButton}
+                        />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <Counters subtitle={subtitle} refreshButton={refreshButton} />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <Clients subtitle={subtitle} refreshButton={refreshButton} />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <QueriedDomains
+                            subtitle={subtitle}
+                            dnsQueries={stats.numDnsQueries}
+                            topQueriedDomains={stats.topQueriedDomains}
+                            refreshButton={refreshButton}
+                        />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <BlockedDomains
+                            subtitle={subtitle}
+                            topBlockedDomains={stats.topBlockedDomains}
+                            blockedFiltering={stats.numBlockedFiltering}
+                            replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                            replacedSafesearch={stats.numReplacedSafesearch}
+                            replacedParental={stats.numReplacedParental}
+                            refreshButton={refreshButton}
+                        />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <UpstreamResponses
+                            subtitle={subtitle}
+                            topUpstreamsResponses={stats.topUpstreamsResponses}
+                            refreshButton={refreshButton}
+                        />
+                    </div>
+
+                    <div className="col-lg-6">
+                        <UpstreamAvgTime
+                            subtitle={subtitle}
+                            topUpstreamsAvgTime={stats.topUpstreamsAvgTime}
+                            refreshButton={refreshButton}
+                        />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default Dashboard;

client/src/components/Filters/Actions.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation, Trans } from 'react-i18next';
-
-const Actions = ({
-    handleAdd, handleRefresh, processingRefreshFilters, whitelist,
-}) => <div className="card-actions">
-    <button
-            className="btn btn-success btn-standard mr-2 btn-large mb-2"
-            type="submit"
-            onClick={handleAdd}
-    >
-        {whitelist ? <Trans>add_allowlist</Trans> : <Trans>add_blocklist</Trans>}
-    </button>
-    <button
-            className="btn btn-primary btn-standard mb-2"
-            type="submit"
-            onClick={handleRefresh}
-            disabled={processingRefreshFilters}
-    >
-        <Trans>check_updates_btn</Trans>
-    </button>
-</div>;
-
-Actions.propTypes = {
-    handleAdd: PropTypes.func.isRequired,
-    handleRefresh: PropTypes.func.isRequired,
-    processingRefreshFilters: PropTypes.bool.isRequired,
-    whitelist: PropTypes.bool,
-};
-
-export default withTranslation()(Actions);

client/src/components/Filters/Actions.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { withTranslation, Trans } from 'react-i18next';
+
+interface ActionsProps {
+    handleAdd: (...args: unknown[]) => unknown;
+    handleRefresh: (...args: unknown[]) => unknown;
+    processingRefreshFilters: boolean;
+    whitelist?: boolean;
+}
+
+const Actions = ({ handleAdd, handleRefresh, processingRefreshFilters, whitelist }: ActionsProps) => (
+    <div className="card-actions">
+        <button className="btn btn-success btn-standard mr-2 btn-large mb-2" type="submit" onClick={handleAdd}>
+            {whitelist ? <Trans>add_allowlist</Trans> : <Trans>add_blocklist</Trans>}
+        </button>
+
+        <button
+            className="btn btn-primary btn-standard mb-2"
+            type="submit"
+            onClick={handleRefresh}
+            disabled={processingRefreshFilters}>
+            <Trans>check_updates_btn</Trans>
+        </button>
+    </div>
+);
+
+export default withTranslation()(Actions);

client/src/components/Filters/Check/Info.tsx

@@ -15,10 +15,12 @@ import {
     getRulesToFilterList,
 } from '../../../helpers/helpers';
 import { BLOCK_ACTIONS, FILTERED, FILTERED_STATUS } from '../../../helpers/constants';
-import { toggleBlocking } from '../../../actions';
 
-const renderBlockingButton = (isFiltered, domain) => {
-    const processingRules = useSelector((state) => state.filtering.processingRules);
+import { toggleBlocking } from '../../../actions';
+import { RootState } from '../../../initialState';
+
+const renderBlockingButton = (isFiltered: any, domain: any) => {
+    const processingRules = useSelector((state: RootState) => state.filtering.processingRules);
     const dispatch = useDispatch();
     const { t } = useTranslation();
 
@@ -28,28 +30,32 @@ const renderBlockingButton = (isFiltered, domain) => {
         await dispatch(toggleBlocking(buttonType, domain));
     };
 
-    const buttonClass = classNames('mt-3 button-action button-action--main button-action--active button-action--small', {
-        'button-action--unblock': isFiltered,
-    });
+    const buttonClass = classNames(
+        'mt-3 button-action button-action--main button-action--active button-action--small',
+        {
+            'button-action--unblock': isFiltered,
+        },
+    );
 
-    return <button type="button"
-                className={buttonClass}
-                onClick={onClick}
-                disabled={processingRules}
-        >
+    return (
+        <button type="button" className={buttonClass} onClick={onClick} disabled={processingRules}>
             {t(buttonType)}
-        </button>;
+        </button>
+    );
 };
 
 const getTitle = () => {
     const { t } = useTranslation();
 
-    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
-    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
-    const rules = useSelector((state) => state.filtering.check.rules, shallowEqual);
-    const reason = useSelector((state) => state.filtering.check.reason);
+    const filters = useSelector((state: RootState) => state.filtering.filters, shallowEqual);
 
-    const getReasonFiltered = (reason) => {
+    const whitelistFilters = useSelector((state: RootState) => state.filtering.whitelistFilters, shallowEqual);
+
+    const rules = useSelector((state: RootState) => state.filtering.check.rules, shallowEqual);
+
+    const reason = useSelector((state: RootState) => state.filtering.check.reason);
+
+    const getReasonFiltered = (reason: any) => {
         const filterKey = reason.replace(FILTERED, '');
         return i18next.t('query_log_filtered', { filter: filterKey });
     };
@@ -71,24 +77,23 @@ const getTitle = () => {
         return REASON_TO_TITLE_MAP[reason];
     }
 
-    return <>
-        <div>{t('check_reason', { reason })}</div>
-        <div>
-            {t('rule_label')}:
-            &nbsp;
-            {ruleAndFilterNames}
-        </div>
-    </>;
+    return (
+        <>
+            <div>{t('check_reason', { reason })}</div>
+
+            <div>
+                {t('rule_label')}: &nbsp;
+                {ruleAndFilterNames}
+            </div>
+        </>
+    );
 };
 
 const Info = () => {
-    const {
-        hostname,
-        reason,
-        service_name,
-        cname,
-        ip_addrs,
-    } = useSelector((state) => state.filtering.check, shallowEqual);
+    const { hostname, reason, service_name, cname, ip_addrs } = useSelector(
+        (state: RootState) => state.filtering.check,
+        shallowEqual,
+    );
     const { t } = useTranslation();
 
     const title = getTitle();
@@ -99,23 +104,29 @@ const Info = () => {
         'logs__row--green': checkWhiteList(reason),
     });
 
-    const onlyFiltered = checkSafeSearch(reason)
-        || checkSafeBrowsing(reason)
-        || checkParental(reason);
+    const onlyFiltered = checkSafeSearch(reason) || checkSafeBrowsing(reason) || checkParental(reason);
 
     const isFiltered = checkFiltered(reason);
 
-    return <div className={className}>
-        <div><strong>{hostname}</strong></div>
-        <div>{title}</div>
-        {!onlyFiltered
-        && <>
-            {service_name && <div>{t('check_service', { service: service_name })}</div>}
-            {cname && <div>{t('check_cname', { cname })}</div>}
-            {ip_addrs && <div>{t('check_ip', { ip: ip_addrs.join(', ') })}</div>}
-            {renderBlockingButton(isFiltered, hostname)}
-        </>}
-    </div>;
+    return (
+        <div className={className}>
+            <div>
+                <strong>{hostname}</strong>
+            </div>
+
+            <div>{title}</div>
+            {!onlyFiltered && (
+                <>
+                    {service_name && <div>{t('check_service', { service: service_name })}</div>}
+
+                    {cname && <div>{t('check_cname', { cname })}</div>}
+
+                    {ip_addrs && <div>{t('check_ip', { ip: ip_addrs.join(', ') })}</div>}
+                    {renderBlockingButton(isFiltered, hostname)}
+                </>
+            )}
+        </div>
+    );
 };
 
 export default Info;

client/src/components/Filters/Check/index.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Field, reduxForm } from 'redux-form';
-import { useSelector } from 'react-redux';
-import Card from '../../ui/Card';
-import { renderInputField } from '../../../helpers/form';
-import Info from './Info';
-import { FORM_NAME } from '../../../helpers/constants';
-
-const Check = (props) => {
-    const {
-        pristine,
-        invalid,
-        handleSubmit,
-    } = props;
-
-    const { t } = useTranslation();
-
-    const processingCheck = useSelector((state) => state.filtering.processingCheck);
-    const hostname = useSelector((state) => state.filtering.check.hostname);
-
-    return <Card
-        title={t('check_title')}
-        subtitle={t('check_desc')}
-    >
-        <form onSubmit={handleSubmit}>
-            <div className="row">
-                <div className="col-12 col-md-6">
-                    <div className="input-group">
-                        <Field
-                            id="name"
-                            name="name"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('form_enter_host')}
-                        />
-                        <span className="input-group-append">
-                            <button
-                                className="btn btn-success btn-standard btn-large"
-                                type="submit"
-                                onClick={handleSubmit}
-                                disabled={pristine || invalid || processingCheck}
-                            >
-                                {t('check')}
-                            </button>
-                        </span>
-                    </div>
-                    {hostname && <>
-                        <hr />
-                        <Info />
-                    </>}
-                </div>
-            </div>
-        </form>
-    </Card>;
-};
-
-Check.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    pristine: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-};
-
-export default reduxForm({ form: FORM_NAME.DOMAIN_CHECK })(Check);

client/src/components/Filters/Check/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Field, reduxForm } from 'redux-form';
+import { useSelector } from 'react-redux';
+
+import Card from '../../ui/Card';
+
+import { renderInputField } from '../../../helpers/form';
+
+import Info from './Info';
+import { FORM_NAME } from '../../../helpers/constants';
+import { RootState } from '../../../initialState';
+
+interface CheckProps {
+    handleSubmit: (...args: unknown[]) => string;
+    pristine: boolean;
+    invalid: boolean;
+}
+
+const Check = (props: CheckProps) => {
+    const { pristine, invalid, handleSubmit } = props;
+
+    const { t } = useTranslation();
+
+    const processingCheck = useSelector((state: RootState) => state.filtering.processingCheck);
+
+    const hostname = useSelector((state: RootState) => state.filtering.check.hostname);
+
+    return (
+        <Card title={t('check_title')} subtitle={t('check_desc')}>
+            <form onSubmit={handleSubmit}>
+                <div className="row">
+                    <div className="col-12 col-md-6">
+                        <div className="input-group">
+                            <Field
+                                id="name"
+                                name="name"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t('form_enter_host')}
+                            />
+
+                            <span className="input-group-append">
+                                <button
+                                    className="btn btn-success btn-standard btn-large"
+                                    type="submit"
+                                    onClick={handleSubmit}
+                                    disabled={pristine || invalid || processingCheck}>
+                                    {t('check')}
+                                </button>
+                            </span>
+                        </div>
+
+                        {hostname && (
+                            <>
+                                <hr />
+
+                                <Info />
+                            </>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Card>
+    );
+};
+
+export default reduxForm({ form: FORM_NAME.DOMAIN_CHECK })(Check);

client/src/components/Filters/CustomRules.tsx

@@ -1,32 +1,46 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
+
 import Card from '../ui/Card';
+
 import PageTitle from '../ui/PageTitle';
+
 import Examples from './Examples';
+
 import Check from './Check';
+
 import { getTextareaCommentsHighlight, syncScroll } from '../../helpers/highlightTextareaComments';
 import { COMMENT_LINE_DEFAULT_TOKEN } from '../../helpers/constants';
 import '../ui/texareaCommentsHighlight.css';
+import { FilteringData } from '../../initialState';
 
-class CustomRules extends Component {
+interface CustomRulesProps {
+    filtering: FilteringData;
+    setRules: (...args: unknown[]) => unknown;
+    checkHost: (...args: unknown[]) => string;
+    getFilteringStatus: (...args: unknown[]) => unknown;
+    handleRulesChange: (...args: unknown[]) => unknown;
+    t: (...args: unknown[]) => string;
+}
+
+class CustomRules extends Component<CustomRulesProps> {
     ref = React.createRef();
 
     componentDidMount() {
         this.props.getFilteringStatus();
     }
 
-    handleChange = (e) => {
+    handleChange = (e: any) => {
         const { value } = e.currentTarget;
         this.handleRulesChange(value);
     };
 
-    handleSubmit = (e) => {
+    handleSubmit = (e: any) => {
         e.preventDefault();
         this.handleRulesSubmit();
     };
 
-    handleRulesChange = (value) => {
+    handleRulesChange = (value: any) => {
         this.props.handleRulesChange({ userRules: value });
     };
 
@@ -34,23 +48,22 @@ class CustomRules extends Component {
         this.props.setRules(this.props.filtering.userRules);
     };
 
-    handleCheck = (values) => {
+    handleCheck = (values: any) => {
         this.props.checkHost(values);
     };
 
-    onScroll = (e) => syncScroll(e, this.ref)
+    onScroll = (e: any) => syncScroll(e, this.ref);
 
     render() {
         const {
             t,
-            filtering: {
-                userRules,
-            },
+            filtering: { userRules },
         } = this.props;
 
         return (
             <>
                 <PageTitle title={t('custom_filtering_rules')} />
+
                 <Card subtitle={t('custom_filter_rules_hint')}>
                     <form onSubmit={this.handleSubmit}>
                         <div className="text-edit-container mb-4">
@@ -60,39 +73,31 @@ class CustomRules extends Component {
                                 onChange={this.handleChange}
                                 onScroll={this.onScroll}
                             />
-                            {getTextareaCommentsHighlight(
-                                this.ref,
-                                userRules,
-                                undefined,
-                                [COMMENT_LINE_DEFAULT_TOKEN, '!'],
-                            )}
+                            {getTextareaCommentsHighlight(this.ref, userRules, [
+                                COMMENT_LINE_DEFAULT_TOKEN,
+                                '!',
+                            ])}
                         </div>
+
                         <div className="card-actions">
                             <button
                                 className="btn btn-success btn-standard btn-large"
                                 type="submit"
-                                onClick={this.handleSubmit}
-                            >
+                                onClick={this.handleSubmit}>
                                 <Trans>apply_btn</Trans>
                             </button>
                         </div>
                     </form>
+
                     <hr />
+
                     <Examples />
                 </Card>
+
                 <Check onSubmit={this.handleCheck} />
             </>
         );
     }
 }
 
-CustomRules.propTypes = {
-    filtering: PropTypes.object.isRequired,
-    setRules: PropTypes.func.isRequired,
-    checkHost: PropTypes.func.isRequired,
-    getFilteringStatus: PropTypes.func.isRequired,
-    handleRulesChange: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(CustomRules);

client/src/components/Filters/DnsAllowlist.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import PageTitle from '../ui/PageTitle';
@@ -9,15 +8,41 @@ import Actions from './Actions';
 import Table from './Table';
 
 import { MODAL_TYPE } from '../../helpers/constants';
+
 import { getCurrentFilter } from '../../helpers/helpers';
 
-class DnsAllowlist extends Component {
+interface DnsAllowlistProps {
+    getFilteringStatus: (...args: unknown[]) => unknown;
+    filtering: {
+        modalType: string;
+        modalFilterUrl: string;
+        isModalOpen: boolean;
+        isFilterAdded: boolean;
+        processingRefreshFilters: boolean;
+        processingRemoveFilter: boolean;
+        processingAddFilter: boolean;
+        processingConfigFilter: boolean;
+        processingFilters: boolean;
+        whitelistFilters: any[];
+    };
+    removeFilter: (...args: unknown[]) => unknown;
+    toggleFilterStatus: (...args: unknown[]) => unknown;
+    addFilter: (...args: unknown[]) => unknown;
+    toggleFilteringModal: (...args: unknown[]) => unknown;
+    handleRulesChange: (...args: unknown[]) => unknown;
+    refreshFilters: (...args: unknown[]) => unknown;
+    editFilter: (...args: unknown[]) => unknown;
+    t: (...args: unknown[]) => string;
+}
+
+class DnsAllowlist extends Component<DnsAllowlistProps> {
     componentDidMount() {
         this.props.getFilteringStatus();
     }
 
-    handleSubmit = (values) => {
+    handleSubmit = (values: any) => {
         const { name, url } = values;
+
         const { filtering } = this.props;
         const whitelist = true;
 
@@ -28,15 +53,17 @@ class DnsAllowlist extends Component {
         }
     };
 
-    handleDelete = (url) => {
+    handleDelete = (url: any) => {
         if (window.confirm(this.props.t('list_confirm_delete'))) {
             const whitelist = true;
+
             this.props.removeFilter(url, whitelist);
         }
     };
 
-    toggleFilter = (url, data) => {
+    toggleFilter = (url: any, data: any) => {
         const whitelist = true;
+
         this.props.toggleFilterStatus(url, data, whitelist);
     };
 
@@ -53,7 +80,6 @@ class DnsAllowlist extends Component {
             t,
             toggleFilteringModal,
             addFilter,
-            toggleFilterStatus,
             filtering: {
                 whitelistFilters,
                 isModalOpen,
@@ -68,19 +94,18 @@ class DnsAllowlist extends Component {
             },
         } = this.props;
         const currentFilterData = getCurrentFilter(modalFilterUrl, whitelistFilters);
-        const loading = processingConfigFilter
-            || processingFilters
-            || processingAddFilter
-            || processingRemoveFilter
-            || processingRefreshFilters;
+        const loading =
+            processingConfigFilter ||
+            processingFilters ||
+            processingAddFilter ||
+            processingRemoveFilter ||
+            processingRefreshFilters;
+
         const whitelist = true;
 
         return (
             <>
-                <PageTitle
-                    title={t('dns_allowlists')}
-                    subtitle={t('dns_allowlists_desc')}
-                />
+                <PageTitle title={t('dns_allowlists')} subtitle={t('dns_allowlists_desc')} />
                 <div className="content">
                     <div className="row">
                         <div className="col-md-12">
@@ -90,11 +115,11 @@ class DnsAllowlist extends Component {
                                     loading={loading}
                                     processingConfigFilter={processingConfigFilter}
                                     toggleFilteringModal={toggleFilteringModal}
-                                    toggleFilterStatus={toggleFilterStatus}
                                     handleDelete={this.handleDelete}
                                     toggleFilter={this.toggleFilter}
                                     whitelist={whitelist}
                                 />
+
                                 <Actions
                                     handleAdd={this.openAddFiltersModal}
                                     handleRefresh={this.handleRefresh}
@@ -105,6 +130,7 @@ class DnsAllowlist extends Component {
                         </div>
                     </div>
                 </div>
+
                 <Modal
                     filters={whitelistFilters}
                     isOpen={isModalOpen}
@@ -123,17 +149,4 @@ class DnsAllowlist extends Component {
     }
 }
 
-DnsAllowlist.propTypes = {
-    getFilteringStatus: PropTypes.func.isRequired,
-    filtering: PropTypes.object.isRequired,
-    removeFilter: PropTypes.func.isRequired,
-    toggleFilterStatus: PropTypes.func.isRequired,
-    addFilter: PropTypes.func.isRequired,
-    toggleFilteringModal: PropTypes.func.isRequired,
-    handleRulesChange: PropTypes.func.isRequired,
-    refreshFilters: PropTypes.func.isRequired,
-    editFilter: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(DnsAllowlist);

client/src/components/Filters/DnsBlocklist.tsx

@@ -1,27 +1,38 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import PageTitle from '../ui/PageTitle';
+
 import Card from '../ui/Card';
 import Modal from './Modal';
 import Actions from './Actions';
-
 import Table from './Table';
 import { MODAL_TYPE } from '../../helpers/constants';
 
-import {
-    getCurrentFilter,
-} from '../../helpers/helpers';
+import { getCurrentFilter } from '../../helpers/helpers';
 
 import filtersCatalog from '../../helpers/filters/filters';
+import { FilteringData } from '../../initialState';
 
-class DnsBlocklist extends Component {
+interface DnsBlocklistProps {
+    getFilteringStatus: (...args: unknown[]) => unknown;
+    filtering: FilteringData;
+    removeFilter: (...args: unknown[]) => unknown;
+    toggleFilterStatus: (...args: unknown[]) => unknown;
+    addFilter: (...args: unknown[]) => unknown;
+    toggleFilteringModal: (...args: unknown[]) => unknown;
+    handleRulesChange: (...args: unknown[]) => unknown;
+    refreshFilters: (...args: unknown[]) => unknown;
+    editFilter: (...args: unknown[]) => unknown;
+    t: (...args: unknown[]) => string;
+}
+
+class DnsBlocklist extends Component<DnsBlocklistProps> {
     componentDidMount() {
         this.props.getFilteringStatus();
     }
 
-    handleSubmit = (values) => {
+    handleSubmit = (values: any) => {
         const { modalFilterUrl, modalType } = this.props.filtering;
 
         switch (modalType) {
@@ -30,23 +41,25 @@ class DnsBlocklist extends Component {
                 break;
             case MODAL_TYPE.ADD_FILTERS: {
                 const { name, url } = values;
+
                 this.props.addFilter(url, name);
                 break;
             }
             case MODAL_TYPE.CHOOSE_FILTERING_LIST: {
-                const changedValues = Object.entries(values)?.reduce((acc, [key, value]) => {
+                const changedValues = Object.entries(values)?.reduce((acc: any, [key, value]) => {
                     if (value && key in filtersCatalog.filters) {
                         acc[key] = value;
                     }
                     return acc;
                 }, {});
 
-                Object.keys(changedValues)
-                    .forEach((fieldName) => {
-                        // filterId is actually in the field name
-                        const { source, name } = filtersCatalog.filters[fieldName];
-                        this.props.addFilter(source, name);
-                    });
+                Object.keys(changedValues).forEach((fieldName) => {
+                    // filterId is actually in the field name
+
+                    const { source, name } = filtersCatalog.filters[fieldName];
+
+                    this.props.addFilter(source, name);
+                });
                 break;
             }
             default:
@@ -54,13 +67,13 @@ class DnsBlocklist extends Component {
         }
     };
 
-    handleDelete = (url) => {
+    handleDelete = (url: any) => {
         if (window.confirm(this.props.t('list_confirm_delete'))) {
             this.props.removeFilter(url);
         }
     };
 
-    toggleFilter = (url, data) => {
+    toggleFilter = (url: any, data: any) => {
         this.props.toggleFilterStatus(url, data);
     };
 
@@ -75,8 +88,11 @@ class DnsBlocklist extends Component {
     render() {
         const {
             t,
+
             toggleFilteringModal,
+
             addFilter,
+
             filtering: {
                 filters,
                 isModalOpen,
@@ -91,18 +107,17 @@ class DnsBlocklist extends Component {
             },
         } = this.props;
         const currentFilterData = getCurrentFilter(modalFilterUrl, filters);
-        const loading = processingConfigFilter
-            || processingFilters
-            || processingAddFilter
-            || processingRemoveFilter
-            || processingRefreshFilters;
+        const loading =
+            processingConfigFilter ||
+            processingFilters ||
+            processingAddFilter ||
+            processingRemoveFilter ||
+            processingRefreshFilters;
 
         return (
             <>
-                <PageTitle
-                    title={t('dns_blocklists')}
-                    subtitle={t('dns_blocklists_desc')}
-                />
+                <PageTitle title={t('dns_blocklists')} subtitle={t('dns_blocklists_desc')} />
+
                 <div className="content">
                     <div className="row">
                         <div className="col-md-12">
@@ -115,6 +130,7 @@ class DnsBlocklist extends Component {
                                     handleDelete={this.handleDelete}
                                     toggleFilter={this.toggleFilter}
                                 />
+
                                 <Actions
                                     handleAdd={this.openSelectTypeModal}
                                     handleRefresh={this.handleRefresh}
@@ -124,6 +140,7 @@ class DnsBlocklist extends Component {
                         </div>
                     </div>
                 </div>
+
                 <Modal
                     filtersCatalog={filtersCatalog}
                     filters={filters}
@@ -142,17 +159,4 @@ class DnsBlocklist extends Component {
     }
 }
 
-DnsBlocklist.propTypes = {
-    getFilteringStatus: PropTypes.func.isRequired,
-    filtering: PropTypes.object.isRequired,
-    removeFilter: PropTypes.func.isRequired,
-    toggleFilterStatus: PropTypes.func.isRequired,
-    addFilter: PropTypes.func.isRequired,
-    toggleFilteringModal: PropTypes.func.isRequired,
-    handleRulesChange: PropTypes.func.isRequired,
-    refreshFilters: PropTypes.func.isRequired,
-    editFilter: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(DnsBlocklist);

client/src/components/Filters/Examples.tsx

@@ -7,31 +7,37 @@ const Examples = () => (
             <Trans>examples_title</Trans>:
             <ol className="leading-loose">
                 <li>
-                    <code>||example.org^</code>:
-                    <Trans>example_meaning_filter_block</Trans>
+                    <code>||example.org^</code>:<Trans>example_meaning_filter_block</Trans>
                 </li>
+
                 <li>
-                    <code> @@||example.org^</code>:
-                    <Trans>example_meaning_filter_whitelist</Trans>
+                    <code> @@||example.org^</code>:<Trans>example_meaning_filter_whitelist</Trans>
                 </li>
+
                 <li>
-                    <code>127.0.0.1 example.org</code>:
-                    <Trans>example_meaning_host_block</Trans>
+                    <code>127.0.0.1 example.org</code>:<Trans>example_meaning_host_block</Trans>
                 </li>
+
                 <li>
-                    <code><Trans>example_comment</Trans></code>:
-                    <Trans>example_comment_meaning</Trans>
+                    <code>
+                        <Trans>example_comment</Trans>
+                    </code>
+                    :<Trans>example_comment_meaning</Trans>
                 </li>
+
                 <li>
-                    <code><Trans>example_comment_hash</Trans></code>:
-                    <Trans>example_comment_meaning</Trans>
+                    <code>
+                        <Trans>example_comment_hash</Trans>
+                    </code>
+                    :<Trans>example_comment_meaning</Trans>
                 </li>
+
                 <li>
-                    <code>/REGEX/</code>:
-                    <Trans>example_regex_meaning</Trans>
+                    <code>/REGEX/</code>:<Trans>example_regex_meaning</Trans>
                 </li>
             </ol>
         </div>
+
         <p className="mt-1">
             <Trans
                 components={[
@@ -39,12 +45,10 @@ const Examples = () => (
                         href="https://link.adtidy.org/forward.html?action=dns_kb_filtering_syntax&from=ui&app=home"
                         target="_blank"
                         rel="noopener noreferrer"
-                        key="0"
-                    >
+                        key="0">
                         link
                     </a>,
-                ]}
-            >
+                ]}>
                 filtering_rules_learn_more
             </Trans>
         </p>

client/src/components/Filters/Form.js

@@ -1,191 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import classNames from 'classnames';
-import { validatePath, validateRequiredValue } from '../../helpers/validators';
-import { CheckboxField, renderInputField } from '../../helpers/form';
-import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
-import filtersCatalog from '../../helpers/filters/filters';
-
-const getIconsData = (homepage, source) => ([
-    {
-        iconName: 'dashboard',
-        href: homepage,
-        className: 'ml-1',
-    },
-    {
-        iconName: 'info',
-        href: source,
-    },
-]);
-
-const renderIcons = (iconsData) => iconsData.map(({
-    iconName,
-    href,
-    className = '',
-}) => <a key={iconName} href={href} target="_blank" rel="noopener noreferrer"
-         className={classNames('d-flex align-items-center', className)}
->
-    <svg className="icon icon--15 mr-1 icon--gray">
-        <use xlinkHref={`#${iconName}`} />
-    </svg>
-</a>);
-
-const renderCheckboxField = (
-    props,
-) => <CheckboxField
-        {...props}
-        input={{
-            ...props.input,
-            checked: props.disabled || props.input.checked,
-        }}
-/>;
-
-renderCheckboxField.propTypes = {
-    // https://redux-form.com/8.3.0/docs/api/field.md/#props
-    input: PropTypes.object.isRequired,
-    disabled: PropTypes.bool.isRequired,
-};
-
-const renderFilters = ({ categories, filters }, selectedSources, t) => Object.keys(categories)
-    .map((categoryId) => {
-        const category = categories[categoryId];
-        const categoryFilters = [];
-        Object.keys(filters)
-            .sort()
-            .forEach((key) => {
-                const filter = filters[key];
-                filter.id = key;
-                if (filter.categoryId === categoryId) {
-                    categoryFilters.push(filter);
-                }
-            });
-
-        return <div key={category.name} className="modal-body__item">
-            <h6 className="font-weight-bold mb-1">{t(category.name)}</h6>
-            <p className="mb-3">{t(category.description)}</p>
-            {categoryFilters.map((filter) => {
-                const { homepage, source, name } = filter;
-
-                const isSelected = Object.prototype.hasOwnProperty.call(selectedSources, source);
-
-                const iconsData = getIconsData(homepage, source);
-
-                return <div key={name} className="d-flex align-items-center pb-1">
-                    <Field
-                        name={filter.id}
-                        type="checkbox"
-                        component={renderCheckboxField}
-                        placeholder={t(name)}
-                        disabled={isSelected}
-                    />
-                    {renderIcons(iconsData)}
-                </div>;
-            })}
-        </div>;
-    });
-
-const Form = (props) => {
-    const {
-        t,
-        closeModal,
-        handleSubmit,
-        processingAddFilter,
-        processingConfigFilter,
-        whitelist,
-        modalType,
-        toggleFilteringModal,
-        selectedSources,
-    } = props;
-
-    const openModal = (modalType, timeout = MODAL_OPEN_TIMEOUT) => {
-        toggleFilteringModal();
-        setTimeout(() => toggleFilteringModal({ type: modalType }), timeout);
-    };
-
-    const openFilteringListModal = () => openModal(MODAL_TYPE.CHOOSE_FILTERING_LIST);
-
-    const openAddFiltersModal = () => openModal(MODAL_TYPE.ADD_FILTERS);
-
-    return <form onSubmit={handleSubmit}>
-        <div className="modal-body modal-body--filters">
-            {modalType === MODAL_TYPE.SELECT_MODAL_TYPE
-            && <div className="d-flex justify-content-around">
-                <button onClick={openFilteringListModal}
-                        className="btn btn-success btn-standard mr-2 btn-large">
-                    {t('choose_from_list')}
-                </button>
-                <button onClick={openAddFiltersModal} className="btn btn-primary btn-standard">
-                    {t('add_custom_list')}
-                </button>
-            </div>}
-            {modalType === MODAL_TYPE.CHOOSE_FILTERING_LIST
-            && renderFilters(filtersCatalog, selectedSources, t)}
-            {modalType !== MODAL_TYPE.CHOOSE_FILTERING_LIST
-            && modalType !== MODAL_TYPE.SELECT_MODAL_TYPE
-            && <>
-                <div className="form__group">
-                    <Field
-                        id="name"
-                        name="name"
-                        type="text"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('enter_name_hint')}
-                        normalizeOnBlur={(data) => data.trim()}
-                    />
-                </div>
-                <div className="form__group">
-                    <Field
-                        id="url"
-                        name="url"
-                        type="text"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('enter_url_or_path_hint')}
-                        validate={[validateRequiredValue, validatePath]}
-                        normalizeOnBlur={(data) => data.trim()}
-                    />
-                </div>
-                <div className="form__description">
-                    {whitelist ? t('enter_valid_allowlist') : t('enter_valid_blocklist')}
-                </div>
-            </>}
-        </div>
-        <div className="modal-footer">
-            <button
-                type="button"
-                className="btn btn-secondary"
-                onClick={closeModal}
-            >
-                {t('cancel_btn')}
-            </button>
-            {modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && <button
-                type="submit"
-                className="btn btn-success"
-                disabled={processingAddFilter || processingConfigFilter}
-            >
-                {t('save_btn')}
-            </button>}
-        </div>
-    </form>;
-};
-
-Form.propTypes = {
-    t: PropTypes.func.isRequired,
-    closeModal: PropTypes.func.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    processingAddFilter: PropTypes.bool.isRequired,
-    processingConfigFilter: PropTypes.bool.isRequired,
-    whitelist: PropTypes.bool,
-    modalType: PropTypes.string.isRequired,
-    toggleFilteringModal: PropTypes.func.isRequired,
-    selectedSources: PropTypes.object,
-};
-
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.FILTER }),
-])(Form);

client/src/components/Filters/Form.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import { Field, reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
+import flow from 'lodash/flow';
+import classNames from 'classnames';
+import { validatePath, validateRequiredValue } from '../../helpers/validators';
+
+import { CheckboxField, renderInputField } from '../../helpers/form';
+import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
+import filtersCatalog from '../../helpers/filters/filters';
+
+const getIconsData = (homepage: any, source: any) => [
+    {
+        iconName: 'dashboard',
+        href: homepage,
+        className: 'ml-1',
+    },
+    {
+        iconName: 'info',
+        href: source,
+    },
+];
+
+const renderIcons = (iconsData: any) =>
+    iconsData.map(({ iconName, href, className = '' }: any) => (
+        <a
+            key={iconName}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classNames('d-flex align-items-center', className)}>
+            <svg className="icon icon--15 mr-1 icon--gray">
+                <use xlinkHref={`#${iconName}`} />
+            </svg>
+        </a>
+    ));
+
+interface renderCheckboxFieldProps {
+    // https://redux-form.com/8.3.0/docs/api/field.md/#props
+    input: {
+        name: string;
+        value: string;
+        checked: boolean;
+        onChange: (...args: unknown[]) => unknown;
+    };
+    disabled: boolean;
+}
+
+const renderCheckboxField = (props: renderCheckboxFieldProps) => (
+    <CheckboxField
+        {...props}
+        meta={{ touched: false, error: null }}
+        input={{
+            ...props.input,
+            checked: props.disabled || props.input.checked,
+        }}
+    />
+);
+
+const renderFilters = ({ categories, filters }: any, selectedSources: any, t: any) =>
+    Object.keys(categories).map((categoryId) => {
+        const category = categories[categoryId];
+        const categoryFilters: any = [];
+        Object.keys(filters)
+            .sort()
+            .forEach((key) => {
+                const filter = filters[key];
+                filter.id = key;
+                if (filter.categoryId === categoryId) {
+                    categoryFilters.push(filter);
+                }
+            });
+
+        return (
+            <div key={category.name} className="modal-body__item">
+                <h6 className="font-weight-bold mb-1">{t(category.name)}</h6>
+
+                <p className="mb-3">{t(category.description)}</p>
+
+                {categoryFilters.map((filter) => {
+                    const { homepage, source, name } = filter;
+
+                    const isSelected = Object.prototype.hasOwnProperty.call(selectedSources, source);
+
+                    const iconsData = getIconsData(homepage, source);
+
+                    return (
+                        <div key={name} className="d-flex align-items-center pb-1">
+                            <Field
+                                name={filter.id}
+                                type="checkbox"
+                                component={renderCheckboxField}
+                                placeholder={t(name)}
+                                disabled={isSelected}
+                            />
+                            {renderIcons(iconsData)}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    });
+
+interface FormProps {
+    t: (...args: unknown[]) => string;
+    closeModal: (...args: unknown[]) => unknown;
+    handleSubmit: (...args: unknown[]) => string;
+    processingAddFilter: boolean;
+    processingConfigFilter: boolean;
+    whitelist?: boolean;
+    modalType: string;
+    toggleFilteringModal: (...args: unknown[]) => unknown;
+    selectedSources?: object;
+}
+
+const Form = (props: FormProps) => {
+    const {
+        t,
+        closeModal,
+        handleSubmit,
+        processingAddFilter,
+        processingConfigFilter,
+        whitelist,
+        modalType,
+        toggleFilteringModal,
+        selectedSources,
+    } = props;
+
+    const openModal = (modalType: any, timeout = MODAL_OPEN_TIMEOUT) => {
+        toggleFilteringModal();
+        setTimeout(() => toggleFilteringModal({ type: modalType }), timeout);
+    };
+
+    const openFilteringListModal = () => openModal(MODAL_TYPE.CHOOSE_FILTERING_LIST);
+
+    const openAddFiltersModal = () => openModal(MODAL_TYPE.ADD_FILTERS);
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="modal-body modal-body--filters">
+                {modalType === MODAL_TYPE.SELECT_MODAL_TYPE && (
+                    <div className="d-flex justify-content-around">
+                        <button
+                            onClick={openFilteringListModal}
+                            className="btn btn-success btn-standard mr-2 btn-large">
+                            {t('choose_from_list')}
+                        </button>
+
+                        <button onClick={openAddFiltersModal} className="btn btn-primary btn-standard">
+                            {t('add_custom_list')}
+                        </button>
+                    </div>
+                )}
+                {modalType === MODAL_TYPE.CHOOSE_FILTERING_LIST && renderFilters(filtersCatalog, selectedSources, t)}
+                {modalType !== MODAL_TYPE.CHOOSE_FILTERING_LIST && modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && (
+                    <>
+                        <div className="form__group">
+                            <Field
+                                id="name"
+                                name="name"
+                                type="text"
+                                component={renderInputField}
+                                className="form-control"
+                                placeholder={t('enter_name_hint')}
+                                normalizeOnBlur={(data: any) => data.trim()}
+                            />
+                        </div>
+
+                        <div className="form__group">
+                            <Field
+                                id="url"
+                                name="url"
+                                type="text"
+                                component={renderInputField}
+                                className="form-control"
+                                placeholder={t('enter_url_or_path_hint')}
+                                validate={[validateRequiredValue, validatePath]}
+                                normalizeOnBlur={(data: any) => data.trim()}
+                            />
+                        </div>
+
+                        <div className="form__description">
+                            {whitelist ? t('enter_valid_allowlist') : t('enter_valid_blocklist')}
+                        </div>
+                    </>
+                )}
+            </div>
+
+            <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={closeModal}>
+                    {t('cancel_btn')}
+                </button>
+
+                {modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && (
+                    <button
+                        type="submit"
+                        className="btn btn-success"
+                        disabled={processingAddFilter || processingConfigFilter}>
+                        {t('save_btn')}
+                    </button>
+                )}
+            </div>
+        </form>
+    );
+};
+
+export default flow([withTranslation(), reduxForm({ form: FORM_NAME.FILTER })])(Form);

client/src/components/Filters/Modal.tsx

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+
 import ReactModal from 'react-modal';
 import { withTranslation } from 'react-i18next';
 
 import { MODAL_TYPE } from '../../helpers/constants';
+
 import Form from './Form';
 import '../ui/Modal.css';
+
 import { getMap } from '../../helpers/helpers';
 
 ReactModal.setAppElement('#root');
@@ -25,7 +27,7 @@ const MODAL_TYPE_TO_TITLE_TYPE_MAP = {
  * @returns {'new_allowlist' | 'edit_allowlist' | 'choose_allowlist' |
  *           'new_blocklist' | 'edit_blocklist' | 'choose_blocklist' | null}
  */
-const getTitle = (modalType, whitelist) => {
+const getTitle = (modalType: any, whitelist: any) => {
     const titleType = MODAL_TYPE_TO_TITLE_TYPE_MAP[modalType];
     if (!titleType) {
         return null;
@@ -33,19 +35,39 @@ const getTitle = (modalType, whitelist) => {
     return `${titleType}_${whitelist ? 'allowlist' : 'blocklist'}`;
 };
 
-const getSelectedValues = (filters, catalogSourcesToIdMap) => filters.reduce((acc, { url }) => {
-    if (Object.prototype.hasOwnProperty.call(catalogSourcesToIdMap, url)) {
-        const fieldId = `filter${catalogSourcesToIdMap[url]}`;
-        acc.selectedFilterIds[fieldId] = true;
-        acc.selectedSources[url] = true;
-    }
-    return acc;
-}, {
-    selectedFilterIds: {},
-    selectedSources: {},
-});
+const getSelectedValues = (filters: any, catalogSourcesToIdMap: any) =>
+    filters.reduce(
+        (acc: any, { url }: any) => {
+            if (Object.prototype.hasOwnProperty.call(catalogSourcesToIdMap, url)) {
+                const fieldId = `filter${catalogSourcesToIdMap[url]}`;
+                acc.selectedFilterIds[fieldId] = true;
+                acc.selectedSources[url] = true;
+            }
+            return acc;
+        },
+        {
+            selectedFilterIds: {},
+            selectedSources: {},
+        },
+    );
 
-class Modal extends Component {
+interface ModalProps {
+    toggleFilteringModal: (...args: unknown[]) => unknown;
+    isOpen: boolean;
+    addFilter: (...args: unknown[]) => unknown;
+    isFilterAdded: boolean;
+    processingAddFilter: boolean;
+    processingConfigFilter: boolean;
+    handleSubmit: (values: any) => void;
+    modalType: string;
+    currentFilterData: object;
+    t: (...args: unknown[]) => string;
+    whitelist?: boolean;
+    filters: unknown[];
+    filtersCatalog?: any;
+}
+
+class Modal extends Component<ModalProps> {
     closeModal = () => {
         this.props.toggleFilteringModal();
     };
@@ -53,15 +75,25 @@ class Modal extends Component {
     render() {
         const {
             isOpen,
+
             processingAddFilter,
+
             processingConfigFilter,
+
             handleSubmit,
+
             modalType,
+
             currentFilterData,
+
             whitelist,
+
             toggleFilteringModal,
+
             filters,
+
             t,
+
             filtersCatalog,
         } = this.props;
 
@@ -90,15 +122,16 @@ class Modal extends Component {
                 className="Modal__Bootstrap modal-dialog modal-dialog-centered"
                 closeTimeoutMS={0}
                 isOpen={isOpen}
-                onRequestClose={this.closeModal}
-            >
+                onRequestClose={this.closeModal}>
                 <div className="modal-content">
                     <div className="modal-header">
                         {title && <h4 className="modal-title">{title}</h4>}
+
                         <button type="button" className="close" onClick={this.closeModal}>
                             <span className="sr-only">Close</span>
                         </button>
                     </div>
+
                     <Form
                         selectedSources={selectedSources}
                         initialValues={initialValues}
@@ -116,20 +149,4 @@ class Modal extends Component {
     }
 }
 
-Modal.propTypes = {
-    toggleFilteringModal: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    addFilter: PropTypes.func.isRequired,
-    isFilterAdded: PropTypes.bool.isRequired,
-    processingAddFilter: PropTypes.bool.isRequired,
-    processingConfigFilter: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    modalType: PropTypes.string.isRequired,
-    currentFilterData: PropTypes.object.isRequired,
-    t: PropTypes.func.isRequired,
-    whitelist: PropTypes.bool,
-    filters: PropTypes.array.isRequired,
-    filtersCatalog: PropTypes.object,
-};
-
 export default withTranslation()(Modal);

client/src/components/Filters/Rewrites/Form.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
+
 import { renderInputField } from '../../../helpers/form';
 import { validateAnswer, validateDomain, validateRequiredValue } from '../../../helpers/validators';
 import { FORM_NAME } from '../../../helpers/constants';
 
-const Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        pristine,
-        submitting,
-        toggleRewritesModal,
-        processingAdd,
-    } = props;
+interface FormProps {
+    pristine: boolean;
+    handleSubmit: (...args: unknown[]) => string;
+    reset: (...args: unknown[]) => string;
+    toggleRewritesModal: (...args: unknown[]) => unknown;
+    submitting: boolean;
+    processingAdd: boolean;
+    t: (...args: unknown[]) => string;
+    initialValues?: object;
+}
+
+const Form = (props: FormProps) => {
+    const { t, handleSubmit, reset, pristine, submitting, toggleRewritesModal, processingAdd } = props;
 
     return (
         <form onSubmit={handleSubmit}>
@@ -35,22 +39,19 @@ const Form = (props) => {
                         validate={[validateRequiredValue, validateDomain]}
                     />
                 </div>
-
                 <Trans>examples_title</Trans>:
                 <ol className="leading-loose">
                     <li>
                         <code>example.org</code> – <Trans>example_rewrite_domain</Trans>
                     </li>
+
                     <li>
                         <code>*.example.org</code> –&nbsp;
                         <span>
-                            <Trans components={[<code key="0">text</code>]}>
-                                example_rewrite_wildcard
-                            </Trans>
+                            <Trans components={[<code key="0">text</code>]}>example_rewrite_wildcard</Trans>
                         </span>
                     </li>
                 </ol>
-
                 <div className="form__group">
                     <Field
                         id="answer"
@@ -63,14 +64,15 @@ const Form = (props) => {
                     />
                 </div>
             </div>
-            <ul>{['rewrite_ip_address',
-                'rewrite_domain_name',
-                'rewrite_A',
-                'rewrite_AAAA']
-                .map((str) => <li key={str}>
-                    <Trans components={[<code key="0">text</code>]}>{str}</Trans>
-                </li>)
-            }</ul>
+
+            <ul>
+                {['rewrite_ip_address', 'rewrite_domain_name', 'rewrite_A', 'rewrite_AAAA'].map((str) => (
+                    <li key={str}>
+                        <Trans components={[<code key="0">text</code>]}>{str}</Trans>
+                    </li>
+                ))}
+            </ul>
+
             <div className="modal-footer">
                 <div className="btn-list">
                     <button
@@ -80,15 +82,14 @@ const Form = (props) => {
                         onClick={() => {
                             reset();
                             toggleRewritesModal();
-                        }}
-                    >
+                        }}>
                         <Trans>cancel_btn</Trans>
                     </button>
+
                     <button
                         type="submit"
                         className="btn btn-success btn-standard"
-                        disabled={submitting || pristine || processingAdd}
-                    >
+                        disabled={submitting || pristine || processingAdd}>
                         <Trans>save_btn</Trans>
                     </button>
                 </div>
@@ -97,17 +98,6 @@ const Form = (props) => {
     );
 };
 
-Form.propTypes = {
-    pristine: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    toggleRewritesModal: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    processingAdd: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    initialValues: PropTypes.object,
-};
-
 export default flow([
     withTranslation(),
     reduxForm({

client/src/components/Filters/Rewrites/Modal.tsx

@@ -1,12 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
+
 import ReactModal from 'react-modal';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
+
 import Form from './Form';
 
-const Modal = (props) => {
+interface ModalProps {
+    isModalOpen: boolean;
+    handleSubmit: (values: any) => void;
+    toggleRewritesModal: (...args: unknown[]) => unknown;
+    processingAdd: boolean;
+    processingDelete: boolean;
+    modalType: string;
+    currentRewrite?: object;
+}
+
+const Modal = (props: ModalProps) => {
     const {
         isModalOpen,
         handleSubmit,
@@ -22,8 +33,7 @@ const Modal = (props) => {
             className="Modal__Bootstrap modal-dialog modal-dialog-centered"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={() => toggleRewritesModal()}
-        >
+            onRequestClose={() => toggleRewritesModal()}>
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
@@ -33,10 +43,12 @@ const Modal = (props) => {
                             <Trans>rewrite_add</Trans>
                         )}
                     </h4>
+
                     <button type="button" className="close" onClick={() => toggleRewritesModal()}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
+
                 <Form
                     initialValues={{ ...currentRewrite }}
                     onSubmit={handleSubmit}
@@ -49,14 +61,4 @@ const Modal = (props) => {
     );
 };
 
-Modal.propTypes = {
-    isModalOpen: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    toggleRewritesModal: PropTypes.func.isRequired,
-    processingAdd: PropTypes.bool.isRequired,
-    processingDelete: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    currentRewrite: PropTypes.object,
-};
-
 export default withTranslation()(Modal);

client/src/components/Filters/Rewrites/Table.tsx

@@ -1,13 +1,26 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 import { withTranslation } from 'react-i18next';
+
 import { sortIp } from '../../../helpers/helpers';
 import { MODAL_TYPE, TABLES_MIN_ROWS } from '../../../helpers/constants';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
 
-class Table extends Component {
-    cellWrap = ({ value }) => (
+interface TableProps {
+    t: (...args: unknown[]) => string;
+    list: unknown[];
+    processing: boolean;
+    processingAdd: boolean;
+    processingDelete: boolean;
+    processingUpdate: boolean;
+    handleDelete: (...args: unknown[]) => unknown;
+    toggleRewritesModal: (...args: unknown[]) => unknown;
+}
+
+class Table extends Component<TableProps> {
+    cellWrap = ({ value }: any) => (
         <div className="logs__row o-hidden">
             <span className="logs__text" title={value}>
                 {value}
@@ -33,7 +46,7 @@ class Table extends Component {
             maxWidth: 100,
             sortable: false,
             resizable: false,
-            Cell: (value) => {
+            Cell: (value: any) => {
                 const currentRewrite = {
                     answer: value.row.answer,
                     domain: value.row.domain,
@@ -51,8 +64,7 @@ class Table extends Component {
                                 });
                             }}
                             disabled={this.props.processingUpdate}
-                            title={this.props.t('edit_table_action')}
-                        >
+                            title={this.props.t('edit_table_action')}>
                             <svg className="icons icon12">
                                 <use xlinkHref="#edit" />
                             </svg>
@@ -62,8 +74,7 @@ class Table extends Component {
                             type="button"
                             className="btn btn-icon btn-outline-secondary btn-sm"
                             onClick={() => this.props.handleDelete(currentRewrite)}
-                            title={this.props.t('delete_table_action')}
-                        >
+                            title={this.props.t('delete_table_action')}>
                             <svg className="icons">
                                 <use xlinkHref="#delete" />
                             </svg>
@@ -75,9 +86,7 @@ class Table extends Component {
     ];
 
     render() {
-        const {
-            t, list, processing, processingAdd, processingDelete,
-        } = this.props;
+        const { t, list, processing, processingAdd, processingDelete } = this.props;
 
         return (
             <ReactTable
@@ -87,7 +96,9 @@ class Table extends Component {
                 className="-striped -highlight card-table-overflow"
                 showPagination
                 defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE) || 10}
-                onPageSizeChange={(size) => LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE, size)}
+                onPageSizeChange={(size: any) =>
+                    LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE, size)
+                }
                 minRows={TABLES_MIN_ROWS}
                 ofText="/"
                 previousText={t('previous_btn')}
@@ -101,15 +112,4 @@ class Table extends Component {
     }
 }
 
-Table.propTypes = {
-    t: PropTypes.func.isRequired,
-    list: PropTypes.array.isRequired,
-    processing: PropTypes.bool.isRequired,
-    processingAdd: PropTypes.bool.isRequired,
-    processingDelete: PropTypes.bool.isRequired,
-    processingUpdate: PropTypes.bool.isRequired,
-    handleDelete: PropTypes.func.isRequired,
-    toggleRewritesModal: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(Table);

client/src/components/Filters/Rewrites/index.tsx

@@ -1,26 +1,39 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
 
 import Table from './Table';
+
 import Modal from './Modal';
+
 import Card from '../../ui/Card';
+
 import PageTitle from '../../ui/PageTitle';
 import { MODAL_TYPE } from '../../../helpers/constants';
+import { RewritesData } from '../../../initialState';
 
-class Rewrites extends Component {
+interface RewritesProps {
+    t: (...args: unknown[]) => string;
+    getRewritesList: () => (dispatch: any) => void;
+    toggleRewritesModal: (...args: unknown[]) => unknown;
+    addRewrite: (...args: unknown[]) => unknown;
+    deleteRewrite: (...args: unknown[]) => unknown;
+    updateRewrite: (...args: unknown[]) => unknown;
+    rewrites: RewritesData;
+}
+
+class Rewrites extends Component<RewritesProps> {
     componentDidMount() {
         this.props.getRewritesList();
     }
 
-    handleDelete = (values) => {
+    handleDelete = (values: any) => {
         // eslint-disable-next-line no-alert
         if (window.confirm(this.props.t('rewrite_confirm_delete', { key: values.domain }))) {
             this.props.deleteRewrite(values);
         }
     };
 
-    handleSubmit = (values) => {
+    handleSubmit = (values: any) => {
         const { modalType, currentRewrite } = this.props.rewrites;
 
         if (modalType === MODAL_TYPE.EDIT_REWRITE && currentRewrite) {
@@ -36,7 +49,9 @@ class Rewrites extends Component {
     render() {
         const {
             t,
+
             rewrites,
+
             toggleRewritesModal,
         } = this.props;
 
@@ -53,14 +68,9 @@ class Rewrites extends Component {
 
         return (
             <Fragment>
-                <PageTitle
-                    title={t('dns_rewrites')}
-                    subtitle={t('rewrite_desc')}
-                />
-                <Card
-                    id="rewrites"
-                    bodyType="card-body box-body--settings"
-                >
+                <PageTitle title={t('dns_rewrites')} subtitle={t('rewrite_desc')} />
+
+                <Card id="rewrites" bodyType="card-body box-body--settings">
                     <Fragment>
                         <Table
                             list={list}
@@ -76,8 +86,7 @@ class Rewrites extends Component {
                             type="button"
                             className="btn btn-success btn-standard mt-3"
                             onClick={() => toggleRewritesModal({ type: MODAL_TYPE.ADD_REWRITE })}
-                            disabled={processingAdd}
-                        >
+                            disabled={processingAdd}>
                             <Trans>rewrite_add</Trans>
                         </button>
 
@@ -88,7 +97,6 @@ class Rewrites extends Component {
                             handleSubmit={this.handleSubmit}
                             processingAdd={processingAdd}
                             processingDelete={processingDelete}
-                            processingUpdate={processingUpdate}
                             currentRewrite={currentRewrite}
                         />
                     </Fragment>
@@ -98,14 +106,4 @@ class Rewrites extends Component {
     }
 }
 
-Rewrites.propTypes = {
-    t: PropTypes.func.isRequired,
-    getRewritesList: PropTypes.func.isRequired,
-    toggleRewritesModal: PropTypes.func.isRequired,
-    addRewrite: PropTypes.func.isRequired,
-    deleteRewrite: PropTypes.func.isRequired,
-    updateRewrite: PropTypes.func.isRequired,
-    rewrites: PropTypes.object.isRequired,
-};
-
 export default withTranslation()(Rewrites);

client/src/components/Filters/Services/Form.tsx

@@ -1,23 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { toggleAllServices } from '../../../helpers/helpers';
+
 import { renderServiceField } from '../../../helpers/form';
 import { FORM_NAME } from '../../../helpers/constants';
 
-const Form = (props) => {
-    const {
-        blockedServices,
-        handleSubmit,
-        change,
-        pristine,
-        submitting,
-        processing,
-        processingSet,
-    } = props;
+interface FormProps {
+    blockedServices: unknown[];
+    pristine: boolean;
+    handleSubmit: (...args: unknown[]) => string;
+    change: (...args: unknown[]) => unknown;
+    submitting: boolean;
+    processing: boolean;
+    processingSet: boolean;
+    t: (...args: unknown[]) => string;
+}
+
+const Form = (props: FormProps) => {
+    const { blockedServices, handleSubmit, change, pristine, submitting, processing, processingSet } = props;
 
     return (
         <form onSubmit={handleSubmit}>
@@ -28,24 +32,24 @@ const Form = (props) => {
                             type="button"
                             className="btn btn-secondary btn-block"
                             disabled={processing || processingSet}
-                            onClick={() => toggleAllServices(blockedServices, change, true)}
-                        >
+                            onClick={() => toggleAllServices(blockedServices, change, true)}>
                             <Trans>block_all</Trans>
                         </button>
                     </div>
+
                     <div className="col-6">
                         <button
                             type="button"
                             className="btn btn-secondary btn-block"
                             disabled={processing || processingSet}
-                            onClick={() => toggleAllServices(blockedServices, change, false)}
-                        >
+                            onClick={() => toggleAllServices(blockedServices, change, false)}>
                             <Trans>unblock_all</Trans>
                         </button>
                     </div>
                 </div>
+
                 <div className="services">
-                    {blockedServices.map((service) => (
+                    {blockedServices.map((service: any) => (
                         <Field
                             key={service.id}
                             icon={service.icon_svg}
@@ -63,8 +67,7 @@ const Form = (props) => {
                 <button
                     type="submit"
                     className="btn btn-success btn-standard btn-large"
-                    disabled={submitting || pristine || processing || processingSet}
-                >
+                    disabled={submitting || pristine || processing || processingSet}>
                     <Trans>save_btn</Trans>
                 </button>
             </div>
@@ -72,17 +75,6 @@ const Form = (props) => {
     );
 };
 
-Form.propTypes = {
-    blockedServices: PropTypes.array.isRequired,
-    pristine: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    change: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    processing: PropTypes.bool.isRequired,
-    processingSet: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default flow([
     withTranslation(),
     reduxForm({

client/src/components/Filters/Services/ScheduleForm/Modal.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+
 import ReactModal from 'react-modal';
 
 import { Timezone } from './Timezone';
+
 import { TimeSelect } from './TimeSelect';
+
 import { TimePeriod } from './TimePeriod';
 import { getFullDayName, getShortDayName } from './helpers';
 import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
@@ -14,21 +16,26 @@ export const DAYS_OF_WEEK = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 const INITIAL_START_TIME_MS = 0;
 const INITIAL_END_TIME_MS = 86340000;
 
-export const Modal = ({
-    isOpen,
-    currentDay,
-    schedule,
-    onClose,
-    onSubmit,
-}) => {
+interface ModalProps {
+    schedule: {
+        time_zone: string;
+    };
+    currentDay?: string;
+    isOpen: boolean;
+    onClose: (...args: unknown[]) => unknown;
+    onSubmit: (values: any) => void;
+}
+
+export const Modal = ({ isOpen, currentDay, schedule, onClose, onSubmit }: ModalProps) => {
     const [t] = useTranslation();
 
-    const intialTimezone = schedule.time_zone === LOCAL_TIMEZONE_VALUE
-        ? Intl.DateTimeFormat().resolvedOptions().timeZone
-        : schedule.time_zone;
+    const intialTimezone =
+        schedule.time_zone === LOCAL_TIMEZONE_VALUE
+            ? Intl.DateTimeFormat().resolvedOptions().timeZone
+            : schedule.time_zone;
 
     const [timezone, setTimezone] = useState(intialTimezone);
-    const [days, setDays] = useState(new Set());
+    const [days, setDays] = useState<Set<string>>(new Set());
 
     const [startTime, setStartTime] = useState(INITIAL_START_TIME_MS);
     const [endTime, setEndTime] = useState(INITIAL_END_TIME_MS);
@@ -53,7 +60,7 @@ export const Modal = ({
         }
     }, [startTime, endTime]);
 
-    const addDays = (day) => {
+    const addDays = (day: any) => {
         const newDays = new Set(days);
 
         if (newDays.has(day)) {
@@ -65,11 +72,11 @@ export const Modal = ({
         setDays(newDays);
     };
 
-    const activeDay = (day) => {
+    const activeDay = (day: any) => {
         return days.has(day);
     };
 
-    const onFormSubmit = (e) => {
+    const onFormSubmit = (e: any) => {
         e.preventDefault();
 
         const newSchedule = schedule;
@@ -93,23 +100,19 @@ export const Modal = ({
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--schedule"
             closeTimeoutMS={0}
             isOpen={isOpen}
-            onRequestClose={onClose}
-        >
+            onRequestClose={onClose}>
             <div className="modal-content">
                 <div className="modal-header">
-                    <h4 className="modal-title">
-                        {currentDay ? t('schedule_edit') : t('schedule_new')}
-                    </h4>
+                    <h4 className="modal-title">{currentDay ? t('schedule_edit') : t('schedule_new')}</h4>
+
                     <button type="button" className="close" onClick={onClose}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
+
                 <form onSubmit={onFormSubmit}>
                     <div className="modal-body">
-                        <Timezone
-                            timezone={timezone}
-                            setTimezone={setTimezone}
-                        />
+                        <Timezone timezone={timezone} setTimezone={setTimezone} />
 
                         <div className="schedule__days">
                             {DAYS_OF_WEEK.map((day) => (
@@ -118,8 +121,7 @@ export const Modal = ({
                                     key={day}
                                     className="btn schedule__button-day"
                                     data-active={activeDay(day)}
-                                    onClick={() => addDays(day)}
-                                >
+                                    onClick={() => addDays(day)}>
                                     {getShortDayName(t, day)}
                                 </button>
                             ))}
@@ -127,69 +129,52 @@ export const Modal = ({
 
                         <div className="schedule__time-wrap">
                             <div className="schedule__time-row">
-                                <TimeSelect
-                                    value={startTime}
-                                    onChange={(v) => setStartTime(v)}
-                                />
+                                <TimeSelect value={startTime} onChange={(v) => setStartTime(v)} />
 
-                                <TimeSelect
-                                    value={endTime}
-                                    onChange={(v) => setEndTime(v)}
-                                />
+                                <TimeSelect value={endTime} onChange={(v) => setEndTime(v)} />
                             </div>
 
-                            {wrongPeriod && (
-                                <div className="schedule__error">
-                                    {t('schedule_invalid_select')}
-                                </div>
-                            )}
+                            {wrongPeriod && <div className="schedule__error">{t('schedule_invalid_select')}</div>}
                         </div>
 
                         <div className="schedule__info">
-                            <div className="schedule__info-title">
-                                {t('schedule_modal_time_off')}
-                            </div>
+                            <div className="schedule__info-title">{t('schedule_modal_time_off')}</div>
+
                             <div className="schedule__info-row">
                                 <svg className="icons schedule__info-icon">
                                     <use xlinkHref="#calendar" />
                                 </svg>
                                 {days.size ? (
-                                    Array.from(days).map((day) => getFullDayName(t, day)).join(', ')
+                                    Array.from(days)
+                                        .map((day) => getFullDayName(t, day))
+                                        .join(', ')
                                 ) : (
-                                    <span>
-                                        —
-                                    </span>
+                                    <span>—</span>
                                 )}
                             </div>
+
                             <div className="schedule__info-row">
                                 <svg className="icons schedule__info-icon">
                                     <use xlinkHref="#watch" />
                                 </svg>
                                 {wrongPeriod ? (
-                                    <span>
-                                        —
-                                    </span>
+                                    <span>—</span>
                                 ) : (
-                                    <TimePeriod
-                                        startTimeMs={startTime}
-                                        endTimeMs={endTime}
-                                    />
+                                    <TimePeriod startTimeMs={startTime} endTimeMs={endTime} />
                                 )}
                             </div>
                         </div>
 
-                        <div className="schedule__notice">
-                            {t('schedule_modal_description')}
-                        </div>
+                        <div className="schedule__notice">{t('schedule_modal_description')}</div>
                     </div>
+
                     <div className="modal-footer">
                         <div className="btn-list">
                             <button
                                 type="button"
                                 className="btn btn-success btn-standard"
                                 disabled={days.size === 0 || wrongPeriod}
-                                onClick={onFormSubmit}
-                            >
+                                onClick={onFormSubmit}>
                                 {currentDay ? t('schedule_save') : t('schedule_add')}
                             </button>
                         </div>
@@ -199,11 +184,3 @@ export const Modal = ({
         </ReactModal>
     );
 };
-
-Modal.propTypes = {
-    schedule: PropTypes.object.isRequired,
-    currentDay: PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-};

client/src/components/Filters/Services/ScheduleForm/TimePeriod.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { getTimeFromMs } from './helpers';
-
-export const TimePeriod = ({
-    startTimeMs,
-    endTimeMs,
-}) => {
-    const startTime = getTimeFromMs(startTimeMs);
-    const endTime = getTimeFromMs(endTimeMs);
-
-    return (
-        <div className="schedule__time">
-            <time>{startTime.hours}:{startTime.minutes}</time>
-            &nbsp;–&nbsp;
-            <time>{endTime.hours}:{endTime.minutes}</time>
-        </div>
-    );
-};
-
-TimePeriod.propTypes = {
-    startTimeMs: PropTypes.number.isRequired,
-    endTimeMs: PropTypes.number.isRequired,
-};

client/src/components/Filters/Services/ScheduleForm/TimePeriod.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { getTimeFromMs } from './helpers';
+
+interface TimePeriodProps {
+    startTimeMs: number;
+    endTimeMs: number;
+}
+
+export const TimePeriod = ({ startTimeMs, endTimeMs }: TimePeriodProps) => {
+    const startTime = getTimeFromMs(startTimeMs);
+    const endTime = getTimeFromMs(endTimeMs);
+
+    return (
+        <div className="schedule__time">
+            <time>
+                {startTime.hours}:{startTime.minutes}
+            </time>
+            &nbsp;–&nbsp;
+            <time>
+                {endTime.hours}:{endTime.minutes}
+            </time>
+        </div>
+    );
+};

client/src/components/Filters/Services/ScheduleForm/TimeSelect.tsx

@@ -1,37 +1,35 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 
 import { getTimeFromMs, convertTimeToMs } from './helpers';
 
-export const TimeSelect = ({
-    value,
-    onChange,
-}) => {
+interface TimeSelectProps {
+    value: number;
+    onChange: (time: number) => void;
+}
+
+export const TimeSelect = ({ value, onChange }: TimeSelectProps) => {
     const { hours: initialHours, minutes: initialMinutes } = getTimeFromMs(value);
 
     const [hours, setHours] = useState(initialHours);
     const [minutes, setMinutes] = useState(initialMinutes);
 
     const hourOptions = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
+
     const minuteOptions = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
 
-    const onHourChange = (event) => {
+    const onHourChange = (event: any) => {
         setHours(event.target.value);
         onChange(convertTimeToMs(event.target.value, minutes));
     };
 
-    const onMinuteChange = (event) => {
+    const onMinuteChange = (event: any) => {
         setMinutes(event.target.value);
         onChange(convertTimeToMs(hours, event.target.value));
     };
 
     return (
         <div className="schedule__time-select">
-            <select
-                value={hours}
-                onChange={onHourChange}
-                className="form-control custom-select"
-            >
+            <select value={hours} onChange={onHourChange} className="form-control custom-select">
                 {hourOptions.map((hour) => (
                     <option key={hour} value={hour}>
                         {hour}
@@ -39,11 +37,7 @@ export const TimeSelect = ({
                 ))}
             </select>
             &nbsp;:&nbsp;
-            <select
-                value={minutes}
-                onChange={onMinuteChange}
-                className="form-control custom-select"
-            >
+            <select value={minutes} onChange={onMinuteChange} className="form-control custom-select">
                 {minuteOptions.map((minute) => (
                     <option key={minute} value={minute}>
                         {minute}
@@ -53,8 +47,3 @@ export const TimeSelect = ({
         </div>
     );
 };
-
-TimeSelect.propTypes = {
-    value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired,
-};

client/src/components/Filters/Services/ScheduleForm/Timezone.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import ct from 'countries-and-timezones';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 
 import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
 
-export const Timezone = ({
-    timezone,
-    setTimezone,
-}) => {
+interface TimezoneProps {
+    timezone: string;
+    setTimezone: (...args: unknown[]) => unknown;
+}
+
+export const Timezone = ({ timezone, setTimezone }: TimezoneProps) => {
     const [t] = useTranslation();
 
-    const onTimeZoneChange = (event) => {
+    const onTimeZoneChange = (event: any) => {
         setTimezone(event.target.value);
     };
 
@@ -19,18 +20,10 @@ export const Timezone = ({
 
     return (
         <div className="schedule__timezone">
-            <label className="form__label form__label--with-desc mb-2">
-                {t('schedule_timezone')}
-            </label>
+            <label className="form__label form__label--with-desc mb-2">{t('schedule_timezone')}</label>
 
-            <select
-                className="form-control custom-select"
-                value={timezone}
-                onChange={onTimeZoneChange}
-            >
-                <option value={LOCAL_TIMEZONE_VALUE}>
-                    {t('schedule_timezone')}
-                </option>
+            <select className="form-control custom-select" value={timezone} onChange={onTimeZoneChange}>
+                <option value={LOCAL_TIMEZONE_VALUE}>{t('schedule_timezone')}</option>
                 {/* TODO: get timezones from backend method when the method is ready */}
                 {Object.keys(timezones).map((zone) => (
                     <option key={zone} value={zone}>
@@ -41,8 +34,3 @@ export const Timezone = ({
         </div>
     );
 };
-
-Timezone.propTypes = {
-    timezone: PropTypes.string.isRequired,
-    setTimezone: PropTypes.func.isRequired,
-};

client/src/components/Filters/Services/ScheduleForm/helpers.ts

@@ -1,4 +1,4 @@
-export const getFullDayName = (t, abbreviation) => {
+export const getFullDayName = (t: any, abbreviation: any) => {
     const dayMap = {
         sun: t('sunday'),
         mon: t('monday'),
@@ -12,7 +12,7 @@ export const getFullDayName = (t, abbreviation) => {
     return dayMap[abbreviation] || '';
 };
 
-export const getShortDayName = (t, abbreviation) => {
+export const getShortDayName = (t: any, abbreviation: any) => {
     const dayMap = {
         sun: t('sunday_short'),
         mon: t('monday_short'),
@@ -26,18 +26,19 @@ export const getShortDayName = (t, abbreviation) => {
     return dayMap[abbreviation] || '';
 };
 
-export const getTimeFromMs = (value) => {
+export const getTimeFromMs = (value: any) => {
     const selectedTime = new Date(value);
     const hours = selectedTime.getUTCHours();
     const minutes = selectedTime.getUTCMinutes();
 
     return {
         hours: hours.toString().padStart(2, '0'),
+
         minutes: minutes.toString().padStart(2, '0'),
     };
 };
 
-export const convertTimeToMs = (hours, minutes) => {
+export const convertTimeToMs = (hours: any, minutes: any) => {
     const selectedTime = new Date(0);
     selectedTime.setUTCHours(parseInt(hours, 10));
     selectedTime.setUTCMinutes(parseInt(minutes, 10));

client/src/components/Filters/Services/ScheduleForm/index.tsx

@@ -1,19 +1,23 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import cn from 'classnames';
 
 import { Modal } from './Modal';
 import { getFullDayName, getShortDayName } from './helpers';
 import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
+
 import { TimePeriod } from './TimePeriod';
 import './styles.css';
 
-export const ScheduleForm = ({
-    schedule,
-    onScheduleSubmit,
-    clientForm,
-}) => {
+interface ScheduleFormProps {
+    schedule?: {
+        time_zone: string;
+    };
+    onScheduleSubmit: (values: any) => void;
+    clientForm?: boolean;
+}
+
+export const ScheduleForm = ({ schedule, onScheduleSubmit, clientForm }: ScheduleFormProps) => {
     const [t] = useTranslation();
     const [modalOpen, setModalOpen] = useState(false);
     const [currentDay, setCurrentDay] = useState();
@@ -25,12 +29,12 @@ export const ScheduleForm = ({
     const scheduleMap = new Map();
     filteredScheduleKeys.forEach((day) => scheduleMap.set(day, schedule[day]));
 
-    const onSubmit = (values) => {
+    const onSubmit = (values: any) => {
         onScheduleSubmit(values);
         onModalClose();
     };
 
-    const onDelete = (day) => {
+    const onDelete = (day: any) => {
         scheduleMap.delete(day);
 
         const scheduleWeek = Object.fromEntries(Array.from(scheduleMap.entries()));
@@ -41,7 +45,7 @@ export const ScheduleForm = ({
         });
     };
 
-    const onEdit = (day) => {
+    const onEdit = (day: any) => {
         setCurrentDay(day);
         onModalOpen();
     };
@@ -67,23 +71,18 @@ export const ScheduleForm = ({
 
                     return (
                         <div key={day} className="schedule__row">
-                            <div className="schedule__day">
-                                {getFullDayName(t, day)}
-                            </div>
-                            <div className="schedule__day schedule__day--mobile">
-                                {getShortDayName(t, day)}
-                            </div>
-                            <TimePeriod
-                                startTimeMs={data.start}
-                                endTimeMs={data.end}
-                            />
+                            <div className="schedule__day">{getFullDayName(t, day)}</div>
+
+                            <div className="schedule__day schedule__day--mobile">{getShortDayName(t, day)}</div>
+
+                            <TimePeriod startTimeMs={data.start} endTimeMs={data.end} />
+
                             <div className="schedule__actions">
                                 <button
                                     type="button"
                                     className="btn btn-icon btn-outline-primary btn-sm schedule__button"
                                     title={t('edit_table_action')}
-                                    onClick={() => onEdit(day)}
-                                >
+                                    onClick={() => onEdit(day)}>
                                     <svg className="icons icon12">
                                         <use xlinkHref="#edit" />
                                     </svg>
@@ -93,8 +92,7 @@ export const ScheduleForm = ({
                                     type="button"
                                     className="btn btn-icon btn-outline-secondary btn-sm schedule__button"
                                     title={t('delete_table_action')}
-                                    onClick={() => onDelete(day)}
-                                >
+                                    onClick={() => onDelete(day)}>
                                     <svg className="icons">
                                         <use xlinkHref="#delete" />
                                     </svg>
@@ -112,8 +110,7 @@ export const ScheduleForm = ({
                     { 'btn-outline-success btn-sm': clientForm },
                     { 'btn-success btn-standard': !clientForm },
                 )}
-                onClick={onAdd}
-            >
+                onClick={onAdd}>
                 {t('schedule_new')}
             </button>
 
@@ -129,9 +126,3 @@ export const ScheduleForm = ({
         </div>
     );
 };
-
-ScheduleForm.propTypes = {
-    schedule: PropTypes.object,
-    onScheduleSubmit: PropTypes.func.isRequired,
-    clientForm: PropTypes.bool,
-};

client/src/components/Filters/Services/ScheduleForm/styles.css

@@ -73,7 +73,7 @@
     outline: 0;
 }
 
-.schedule__button-day[data-active="true"] {
+.schedule__button-day[data-active='true'] {
     color: var(--btn-success-bgcolor);
     border-color: var(--btn-success-bgcolor);
 }

client/src/components/Filters/Services/index.tsx

@@ -2,50 +2,63 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useDispatch, useSelector } from 'react-redux';
+
 import Form from './Form';
+
 import Card from '../../ui/Card';
 import { getBlockedServices, getAllBlockedServices, updateBlockedServices } from '../../../actions/services';
+
 import PageTitle from '../../ui/PageTitle';
 
 import { ScheduleForm } from './ScheduleForm';
+import { RootState } from '../../../initialState';
 
-const getInitialDataForServices = (initial) => (initial ? initial.reduce(
-    (acc, service) => {
-        acc.blocked_services[service] = true;
-        return acc;
-    }, { blocked_services: {} },
-) : initial);
+const getInitialDataForServices = (initial: any) =>
+    initial
+        ? initial.reduce(
+              (acc: any, service: any) => {
+                  acc.blocked_services[service] = true;
+                  return acc;
+              },
+              { blocked_services: {} },
+          )
+        : initial;
 
 const Services = () => {
     const [t] = useTranslation();
     const dispatch = useDispatch();
-    const services = useSelector((store) => store?.services);
+
+    const services = useSelector((state: RootState) => state.services);
 
     useEffect(() => {
         dispatch(getBlockedServices());
         dispatch(getAllBlockedServices());
     }, []);
 
-    const handleSubmit = (values) => {
+    const handleSubmit = (values: any) => {
         if (!values || !values.blocked_services) {
             return;
         }
 
-        const blocked_services = Object
-            .keys(values.blocked_services)
-            .filter((service) => values.blocked_services[service]);
+        const blocked_services = Object.keys(values.blocked_services).filter(
+            (service) => values.blocked_services[service],
+        );
 
-        dispatch(updateBlockedServices({
-            ids: blocked_services,
-            schedule: services.list.schedule,
-        }));
+        dispatch(
+            updateBlockedServices({
+                ids: blocked_services,
+                schedule: services.list.schedule,
+            }),
+        );
     };
 
-    const handleScheduleSubmit = (values) => {
-        dispatch(updateBlockedServices({
-            ids: services.list.ids,
-            schedule: values,
-        }));
+    const handleScheduleSubmit = (values: any) => {
+        dispatch(
+            updateBlockedServices({
+                ids: services.list.ids,
+                schedule: values,
+            }),
+        );
     };
 
     const initialValues = getInitialDataForServices(services.list.ids);
@@ -56,13 +69,9 @@ const Services = () => {
 
     return (
         <>
-            <PageTitle
-                title={t('blocked_services')}
-                subtitle={t('blocked_services_desc')}
-            />
-            <Card
-                bodyType="card-body box-body--settings"
-            >
+            <PageTitle title={t('blocked_services')} subtitle={t('blocked_services_desc')} />
+
+            <Card bodyType="card-body box-body--settings">
                 <div className="form">
                     <Form
                         initialValues={initialValues}
@@ -77,12 +86,8 @@ const Services = () => {
             <Card
                 title={t('schedule_services')}
                 subtitle={t('schedule_services_desc')}
-                bodyType="card-body box-body--settings"
-            >
-                <ScheduleForm
-                    schedule={services.list.schedule}
-                    onScheduleSubmit={handleScheduleSubmit}
-                />
+                bodyType="card-body box-body--settings">
+                <ScheduleForm schedule={services.list.schedule} onScheduleSubmit={handleScheduleSubmit} />
             </Card>
         </>
     );

client/src/components/Filters/Table.tsx

@@ -1,17 +1,32 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 import { withTranslation, Trans } from 'react-i18next';
+
 import CellWrap from '../ui/CellWrap';
 import { MODAL_TYPE } from '../../helpers/constants';
+
 import { formatDetailedDateTime } from '../../helpers/helpers';
+
 import { isValidAbsolutePath } from '../../helpers/form';
 import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from '../../helpers/localStorageHelper';
 
-class Table extends Component {
-    getDateCell = (row) => CellWrap(row, formatDetailedDateTime);
+interface TableProps {
+    filters: unknown[];
+    loading: boolean;
+    processingConfigFilter: boolean;
+    toggleFilteringModal: (...args: unknown[]) => unknown;
+    handleDelete: (...args: unknown[]) => unknown;
+    toggleFilter: (...args: unknown[]) => unknown;
+    t: (...args: unknown[]) => string;
+    whitelist?: boolean;
+}
 
-    renderCheckbox = ({ original }) => {
+class Table extends Component<TableProps> {
+    getDateCell = (row: any) => CellWrap(row, formatDetailedDateTime);
+
+    renderCheckbox = ({ original }: any) => {
         const { processingConfigFilter, toggleFilter } = this.props;
         const { url, name, enabled } = original;
         const data = { name, url, enabled: !enabled };
@@ -25,6 +40,7 @@ class Table extends Component {
                     checked={enabled}
                     disabled={processingConfigFilter}
                 />
+
                 <span className="checkbox__label" />
             </label>
         );
@@ -50,17 +66,15 @@ class Table extends Component {
             accessor: 'url',
             minWidth: 180,
             // eslint-disable-next-line react/prop-types
-            Cell: ({ value }) => (
+            Cell: ({ value }: any) => (
                 <div className="logs__row">
-                    {isValidAbsolutePath(value) ? value
-                        : <a
-                            href={value}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="link logs__text"
-                        >
+                    {isValidAbsolutePath(value) ? (
+                        value
+                    ) : (
+                        <a href={value} target="_blank" rel="noopener noreferrer" className="link logs__text">
                             {value}
-                        </a>}
+                        </a>
+                    )}
                 </div>
             ),
         },
@@ -69,7 +83,7 @@ class Table extends Component {
             accessor: 'rulesCount',
             className: 'text-center',
             minWidth: 100,
-            Cell: (props) => props.value.toLocaleString(),
+            Cell: (props: any) => props.value.toLocaleString(),
         },
         {
             Header: <Trans>last_time_updated_table_header</Trans>,
@@ -85,9 +99,10 @@ class Table extends Component {
             width: 100,
             sortable: false,
             resizable: false,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const { original } = row;
                 const { url } = original;
+
                 const { t, toggleFilteringModal, handleDelete } = this.props;
 
                 return (
@@ -96,22 +111,22 @@ class Table extends Component {
                             type="button"
                             className="btn btn-icon btn-outline-primary btn-sm mr-2"
                             title={t('edit_table_action')}
-                            onClick={() => toggleFilteringModal({
-                                type: MODAL_TYPE.EDIT_FILTERS,
-                                url,
-                            })
-                            }
-                        >
+                            onClick={() =>
+                                toggleFilteringModal({
+                                    type: MODAL_TYPE.EDIT_FILTERS,
+                                    url,
+                                })
+                            }>
                             <svg className="icons icon12">
                                 <use xlinkHref="#edit" />
                             </svg>
                         </button>
+
                         <button
                             type="button"
                             className="btn btn-icon btn-outline-secondary btn-sm"
                             onClick={() => handleDelete(url)}
-                            title={t('delete_table_action')}
-                        >
+                            title={t('delete_table_action')}>
                             <svg className="icons icon12">
                                 <use xlinkHref="#delete" />
                             </svg>
@@ -123,9 +138,7 @@ class Table extends Component {
     ];
 
     render() {
-        const {
-            loading, filters, t, whitelist,
-        } = this.props;
+        const { loading, filters, t, whitelist } = this.props;
 
         const localStorageKey = whitelist
             ? LOCAL_STORAGE_KEYS.ALLOWLIST_PAGE_SIZE
@@ -137,7 +150,7 @@ class Table extends Component {
                 columns={this.columns}
                 showPagination
                 defaultPageSize={LocalStorageHelper.getItem(localStorageKey) || 10}
-                onPageSizeChange={(size) => LocalStorageHelper.setItem(localStorageKey, size)}
+                onPageSizeChange={(size: any) => LocalStorageHelper.setItem(localStorageKey, size)}
                 loading={loading}
                 minRows={6}
                 ofText="/"
@@ -152,15 +165,4 @@ class Table extends Component {
     }
 }
 
-Table.propTypes = {
-    filters: PropTypes.array.isRequired,
-    loading: PropTypes.bool.isRequired,
-    processingConfigFilter: PropTypes.bool.isRequired,
-    toggleFilteringModal: PropTypes.func.isRequired,
-    handleDelete: PropTypes.func.isRequired,
-    toggleFilter: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    whitelist: PropTypes.bool,
-};
-
 export default withTranslation()(Table);

client/src/components/Header/Menu.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
+
 import { NavLink } from 'react-router-dom';
-import PropTypes from 'prop-types';
+
 import enhanceWithClickOutside from 'react-click-outside';
 import classnames from 'classnames';
 import { Trans, withTranslation } from 'react-i18next';
 import { SETTINGS_URLS, FILTERS_URLS, MENU_URLS } from '../../helpers/constants';
+
 import Dropdown from '../ui/Dropdown';
 
 const MENU_ITEMS = [
@@ -80,7 +82,14 @@ const FILTERS_ITEMS = [
     },
 ];
 
-class Menu extends Component {
+interface MenuProps {
+    isMenuOpen: boolean;
+    closeMenu: (...args: unknown[]) => unknown;
+    pathname: string;
+    t?: (...args: unknown[]) => string;
+}
+
+class Menu extends Component<MenuProps> {
     handleClickOutside = () => {
         this.props.closeMenu();
     };
@@ -89,52 +98,51 @@ class Menu extends Component {
         this.props.closeMenu();
     };
 
-    getActiveClassForDropdown = (URLS) => {
+    getActiveClassForDropdown = (URLS: any) => {
         const isActivePage = Object.values(URLS)
-            .some((item) => item === this.props.pathname);
+
+            .some((item: any) => item === this.props.pathname);
 
         return isActivePage ? 'active' : '';
     };
 
-    getNavLink = ({
-        route, exact, text, order, className, icon,
-    }) => (
+    getNavLink = ({ route, exact, text, order, className, icon }: any) => (
         <NavLink
             to={route}
             key={route}
             exact={exact || false}
             className={`order-${order} ${className}`}
-            onClick={this.closeMenu}
-        >
+            onClick={this.closeMenu}>
             {icon && (
                 <svg className="nav-icon">
                     <use xlinkHref={`#${icon}`} />
                 </svg>
             )}
+
             <Trans>{text}</Trans>
         </NavLink>
     );
 
-    getDropdown = ({
-        label, order, URLS, icon, ITEMS,
-    }) => (
+    getDropdown = ({ label, order, URLS, icon, ITEMS }: any) => (
         <Dropdown
             label={this.props.t(label)}
-            baseClassName='dropdown'
+            baseClassName="dropdown"
             controlClassName={`nav-link ${this.getActiveClassForDropdown(URLS)}`}
             icon={icon}>
-            {ITEMS.map((item) => (
+            {ITEMS.map((item: any) =>
                 this.getNavLink({
                     ...item,
                     order,
                     className: 'dropdown-item',
-                })))}
+                }),
+            )}
         </Dropdown>
     );
 
     render() {
         const menuClass = classnames({
             'header__column mobile-menu': true,
+
             'mobile-menu--active': this.props.isMenuOpen,
         });
         return (
@@ -142,17 +150,14 @@ class Menu extends Component {
                 <div className={menuClass}>
                     <ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
                         {MENU_ITEMS.map((item) => (
-                            <li
-                                className={`nav-item order-${item.order}`}
-                                key={item.text}
-                                onClick={this.closeMenu}
-                            >
+                            <li className={`nav-item order-${item.order}`} key={item.text} onClick={this.closeMenu}>
                                 {this.getNavLink({
                                     ...item,
                                     className: 'nav-link',
                                 })}
                             </li>
                         ))}
+
                         <li className="nav-item order-1">
                             {this.getDropdown({
                                 order: 1,
@@ -162,6 +167,7 @@ class Menu extends Component {
                                 ITEMS: SETTINGS_ITEMS,
                             })}
                         </li>
+
                         <li className="nav-item order-2">
                             {this.getDropdown({
                                 order: 2,
@@ -178,11 +184,4 @@ class Menu extends Component {
     }
 }
 
-Menu.propTypes = {
-    isMenuOpen: PropTypes.bool.isRequired,
-    closeMenu: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    t: PropTypes.func,
-};
-
 export default withTranslation()(enhanceWithClickOutside(Menu));

client/src/components/Header/index.js

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { shallowEqual, useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-import classnames from 'classnames';
-import Menu from './Menu';
-import logo from '../ui/svg/logo.svg';
-import './Header.css';
-
-const Header = () => {
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const { t } = useTranslation();
-
-    const {
-        protectionEnabled,
-        processing,
-        isCoreRunning,
-        processingProfile,
-        name,
-    } = useSelector((state) => state.dashboard, shallowEqual);
-
-    const { pathname } = useLocation();
-
-    const toggleMenuOpen = () => {
-        setIsMenuOpen((isMenuOpen) => !isMenuOpen);
-    };
-
-    const closeMenu = () => {
-        setIsMenuOpen(false);
-    };
-
-    const badgeClass = classnames('badge dns-status', {
-        'badge-success': protectionEnabled,
-        'badge-danger': !protectionEnabled,
-    });
-
-    return <div className="header">
-        <div className="header__container">
-            <div className="header__row">
-                <div
-                    className="header-toggler d-lg-none ml-lg-0 collapsed"
-                    onClick={toggleMenuOpen}
-                >
-                    <span className="header-toggler-icon" />
-                </div>
-                <div className="header__column">
-                    <div className="d-flex align-items-center">
-                        <Link to="/" className="nav-link pl-0 pr-1">
-                            <img src={logo} alt="AdGuard Home logo" className="header-brand-img" />
-                        </Link>
-                        {!processing && isCoreRunning
-                        && <span className={badgeClass}
-                        >{t(protectionEnabled ? 'on' : 'off')}
-                        </span>}
-                    </div>
-                </div>
-                <Menu
-                    pathname={pathname}
-                    isMenuOpen={isMenuOpen}
-                    closeMenu={closeMenu}
-                />
-                <div className="header__column">
-                    <div className="header__right">
-                        {!processingProfile && name
-                        && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
-                            {t('sign_out')}
-                        </a>}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>;
-};
-
-export default Header;

client/src/components/Header/index.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import { Link, useLocation } from 'react-router-dom';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import classnames from 'classnames';
+
+import Menu from './Menu';
+
+import { Logo } from '../ui/svg/logo';
+import './Header.css';
+import { RootState } from '../../initialState';
+
+const Header = () => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { t } = useTranslation();
+
+    const { protectionEnabled, processing, isCoreRunning, processingProfile, name } = useSelector(
+        (state: RootState) => state.dashboard,
+        shallowEqual,
+    );
+
+    const { pathname } = useLocation();
+
+    const toggleMenuOpen = () => {
+        setIsMenuOpen((isMenuOpen) => !isMenuOpen);
+    };
+
+    const closeMenu = () => {
+        setIsMenuOpen(false);
+    };
+
+    const badgeClass = classnames('badge dns-status', {
+        'badge-success': protectionEnabled,
+        'badge-danger': !protectionEnabled,
+    });
+
+    return (
+        <div className="header">
+            <div className="header__container">
+                <div className="header__row">
+                    <div className="header-toggler d-lg-none ml-lg-0 collapsed" onClick={toggleMenuOpen}>
+                        <span className="header-toggler-icon" />
+                    </div>
+
+                    <div className="header__column">
+                        <div className="d-flex align-items-center">
+                            <Link to="/" className="nav-link pl-0 pr-1">
+                                <Logo className="header-brand-img" />
+                            </Link>
+                            {!processing && isCoreRunning && (
+                                <span className={badgeClass}>{t(protectionEnabled ? 'on' : 'off')}</span>
+                            )}
+                        </div>
+                    </div>
+
+                    <Menu pathname={pathname} isMenuOpen={isMenuOpen} closeMenu={closeMenu} />
+
+                    <div className="header__column">
+                        <div className="header__right">
+                            {!processingProfile && name && (
+                                <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                                    {t('sign_out')}
+                                </a>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Header;

client/src/components/Logs/AnonymizerNotification.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
+
 import { HashLink as Link } from 'react-router-hash-link';
 
 const AnonymizerNotification = () => (
     <div className="alert alert-primary mt-6">
-        <Trans components={[
-            <strong key="0">text</strong>,
-            <Link to="/settings#logs-config" key="1">link</Link>,
-        ]}>
+        <Trans
+            components={[
+                <strong key="0">text</strong>,
+
+                <Link to="/settings#logs-config" key="1">
+                    link
+                </Link>,
+            ]}>
             anonymizer_notification
         </Trans>
     </div>

client/src/components/Logs/Cells/ClientCell.tsx

@@ -3,36 +3,55 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+
 import { Link, useHistory } from 'react-router-dom';
-import propTypes from 'prop-types';
 
 import { checkFiltered, getBlockingClientName } from '../../../helpers/helpers';
 import { BLOCK_ACTIONS } from '../../../helpers/constants';
+
 import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
+
 import IconTooltip from './IconTooltip';
+
 import { renderFormattedClientCell } from '../../../helpers/renderFormattedClientCell';
 import { toggleClientBlock } from '../../../actions/access';
 import { getBlockClientInfo } from './helpers';
 import { getStats } from '../../../actions/stats';
 import { updateLogs } from '../../../actions/queryLogs';
+import { RootState } from '../../../initialState';
 
-const ClientCell = ({
-    client,
-    client_id,
-    client_info,
-    domain,
-    reason,
-}) => {
+interface ClientCellProps {
+    client: string;
+    client_id?: string;
+    client_info?: {
+        name: string;
+        whois: {
+            country?: string;
+            city?: string;
+            orgname?: string;
+        };
+        disallowed: boolean;
+        disallowed_rule: string;
+    };
+    domain: string;
+    reason: string;
+}
+
+const ClientCell = ({ client, client_id, client_info, domain, reason }: ClientCellProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const history = useHistory();
-    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-    const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
+
+    const autoClients = useSelector((state: RootState) => state.dashboard.autoClients, shallowEqual);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+    const allowedClients = useSelector((state: RootState) => state.access.allowed_clients, shallowEqual);
     const [isOptionsOpened, setOptionsOpened] = useState(false);
 
-    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
-    const clients = useSelector((state) => state.dashboard.clients);
+    const autoClient = autoClients.find((autoClient: any) => autoClient.name === client);
+
+    const clients = useSelector((state: RootState) => state.dashboard.clients);
     const source = autoClient?.source;
     const whoisAvailable = client_info && Object.keys(client_info.whois).length > 0;
     const clientName = client_info?.name || client_id;
@@ -57,7 +76,7 @@ const ClientCell = ({
 
     const isFiltered = checkFiltered(reason);
 
-    const clientIds = clients.map((c) => c.ids).flat();
+    const clientIds = clients.map((c: any) => c.ids).flat();
 
     const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
         'mt-2': isDetailed && !client_info?.name && !whoisAvailable,
@@ -68,7 +87,7 @@ const ClientCell = ({
         'my-3': isDetailed,
     });
 
-    const renderBlockingButton = (isFiltered, domain) => {
+    const renderBlockingButton = (isFiltered: any, domain: any) => {
         const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
 
         const {
@@ -79,7 +98,7 @@ const ClientCell = ({
             client,
             client_info?.disallowed || false,
             client_info?.disallowed_rule || '',
-            allowedСlients,
+            allowedClients,
         );
 
         const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
@@ -108,11 +127,13 @@ const ClientCell = ({
                 name: blockingClientKey,
                 onClick: async () => {
                     if (window.confirm(confirmMessage)) {
-                        await dispatch(toggleClientBlock(
-                            client,
-                            client_info?.disallowed || false,
-                            client_info?.disallowed_rule || '',
-                        ));
+                        await dispatch(
+                            toggleClientBlock(
+                                client,
+                                client_info?.disallowed || false,
+                                client_info?.disallowed_rule || '',
+                            ),
+                        );
                         await dispatch(updateLogs());
                         setOptionsOpened(false);
                     }
@@ -130,21 +151,19 @@ const ClientCell = ({
             });
         }
 
-        const getOptions = (options) => {
+        const getOptions = (options: any) => {
             if (options.length === 0) {
                 return null;
             }
+
             return (
                 <>
-                    {options.map(({
-                        name, onClick, disabled, className,
-                    }) => (
+                    {options.map(({ name, onClick, disabled, className }: any) => (
                         <button
                             key={name}
                             className={classNames('button-action--arrow-option px-4 py-1', className)}
                             onClick={onClick}
-                            disabled={disabled}
-                        >
+                            disabled={disabled}>
                             {t(name)}
                         </button>
                     ))}
@@ -160,11 +179,7 @@ const ClientCell = ({
 
         return (
             <div className={containerClass}>
-                <button
-                    type="button"
-                    className="btn btn-icon btn-sm px-0"
-                    onClick={() => setOptionsOpened(true)}
-                >
+                <button type="button" className="btn btn-icon btn-sm px-0" onClick={() => setOptionsOpened(true)}>
                     <svg className="icon24 icon--lightgray button-action__icon">
                         <use xlinkHref="#bullets" />
                     </svg>
@@ -188,10 +203,7 @@ const ClientCell = ({
     };
 
     return (
-        <div
-            className="o-hidden h-100 logs__cell logs__cell--client"
-            role="gridcell"
-        >
+        <div className="o-hidden h-100 logs__cell logs__cell--client" role="gridcell">
             <IconTooltip
                 className={hintClass}
                 columnClass="grid grid--limited"
@@ -202,6 +214,7 @@ const ClientCell = ({
                 content={processedData}
                 placement="bottom"
             />
+
             <div className={nameClass}>
                 <div data-tip={true} data-for={id}>
                     {renderFormattedClientCell(client, clientInfo, isDetailed, true)}
@@ -210,8 +223,7 @@ const ClientCell = ({
                     <Link
                         className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
                         to={`logs?search="${encodeURIComponent(clientName)}"`}
-                        title={clientName}
-                    >
+                        title={clientName}>
                         {clientName}
                     </Link>
                 )}
@@ -221,21 +233,4 @@ const ClientCell = ({
     );
 };
 
-ClientCell.propTypes = {
-    client: propTypes.string.isRequired,
-    client_id: propTypes.string,
-    client_info: propTypes.shape({
-        name: propTypes.string.isRequired,
-        whois: propTypes.shape({
-            country: propTypes.string,
-            city: propTypes.string,
-            orgname: propTypes.string,
-        }).isRequired,
-        disallowed: propTypes.bool.isRequired,
-        disallowed_rule: propTypes.string.isRequired,
-    }),
-    domain: propTypes.string.isRequired,
-    reason: propTypes.string.isRequired,
-};
-
 export default ClientCell;

client/src/components/Logs/Cells/DateCell.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import propTypes from 'prop-types';
-import { formatDateTime, formatTime } from '../../../helpers/helpers';
-import { DEFAULT_SHORT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT } from '../../../helpers/constants';
-
-const DateCell = ({ time }) => {
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-
-    if (!time) {
-        return '–';
-    }
-
-    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
-    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
-
-    return <div className="logs__cell logs__cell logs__cell--date text-truncate" role="gridcell">
-        <div className="logs__time" title={formattedTime}>{formattedTime}</div>
-        {isDetailed
-        && <div className="detailed-info d-none d-sm-block text-truncate"
-                title={formattedDate}>{formattedDate}</div>}
-    </div>;
-};
-
-DateCell.propTypes = {
-    time: propTypes.string.isRequired,
-};
-
-export default DateCell;

client/src/components/Logs/Cells/DateCell.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { formatDateTime, formatTime } from '../../../helpers/helpers';
+import { DEFAULT_SHORT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT } from '../../../helpers/constants';
+import { RootState } from '../../../initialState';
+
+interface DateCellProps {
+    time: string;
+}
+
+const DateCell = ({ time }: DateCellProps) => {
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+    if (!time) {
+        return <>–</>;
+    }
+
+    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
+
+    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
+
+    return (
+        <div className="logs__cell logs__cell logs__cell--date text-truncate" role="gridcell">
+            <div className="logs__time" title={formattedTime}>
+                {formattedTime}
+            </div>
+            {isDetailed && (
+                <div className="detailed-info d-none d-sm-block text-truncate" title={formattedDate}>
+                    {formattedDate}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DateCell;

client/src/components/Logs/Cells/DomainCell.tsx

@@ -1,16 +1,32 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import propTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import {
     DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
     LONG_TIME_FORMAT,
     SCHEME_TO_PROTOCOL_MAP,
 } from '../../../helpers/constants';
+
 import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
 import { getSourceData } from '../../../helpers/trackers/trackers';
+
 import IconTooltip from './IconTooltip';
+import { RootState } from '../../../initialState';
+
+interface DomainCellProps {
+    answer_dnssec: boolean;
+    client_proto: string;
+    domain: string;
+    unicodeName?: string;
+    time: string;
+    type: string;
+    tracker?: {
+        name: string;
+        category: string;
+    };
+    ecs?: string;
+}
 
 const DomainCell = ({
     answer_dnssec,
@@ -21,10 +37,12 @@ const DomainCell = ({
     tracker,
     type,
     ecs,
-}) => {
+}: DomainCellProps) => {
     const { t } = useTranslation();
-    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const dnssec_enabled = useSelector((state: RootState) => state.dnsConfig.dnssec_enabled);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
 
     const hasTracker = !!tracker;
 
@@ -43,7 +61,15 @@ const DomainCell = ({
     const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
     const ip = type ? `${t('type_table_header')}: ${type}` : '';
 
-    let requestDetailsObj = {
+    let requestDetailsObj: {
+        time_table_header: string;
+        date: string;
+        domain: string;
+        punycode?: string;
+        ecs?: string;
+        type_table_header?: string;
+        protocol?: string;
+    } = {
         time_table_header: formatTime(time, LONG_TIME_FORMAT),
         date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
         domain,
@@ -76,24 +102,16 @@ const DomainCell = ({
         name_table_header: tracker?.name,
         category_label: hasTracker && captitalizeWords(tracker.category),
         source_label: sourceData && (
-            <a
-                href={sourceData.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="link--green"
-            >
+            <a href={sourceData.url} target="_blank" rel="noopener noreferrer" className="link--green">
                 {sourceData.name}
             </a>
         ),
     };
 
-    const renderGrid = (content, idx) => {
+    const renderGrid = (content: any, idx: any) => {
         const preparedContent = typeof content === 'string' ? t(content) : content;
 
-        const className = classNames(
-            'text-truncate o-hidden',
-            { 'overflow-break': preparedContent?.length > 100 },
-        );
+        const className = classNames('text-truncate o-hidden', { 'overflow-break': preparedContent?.length > 100 });
 
         return (
             <div key={idx} className={className}>
@@ -102,10 +120,11 @@ const DomainCell = ({
         );
     };
 
-    const getGrid = (contentObj, title, className) => [
+    const getGrid = (contentObj: any, title: string, className?: string) => [
         <div key={title} className={classNames('pb-2 grid--title', className)}>
             {t(title)}
         </div>,
+
         <div key={`${title}-1`} className="grid grid--limited">
             {React.Children.map(Object.entries(contentObj), renderGrid)}
         </div>,
@@ -113,7 +132,9 @@ const DomainCell = ({
 
     const requestDetails = getGrid(requestDetailsObj, 'request_details');
 
-    const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
+    const renderContent = hasTracker
+        ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4'))
+        : requestDetails;
 
     const valueClass = classNames('w-100 text-truncate', {
         'px-2 d-flex justify-content-center flex-column': isDetailed,
@@ -122,10 +143,7 @@ const DomainCell = ({
     const details = [ip, protocol].filter(Boolean).join(', ');
 
     return (
-        <div
-            className="d-flex o-hidden logs__cell logs__cell logs__cell--domain"
-            role="gridcell"
-        >
+        <div className="d-flex o-hidden logs__cell logs__cell logs__cell--domain" role="gridcell">
             {dnssec_enabled && (
                 <IconTooltip
                     className={lockIconClass}
@@ -137,14 +155,16 @@ const DomainCell = ({
                     placement="bottom"
                 />
             )}
+
             <IconTooltip
                 className={privacyIconClass}
                 tooltipClass="pt-4 pb-5 px-5 mw-75"
                 xlinkHref="privacy"
                 contentItemClass="key-colon"
                 renderContent={renderContent}
-                place="bottom"
+                placement="bottom"
             />
+
             <div className={valueClass}>
                 {unicodeName ? (
                     <div className="text-truncate overflow-break-mobile" title={unicodeName}>
@@ -156,10 +176,7 @@ const DomainCell = ({
                     </div>
                 )}
                 {details && isDetailed && (
-                    <div
-                        className="detailed-info d-none d-sm-block text-truncate"
-                        title={details}
-                    >
+                    <div className="detailed-info d-none d-sm-block text-truncate" title={details}>
                         {details}
                     </div>
                 )}
@@ -168,15 +185,4 @@ const DomainCell = ({
     );
 };
 
-DomainCell.propTypes = {
-    answer_dnssec: propTypes.bool.isRequired,
-    client_proto: propTypes.string.isRequired,
-    domain: propTypes.string.isRequired,
-    unicodeName: propTypes.string,
-    time: propTypes.string.isRequired,
-    type: propTypes.string.isRequired,
-    tracker: propTypes.object,
-    ecs: propTypes.string,
-};
-
 export default DomainCell;

client/src/components/Logs/Cells/Header.js

@@ -1,54 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
-import classNames from 'classnames';
-import React from 'react';
-import { toggleDetailedLogs } from '../../../actions/queryLogs';
-import HeaderCell from './HeaderCell';
-
-const Header = () => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-    const disableDetailedMode = () => dispatch(toggleDetailedLogs(false));
-    const enableDetailedMode = () => dispatch(toggleDetailedLogs(true));
-
-    const HEADERS = [
-        {
-            className: 'logs__cell--date',
-            content: 'time_table_header',
-        },
-        {
-            className: 'logs__cell--domain',
-            content: 'request_table_header',
-        },
-        {
-            className: 'logs__cell--response',
-            content: 'response_table_header',
-        },
-        {
-            className: 'logs__cell--client',
-            content: <>
-                {t('client_table_header')}
-                {<span>
-                    <svg className={classNames('icons icon--24 icon--green cursor--pointer mr-2', { 'icon--selected': !isDetailed })}
-                         onClick={disableDetailedMode}
-                    >
-                    <title>{t('compact')}</title>
-                    <use xlinkHref='#list' /></svg>
-                <svg className={classNames('icons icon--24 icon--green cursor--pointer', { 'icon--selected': isDetailed })}
-                     onClick={enableDetailedMode}
-                >
-                    <title>{t('default')}</title>
-                    <use xlinkHref='#detailed_list' />
-                    </svg>
-            </span>}
-            </>,
-        },
-    ];
-
-    return <div className="logs__cell--header__container px-5" role="row">
-        {HEADERS.map(HeaderCell)}
-    </div>;
-};
-
-export default Header;

client/src/components/Logs/Cells/Header.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import { toggleDetailedLogs } from '../../../actions/queryLogs';
+
+import HeaderCell from './HeaderCell';
+import { RootState } from '../../../initialState';
+
+const Header = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+    const disableDetailedMode = () => dispatch(toggleDetailedLogs(false));
+    const enableDetailedMode = () => dispatch(toggleDetailedLogs(true));
+
+    const HEADERS = [
+        {
+            className: 'logs__cell--date',
+            content: 'time_table_header',
+        },
+        {
+            className: 'logs__cell--domain',
+            content: 'request_table_header',
+        },
+        {
+            className: 'logs__cell--response',
+            content: 'response_table_header',
+        },
+        {
+            className: 'logs__cell--client',
+
+            content: (
+                <>
+                    {t('client_table_header')}
+
+                    {
+                        <span>
+                            <svg
+                                className={classNames('icons icon--24 icon--green cursor--pointer mr-2', {
+                                    'icon--selected': !isDetailed,
+                                })}
+                                onClick={disableDetailedMode}>
+                                <title>{t('compact')}</title>
+
+                                <use xlinkHref="#list" />
+                            </svg>
+
+                            <svg
+                                className={classNames('icons icon--24 icon--green cursor--pointer', {
+                                    'icon--selected': isDetailed,
+                                })}
+                                onClick={enableDetailedMode}>
+                                <title>{t('default')}</title>
+
+                                <use xlinkHref="#detailed_list" />
+                            </svg>
+                        </span>
+                    }
+                </>
+            ),
+        },
+    ];
+
+    return (
+        <div className="logs__cell--header__container px-5" role="row">
+            {HEADERS.map(HeaderCell)}
+        </div>
+    );
+};
+
+export default Header;

client/src/components/Logs/Cells/HeaderCell.js

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import propTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-
-const HeaderCell = ({ content, className }, idx) => {
-    const { t } = useTranslation();
-    return <div
-            key={idx}
-            className={classNames('logs__cell--header__item logs__cell logs__text--bold', className)}
-            role="columnheader"
-    >
-        {typeof content === 'string' ? t(content) : content}
-    </div>;
-};
-
-HeaderCell.propTypes = {
-    content: propTypes.oneOfType([propTypes.string, propTypes.element]).isRequired,
-    className: propTypes.string,
-};
-
-export default HeaderCell;

client/src/components/Logs/Cells/HeaderCell.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface HeaderCellProps {
+    content: string | React.ReactElement;
+    className?: string;
+}
+
+const HeaderCell = ({ content, className }: HeaderCellProps, idx: any) => {
+    const { t } = useTranslation();
+
+    return (
+        <div
+            key={idx}
+            className={classNames('logs__cell--header__item logs__cell logs__text--bold', className)}
+            role="columnheader">
+            {typeof content === 'string' ? t(content) : content}
+        </div>
+    );
+};
+
+export default HeaderCell;

client/src/components/Logs/Cells/IconTooltip.css

@@ -91,18 +91,24 @@
         margin: -0.5rem 0 0;
     }
 
-    .grid > .key__time_table_header, .grid > .key__data, .grid > .key__encryption_status, .grid > .key__elapsed {
+    .grid > .key__time_table_header,
+    .grid > .key__data,
+    .grid > .key__encryption_status,
+    .grid > .key__elapsed {
         grid-column: 1 / span 1;
     }
 
-    .grid > .value__time_table_header, .grid > .value__data, .grid > .value__encryption_status, .grid > .value__elapsed {
+    .grid > .value__time_table_header,
+    .grid > .value__data,
+    .grid > .value__encryption_status,
+    .grid > .value__elapsed {
         grid-column: 2 / span 1;
         margin: 0 !important;
     }
 }
 
 .grid .key-colon:nth-child(odd)::after {
-    content: ":";
+    content: ':';
 }
 
 .grid__one-row {
@@ -127,7 +133,7 @@
 }
 
 .title--border:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     border-top: 0.5px solid var(--gray-d8) !important;

client/src/components/Logs/Cells/IconTooltip.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
-import classNames from 'classnames';
-import { processContent } from '../../../helpers/helpers';
-import Tooltip from '../../ui/Tooltip';
-import 'react-popper-tooltip/dist/styles.css';
-import './IconTooltip.css';
-import { SHOW_TOOLTIP_DELAY } from '../../../helpers/constants';
-
-const IconTooltip = ({
-    className,
-    contentItemClass,
-    columnClass,
-    triggerClass,
-    canShowTooltip = true,
-    xlinkHref,
-    title,
-    placement,
-    tooltipClass,
-    content,
-    trigger,
-    onVisibilityChange,
-    defaultTooltipShown,
-    delayHide,
-    renderContent = content ? React.Children.map(
-        processContent(content),
-        (item, idx) => <div key={idx} className={contentItemClass}>
-            <Trans>{item || '—'}</Trans>
-        </div>,
-    ) : null,
-}) => {
-    const tooltipContent = <>
-        {title
-        && <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
-        <div className={classNames(columnClass)}>{renderContent}</div>
-    </>;
-
-    const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
-
-    return <Tooltip
-        className={tooltipClassName}
-        content={tooltipContent}
-        placement={placement}
-        triggerClass={triggerClass}
-        trigger={trigger}
-        onVisibilityChange={onVisibilityChange}
-        delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
-        delayHide={delayHide}
-        defaultTooltipShown={defaultTooltipShown}
-    >
-        {xlinkHref && <svg className={className}>
-            <use xlinkHref={`#${xlinkHref}`} />
-        </svg>}
-    </Tooltip>;
-};
-
-IconTooltip.propTypes = {
-    className: PropTypes.string,
-    trigger: PropTypes.string,
-    triggerClass: PropTypes.string,
-    contentItemClass: PropTypes.string,
-    columnClass: PropTypes.string,
-    tooltipClass: PropTypes.string,
-    title: PropTypes.string,
-    placement: PropTypes.string,
-    canShowTooltip: PropTypes.bool,
-    xlinkHref: PropTypes.string,
-    content: PropTypes.node,
-    renderContent: PropTypes.arrayOf(PropTypes.element),
-    onVisibilityChange: PropTypes.func,
-    defaultTooltipShown: PropTypes.bool,
-    delayHide: PropTypes.number,
-};
-
-export default IconTooltip;

client/src/components/Logs/Cells/IconTooltip.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
+import PopperJS from 'popper.js';
+import { TriggerTypes } from 'react-popper-tooltip';
+
+import { processContent } from '../../../helpers/helpers';
+
+import Tooltip from '../../ui/Tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+import './IconTooltip.css';
+import { SHOW_TOOLTIP_DELAY } from '../../../helpers/constants';
+
+interface IconTooltipProps {
+    className?: string;
+    trigger?: TriggerTypes;
+    triggerClass?: string;
+    contentItemClass?: string;
+    columnClass?: string;
+    tooltipClass?: string;
+    title?: string;
+    placement?: PopperJS.Placement;
+    canShowTooltip?: boolean;
+    xlinkHref?: string;
+    content?: React.ReactNode;
+    renderContent?: React.ReactElement[];
+    onVisibilityChange?: (...args: unknown[]) => unknown;
+    defaultTooltipShown?: boolean;
+    delayHide?: number;
+}
+
+const IconTooltip = ({
+    className,
+    contentItemClass,
+    columnClass,
+    triggerClass,
+    canShowTooltip = true,
+    xlinkHref,
+    title,
+    placement,
+    tooltipClass,
+    content,
+    trigger,
+    onVisibilityChange,
+    defaultTooltipShown,
+    delayHide,
+
+    renderContent = content
+        ? React.Children.map(
+              processContent(content),
+
+              (item, idx) => (
+                  <div key={idx} className={contentItemClass}>
+                      <Trans>{item || '—'}</Trans>
+                  </div>
+              ),
+          )
+        : null,
+}: IconTooltipProps) => {
+    const tooltipContent = (
+        <>
+            {title && (
+                <div className="pb-4 h-25 grid-content font-weight-bold">
+                    <Trans>{title}</Trans>
+                </div>
+            )}
+
+            <div className={classNames(columnClass)}>{renderContent}</div>
+        </>
+    );
+
+    const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
+
+    return (
+        <Tooltip
+            className={tooltipClassName}
+            content={tooltipContent}
+            placement={placement}
+            triggerClass={triggerClass}
+            trigger={trigger}
+            onVisibilityChange={onVisibilityChange}
+            delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
+            delayHide={delayHide}
+            defaultTooltipShown={defaultTooltipShown}>
+            {xlinkHref && (
+                <svg className={className}>
+                    <use xlinkHref={`#${xlinkHref}`} />
+                </svg>
+            )}
+        </Tooltip>
+    );
+};
+
+export default IconTooltip;

client/src/components/Logs/Cells/ResponseCell.js

@@ -1,141 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { shallowEqual, useSelector } from 'react-redux';
-import classNames from 'classnames';
-import React from 'react';
-import propTypes from 'prop-types';
-import {
-    getRulesToFilterList,
-    formatElapsedMs,
-    getFilterNames,
-    getServiceName,
-} from '../../../helpers/helpers';
-import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
-import IconTooltip from './IconTooltip';
-
-const ResponseCell = ({
-    elapsedMs,
-    originalResponse,
-    reason,
-    response,
-    status,
-    upstream,
-    rules,
-    service_name,
-    cached,
-}) => {
-    const { t } = useTranslation();
-    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
-    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-    const services = useSelector((store) => store?.services);
-
-    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
-
-    const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
-            || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
-
-    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
-
-    const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
-    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
-
-    const renderResponses = (responseArr) => {
-        if (!responseArr || responseArr.length === 0) {
-            return '';
-        }
-
-        return <div>{responseArr.map((response) => {
-            const className = classNames('white-space--nowrap', {
-                'overflow-break': response.length > 100,
-            });
-
-            return <div key={response} className={className}>{`${response}\n`}</div>;
-        })}</div>;
-    };
-
-    const COMMON_CONTENT = {
-        encryption_status: boldStatusLabel,
-        install_settings_dns: upstream,
-        ...(cached
-            && {
-                served_from_cache_label: (
-                    <svg className="icons icon--20 icon--green mb-1">
-                        <use xlinkHref="#check" />
-                    </svg>
-                ),
-            }
-        ),
-        elapsed: formattedElapsedMs,
-        response_code: status,
-        ...(service_name && services.allServices
-                && { service_name: getServiceName(services.allServices, service_name) }
-        ),
-        ...(rules.length > 0
-                && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
-        ),
-        response_table_header: renderResponses(response),
-        original_response: renderResponses(originalResponse),
-    };
-
-    const content = rules.length > 0
-        ? Object.entries(COMMON_CONTENT)
-        : Object.entries({
-            ...COMMON_CONTENT,
-            filter: '',
-        });
-
-    const getDetailedInfo = (reason) => {
-        switch (reason) {
-            case FILTERED_STATUS.FILTERED_BLOCKED_SERVICE:
-                if (!service_name || !services.allServices) {
-                    return formattedElapsedMs;
-                }
-                return getServiceName(services.allServices, service_name);
-            case FILTERED_STATUS.FILTERED_BLACK_LIST:
-            case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
-                return getFilterNames(rules, filters, whitelistFilters).join(', ');
-            default:
-                return formattedElapsedMs;
-        }
-    };
-
-    const detailedInfo = getDetailedInfo(reason);
-
-    return (
-        <div className="logs__cell logs__cell--response" role="gridcell">
-            <IconTooltip
-                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { 'my-3': isDetailed })}
-                columnClass='grid grid--limited'
-                tooltipClass='px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details'
-                contentItemClass='text-truncate key-colon o-hidden'
-                xlinkHref='question'
-                title='response_details'
-                content={content}
-                placement='bottom'
-            />
-            <div className="text-truncate">
-                <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
-                {isDetailed && <div
-                        className="detailed-info d-none d-sm-block pt-1 text-truncate"
-                        title={detailedInfo}>{detailedInfo}</div>}
-            </div>
-        </div>
-    );
-};
-
-ResponseCell.propTypes = {
-    elapsedMs: propTypes.string.isRequired,
-    originalResponse: propTypes.array.isRequired,
-    reason: propTypes.string.isRequired,
-    response: propTypes.array.isRequired,
-    status: propTypes.string.isRequired,
-    upstream: propTypes.string.isRequired,
-    cached: propTypes.bool.isRequired,
-    rules: propTypes.arrayOf(propTypes.shape({
-        text: propTypes.string.isRequired,
-        filter_list_id: propTypes.number.isRequired,
-    })),
-    service_name: propTypes.string,
-};
-
-export default ResponseCell;

client/src/components/Logs/Cells/ResponseCell.tsx

@@ -0,0 +1,150 @@
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import { getRulesToFilterList, formatElapsedMs, getFilterNames, getServiceName } from '../../../helpers/helpers';
+import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
+
+import IconTooltip from './IconTooltip';
+import { RootState } from '../../../initialState';
+
+interface ResponseCellProps {
+    elapsedMs: string;
+    originalResponse?: unknown[];
+    reason: string;
+    response: unknown[];
+    status: string;
+    upstream: string;
+    cached: boolean;
+    rules?: {
+        text: string;
+        filter_list_id: number;
+    }[];
+    service_name?: string;
+}
+
+const ResponseCell = ({
+    elapsedMs,
+    originalResponse,
+    reason,
+    response,
+    status,
+    upstream,
+    rules,
+    service_name,
+    cached,
+}: ResponseCellProps) => {
+    const { t } = useTranslation();
+
+    const filters = useSelector((state: RootState) => state.filtering.filters, shallowEqual);
+
+    const whitelistFilters = useSelector((state: RootState) => state.filtering.whitelistFilters, shallowEqual);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+    const services = useSelector((store: RootState) => store?.services);
+
+    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+
+    const isBlocked =
+        reason === FILTERED_STATUS.FILTERED_BLACK_LIST || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+
+    const statusLabel = t(
+        isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason,
+    );
+
+    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
+
+    const renderResponses = (responseArr: any) => {
+        if (!responseArr || responseArr.length === 0) {
+            return '';
+        }
+
+        return (
+            <div>
+                {responseArr.map((response: any) => {
+                    const className = classNames('white-space--nowrap', {
+                        'overflow-break': response.length > 100,
+                    });
+
+                    return <div key={response} className={className}>{`${response}\n`}</div>;
+                })}
+            </div>
+        );
+    };
+
+    const COMMON_CONTENT = {
+        encryption_status: boldStatusLabel,
+        install_settings_dns: upstream,
+        ...(cached && {
+            served_from_cache_label: (
+                <svg className="icons icon--20 icon--green mb-1">
+                    <use xlinkHref="#check" />
+                </svg>
+            ),
+        }),
+        elapsed: formattedElapsedMs,
+        response_code: status,
+        ...(service_name &&
+            services.allServices && { service_name: getServiceName(services.allServices, service_name) }),
+        ...(rules.length > 0 && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }),
+        response_table_header: renderResponses(response),
+        original_response: renderResponses(originalResponse),
+    };
+
+    const content =
+        rules.length > 0
+            ? Object.entries(COMMON_CONTENT)
+            : Object.entries({
+                  ...COMMON_CONTENT,
+                  filter: '',
+              });
+
+    const getDetailedInfo = (reason: any) => {
+        switch (reason) {
+            case FILTERED_STATUS.FILTERED_BLOCKED_SERVICE:
+                if (!service_name || !services.allServices) {
+                    return formattedElapsedMs;
+                }
+                return getServiceName(services.allServices, service_name);
+            case FILTERED_STATUS.FILTERED_BLACK_LIST:
+            case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
+                return getFilterNames(rules, filters, whitelistFilters).join(', ');
+            default:
+                return formattedElapsedMs;
+        }
+    };
+
+    const detailedInfo = getDetailedInfo(reason);
+
+    return (
+        <div className="logs__cell logs__cell--response" role="gridcell">
+            <IconTooltip
+                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { 'my-3': isDetailed })}
+                columnClass="grid grid--limited"
+                tooltipClass="px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details"
+                contentItemClass="text-truncate key-colon o-hidden"
+                xlinkHref="question"
+                title="response_details"
+                content={content}
+                placement="bottom"
+            />
+
+            <div className="text-truncate">
+                <div className="text-truncate" title={statusLabel}>
+                    {statusLabel}
+                </div>
+
+                {isDetailed && (
+                    <div className="detailed-info d-none d-sm-block pt-1 text-truncate" title={detailedInfo}>
+                        {detailedInfo}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ResponseCell;

client/src/components/Logs/Cells/helpers/index.ts

@@ -2,20 +2,20 @@ import i18next from 'i18next';
 
 export const BUTTON_PREFIX = 'btn_';
 
-export const getBlockClientInfo = (ip, disallowed, disallowed_rule, allowedСlients) => {
+export const getBlockClientInfo = (ip: any, disallowed: any, disallowed_rule: any, allowedClients: any) => {
     let confirmMessage;
 
     if (disallowed) {
         confirmMessage = i18next.t('client_confirm_unblock', { ip: disallowed_rule || ip });
     } else {
         confirmMessage = `${i18next.t('adg_will_drop_dns_queries')} ${i18next.t('client_confirm_block', { ip })}`;
-        if (allowedСlients.length > 0) {
+        if (allowedClients.length > 0) {
             confirmMessage = confirmMessage.concat(`\n\n${i18next.t('filter_allowlist', { disallowed_rule })}`);
         }
     }
 
     const buttonKey = i18next.t(disallowed ? 'allow_this_client' : 'disallow_this_client');
-    const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
+    const lastRuleInAllowlist = !disallowed && allowedClients === disallowed_rule;
 
     return {
         confirmMessage,

client/src/components/Logs/Cells/index.js

@@ -1,285 +0,0 @@
-import React, { memo } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import propTypes from 'prop-types';
-import {
-    captitalizeWords,
-    checkFiltered,
-    getRulesToFilterList,
-    formatDateTime,
-    formatElapsedMs,
-    formatTime,
-    getBlockingClientName,
-    getServiceName,
-    processContent,
-} from '../../../helpers/helpers';
-import {
-    BLOCK_ACTIONS,
-    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
-    FILTERED_STATUS,
-    FILTERED_STATUS_TO_META_MAP,
-    LONG_TIME_FORMAT,
-    QUERY_STATUS_COLORS,
-    SCHEME_TO_PROTOCOL_MAP,
-} from '../../../helpers/constants';
-import { getSourceData } from '../../../helpers/trackers/trackers';
-import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
-import DateCell from './DateCell';
-import DomainCell from './DomainCell';
-import ResponseCell from './ResponseCell';
-import ClientCell from './ClientCell';
-import { toggleClientBlock } from '../../../actions/access';
-import { getBlockClientInfo, BUTTON_PREFIX } from './helpers';
-import { updateLogs } from '../../../actions/queryLogs';
-
-import '../Logs.css';
-
-const Row = memo(({
-    style,
-    rowProps,
-    rowProps: { reason },
-    isSmallScreen,
-    setDetailedDataCurrent,
-    setButtonType,
-    setModalOpened,
-}) => {
-    const dispatch = useDispatch();
-    const { t } = useTranslation();
-    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
-    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
-    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
-    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
-    const processingSet = useSelector((state) => state.access.processingSet);
-    const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
-    const services = useSelector((store) => store?.services);
-
-    const clients = useSelector((state) => state.dashboard.clients);
-
-    const onClick = () => {
-        if (!isSmallScreen) {
-            return;
-        }
-        const {
-            answer_dnssec,
-            client,
-            domain,
-            elapsedMs,
-            client_info,
-            response,
-            time,
-            tracker,
-            upstream,
-            type,
-            client_proto,
-            client_id,
-            rules,
-            originalResponse,
-            status,
-            service_name,
-            cached,
-        } = rowProps;
-
-        const hasTracker = !!tracker;
-
-        const autoClient = autoClients
-            .find((autoClient) => autoClient.name === client);
-
-        const source = autoClient?.source;
-
-        const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
-        const isFiltered = checkFiltered(reason);
-
-        const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
-                || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
-
-        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
-        const onToggleBlock = () => {
-            dispatch(toggleBlocking(buttonType, domain));
-        };
-
-        const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
-        const requestStatus = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
-
-        const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
-
-        const sourceData = getSourceData(tracker);
-
-        const {
-            confirmMessage,
-            buttonKey: blockingClientKey,
-            lastRuleInAllowlist,
-        } = getBlockClientInfo(
-            client,
-            client_info?.disallowed || false,
-            client_info?.disallowed_rule || '',
-            allowedСlients,
-        );
-
-        const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
-        const clientNameBlockingFor = getBlockingClientName(clients, client);
-
-        const onBlockingForClientClick = () => {
-            dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
-        };
-
-        const onBlockingClientClick = async () => {
-            if (window.confirm(confirmMessage)) {
-                await dispatch(
-                    toggleClientBlock(
-                        client,
-                        client_info?.disallowed || false,
-                        client_info?.disallowed_rule || '',
-                    ),
-                );
-                await dispatch(updateLogs());
-                setModalOpened(false);
-            }
-        };
-
-        const blockButton = (
-            <>
-                <div className="title--border" />
-                <button
-                    type="button"
-                    className={
-                        classNames(
-                            'button-action--arrow-option mb-1',
-                            { 'bg--danger': !isBlocked },
-                            { 'bg--green': isFiltered },
-                        )}
-                    onClick={onToggleBlock}
-                >
-                    {t(buttonType)}
-                </button>
-            </>
-        );
-
-        const blockForClientButton = <button
-                className='text-center font-weight-bold py-1 button-action--arrow-option'
-                onClick={onBlockingForClientClick}>
-            {t(blockingForClientKey)}
-        </button>;
-
-        const blockClientButton = <button
-                className='text-center font-weight-bold py-1 button-action--arrow-option'
-                onClick={onBlockingClientClick}
-                disabled={processingSet || lastRuleInAllowlist}>
-            {t(blockingClientKey)}
-        </button>;
-
-        const detailedData = {
-            time_table_header: formatTime(time, LONG_TIME_FORMAT),
-            date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
-            encryption_status: isBlocked
-                ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
-            ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE && service_name && services.allServices
-                && { service_name: getServiceName(services.allServices, service_name) }),
-            domain,
-            type_table_header: type,
-            protocol,
-            known_tracker: hasTracker && 'title',
-            table_name: tracker?.name,
-            category_label: hasTracker && captitalizeWords(tracker.category),
-            tracker_source: hasTracker && sourceData
-                    && <a
-                            href={sourceData.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="link--green">{sourceData.name}
-                    </a>,
-            response_details: 'title',
-            install_settings_dns: upstream,
-            ...(cached
-                && {
-                    served_from_cache_label: (
-                        <svg className="icons icon--20 icon--green">
-                            <use xlinkHref="#check" />
-                        </svg>
-                    ),
-                }
-            ),
-            elapsed: formattedElapsedMs,
-            ...(rules.length > 0
-                    && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
-            ),
-            response_table_header: response?.join('\n'),
-            response_code: status,
-            client_details: 'title',
-            ip_address: client,
-            name: client_info?.name || client_id,
-            country: client_info?.whois?.country,
-            city: client_info?.whois?.city,
-            network: client_info?.whois?.orgname,
-            source_label: source,
-            validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
-            original_response: originalResponse?.join('\n'),
-            [BUTTON_PREFIX + buttonType]: blockButton,
-            [BUTTON_PREFIX + blockingForClientKey]: blockForClientButton,
-            [BUTTON_PREFIX + blockingClientKey]: blockClientButton,
-        };
-
-        setDetailedDataCurrent(processContent(detailedData));
-        setButtonType(buttonType);
-        setModalOpened(true);
-    };
-
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-
-    const className = classNames('d-flex px-5 logs__row',
-        `logs__row--${FILTERED_STATUS_TO_META_MAP?.[reason]?.COLOR ?? QUERY_STATUS_COLORS.WHITE}`, {
-            'logs__cell--detailed': isDetailed,
-        });
-
-    return <div style={style} className={className} onClick={onClick} role="row">
-        <DateCell {...rowProps} />
-        <DomainCell {...rowProps} />
-        <ResponseCell {...rowProps} />
-        <ClientCell {...rowProps} />
-    </div>;
-});
-
-Row.displayName = 'Row';
-
-Row.propTypes = {
-    style: propTypes.object,
-    rowProps: propTypes.shape({
-        reason: propTypes.string.isRequired,
-        answer_dnssec: propTypes.bool.isRequired,
-        client: propTypes.string.isRequired,
-        domain: propTypes.string.isRequired,
-        elapsedMs: propTypes.string.isRequired,
-        response: propTypes.array.isRequired,
-        time: propTypes.string.isRequired,
-        tracker: propTypes.object,
-        upstream: propTypes.string.isRequired,
-        cached: propTypes.bool.isRequired,
-        type: propTypes.string.isRequired,
-        client_proto: propTypes.string.isRequired,
-        client_id: propTypes.string,
-        ecs: propTypes.string,
-        client_info: propTypes.shape({
-            name: propTypes.string.isRequired,
-            whois: propTypes.shape({
-                country: propTypes.string,
-                city: propTypes.string,
-                orgname: propTypes.string,
-            }).isRequired,
-            disallowed: propTypes.bool.isRequired,
-            disallowed_rule: propTypes.string.isRequired,
-        }),
-        rules: propTypes.arrayOf(propTypes.shape({
-            text: propTypes.string.isRequired,
-            filter_list_id: propTypes.number.isRequired,
-        })),
-        originalResponse: propTypes.array,
-        status: propTypes.string.isRequired,
-        service_name: propTypes.string,
-    }).isRequired,
-    isSmallScreen: propTypes.bool.isRequired,
-    setDetailedDataCurrent: propTypes.func.isRequired,
-    setButtonType: propTypes.func.isRequired,
-    setModalOpened: propTypes.func.isRequired,
-};
-
-export default Row;

client/src/components/Logs/Cells/index.tsx

@@ -0,0 +1,306 @@
+import React, { Dispatch, memo, SetStateAction } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import {
+    captitalizeWords,
+    checkFiltered,
+    getRulesToFilterList,
+    formatDateTime,
+    formatElapsedMs,
+    formatTime,
+    getBlockingClientName,
+    getServiceName,
+    processContent,
+} from '../../../helpers/helpers';
+import {
+    BLOCK_ACTIONS,
+    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
+    FILTERED_STATUS,
+    FILTERED_STATUS_TO_META_MAP,
+    LONG_TIME_FORMAT,
+    QUERY_STATUS_COLORS,
+    SCHEME_TO_PROTOCOL_MAP,
+} from '../../../helpers/constants';
+import { getSourceData } from '../../../helpers/trackers/trackers';
+
+import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
+
+import DateCell from './DateCell';
+
+import DomainCell from './DomainCell';
+
+import ResponseCell from './ResponseCell';
+
+import ClientCell from './ClientCell';
+import { toggleClientBlock } from '../../../actions/access';
+import { getBlockClientInfo, BUTTON_PREFIX } from './helpers';
+import { updateLogs } from '../../../actions/queryLogs';
+
+import '../Logs.css';
+import { RootState } from '../../../initialState';
+
+interface RowProps {
+    style?: object;
+    rowProps: {
+        reason: string;
+        answer_dnssec: boolean;
+        client: string;
+        domain: string;
+        elapsedMs: string;
+        response: unknown[];
+        time: string;
+        tracker?: {
+            name: string;
+            category: string;
+        };
+        upstream: string;
+        cached: boolean;
+        type: string;
+        client_proto: string;
+        client_id?: string;
+        ecs?: string;
+        client_info?: {
+            name: string;
+            whois: {
+                country?: string;
+                city?: string;
+                orgname?: string;
+            };
+            disallowed: boolean;
+            disallowed_rule: string;
+        };
+        rules?: {
+            text: string;
+            filter_list_id: number;
+        }[];
+        originalResponse?: unknown[];
+        status: string;
+        service_name?: string;
+    };
+    isSmallScreen: boolean;
+    setDetailedDataCurrent: Dispatch<SetStateAction<any>>;
+    setButtonType: (...args: unknown[]) => unknown;
+    setModalOpened: (...args: unknown[]) => unknown;
+}
+
+const Row = memo(
+    ({
+        style,
+        rowProps,
+        rowProps: { reason },
+        isSmallScreen,
+        setDetailedDataCurrent,
+        setButtonType,
+        setModalOpened,
+    }: RowProps) => {
+        const dispatch = useDispatch();
+        const { t } = useTranslation();
+
+        const dnssec_enabled = useSelector((state: RootState) => state.dnsConfig.dnssec_enabled);
+
+        const filters = useSelector((state: RootState) => state.filtering.filters, shallowEqual);
+
+        const whitelistFilters = useSelector((state: RootState) => state.filtering.whitelistFilters, shallowEqual);
+
+        const autoClients = useSelector((state: RootState) => state.dashboard.autoClients, shallowEqual);
+
+        const processingSet = useSelector((state: RootState) => state.access.processingSet);
+
+        const allowedClients = useSelector((state: RootState) => state.access.allowed_clients, shallowEqual);
+
+        const services = useSelector((state: RootState) => state?.services);
+
+        const clients = useSelector((state: RootState) => state.dashboard.clients);
+
+        const onClick = () => {
+            if (!isSmallScreen) {
+                return;
+            }
+            const {
+                answer_dnssec,
+                client,
+                domain,
+                elapsedMs,
+                client_info,
+                response,
+                time,
+                tracker,
+                upstream,
+                type,
+                client_proto,
+                client_id,
+                rules,
+                originalResponse,
+                status,
+                service_name,
+                cached,
+            } = rowProps;
+
+            const hasTracker = !!tracker;
+
+            const autoClient = autoClients.find((autoClient: any) => autoClient.name === client);
+
+            const source = autoClient?.source;
+
+            const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+            const isFiltered = checkFiltered(reason);
+
+            const isBlocked =
+                reason === FILTERED_STATUS.FILTERED_BLACK_LIST || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+            const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+            const onToggleBlock = () => {
+                dispatch(toggleBlocking(buttonType, domain));
+            };
+
+            const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+            const requestStatus = t(
+                isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason,
+            );
+
+            const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
+
+            const sourceData = getSourceData(tracker);
+
+            const {
+                confirmMessage,
+                buttonKey: blockingClientKey,
+                lastRuleInAllowlist,
+            } = getBlockClientInfo(
+                client,
+                client_info?.disallowed || false,
+                client_info?.disallowed_rule || '',
+                allowedClients,
+            );
+
+            const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
+            const clientNameBlockingFor = getBlockingClientName(clients, client);
+
+            const onBlockingForClientClick = () => {
+                dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+            };
+
+            const onBlockingClientClick = async () => {
+                if (window.confirm(confirmMessage)) {
+                    await dispatch(
+                        toggleClientBlock(client, client_info?.disallowed || false, client_info?.disallowed_rule || ''),
+                    );
+                    await dispatch(updateLogs());
+                    setModalOpened(false);
+                }
+            };
+
+            const blockButton = (
+                <>
+                    <div className="title--border" />
+
+                    <button
+                        type="button"
+                        className={classNames(
+                            'button-action--arrow-option mb-1',
+                            { 'bg--danger': !isBlocked },
+                            { 'bg--green': isFiltered },
+                        )}
+                        onClick={onToggleBlock}>
+                        {t(buttonType)}
+                    </button>
+                </>
+            );
+
+            const blockForClientButton = (
+                <button
+                    className="text-center font-weight-bold py-1 button-action--arrow-option"
+                    onClick={onBlockingForClientClick}>
+                    {t(blockingForClientKey)}
+                </button>
+            );
+
+            const blockClientButton = (
+                <button
+                    className="text-center font-weight-bold py-1 button-action--arrow-option"
+                    onClick={onBlockingClientClick}
+                    disabled={processingSet || lastRuleInAllowlist}>
+                    {t(blockingClientKey)}
+                </button>
+            );
+
+            const detailedData = {
+                time_table_header: formatTime(time, LONG_TIME_FORMAT),
+
+                date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
+                encryption_status: isBlocked ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
+                ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE &&
+                    service_name &&
+                    services.allServices && { service_name: getServiceName(services.allServices, service_name) }),
+                domain,
+                type_table_header: type,
+                protocol,
+                known_tracker: hasTracker && 'title',
+                table_name: tracker?.name,
+                category_label: hasTracker && captitalizeWords(tracker.category),
+                tracker_source: hasTracker && sourceData && (
+                    <a href={sourceData.url} target="_blank" rel="noopener noreferrer" className="link--green">
+                        {sourceData.name}
+                    </a>
+                ),
+                response_details: 'title',
+                install_settings_dns: upstream,
+                ...(cached && {
+                    served_from_cache_label: (
+                        <svg className="icons icon--20 icon--green">
+                            <use xlinkHref="#check" />
+                        </svg>
+                    ),
+                }),
+                elapsed: formattedElapsedMs,
+                ...(rules.length > 0 && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }),
+                response_table_header: response?.join('\n'),
+                response_code: status,
+                client_details: 'title',
+                ip_address: client,
+                name: client_info?.name || client_id,
+                country: client_info?.whois?.country,
+                city: client_info?.whois?.city,
+                network: client_info?.whois?.orgname,
+                source_label: source,
+                validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
+                original_response: originalResponse?.join('\n'),
+                [BUTTON_PREFIX + buttonType]: blockButton,
+                [BUTTON_PREFIX + blockingForClientKey]: blockForClientButton,
+                [BUTTON_PREFIX + blockingClientKey]: blockClientButton,
+            };
+
+            setDetailedDataCurrent(processContent(detailedData));
+            setButtonType(buttonType);
+            setModalOpened(true);
+        };
+
+        const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+        const className = classNames(
+            'd-flex px-5 logs__row',
+            `logs__row--${FILTERED_STATUS_TO_META_MAP?.[reason]?.COLOR ?? QUERY_STATUS_COLORS.WHITE}`,
+            {
+                'logs__cell--detailed': isDetailed,
+            },
+        );
+
+        return (
+            <div style={style} className={className} onClick={onClick} role="row">
+                <DateCell {...rowProps} />
+
+                <DomainCell {...rowProps} />
+
+                <ResponseCell {...rowProps} />
+
+                <ClientCell {...rowProps} />
+            </div>
+        );
+    },
+);
+
+Row.displayName = 'Row';
+
+export default Row;

client/src/components/Logs/Disabled.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { Trans } from 'react-i18next';
+
 import { HashLink as Link } from 'react-router-hash-link';
 
 import Card from '../ui/Card';
@@ -11,6 +12,7 @@ const Disabled = () => (
                 <Trans>query_log</Trans>
             </h1>
         </div>
+
         <Card>
             <div className="lead text-center py-6">
                 <Trans
@@ -18,8 +20,7 @@ const Disabled = () => (
                         <Link to="/settings#logs-config" key="0">
                             link
                         </Link>,
-                    ]}
-                >
+                    ]}>
                     query_log_disabled
                 </Trans>
             </div>

client/src/components/Logs/Filters/Form.js

@@ -1,200 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { useTranslation } from 'react-i18next';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
-import {
-    DEBOUNCE_FILTER_TIMEOUT,
-    DEFAULT_LOGS_FILTER,
-    FORM_NAME,
-    RESPONSE_FILTER,
-    RESPONSE_FILTER_QUERIES,
-} from '../../../helpers/constants';
-import { setLogsFilter } from '../../../actions/queryLogs';
-import useDebounce from '../../../helpers/useDebounce';
-import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
-import Tooltip from '../../ui/Tooltip';
-
-const renderFilterField = ({
-    input,
-    id,
-    className,
-    placeholder,
-    type,
-    disabled,
-    autoComplete,
-    tooltip,
-    meta: { touched, error },
-    onClearInputClick,
-    onKeyDown,
-    normalizeOnBlur,
-}) => {
-    const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
-
-    return <>
-        <div className="input-group-search input-group-search__icon--magnifier">
-            <svg className="icons icon--24 icon--gray">
-                <use xlinkHref="#magnifier" />
-            </svg>
-        </div>
-        <input
-            {...input}
-            id={id}
-            placeholder={placeholder}
-            type={type}
-            className={className}
-            disabled={disabled}
-            autoComplete={autoComplete}
-            aria-label={placeholder}
-            onKeyDown={onKeyDown}
-            onBlur={onBlur}
-        />
-        <div
-            className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
-            <svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
-                <use xlinkHref="#cross" />
-            </svg>
-        </div>
-        <span className="input-group-search input-group-search__icon--tooltip">
-            <Tooltip content={tooltip} className="tooltip-container">
-                <svg className="icons icon--20 icon--gray">
-                    <use xlinkHref="#question" />
-                </svg>
-            </Tooltip>
-    </span>
-        {!disabled
-        && touched
-        && (error && <span className="form__message form__message--error">{error}</span>)}
-    </>;
-};
-
-renderFilterField.propTypes = {
-    input: PropTypes.object.isRequired,
-    id: PropTypes.string.isRequired,
-    onClearInputClick: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    type: PropTypes.string,
-    disabled: PropTypes.string,
-    autoComplete: PropTypes.string,
-    tooltip: PropTypes.string,
-    onKeyDown: PropTypes.func,
-    normalizeOnBlur: PropTypes.func,
-    meta: PropTypes.shape({
-        touched: PropTypes.bool,
-        error: PropTypes.object,
-    }).isRequired,
-};
-
-const FORM_NAMES = {
-    search: 'search',
-    response_status: 'response_status',
-};
-
-const Form = (props) => {
-    const {
-        className = '',
-        responseStatusClass,
-        setIsLoading,
-        change,
-    } = props;
-
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const history = useHistory();
-
-    const {
-        response_status, search,
-    } = useSelector((state) => state?.form[FORM_NAME.LOGS_FILTER].values, shallowEqual);
-
-    const [
-        debouncedSearch,
-        setDebouncedSearch,
-    ] = useDebounce(search.trim(), DEBOUNCE_FILTER_TIMEOUT);
-
-    useEffect(() => {
-        dispatch(setLogsFilter({
-            response_status,
-            search: debouncedSearch,
-        }));
-
-        history.replace(`${getLogsUrlParams(debouncedSearch, response_status)}`);
-    }, [response_status, debouncedSearch]);
-
-    if (response_status && !(response_status in RESPONSE_FILTER_QUERIES)) {
-        change(FORM_NAMES.response_status, DEFAULT_LOGS_FILTER[FORM_NAMES.response_status]);
-    }
-
-    const onInputClear = async () => {
-        setIsLoading(true);
-        change(FORM_NAMES.search, DEFAULT_LOGS_FILTER[FORM_NAMES.search]);
-        setIsLoading(false);
-    };
-
-    const onEnterPress = (e) => {
-        if (e.key === 'Enter') {
-            setDebouncedSearch(search);
-        }
-    };
-
-    const normalizeOnBlur = (data) => data.trim();
-
-    return (
-        <form
-            className="d-flex flex-wrap form-control--container"
-            onSubmit={(e) => {
-                e.preventDefault();
-            }}
-        >
-            <div className="field__search">
-                <Field
-                    id={FORM_NAMES.search}
-                    name={FORM_NAMES.search}
-                    component={renderFilterField}
-                    type="text"
-                    className={classNames('form-control form-control--search form-control--transparent', className)}
-                    placeholder={t('domain_or_client')}
-                    tooltip={t('query_log_strict_search')}
-                    onClearInputClick={onInputClear}
-                    onKeyDown={onEnterPress}
-                    normalizeOnBlur={normalizeOnBlur}
-                />
-            </div>
-            <div className="field__select">
-                <Field
-                    name={FORM_NAMES.response_status}
-                    component="select"
-                    className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left form-control--transparent', responseStatusClass)}
-                >
-                    {Object.values(RESPONSE_FILTER)
-                        .map(({
-                            QUERY, LABEL, disabled,
-                        }) => (
-                            <option
-                                key={LABEL}
-                                value={QUERY}
-                                disabled={disabled}
-                            >
-                                {t(LABEL)}
-                            </option>
-                        ))
-                    }
-                </Field>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    className: PropTypes.string,
-    responseStatusClass: PropTypes.string,
-    change: PropTypes.func.isRequired,
-    setIsLoading: PropTypes.func.isRequired,
-};
-
-export default reduxForm({
-    form: FORM_NAME.LOGS_FILTER,
-    enableReinitialize: true,
-})(Form);

client/src/components/Logs/Filters/Form.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect } from 'react';
+
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+import {
+    DEBOUNCE_FILTER_TIMEOUT,
+    DEFAULT_LOGS_FILTER,
+    FORM_NAME,
+    RESPONSE_FILTER,
+    RESPONSE_FILTER_QUERIES,
+} from '../../../helpers/constants';
+import { setLogsFilter } from '../../../actions/queryLogs';
+import useDebounce from '../../../helpers/useDebounce';
+
+import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
+
+import Tooltip from '../../ui/Tooltip';
+import { RootState } from '../../../initialState';
+
+interface renderFilterFieldProps {
+    input: {
+        value: string;
+    };
+    id: string;
+    onClearInputClick: (...args: unknown[]) => unknown;
+    className?: string;
+    placeholder?: string;
+    type?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    tooltip?: string;
+    onKeyDown?: (...args: unknown[]) => unknown;
+    normalizeOnBlur?: (...args: unknown[]) => unknown;
+    meta: {
+        touched?: boolean;
+        error?: object;
+    };
+}
+
+const renderFilterField = ({
+    input,
+    id,
+    className,
+    placeholder,
+    type,
+    disabled,
+    autoComplete,
+    tooltip,
+    meta: { touched, error },
+    onClearInputClick,
+    onKeyDown,
+    normalizeOnBlur,
+}: renderFilterFieldProps) => {
+    const onBlur = (event: any) => createOnBlurHandler(event, input, normalizeOnBlur);
+
+    return (
+        <>
+            <div className="input-group-search input-group-search__icon--magnifier">
+                <svg className="icons icon--24 icon--gray">
+                    <use xlinkHref="#magnifier" />
+                </svg>
+            </div>
+
+            <input
+                {...input}
+                id={id}
+                placeholder={placeholder}
+                type={type}
+                className={className}
+                disabled={disabled}
+                autoComplete={autoComplete}
+                aria-label={placeholder}
+                onKeyDown={onKeyDown}
+                onBlur={onBlur}
+            />
+
+            <div
+                className={classNames('input-group-search input-group-search__icon--cross', {
+                    invisible: input.value.length < 1,
+                })}>
+                <svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
+                    <use xlinkHref="#cross" />
+                </svg>
+            </div>
+
+            <span className="input-group-search input-group-search__icon--tooltip">
+                <Tooltip content={tooltip} className="tooltip-container">
+                    <svg className="icons icon--20 icon--gray">
+                        <use xlinkHref="#question" />
+                    </svg>
+                </Tooltip>
+            </span>
+            {!disabled && touched && error && <span className="form__message form__message--error">{error}</span>}
+        </>
+    );
+};
+
+const FORM_NAMES = {
+    search: 'search',
+    response_status: 'response_status',
+};
+
+interface FiltersFormProps {
+    className?: string;
+    responseStatusClass?: string;
+    change: (...args: unknown[]) => unknown;
+    setIsLoading?: (...args: unknown[]) => unknown;
+}
+
+const Form = (props: FiltersFormProps) => {
+    const { className = '', responseStatusClass, setIsLoading, change } = props;
+
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const { response_status, search } = useSelector(
+        (state: RootState) => state?.form[FORM_NAME.LOGS_FILTER].values,
+        shallowEqual,
+    );
+
+    const [debouncedSearch, setDebouncedSearch] = useDebounce(search.trim(), DEBOUNCE_FILTER_TIMEOUT);
+
+    useEffect(() => {
+        dispatch(
+            setLogsFilter({
+                response_status,
+                search: debouncedSearch,
+            }),
+        );
+
+        history.replace(`${getLogsUrlParams(debouncedSearch, response_status)}`);
+    }, [response_status, debouncedSearch]);
+
+    if (response_status && !(response_status in RESPONSE_FILTER_QUERIES)) {
+        change(FORM_NAMES.response_status, DEFAULT_LOGS_FILTER[FORM_NAMES.response_status]);
+    }
+
+    const onInputClear = async () => {
+        setIsLoading(true);
+
+        change(FORM_NAMES.search, DEFAULT_LOGS_FILTER[FORM_NAMES.search]);
+        setIsLoading(false);
+    };
+
+    const onEnterPress = (e: any) => {
+        if (e.key === 'Enter') {
+            setDebouncedSearch(search);
+        }
+    };
+
+    const normalizeOnBlur = (data: any) => data.trim();
+
+    return (
+        <form
+            className="d-flex flex-wrap form-control--container"
+            onSubmit={(e) => {
+                e.preventDefault();
+            }}>
+            <div className="field__search">
+                <Field
+                    id={FORM_NAMES.search}
+                    name={FORM_NAMES.search}
+                    component={renderFilterField}
+                    type="text"
+                    className={classNames('form-control form-control--search form-control--transparent', className)}
+                    placeholder={t('domain_or_client')}
+                    tooltip={t('query_log_strict_search')}
+                    onClearInputClick={onInputClear}
+                    onKeyDown={onEnterPress}
+                    normalizeOnBlur={normalizeOnBlur}
+                />
+            </div>
+
+            <div className="field__select">
+                <Field
+                    name={FORM_NAMES.response_status}
+                    component="select"
+                    className={classNames(
+                        'form-control custom-select custom-select--logs custom-select__arrow--left form-control--transparent',
+                        responseStatusClass,
+                    )}>
+                    {Object.values(RESPONSE_FILTER).map(({ QUERY, LABEL, disabled }: any) => (
+                        <option key={LABEL} value={QUERY} disabled={disabled}>
+                            {t(LABEL)}
+                        </option>
+                    ))}
+                </Field>
+            </div>
+        </form>
+    );
+};
+
+export default reduxForm({
+    form: FORM_NAME.LOGS_FILTER,
+    enableReinitialize: true,
+})(Form);

client/src/components/Logs/Filters/index.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+
 import Form from './Form';
 import { refreshFilteredLogs } from '../../../actions/queryLogs';
 import { addSuccessToast } from '../../../actions/toasts';
 
-const Filters = ({ filter, setIsLoading }) => {
+interface FiltersProps {
+    filter: object;
+    processingGetLogs: boolean;
+    setIsLoading: (...args: unknown[]) => unknown;
+}
+
+const Filters = ({ filter, setIsLoading }: FiltersProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
@@ -17,32 +23,29 @@ const Filters = ({ filter, setIsLoading }) => {
         setIsLoading(false);
     };
 
-    return <div className="page-header page-header--logs">
-        <h1 className="page-title page-title--large">
-            {t('query_log')}
-            <button
+    return (
+        <div className="page-header page-header--logs">
+            <h1 className="page-title page-title--large">
+                {t('query_log')}
+
+                <button
                     type="button"
                     className="btn btn-icon--green logs__refresh"
                     title={t('refresh_btn')}
-                    onClick={refreshLogs}
-            >
-                <svg className="icons icon--24">
-                    <use xlinkHref="#update" />
-                </svg>
-            </button>
-        </h1>
-        <Form
-                responseStatusClass="d-sm-block"
-                initialValues={filter}
-                setIsLoading={setIsLoading}
-        />
-    </div>;
-};
+                    onClick={refreshLogs}>
+                    <svg className="icons icon--24">
+                        <use xlinkHref="#update" />
+                    </svg>
+                </button>
+            </h1>
 
-Filters.propTypes = {
-    filter: PropTypes.object.isRequired,
-    processingGetLogs: PropTypes.bool.isRequired,
-    setIsLoading: PropTypes.func.isRequired,
+            <Form
+                // responseStatusClass="d-sm-block"
+                // setIsLoading={setIsLoading}
+                initialValues={filter}
+            />
+        </div>
+    );
 };
 
 export default Filters;

client/src/components/Logs/InfiniteTable.tsx

@@ -1,18 +1,27 @@
-import React, {
-    useCallback,
-    useEffect,
-    useRef,
-} from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import propTypes from 'prop-types';
 import throttle from 'lodash/throttle';
+
 import Loading from '../ui/Loading';
+
 import Header from './Cells/Header';
 import { getLogs } from '../../actions/queryLogs';
+
 import Row from './Cells';
+
 import { isScrolledIntoView } from '../../helpers/helpers';
 import { QUERY_LOGS_PAGE_LIMIT } from '../../helpers/constants';
+import { RootState } from '../../initialState';
+
+interface InfiniteTableProps {
+    isLoading: boolean;
+    items: unknown[];
+    isSmallScreen: boolean;
+    setDetailedDataCurrent: Dispatch<SetStateAction<any>>;
+    setButtonType: (...args: unknown[]) => unknown;
+    setModalOpened: (...args: unknown[]) => unknown;
+}
 
 const InfiniteTable = ({
     isLoading,
@@ -21,14 +30,15 @@ const InfiniteTable = ({
     setDetailedDataCurrent,
     setButtonType,
     setModalOpened,
-}) => {
+}: InfiniteTableProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const loader = useRef(null);
     const loadingRef = useRef(null);
 
-    const isEntireLog = useSelector((state) => state.queryLogs.isEntireLog);
-    const processingGetLogs = useSelector((state) => state.queryLogs.processingGetLogs);
+    const isEntireLog = useSelector((state: RootState) => state.queryLogs.isEntireLog);
+
+    const processingGetLogs = useSelector((state: RootState) => state.queryLogs.processingGetLogs);
     const loading = isLoading || processingGetLogs;
 
     const listener = useCallback(() => {
@@ -55,20 +65,23 @@ const InfiniteTable = ({
         };
     }, []);
 
-    const renderRow = (row, idx) => <Row
-        key={idx}
-        rowProps={row}
-        isSmallScreen={isSmallScreen}
-        setDetailedDataCurrent={setDetailedDataCurrent}
-        setButtonType={setButtonType}
-        setModalOpened={setModalOpened}
-    />;
+    const renderRow = (row: any, idx: any) => (
+        <Row
+            key={idx}
+            rowProps={row}
+            isSmallScreen={isSmallScreen}
+            setDetailedDataCurrent={setDetailedDataCurrent}
+            setButtonType={setButtonType}
+            setModalOpened={setModalOpened}
+        />
+    );
 
     const isNothingFound = items.length === 0 && !processingGetLogs;
 
     return (
         <div className="logs__table" role="grid">
             {loading && <Loading />}
+
             <Header />
             {isNothingFound ? (
                 <label className="logs__no-data">{t('nothing_found')}</label>
@@ -86,13 +99,4 @@ const InfiniteTable = ({
     );
 };
 
-InfiniteTable.propTypes = {
-    isLoading: propTypes.bool.isRequired,
-    items: propTypes.array.isRequired,
-    isSmallScreen: propTypes.bool.isRequired,
-    setDetailedDataCurrent: propTypes.func.isRequired,
-    setButtonType: propTypes.func.isRequired,
-    setModalOpened: propTypes.func.isRequired,
-};
-
 export default InfiniteTable;

client/src/components/Logs/Logs.css

@@ -24,7 +24,7 @@
     --option-border-radius: 4px;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
     --red: rgba(223, 56, 18, 0.25);
     --green-pale: rgba(103, 178, 121, 0.25);
     --yellow: rgba(247, 181, 0, 0.2);
@@ -42,11 +42,11 @@
     line-height: 1.5rem;
 }
 
-[data-theme="dark"] .logs__text a {
+[data-theme='dark'] .logs__text a {
     color: var(--gray-f3);
 }
 
-[data-theme="dark"] .logs__text a:hover {
+[data-theme='dark'] .logs__text a:hover {
     color: var(--gray-f3);
 }
 
@@ -74,9 +74,9 @@
     color: #295a9f;
 }
 
-[data-theme="dark"] .logs__text--link,
-[data-theme="dark"] .logs__text--link:hover,
-[data-theme="dark"] .logs__text--link:focus {
+[data-theme='dark'] .logs__text--link,
+[data-theme='dark'] .logs__text--link:hover,
+[data-theme='dark'] .logs__text--link:focus {
     color: var(--gray-f3);
 }
 
@@ -90,7 +90,7 @@
     border-radius: 4px;
 }
 
-[data-theme=dark] .icon--selected {
+[data-theme='dark'] .icon--selected {
     opacity: 0.75;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .custom-select__arrow--left {
-    background: var(--white) url("../ui/svg/chevron-down.svg") no-repeat;
+    background: var(--white) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5YWEwYWMiCiAgICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj4KICAgIDxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPgo8L3N2Zz4K") no-repeat;
     background-position: 5px 9px;
     background-size: 22px;
 }
@@ -150,7 +150,7 @@
     background-color: transparent !important;
 }
 
-[data-theme="dark"] .form-control--transparent option {
+[data-theme='dark'] .form-control--transparent option {
     background-color: var(--card-bgcolor);
 }
 
@@ -351,7 +351,7 @@
     overflow: hidden;
 }
 
-[data-theme="dark"] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
+[data-theme='dark'] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
     background: var(--ctrl-dropdown-bgcolor-focus);
 }
 
@@ -387,7 +387,7 @@
     background-color: var(--logs__row--blue-bgcolor);
 }
 
-[data-theme="dark"] .logs__row--blue .logs__text--link {
+[data-theme='dark'] .logs__row--blue .logs__text--link {
     color: var(--white);
 }
 
@@ -465,13 +465,13 @@
 }
 
 .logs__whois::after {
-    content: "|";
+    content: '|';
     padding: 0 5px;
     opacity: 0.3;
 }
 
 .logs__whois:last-child::after {
-    content: "";
+    content: '';
 }
 
 .logs__whois-icon.icons {
@@ -501,7 +501,7 @@
     color: var(--green79);
 }
 
-[data-theme="dark"] .logs__question.icon--lightgray {
+[data-theme='dark'] .logs__question.icon--lightgray {
     color: var(--gray-f3);
 }
 
@@ -533,6 +533,6 @@
     clip: rect(0 0 0 0);
 }
 
-[data-theme="dark"] .button-action__icon {
+[data-theme='dark'] .button-action__icon {
     color: var(--gray-f3);
 }

client/src/components/Logs/index.tsx

@@ -1,35 +1,36 @@
 import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
+
 import Modal from 'react-modal';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import { useHistory } from 'react-router-dom';
 import queryString from 'query-string';
 import classNames from 'classnames';
-import {
-    BLOCK_ACTIONS,
-    MEDIUM_SCREEN_SIZE,
-} from '../../helpers/constants';
+import { BLOCK_ACTIONS, MEDIUM_SCREEN_SIZE } from '../../helpers/constants';
+
 import Loading from '../ui/Loading';
+
 import Filters from './Filters';
+
 import Disabled from './Disabled';
 import { getFilteringStatus } from '../../actions/filtering';
+
 import { getClients } from '../../actions';
 import { getDnsConfig } from '../../actions/dnsConfig';
 import { getAccessList } from '../../actions/access';
 import { getAllBlockedServices } from '../../actions/services';
-import {
-    getLogsConfig,
-    resetFilteredLogs,
-    setFilteredLogs,
-    toggleDetailedLogs,
-} from '../../actions/queryLogs';
+import { getLogsConfig, resetFilteredLogs, setFilteredLogs, toggleDetailedLogs } from '../../actions/queryLogs';
+
 import InfiniteTable from './InfiniteTable';
 import './Logs.css';
 import { BUTTON_PREFIX } from './Cells/helpers';
-import AnonymizerNotification from './AnonymizerNotification';
 
-const processContent = (data) => Object.entries(data)
-    .map(([key, value]) => {
+import AnonymizerNotification from './AnonymizerNotification';
+import { RootState } from '../../initialState';
+
+const processContent = (data: any, buttonType: string) =>
+    Object.entries(data).map(([key, value]) => {
         if (!value) {
             return null;
         }
@@ -53,12 +54,12 @@ const processContent = (data) => Object.entries(data)
                 <div
                     className={classNames(`key__${key}`, keyClass, {
                         'font-weight-bold': isBoolean && value === true,
-                    })}
-                >
+                    })}>
                     <Trans>{isButton ? value : key}</Trans>
                 </div>
+
                 <div className={`value__${key} text-pre text-truncate`}>
-                    <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                    <Trans>{isTitle || isButton || isBoolean ? '' : value || '—'}</Trans>
                 </div>
             </div>
         );
@@ -68,20 +69,21 @@ const Logs = () => {
     const dispatch = useDispatch();
     const history = useHistory();
 
-    const {
-        response_status: response_status_url_param,
-        search: search_url_param,
-    } = queryString.parse(history.location.search);
+    const { response_status: response_status_url_param, search: search_url_param } = queryString.parse(
+        history.location.search,
+    );
 
     const {
         enabled,
         processingGetConfig,
-        processingAdditionalLogs,
+        // processingAdditionalLogs,
         processingGetLogs,
         anonymize_client_ip: anonymizeClientIp,
-    } = useSelector((state) => state.queryLogs, shallowEqual);
-    const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
-    const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
+    } = useSelector((state: RootState) => state.queryLogs, shallowEqual);
+
+    const filter = useSelector((state: RootState) => state.queryLogs.filter, shallowEqual);
+
+    const logs = useSelector((state: RootState) => state.queryLogs.logs, shallowEqual);
 
     const search = search_url_param || filter?.search || '';
     const response_status = response_status_url_param || filter?.response_status || '';
@@ -97,16 +99,18 @@ const Logs = () => {
     useEffect(() => {
         (async () => {
             setIsLoading(true);
-            await dispatch(setFilteredLogs({
-                search,
-                response_status,
-            }));
+            await dispatch(
+                setFilteredLogs({
+                    search,
+                    response_status,
+                }),
+            );
             setIsLoading(false);
         })();
     }, [response_status, search]);
 
     const mediaQuery = window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`);
-    const mediaQueryHandler = (e) => {
+    const mediaQueryHandler = (e: any) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
             dispatch(toggleDetailedLogs(false));
@@ -133,11 +137,7 @@ const Logs = () => {
             dispatch(getClients());
             dispatch(getAllBlockedServices());
             try {
-                await Promise.all([
-                    dispatch(getLogsConfig()),
-                    dispatch(getDnsConfig()),
-                    dispatch(getAccessList()),
-                ]);
+                await Promise.all([dispatch(getLogsConfig()), dispatch(getDnsConfig()), dispatch(getAccessList())]);
             } catch (err) {
                 console.error(err);
             } finally {
@@ -165,70 +165,74 @@ const Logs = () => {
         if (!history.location.search) {
             (async () => {
                 setIsLoading(true);
+
                 await dispatch(setFilteredLogs());
                 setIsLoading(false);
             })();
         }
     }, [history.location.search]);
 
-    const renderPage = () => <>
-        <Filters
+    const renderPage = () => (
+        <>
+            <Filters
                 filter={{
                     response_status,
                     search,
                 }}
                 setIsLoading={setIsLoading}
                 processingGetLogs={processingGetLogs}
-                processingAdditionalLogs={processingAdditionalLogs}
-        />
-        <InfiniteTable
+                // processingAdditionalLogs={processingAdditionalLogs}
+            />
+
+            <InfiniteTable
                 isLoading={isLoading}
                 items={logs}
                 isSmallScreen={isSmallScreen}
                 setDetailedDataCurrent={setDetailedDataCurrent}
                 setButtonType={setButtonType}
                 setModalOpened={setModalOpened}
-        />
-        <Modal
-            portalClassName='grid'
-            isOpen={isSmallScreen && isModalOpened}
-            onRequestClose={closeModal}
-            style={{
-                content: {
-                    width: 'calc(100% - 32px)',
-                    height: 'fit-content',
-                    left: '50%',
-                    top: 47,
-                    padding: '0',
-                    maxWidth: '720px',
-                    transform: 'translateX(-50%)',
-                },
-                overlay: {
-                    backgroundColor: 'rgba(0,0,0,0.5)',
-                },
-            }}
-        >
-            <div className="logs__modal-wrap">
-                <svg
-                    className="icon icon--24 icon-cross d-block cursor--pointer"
-                    onClick={closeModal}
-                >
-                    <use xlinkHref="#cross" />
-                </svg>
-                {processContent(detailedDataCurrent, buttonType)}
-            </div>
-        </Modal>
-    </>;
+            />
+
+            <Modal
+                portalClassName="grid"
+                isOpen={isSmallScreen && isModalOpened}
+                onRequestClose={closeModal}
+                style={{
+                    content: {
+                        width: 'calc(100% - 32px)',
+                        height: 'fit-content',
+                        left: '50%',
+                        top: 47,
+                        padding: '0',
+                        maxWidth: '720px',
+                        transform: 'translateX(-50%)',
+                    },
+                    overlay: {
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                    },
+                }}>
+                <div className="logs__modal-wrap">
+                    <svg className="icon icon--24 icon-cross d-block cursor--pointer" onClick={closeModal}>
+                        <use xlinkHref="#cross" />
+                    </svg>
+
+                    {processContent(detailedDataCurrent, buttonType)}
+                </div>
+            </Modal>
+        </>
+    );
 
     return (
         <>
             {enabled && (
                 <>
                     {processingGetConfig && <Loading />}
+
                     {anonymizeClientIp && <AnonymizerNotification />}
                     {!processingGetConfig && renderPage()}
                 </>
             )}
+
             {!enabled && !processingGetConfig && <Disabled />}
         </>
     );

client/src/components/ProtectionTimer/index.ts

@@ -1,17 +1,23 @@
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 
 import { ONE_SECOND_IN_MS } from '../../helpers/constants';
+
 import { setProtectionTimerTime, toggleProtectionSuccess } from '../../actions';
 
-let interval = null;
+let interval: any = null;
+
+interface ProtectionTimerProps {
+    protectionDisabledDuration?: number;
+    toggleProtectionSuccess: (...args: unknown[]) => unknown;
+    setProtectionTimerTime: (...args: unknown[]) => unknown;
+}
 
 const ProtectionTimer = ({
     protectionDisabledDuration,
     toggleProtectionSuccess,
     setProtectionTimerTime,
-}) => {
+}: ProtectionTimerProps) => {
     useEffect(() => {
         if (protectionDisabledDuration !== null && protectionDisabledDuration < ONE_SECOND_IN_MS) {
             toggleProtectionSuccess({ disabledDuration: null });
@@ -31,13 +37,7 @@ const ProtectionTimer = ({
     return null;
 };
 
-ProtectionTimer.propTypes = {
-    protectionDisabledDuration: PropTypes.number,
-    toggleProtectionSuccess: PropTypes.func.isRequired,
-    setProtectionTimerTime: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { dashboard } = state;
     const { protectionEnabled, protectionDisabledDuration } = dashboard;
     return { protectionEnabled, protectionDisabledDuration };
@@ -48,7 +48,4 @@ const mapDispatchToProps = {
     setProtectionTimerTime,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(ProtectionTimer);
+export default connect(mapStateToProps, mapDispatchToProps)(ProtectionTimer);

client/src/components/Settings/Clients/AutoClients.tsx

@@ -1,20 +1,30 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 
 import Card from '../../ui/Card';
+
 import CellWrap from '../../ui/CellWrap';
 
 import whoisCell from './whoisCell';
+
 import LogsSearchLink from '../../ui/LogsSearchLink';
+
 import { sortIp } from '../../../helpers/helpers';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
 import { TABLES_MIN_ROWS } from '../../../helpers/constants';
 
 const COLUMN_MIN_WIDTH = 200;
 
-class AutoClients extends Component {
+interface AutoClientsProps {
+    t: (...args: unknown[]) => string;
+    autoClients: any[];
+    normalizedTopClients: any;
+}
+
+class AutoClients extends Component<AutoClientsProps> {
     columns = [
         {
             Header: this.props.t('table_client'),
@@ -39,24 +49,24 @@ class AutoClients extends Component {
             Header: this.props.t('whois'),
             accessor: 'whois_info',
             minWidth: COLUMN_MIN_WIDTH,
+
             Cell: whoisCell(this.props.t),
         },
         {
             Header: this.props.t('requests_count'),
-            accessor: (row) => this.props.normalizedTopClients.auto[row.ip] || 0,
-            sortMethod: (a, b) => b - a,
+
+            accessor: (row: any) => this.props.normalizedTopClients.auto[row.ip] || 0,
+            sortMethod: (a: any, b: any) => b - a,
             id: 'statistics',
             minWidth: COLUMN_MIN_WIDTH,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const { value: clientStats } = row;
 
                 if (clientStats) {
                     return (
                         <div className="logs__row">
                             <div className="logs__text" title={clientStats}>
-                                <LogsSearchLink search={row.original.ip}>
-                                    {clientStats}
-                                </LogsSearchLink>
+                                <LogsSearchLink search={row.original.ip}>{clientStats}</LogsSearchLink>
                             </div>
                         </div>
                     );
@@ -74,8 +84,7 @@ class AutoClients extends Component {
             <Card
                 title={t('auto_clients_title')}
                 subtitle={t('auto_clients_desc')}
-                bodyType="card-body box-body--settings"
-            >
+                bodyType="card-body box-body--settings">
                 <ReactTable
                     data={autoClients || []}
                     columns={this.columns}
@@ -88,9 +97,9 @@ class AutoClients extends Component {
                     className="-striped -highlight card-table-overflow"
                     showPagination
                     defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE) || 10}
-                    onPageSizeChange={(size) => (
+                    onPageSizeChange={(size: any) =>
                         LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE, size)
-                    )}
+                    }
                     minRows={TABLES_MIN_ROWS}
                     ofText="/"
                     previousText={t('previous_btn')}
@@ -105,10 +114,4 @@ class AutoClients extends Component {
     }
 }
 
-AutoClients.propTypes = {
-    t: PropTypes.func.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    normalizedTopClients: PropTypes.object.isRequired,
-};
-
 export default withTranslation()(AutoClients);

client/src/components/Settings/Clients/ClientsTable/ClientsTable.tsx

@@ -1,26 +1,46 @@
 /* eslint-disable react/display-name */
 /* eslint-disable react/prop-types */
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+
 import { useHistory, useLocation } from 'react-router-dom';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 
 import { getAllBlockedServices, getBlockedServices } from '../../../../actions/services';
+
 import { initSettings } from '../../../../actions';
-import {
-    splitByNewLine,
-    countClientsStatistics,
-    sortIp,
-    getService,
-} from '../../../../helpers/helpers';
+import { splitByNewLine, countClientsStatistics, sortIp, getService } from '../../../../helpers/helpers';
 import { MODAL_TYPE, LOCAL_TIMEZONE_VALUE, TABLES_MIN_ROWS } from '../../../../helpers/constants';
+
 import Card from '../../../ui/Card';
+
 import CellWrap from '../../../ui/CellWrap';
+
 import LogsSearchLink from '../../../ui/LogsSearchLink';
+
 import Modal from '../Modal';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../../helpers/localStorageHelper';
+import { Client, NormalizedTopClients, RootState } from '../../../../initialState';
+
+interface ClientsTableProps {
+    clients: Client[];
+    normalizedTopClients: NormalizedTopClients;
+    toggleClientModal: (...args: unknown[]) => unknown;
+    deleteClient: (...args: unknown[]) => string;
+    addClient: (...args: unknown[]) => string;
+    updateClient: (...args: unknown[]) => string;
+    isModalOpen: boolean;
+    modalType: string;
+    modalClientName: string;
+    processingAdding: boolean;
+    processingDeleting: boolean;
+    processingUpdating: boolean;
+    getStats: (...args: unknown[]) => unknown;
+    supportedTags: string[];
+}
 
 const ClientsTable = ({
     clients,
@@ -37,18 +57,18 @@ const ClientsTable = ({
     processingUpdating,
     getStats,
     supportedTags,
-}) => {
+}: ClientsTableProps) => {
     const [t] = useTranslation();
     const dispatch = useDispatch();
     const location = useLocation();
     const history = useHistory();
-    const services = useSelector((store) => store?.services);
-    const globalSettings = useSelector((store) => store?.settings.settingsList) || {};
+
+    const services = useSelector((state: RootState) => state?.services);
+
+    const globalSettings = useSelector((state: RootState) => state?.settings.settingsList);
     const params = new URLSearchParams(location.search);
     const clientId = params.get('clientId');
 
-    const { safesearch } = globalSettings;
-
     useEffect(() => {
         dispatch(getAllBlockedServices());
         dispatch(getBlockedServices());
@@ -61,22 +81,22 @@ const ClientsTable = ({
         }
     }, []);
 
-    const handleFormAdd = (values) => {
+    const handleFormAdd = (values: any) => {
         addClient(values);
     };
 
-    const handleFormUpdate = (values, name) => {
+    const handleFormUpdate = (values: any, name: any) => {
         updateClient(values, name);
     };
 
-    const handleSubmit = (values) => {
+    const handleSubmit = (values: any) => {
         const config = { ...values };
 
         if (values) {
             if (values.blocked_services) {
-                config.blocked_services = Object
-                    .keys(values.blocked_services)
-                    .filter((service) => values.blocked_services[service]);
+                config.blocked_services = Object.keys(values.blocked_services).filter(
+                    (service) => values.blocked_services[service],
+                );
             }
 
             if (values.upstreams && typeof values.upstreams === 'string') {
@@ -86,7 +106,7 @@ const ClientsTable = ({
             }
 
             if (values.tags) {
-                config.tags = values.tags.map((tag) => tag.value);
+                config.tags = values.tags.map((tag: any) => tag.value);
             } else {
                 config.tags = [];
             }
@@ -107,20 +127,17 @@ const ClientsTable = ({
         }
     };
 
-    const getOptionsWithLabels = (options) => (
-        options.map((option) => ({
+    const getOptionsWithLabels = (options: any) =>
+        options.map((option: any) => ({
             value: option,
             label: option,
-        }))
-    );
+        }));
 
-    const getClient = (name, clients) => {
-        const client = clients.find((item) => name === item.name);
+    const getClient = (name: any, clients: any) => {
+        const client = clients.find((item: any) => name === item.name);
 
         if (client) {
-            const {
-                upstreams, tags, whois_info, ...values
-            } = client;
+            const { upstreams, tags, ...values } = client;
             return {
                 upstreams: (upstreams && upstreams.join('\n')) || '',
                 tags: (tags && getOptionsWithLabels(tags)) || [],
@@ -136,11 +153,11 @@ const ClientsTable = ({
             blocked_services_schedule: {
                 time_zone: LOCAL_TIMEZONE_VALUE,
             },
-            safe_search: { ...(safesearch || {}) },
+            safe_search: { ...(globalSettings?.safesearch || {}) },
         };
     };
 
-    const handleDelete = (data) => {
+    const handleDelete = (data: any) => {
         // eslint-disable-next-line no-alert
         if (window.confirm(t('client_confirm_delete', { key: data.name }))) {
             deleteClient(data);
@@ -161,13 +178,13 @@ const ClientsTable = ({
             Header: t('table_client'),
             accessor: 'ids',
             minWidth: 150,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const { value } = row;
 
                 return (
                     <div className="logs__row o-hidden">
                         <span className="logs__text">
-                            {value.map((address) => (
+                            {value.map((address: any) => (
                                 <div key={address} title={address}>
                                     {address}
                                 </div>
@@ -188,12 +205,8 @@ const ClientsTable = ({
             Header: t('settings'),
             accessor: 'use_global_settings',
             minWidth: 120,
-            Cell: ({ value }) => {
-                const title = value ? (
-                    <Trans>settings_global</Trans>
-                ) : (
-                    <Trans>settings_custom</Trans>
-                );
+            Cell: ({ value }: any) => {
+                const title = value ? <Trans>settings_global</Trans> : <Trans>settings_custom</Trans>;
 
                 return (
                     <div className="logs__row o-hidden">
@@ -206,7 +219,7 @@ const ClientsTable = ({
             Header: t('blocked_services'),
             accessor: 'blocked_services',
             minWidth: 180,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const { value, original } = row;
 
                 if (original.use_global_blocked_services) {
@@ -216,7 +229,7 @@ const ClientsTable = ({
                 if (value && services.allServices) {
                     return (
                         <div className="logs__row logs__row--icons">
-                            {value.map((service) => {
+                            {value.map((service: any) => {
                                 const serviceInfo = getService(services.allServices, service);
 
                                 if (serviceInfo?.icon_svg) {
@@ -238,23 +251,16 @@ const ClientsTable = ({
                     );
                 }
 
-                return (
-                    <div className="logs__row logs__row--icons">
-                        –
-                    </div>
-                );
+                return <div className="logs__row logs__row--icons">–</div>;
             },
         },
         {
             Header: t('upstreams'),
             accessor: 'upstreams',
             minWidth: 120,
-            Cell: ({ value }) => {
-                const title = value && value.length > 0 ? (
-                    <Trans>settings_custom</Trans>
-                ) : (
-                    <Trans>settings_global</Trans>
-                );
+            Cell: ({ value }: any) => {
+                const title =
+                    value && value.length > 0 ? <Trans>settings_custom</Trans> : <Trans>settings_global</Trans>;
 
                 return (
                     <div className="logs__row o-hidden">
@@ -267,7 +273,7 @@ const ClientsTable = ({
             Header: t('tags_title'),
             accessor: 'tags',
             minWidth: 140,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const { value } = row;
 
                 if (!value || value.length < 1) {
@@ -277,7 +283,7 @@ const ClientsTable = ({
                 return (
                     <div className="logs__row o-hidden">
                         <span className="logs__text">
-                            {value.map((tag) => (
+                            {value.map((tag: any) => (
                                 <div key={tag} title={tag} className="logs__tag small">
                                     {tag}
                                 </div>
@@ -290,13 +296,10 @@ const ClientsTable = ({
         {
             Header: t('requests_count'),
             id: 'statistics',
-            accessor: (row) => countClientsStatistics(
-                row.ids,
-                normalizedTopClients.auto,
-            ),
-            sortMethod: (a, b) => b - a,
+            accessor: (row: any) => countClientsStatistics(row.ids, normalizedTopClients.auto),
+            sortMethod: (a: any, b: any) => b - a,
             minWidth: 120,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const content = CellWrap(row);
 
                 if (!row.value) {
@@ -312,7 +315,7 @@ const ClientsTable = ({
             maxWidth: 100,
             sortable: false,
             resizable: false,
-            Cell: (row) => {
+            Cell: (row: any) => {
                 const clientName = row.original.name;
 
                 return (
@@ -320,25 +323,25 @@ const ClientsTable = ({
                         <button
                             type="button"
                             className="btn btn-icon btn-outline-primary btn-sm mr-2"
-                            onClick={() => toggleClientModal({
-                                type: MODAL_TYPE.EDIT_CLIENT,
-                                name: clientName,
-                            })
+                            onClick={() =>
+                                toggleClientModal({
+                                    type: MODAL_TYPE.EDIT_CLIENT,
+                                    name: clientName,
+                                })
                             }
                             disabled={processingUpdating}
-                            title={t('edit_table_action')}
-                        >
+                            title={t('edit_table_action')}>
                             <svg className="icons icon12">
                                 <use xlinkHref="#edit" />
                             </svg>
                         </button>
+
                         <button
                             type="button"
                             className="btn btn-icon btn-outline-secondary btn-sm"
                             onClick={() => handleDelete({ name: clientName })}
                             disabled={processingDeleting}
-                            title={t('delete_table_action')}
-                        >
+                            title={t('delete_table_action')}>
                             <svg className="icons icon12">
                                 <use xlinkHref="#delete" />
                             </svg>
@@ -353,11 +356,7 @@ const ClientsTable = ({
     const tagsOptions = getOptionsWithLabels(supportedTags);
 
     return (
-        <Card
-            title={t('clients_title')}
-            subtitle={t('clients_desc')}
-            bodyType="card-body box-body--settings"
-        >
+        <Card title={t('clients_title')} subtitle={t('clients_desc')} bodyType="card-body box-body--settings">
             <>
                 <ReactTable
                     data={clients || []}
@@ -371,9 +370,9 @@ const ClientsTable = ({
                     className="-striped -highlight card-table-overflow"
                     showPagination
                     defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE) || 10}
-                    onPageSizeChange={(size) => (
+                    onPageSizeChange={(size: any) =>
                         LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE, size)
-                    )}
+                    }
                     minRows={TABLES_MIN_ROWS}
                     ofText="/"
                     previousText={t('previous_btn')}
@@ -383,14 +382,15 @@ const ClientsTable = ({
                     loadingText={t('loading_table_status')}
                     noDataText={t('clients_not_found')}
                 />
+
                 <button
                     type="button"
                     className="btn btn-success btn-standard mt-3"
                     onClick={() => toggleClientModal(MODAL_TYPE.ADD_FILTERS)}
-                    disabled={processingAdding}
-                >
+                    disabled={processingAdding}>
                     <Trans>client_add</Trans>
                 </button>
+
                 <Modal
                     isModalOpen={isModalOpen}
                     modalType={modalType}
@@ -407,21 +407,4 @@ const ClientsTable = ({
     );
 };
 
-ClientsTable.propTypes = {
-    clients: PropTypes.array.isRequired,
-    normalizedTopClients: PropTypes.object.isRequired,
-    toggleClientModal: PropTypes.func.isRequired,
-    deleteClient: PropTypes.func.isRequired,
-    addClient: PropTypes.func.isRequired,
-    updateClient: PropTypes.func.isRequired,
-    isModalOpen: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    modalClientName: PropTypes.string.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    processingDeleting: PropTypes.bool.isRequired,
-    processingUpdating: PropTypes.bool.isRequired,
-    getStats: PropTypes.func.isRequired,
-    supportedTags: PropTypes.array.isRequired,
-};
-
 export default ClientsTable;

client/src/components/Settings/Clients/Form.js

@@ -1,491 +0,0 @@
-import React, { useState } from 'react';
-import { connect, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import {
-    Field, FieldArray, reduxForm, formValueSelector,
-} from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import Select from 'react-select';
-
-import i18n from '../../../i18n';
-import Tabs from '../../ui/Tabs';
-import Examples from '../Dns/Upstream/Examples';
-import { ScheduleForm } from '../../Filters/Services/ScheduleForm';
-import {
-    toggleAllServices,
-    trimLinesAndRemoveEmpty,
-    captitalizeWords,
-} from '../../../helpers/helpers';
-import {
-    toNumber,
-    renderInputField,
-    renderGroupField,
-    CheckboxField,
-    renderServiceField,
-    renderTextareaField,
-} from '../../../helpers/form';
-import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
-import { CLIENT_ID_LINK, FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
-import './Service.css';
-
-const settingsCheckboxes = [
-    {
-        name: 'use_global_settings',
-        placeholder: 'client_global_settings',
-    },
-    {
-        name: 'filtering_enabled',
-        placeholder: 'block_domain_use_filters_and_hosts',
-    },
-    {
-        name: 'safebrowsing_enabled',
-        placeholder: 'use_adguard_browsing_sec',
-    },
-    {
-        name: 'parental_enabled',
-        placeholder: 'use_adguard_parental',
-    },
-];
-
-const logAndStatsCheckboxes = [
-    {
-        name: 'ignore_querylog',
-        placeholder: 'ignore_query_log',
-    },
-    {
-        name: 'ignore_statistics',
-        placeholder: 'ignore_statistics',
-    },
-];
-const validate = (values) => {
-    const errors = {};
-    const { name, ids } = values;
-    errors.name = validateRequiredValue(name);
-
-    if (ids && ids.length) {
-        const idArrayErrors = [];
-        ids.forEach((id, idx) => {
-            idArrayErrors[idx] = validateRequiredValue(id) || validateClientId(id);
-        });
-
-        if (idArrayErrors.length) {
-            errors.ids = idArrayErrors;
-        }
-    }
-    return errors;
-};
-
-const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
-    const {
-        fields,
-    } = row;
-    return (
-        <div className="form__group">
-            {fields.map((ip, index) => (
-                <div key={index} className="mb-1">
-                    <Field
-                        name={ip}
-                        component={renderGroupField}
-                        type="text"
-                        className="form-control"
-                        placeholder={placeholder}
-                        isActionAvailable={index !== 0}
-                        removeField={() => fields.remove(index)}
-                        normalizeOnBlur={(data) => data.trim()}
-                    />
-                </div>
-            ))}
-            <button
-                type="button"
-                className="btn btn-link btn-block btn-sm"
-                onClick={() => fields.push()}
-                title={buttonTitle}
-            >
-                <svg className="icon icon--24">
-                    <use xlinkHref="#plus" />
-                </svg>
-            </button>
-        </div>
-    );
-};
-
-// Should create function outside of component to prevent component re-renders
-const renderFields = renderFieldsWrapper(i18n.t('form_enter_id'), i18n.t('form_add_id'));
-
-const renderMultiselect = (props) => {
-    const { input, placeholder, options } = props;
-
-    return (
-        <Select
-            {...input}
-            options={options}
-            className="basic-multi-select"
-            classNamePrefix="select"
-            onChange={(value) => input.onChange(value)}
-            onBlur={() => input.onBlur(input.value)}
-            placeholder={placeholder}
-            blurInputOnSelect={false}
-            isMulti
-        />
-    );
-};
-
-renderMultiselect.propTypes = {
-    input: PropTypes.object.isRequired,
-    placeholder: PropTypes.string,
-    options: PropTypes.array,
-};
-
-let Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        change,
-        submitting,
-        useGlobalSettings,
-        useGlobalServices,
-        blockedServicesSchedule,
-        handleClose,
-        processingAdding,
-        processingUpdating,
-        invalid,
-        tagsOptions,
-        initialValues,
-    } = props;
-    const services = useSelector((store) => store?.services);
-    const { safe_search } = initialValues;
-    const safeSearchServices = { ...safe_search };
-    delete safeSearchServices.enabled;
-
-    const [activeTabLabel, setActiveTabLabel] = useState('settings');
-
-    const handleScheduleSubmit = (values) => {
-        change('blocked_services_schedule', { ...values });
-    };
-
-    const tabs = {
-        settings: {
-            title: 'settings',
-            component: <div label="settings" title={props.t('main_settings')}>
-                <div className="form__label--bot form__label--bold">
-                    {t('protection_section_label')}
-                </div>
-                {settingsCheckboxes.map((setting) => (
-                    <div className="form__group" key={setting.name}>
-                        <Field
-                            name={setting.name}
-                            type="checkbox"
-                            component={CheckboxField}
-                            placeholder={t(setting.placeholder)}
-                            disabled={
-                                setting.name !== 'use_global_settings'
-                                    ? useGlobalSettings
-                                    : false
-                            }
-                        />
-                    </div>
-                ))}
-                <div className="form__group">
-                    <Field
-                        name="safe_search.enabled"
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t('enforce_safe_search')}
-                        disabled={useGlobalSettings}
-                    />
-                </div>
-                <div className='form__group--inner'>
-                    {Object.keys(safeSearchServices).map((searchKey) => (
-                        <div key={searchKey}>
-                            <Field
-                                name={`safe_search.${searchKey}`}
-                                type="checkbox"
-                                component={CheckboxField}
-                                placeholder={captitalizeWords(searchKey)}
-                                disabled={useGlobalSettings}
-                            />
-                        </div>
-                    ))}
-                </div>
-                <div className="form__label--bold form__label--top form__label--bot">
-                    {t('log_and_stats_section_label')}
-                </div>
-                {logAndStatsCheckboxes.map((setting) => (
-                    <div className="form__group" key={setting.name}>
-                        <Field
-                            name={setting.name}
-                            type="checkbox"
-                            component={CheckboxField}
-                            placeholder={t(setting.placeholder)}
-                        />
-                    </div>
-                ))}
-            </div>,
-        },
-        block_services: {
-            title: 'block_services',
-            component: <div label="services" title={props.t('block_services')}>
-                <div className="form__group">
-                    <Field
-                        name="use_global_blocked_services"
-                        type="checkbox"
-                        component={renderServiceField}
-                        placeholder={t('blocked_services_global')}
-                        modifier="service--global"
-                    />
-                    <div className="row mb-4">
-                        <div className="col-6">
-                            <button
-                                type="button"
-                                className="btn btn-secondary btn-block"
-                                disabled={useGlobalServices}
-                                onClick={() => (
-                                    toggleAllServices(services.allServices, change, true)
-                                )}
-                            >
-                                <Trans>block_all</Trans>
-                            </button>
-                        </div>
-                        <div className="col-6">
-                            <button
-                                type="button"
-                                className="btn btn-secondary btn-block"
-                                disabled={useGlobalServices}
-                                onClick={() => (
-                                    toggleAllServices(services.allServices, change, false)
-                                )}
-                            >
-                                <Trans>unblock_all</Trans>
-                            </button>
-                        </div>
-                    </div>
-                    {services.allServices.length > 0 && (
-                        <div className="services">
-                            {services.allServices.map((service) => (
-                                <Field
-                                    key={service.id}
-                                    icon={service.icon_svg}
-                                    name={`blocked_services.${service.id}`}
-                                    type="checkbox"
-                                    component={renderServiceField}
-                                    placeholder={service.name}
-                                    disabled={useGlobalServices}
-                                />
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>,
-        },
-        schedule_services: {
-            title: 'schedule_services',
-            component: (
-                <>
-                    <div className="form__desc mb-4">
-                        <Trans>schedule_services_desc_client</Trans>
-                    </div>
-                    <ScheduleForm
-                        schedule={blockedServicesSchedule}
-                        onScheduleSubmit={handleScheduleSubmit}
-                        clientForm
-                    />
-                </>
-            ),
-        },
-        upstream_dns: {
-            title: 'upstream_dns',
-            component: <div label="upstream" title={props.t('upstream_dns')}>
-                <div className="form__desc mb-3">
-                    <Trans components={[<a href="#dns" key="0">link</a>]}>
-                        upstream_dns_client_desc
-                    </Trans>
-                </div>
-                <Field
-                    id="upstreams"
-                    name="upstreams"
-                    component={renderTextareaField}
-                    type="text"
-                    className="form-control form-control--textarea mb-5"
-                    placeholder={t('upstream_dns')}
-                    normalizeOnBlur={trimLinesAndRemoveEmpty}
-                />
-                <Examples />
-                <div className="form__label--bold mt-5 mb-3">
-                    {t('upstream_dns_cache_configuration')}
-                </div>
-                <div className="form__group mb-2">
-                    <Field
-                        name="upstreams_cache_enabled"
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t('enable_upstream_dns_cache')}
-                    />
-                </div>
-                <div className="form__group form__group--settings">
-                    <label
-                        htmlFor="upstreams_cache_size"
-                        className="form__label"
-                    >
-                        {t('dns_cache_size')}
-                    </label>
-                    <Field
-                        name="upstreams_cache_size"
-                        type="number"
-                        component={renderInputField}
-                        placeholder={t('enter_cache_size')}
-                        className="form-control"
-                        normalize={toNumber}
-                        min={0}
-                        max={UINT32_RANGE.MAX}
-                    />
-                </div>
-            </div>,
-        },
-    };
-
-    const activeTab = tabs[activeTabLabel].component;
-
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className="modal-body">
-                <div className="form__group mb-0">
-                    <div className="form__group">
-                        <Field
-                            id="name"
-                            name="name"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('form_client_name')}
-                            normalizeOnBlur={(data) => data.trim()}
-                        />
-                    </div>
-
-                    <div className="form__group mb-4">
-                        <div className="form__label">
-                            <strong className="mr-3">
-                                <Trans>tags_title</Trans>
-                            </strong>
-                        </div>
-                        <div className="form__desc mt-0 mb-2">
-                            <Trans components={[
-                                <a target="_blank" rel="noopener noreferrer" href="https://link.adtidy.org/forward.html?action=dns_kb_filtering_syntax_ctag&from=ui&app=home"
-                                   key="0">link</a>,
-                            ]}>
-                                tags_desc
-                            </Trans>
-                        </div>
-                        <Field
-                            name="tags"
-                            component={renderMultiselect}
-                            placeholder={t('form_select_tags')}
-                            options={tagsOptions}
-                        />
-                    </div>
-
-                    <div className="form__group">
-                        <div className="form__label">
-                            <strong className="mr-3">
-                                <Trans>client_identifier</Trans>
-                            </strong>
-                        </div>
-                        <div className="form__desc mt-0">
-                            <Trans components={[
-                                <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer"
-                                    key="0">text</a>,
-                            ]}>
-                                client_identifier_desc
-                            </Trans>
-                        </div>
-                    </div>
-
-                    <div className="form__group">
-                        <FieldArray
-                            name="ids"
-                            component={renderFields}
-                        />
-                    </div>
-                </div>
-
-                <Tabs
-                    controlClass="form"
-                    tabs={tabs}
-                    activeTabLabel={activeTabLabel}
-                    setActiveTabLabel={setActiveTabLabel}
-                >
-                    {activeTab}
-                </Tabs>
-            </div>
-
-            <div className="modal-footer">
-                <div className="btn-list">
-                    <button
-                        type="button"
-                        className="btn btn-secondary btn-standard"
-                        disabled={submitting}
-                        onClick={() => {
-                            reset();
-                            handleClose();
-                        }}
-                    >
-                        <Trans>cancel_btn</Trans>
-                    </button>
-                    <button
-                        type="submit"
-                        className="btn btn-success btn-standard"
-                        disabled={
-                            submitting
-                            || invalid
-                            || processingAdding
-                            || processingUpdating
-                        }
-                    >
-                        <Trans>save_btn</Trans>
-                    </button>
-                </div>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    pristine: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    change: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    handleClose: PropTypes.func.isRequired,
-    useGlobalSettings: PropTypes.bool,
-    useGlobalServices: PropTypes.bool,
-    blockedServicesSchedule: PropTypes.object,
-    t: PropTypes.func.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    processingUpdating: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    tagsOptions: PropTypes.array.isRequired,
-    initialValues: PropTypes.object,
-};
-
-const selector = formValueSelector(FORM_NAME.CLIENT);
-
-Form = connect((state) => {
-    const useGlobalSettings = selector(state, 'use_global_settings');
-    const useGlobalServices = selector(state, 'use_global_blocked_services');
-    const blockedServicesSchedule = selector(state, 'blocked_services_schedule');
-    return {
-        useGlobalSettings,
-        useGlobalServices,
-        blockedServicesSchedule,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: FORM_NAME.CLIENT,
-        enableReinitialize: true,
-        validate,
-    }),
-])(Form);

client/src/components/Settings/Clients/Form.tsx

@@ -0,0 +1,514 @@
+import React, { useState } from 'react';
+import { connect, useSelector } from 'react-redux';
+import { Field, FieldArray, reduxForm, formValueSelector, FormErrors } from 'redux-form';
+import { Trans, withTranslation } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import Select from 'react-select';
+
+import i18n from '../../../i18n';
+
+import Tabs from '../../ui/Tabs';
+
+import Examples from '../Dns/Upstream/Examples';
+
+import { ScheduleForm } from '../../Filters/Services/ScheduleForm';
+import { toggleAllServices, trimLinesAndRemoveEmpty, captitalizeWords } from '../../../helpers/helpers';
+import {
+    toNumber,
+    renderInputField,
+    renderGroupField,
+    CheckboxField,
+    renderServiceField,
+    renderTextareaField,
+} from '../../../helpers/form';
+import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
+import { CLIENT_ID_LINK, FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
+import './Service.css';
+import { RootState } from '../../../initialState';
+
+const settingsCheckboxes = [
+    {
+        name: 'use_global_settings',
+        placeholder: 'client_global_settings',
+    },
+    {
+        name: 'filtering_enabled',
+        placeholder: 'block_domain_use_filters_and_hosts',
+    },
+    {
+        name: 'safebrowsing_enabled',
+        placeholder: 'use_adguard_browsing_sec',
+    },
+    {
+        name: 'parental_enabled',
+        placeholder: 'use_adguard_parental',
+    },
+];
+
+const logAndStatsCheckboxes = [
+    {
+        name: 'ignore_querylog',
+        placeholder: 'ignore_query_log',
+    },
+    {
+        name: 'ignore_statistics',
+        placeholder: 'ignore_statistics',
+    },
+];
+const validate = (values: any): FormErrors<any, string> => {
+    const errors: {
+        name?: string;
+        ids?: string[];
+    } = {};
+    const { name, ids } = values;
+
+    errors.name = validateRequiredValue(name);
+
+    if (ids && ids.length) {
+        const idArrayErrors: any = [];
+        ids.forEach((id: any, idx: any) => {
+            idArrayErrors[idx] = validateRequiredValue(id) || validateClientId(id);
+        });
+
+        if (idArrayErrors.length) {
+            errors.ids = idArrayErrors;
+        }
+    }
+    // @ts-expect-error FIXME: ts migration
+    return errors;
+};
+
+const renderFieldsWrapper = (placeholder: any, buttonTitle: any) =>
+    function cell(row: any) {
+        const { fields } = row;
+        return (
+            <div className="form__group">
+                {fields.map((ip: any, index: any) => (
+                    <div key={index} className="mb-1">
+                        <Field
+                            name={ip}
+                            component={renderGroupField}
+                            type="text"
+                            className="form-control"
+                            placeholder={placeholder}
+                            isActionAvailable={index !== 0}
+                            removeField={() => fields.remove(index)}
+                            normalizeOnBlur={(data: any) => data.trim()}
+                        />
+                    </div>
+                ))}
+
+                <button
+                    type="button"
+                    className="btn btn-link btn-block btn-sm"
+                    onClick={() => fields.push()}
+                    title={buttonTitle}>
+                    <svg className="icon icon--24">
+                        <use xlinkHref="#plus" />
+                    </svg>
+                </button>
+            </div>
+        );
+    };
+
+// Should create function outside of component to prevent component re-renders
+const renderFields = renderFieldsWrapper(i18n.t('form_enter_id'), i18n.t('form_add_id'));
+
+interface renderMultiselectProps {
+    input: {
+        name: string;
+        value: string;
+        checked: boolean;
+        onChange: (...args: unknown[]) => unknown;
+        onBlur: (...args: unknown[]) => unknown;
+    };
+    placeholder?: string;
+    options?: unknown[];
+}
+
+const renderMultiselect = (props: renderMultiselectProps) => {
+    const { input, placeholder, options } = props;
+
+    return (
+        <Select
+            {...input}
+            options={options}
+            className="basic-multi-select"
+            classNamePrefix="select"
+            onChange={(value: any) => input.onChange(value)}
+            onBlur={() => input.onBlur(input.value)}
+            placeholder={placeholder}
+            blurInputOnSelect={false}
+            isMulti
+        />
+    );
+};
+
+interface FormProps {
+    pristine: boolean;
+    handleSubmit: (...args: unknown[]) => string;
+    reset: (...args: unknown[]) => string;
+    change: (...args: unknown[]) => unknown;
+    submitting: boolean;
+    handleClose: (...args: unknown[]) => unknown;
+    useGlobalSettings?: boolean;
+    useGlobalServices?: boolean;
+    blockedServicesSchedule?: {
+        time_zone: string;
+    };
+    t: (...args: unknown[]) => string;
+    processingAdding: boolean;
+    processingUpdating: boolean;
+    invalid: boolean;
+    tagsOptions: unknown[];
+    initialValues?: {
+        safe_search: any;
+    };
+}
+
+let Form = (props: FormProps) => {
+    const {
+        t,
+        handleSubmit,
+        reset,
+        change,
+        submitting,
+        useGlobalSettings,
+        useGlobalServices,
+        blockedServicesSchedule,
+        handleClose,
+        processingAdding,
+        processingUpdating,
+        invalid,
+        tagsOptions,
+        initialValues,
+    } = props;
+
+    const services = useSelector((store: RootState) => store?.services);
+    const { safe_search } = initialValues;
+    const safeSearchServices = { ...safe_search };
+    delete safeSearchServices.enabled;
+
+    const [activeTabLabel, setActiveTabLabel] = useState('settings');
+
+    const handleScheduleSubmit = (values: any) => {
+        change('blocked_services_schedule', { ...values });
+    };
+
+    const tabs = {
+        settings: {
+            title: 'settings',
+
+            component: (
+                <div title={props.t('main_settings')}>
+                    <div className="form__label--bot form__label--bold">{t('protection_section_label')}</div>
+                    {settingsCheckboxes.map((setting) => (
+                        <div className="form__group" key={setting.name}>
+                            <Field
+                                name={setting.name}
+                                type="checkbox"
+                                component={CheckboxField}
+                                placeholder={t(setting.placeholder)}
+                                disabled={setting.name !== 'use_global_settings' ? useGlobalSettings : false}
+                            />
+                        </div>
+                    ))}
+
+                    <div className="form__group">
+                        <Field
+                            name="safe_search.enabled"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('enforce_safe_search')}
+                            disabled={useGlobalSettings}
+                        />
+                    </div>
+
+                    <div className="form__group--inner">
+                        {Object.keys(safeSearchServices).map((searchKey) => (
+                            <div key={searchKey}>
+                                <Field
+                                    name={`safe_search.${searchKey}`}
+                                    type="checkbox"
+                                    component={CheckboxField}
+                                    placeholder={captitalizeWords(searchKey)}
+                                    disabled={useGlobalSettings}
+                                />
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="form__label--bold form__label--top form__label--bot">
+                        {t('log_and_stats_section_label')}
+                    </div>
+                    {logAndStatsCheckboxes.map((setting) => (
+                        <div className="form__group" key={setting.name}>
+                            <Field
+                                name={setting.name}
+                                type="checkbox"
+                                component={CheckboxField}
+                                placeholder={t(setting.placeholder)}
+                            />
+                        </div>
+                    ))}
+                </div>
+            ),
+        },
+        block_services: {
+            title: 'block_services',
+
+            component: (
+                <div title={props.t('block_services')}>
+                    <div className="form__group">
+                        <Field
+                            name="use_global_blocked_services"
+                            type="checkbox"
+                            component={renderServiceField}
+                            placeholder={t('blocked_services_global')}
+                            modifier="service--global"
+                        />
+
+                        <div className="row mb-4">
+                            <div className="col-6">
+                                <button
+                                    type="button"
+                                    className="btn btn-secondary btn-block"
+                                    disabled={useGlobalServices}
+                                    onClick={() => toggleAllServices(services.allServices, change, true)}>
+                                    <Trans>block_all</Trans>
+                                </button>
+                            </div>
+
+                            <div className="col-6">
+                                <button
+                                    type="button"
+                                    className="btn btn-secondary btn-block"
+                                    disabled={useGlobalServices}
+                                    onClick={() => toggleAllServices(services.allServices, change, false)}>
+                                    <Trans>unblock_all</Trans>
+                                </button>
+                            </div>
+                        </div>
+                        {services.allServices.length > 0 && (
+                            <div className="services">
+                                {services.allServices.map((service: any) => (
+                                    <Field
+                                        key={service.id}
+                                        icon={service.icon_svg}
+                                        name={`blocked_services.${service.id}`}
+                                        type="checkbox"
+                                        component={renderServiceField}
+                                        placeholder={service.name}
+                                        disabled={useGlobalServices}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            ),
+        },
+        schedule_services: {
+            title: 'schedule_services',
+            component: (
+                <>
+                    <div className="form__desc mb-4">
+                        <Trans>schedule_services_desc_client</Trans>
+                    </div>
+
+                    <ScheduleForm
+                        schedule={blockedServicesSchedule}
+                        onScheduleSubmit={handleScheduleSubmit}
+                        clientForm
+                    />
+                </>
+            ),
+        },
+        upstream_dns: {
+            title: 'upstream_dns',
+
+            component: (
+                <div title={props.t('upstream_dns')}>
+                    <div className="form__desc mb-3">
+                        <Trans
+                            components={[
+                                <a href="#dns" key="0">
+                                    link
+                                </a>,
+                            ]}>
+                            upstream_dns_client_desc
+                        </Trans>
+                    </div>
+
+                    <Field
+                        id="upstreams"
+                        name="upstreams"
+                        component={renderTextareaField}
+                        type="text"
+                        className="form-control form-control--textarea mb-5"
+                        placeholder={t('upstream_dns')}
+                        normalizeOnBlur={trimLinesAndRemoveEmpty}
+                    />
+
+                    <Examples />
+
+                    <div className="form__label--bold mt-5 mb-3">{t('upstream_dns_cache_configuration')}</div>
+
+                    <div className="form__group mb-2">
+                        <Field
+                            name="upstreams_cache_enabled"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('enable_upstream_dns_cache')}
+                        />
+                    </div>
+
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="upstreams_cache_size" className="form__label">
+                            {t('dns_cache_size')}
+                        </label>
+
+                        <Field
+                            name="upstreams_cache_size"
+                            type="number"
+                            component={renderInputField}
+                            placeholder={t('enter_cache_size')}
+                            className="form-control"
+                            normalize={toNumber}
+                            min={0}
+                            max={UINT32_RANGE.MAX}
+                        />
+                    </div>
+                </div>
+            ),
+        },
+    };
+
+    const activeTab = tabs[activeTabLabel].component;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+                <div className="form__group mb-0">
+                    <div className="form__group">
+                        <Field
+                            id="name"
+                            name="name"
+                            component={renderInputField}
+                            type="text"
+                            className="form-control"
+                            placeholder={t('form_client_name')}
+                            normalizeOnBlur={(data: any) => data.trim()}
+                        />
+                    </div>
+
+                    <div className="form__group mb-4">
+                        <div className="form__label">
+                            <strong className="mr-3">
+                                <Trans>tags_title</Trans>
+                            </strong>
+                        </div>
+
+                        <div className="form__desc mt-0 mb-2">
+                            <Trans
+                                components={[
+                                    <a
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        href="https://link.adtidy.org/forward.html?action=dns_kb_filtering_syntax_ctag&from=ui&app=home"
+                                        key="0">
+                                        link
+                                    </a>,
+                                ]}>
+                                tags_desc
+                            </Trans>
+                        </div>
+
+                        <Field
+                            name="tags"
+                            component={renderMultiselect}
+                            placeholder={t('form_select_tags')}
+                            options={tagsOptions}
+                        />
+                    </div>
+
+                    <div className="form__group">
+                        <div className="form__label">
+                            <strong className="mr-3">
+                                <Trans>client_identifier</Trans>
+                            </strong>
+                        </div>
+
+                        <div className="form__desc mt-0">
+                            <Trans
+                                components={[
+                                    <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" key="0">
+                                        text
+                                    </a>,
+                                ]}>
+                                client_identifier_desc
+                            </Trans>
+                        </div>
+                    </div>
+
+                    <div className="form__group">
+                        <FieldArray name="ids" component={renderFields} />
+                    </div>
+                </div>
+
+                <Tabs
+                    controlClass="form"
+                    tabs={tabs}
+                    activeTabLabel={activeTabLabel}
+                    setActiveTabLabel={setActiveTabLabel}>
+                    {activeTab}
+                </Tabs>
+            </div>
+
+            <div className="modal-footer">
+                <div className="btn-list">
+                    <button
+                        type="button"
+                        className="btn btn-secondary btn-standard"
+                        disabled={submitting}
+                        onClick={() => {
+                            reset();
+                            handleClose();
+                        }}>
+                        <Trans>cancel_btn</Trans>
+                    </button>
+
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || invalid || processingAdding || processingUpdating}>
+                        <Trans>save_btn</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+const selector = formValueSelector(FORM_NAME.CLIENT);
+
+Form = connect((state) => {
+    const useGlobalSettings = selector(state, 'use_global_settings');
+    const useGlobalServices = selector(state, 'use_global_blocked_services');
+    const blockedServicesSchedule = selector(state, 'blocked_services_schedule');
+    return {
+        useGlobalSettings,
+        useGlobalServices,
+        blockedServicesSchedule,
+    };
+})(Form);
+
+export default flow([
+    withTranslation(),
+    reduxForm({
+        form: FORM_NAME.CLIENT,
+        enableReinitialize: true,
+        validate,
+    }),
+])(Form);

client/src/components/Settings/Clients/Modal.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
+
 import ReactModal from 'react-modal';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
+
 import Form from './Form';
 
-const getInitialData = ({
-    initial, modalType, clientId, clientName,
-}) => {
+const getInitialData = ({ initial, modalType, clientId, clientName }: any) => {
     if (initial && initial.blocked_services) {
         const { blocked_services } = initial;
         const blocked = {};
 
-        blocked_services.forEach((service) => {
+        blocked_services.forEach((service: any) => {
             blocked[service] = true;
         });
 
@@ -34,6 +33,19 @@ const getInitialData = ({
     return initial;
 };
 
+interface ModalProps {
+    isModalOpen: boolean;
+    modalType: string;
+    currentClientData: object;
+    handleSubmit: (values: any) => void;
+    handleClose: (...args: unknown[]) => unknown;
+    processingAdding: boolean;
+    processingUpdating: boolean;
+    tagsOptions: unknown[];
+    t: (...args: unknown[]) => string;
+    clientId?: string;
+}
+
 const Modal = ({
     isModalOpen,
     modalType,
@@ -45,7 +57,7 @@ const Modal = ({
     tagsOptions,
     clientId,
     t,
-}) => {
+}: ModalProps) => {
     const initialData = getInitialData({
         initial: currentClientData,
         modalType,
@@ -58,21 +70,18 @@ const Modal = ({
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={handleClose}
-        >
+            onRequestClose={handleClose}>
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
-                        {modalType === MODAL_TYPE.EDIT_CLIENT ? (
-                            <Trans>client_edit</Trans>
-                        ) : (
-                            <Trans>client_new</Trans>
-                        )}
+                        {modalType === MODAL_TYPE.EDIT_CLIENT ? <Trans>client_edit</Trans> : <Trans>client_new</Trans>}
                     </h4>
+
                     <button type="button" className="close" onClick={handleClose}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
+
                 <Form
                     initialValues={{ ...initialData }}
                     onSubmit={handleSubmit}
@@ -86,17 +95,4 @@ const Modal = ({
     );
 };
 
-Modal.propTypes = {
-    isModalOpen: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    currentClientData: PropTypes.object.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    handleClose: PropTypes.func.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    processingUpdating: PropTypes.bool.isRequired,
-    tagsOptions: PropTypes.array.isRequired,
-    t: PropTypes.func.isRequired,
-    clientId: PropTypes.string,
-};
-
 export default withTranslation()(Modal);

client/src/components/Settings/Clients/Service.css

@@ -24,9 +24,9 @@
     .service {
         flex-grow: 0;
         flex-shrink: 0;
-        flex-basis: calc(99.9% * 4/12 - (30px - 30px * 4/12));
-        max-width: calc(99.9% * 4/12 - (30px - 30px * 4/12));
-        width: calc(99.9% * 4/12 - (30px - 30px * 4/12));
+        flex-basis: calc(99.9% * 4 / 12 - (30px - 30px * 4 / 12));
+        max-width: calc(99.9% * 4 / 12 - (30px - 30px * 4 / 12));
+        width: calc(99.9% * 4 / 12 - (30px - 30px * 4 / 12));
     }
 
     .service--global {

client/src/components/Settings/Clients/index.tsx

@@ -1,34 +1,60 @@
 import React, { Component, Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 
 import { ClientsTable } from './ClientsTable';
-import AutoClients from './AutoClients';
-import PageTitle from '../../ui/PageTitle';
-import Loading from '../../ui/Loading';
 
-class Clients extends Component {
+import AutoClients from './AutoClients';
+
+import PageTitle from '../../ui/PageTitle';
+
+import Loading from '../../ui/Loading';
+import { ClientsData, DashboardData, StatsData } from '../../../initialState';
+
+interface ClientsProps {
+    t: (...args: unknown[]) => string;
+    dashboard: DashboardData;
+    stats: StatsData;
+    clients: ClientsData;
+    toggleClientModal: (...args: unknown[]) => unknown;
+    deleteClient: (...args: unknown[]) => string;
+    addClient: (...args: unknown[]) => string;
+    updateClient: (...args: unknown[]) => string;
+    getClients: (...args: unknown[]) => unknown;
+    getStats: (...args: unknown[]) => unknown;
+}
+
+class Clients extends Component<ClientsProps> {
     componentDidMount() {
         this.props.getClients();
+
         this.props.getStats();
     }
 
     render() {
         const {
             t,
+
             dashboard,
+
             stats,
+
             clients,
+
             addClient,
+
             updateClient,
+
             deleteClient,
+
             toggleClientModal,
+
             getStats,
         } = this.props;
 
         return (
             <Fragment>
                 <PageTitle title={t('client_settings')} />
+
                 {(stats.processingStats || dashboard.processingClients) && <Loading />}
                 {!stats.processingStats && !dashboard.processingClients && (
                     <Fragment>
@@ -48,6 +74,7 @@ class Clients extends Component {
                             getStats={getStats}
                             supportedTags={dashboard.supportedTags}
                         />
+
                         <AutoClients
                             autoClients={dashboard.autoClients}
                             normalizedTopClients={stats.normalizedTopClients}
@@ -59,17 +86,4 @@ class Clients extends Component {
     }
 }
 
-Clients.propTypes = {
-    t: PropTypes.func.isRequired,
-    dashboard: PropTypes.object.isRequired,
-    stats: PropTypes.object.isRequired,
-    clients: PropTypes.object.isRequired,
-    toggleClientModal: PropTypes.func.isRequired,
-    deleteClient: PropTypes.func.isRequired,
-    addClient: PropTypes.func.isRequired,
-    updateClient: PropTypes.func.isRequired,
-    getClients: PropTypes.func.isRequired,
-    getStats: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(Clients);

client/src/components/Settings/Clients/whoisCell.tsx

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import { normalizeWhois } from '../../../helpers/helpers';
 import { WHOIS_ICONS } from '../../../helpers/constants';
 
-const getFormattedWhois = (value, t) => {
+const getFormattedWhois = (value: any, t: any) => {
     const whoisInfo = normalizeWhois(value);
     const whoisKeys = Object.keys(whoisInfo);
 
@@ -29,12 +29,15 @@ const getFormattedWhois = (value, t) => {
     return '–';
 };
 
-const whoisCell = (t) => function cell(row) {
-    const { value } = row;
+const whoisCell = (t: any) =>
+    function cell(row: any) {
+        const { value } = row;
 
-    return <div className="logs__row o-hidden">
-        <div className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</div>
-    </div>;
-};
+        return (
+            <div className="logs__row o-hidden">
+                <div className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</div>
+            </div>
+        );
+    };
 
 export default whoisCell;

client/src/components/Settings/Dhcp/FormDHCPv4.js

@@ -1,162 +0,0 @@
-import React, { useCallback } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { useTranslation } from 'react-i18next';
-
-import {
-    renderInputField,
-    toNumber,
-} from '../../../helpers/form';
-import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
-import {
-    validateIpv4,
-    validateRequiredValue,
-    validateIpv4RangeEnd,
-    validateGatewaySubnetMask,
-    validateIpForGatewaySubnetMask,
-    validateNotInRange,
-} from '../../../helpers/validators';
-
-const FormDHCPv4 = ({
-    handleSubmit,
-    submitting,
-    processingConfig,
-    ipv4placeholders,
-}) => {
-    const { t } = useTranslation();
-    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
-    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
-    const interface_name = interfaces?.values?.interface_name;
-
-    const isInterfaceIncludesIpv4 = useSelector(
-        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
-    );
-
-    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {})
-        .some(Boolean);
-
-    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv4
-        || isEmptyConfig || submitting || processingConfig;
-
-    const validateRequired = useCallback((value) => {
-        if (isEmptyConfig) {
-            return undefined;
-        }
-        return validateRequiredValue(value);
-    }, [isEmptyConfig]);
-
-    return <form onSubmit={handleSubmit}>
-        <div className="row">
-            <div className="col-lg-6">
-                <div className="form__group form__group--settings">
-                    <label>{t('dhcp_form_gateway_input')}</label>
-                    <Field
-                        name="v4.gateway_ip"
-                        component={renderInputField}
-                        type="text"
-                        className="form-control"
-                        placeholder={t(ipv4placeholders.gateway_ip)}
-                        validate={[
-                            validateIpv4,
-                            validateRequired,
-                            validateNotInRange,
-                        ]}
-                        disabled={!isInterfaceIncludesIpv4}
-                    />
-                </div>
-                <div className="form__group form__group--settings">
-                    <label>{t('dhcp_form_subnet_input')}</label>
-                    <Field
-                        name="v4.subnet_mask"
-                        component={renderInputField}
-                        type="text"
-                        className="form-control"
-                        placeholder={t(ipv4placeholders.subnet_mask)}
-                        validate={[
-                            validateRequired,
-                            validateGatewaySubnetMask,
-                        ]}
-                        disabled={!isInterfaceIncludesIpv4}
-                    />
-                </div>
-            </div>
-            <div className="col-lg-6">
-                <div className="form__group form__group--settings">
-                    <div className="row">
-                        <div className="col-12">
-                            <label>{t('dhcp_form_range_title')}</label>
-                        </div>
-                        <div className="col">
-                            <Field
-                                name="v4.range_start"
-                                component={renderInputField}
-                                type="text"
-                                className="form-control"
-                                placeholder={t(ipv4placeholders.range_start)}
-                                validate={[
-                                    validateIpv4,
-                                    validateIpForGatewaySubnetMask,
-                                ]}
-                                disabled={!isInterfaceIncludesIpv4}
-                            />
-                        </div>
-                        <div className="col">
-                            <Field
-                                name="v4.range_end"
-                                component={renderInputField}
-                                type="text"
-                                className="form-control"
-                                placeholder={t(ipv4placeholders.range_end)}
-                                validate={[
-                                    validateIpv4,
-                                    validateIpv4RangeEnd,
-                                    validateIpForGatewaySubnetMask,
-                                ]}
-                                disabled={!isInterfaceIncludesIpv4}
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div className="form__group form__group--settings">
-                    <label>{t('dhcp_form_lease_title')}</label>
-                    <Field
-                        name="v4.lease_duration"
-                        component={renderInputField}
-                        type="number"
-                        className="form-control"
-                        placeholder={t(ipv4placeholders.lease_duration)}
-                        validate={validateRequired}
-                        normalize={toNumber}
-                        min={1}
-                        max={UINT32_RANGE.MAX}
-                        disabled={!isInterfaceIncludesIpv4}
-                    />
-                </div>
-            </div>
-        </div>
-        <div className="btn-list">
-            <button
-                type="submit"
-                className="btn btn-success btn-standard"
-                disabled={invalid}
-            >
-                {t('save_config')}
-            </button>
-        </div>
-    </form>;
-};
-
-FormDHCPv4.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    initialValues: PropTypes.object.isRequired,
-    processingConfig: PropTypes.bool.isRequired,
-    change: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    ipv4placeholders: PropTypes.object.isRequired,
-};
-
-export default reduxForm({
-    form: FORM_NAME.DHCPv4,
-})(FormDHCPv4);

client/src/components/Settings/Dhcp/FormDHCPv4.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import { renderInputField, toNumber } from '../../../helpers/form';
+import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
+import {
+    validateIpv4,
+    validateRequiredValue,
+    validateIpv4RangeEnd,
+    validateGatewaySubnetMask,
+    validateIpForGatewaySubnetMask,
+    validateNotInRange,
+} from '../../../helpers/validators';
+import { RootState } from '../../../initialState';
+
+interface FormDHCPv4Props {
+    handleSubmit: (...args: unknown[]) => string;
+    submitting: boolean;
+    initialValues: { v4?: any };
+    processingConfig?: boolean;
+    change: (field: string, value: any) => void;
+    reset: () => void;
+    ipv4placeholders?: {
+        gateway_ip: string;
+        subnet_mask: string;
+        range_start: string;
+        range_end: string;
+        lease_duration: string;
+    };
+}
+
+const FormDHCPv4 = ({ handleSubmit, submitting, processingConfig, ipv4placeholders }: FormDHCPv4Props) => {
+    const { t } = useTranslation();
+
+    const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv4], shallowEqual);
+
+    const interfaces = useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv4 = useSelector(
+        (state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
+
+    const invalid =
+        dhcp?.syncErrors ||
+        interfaces?.syncErrors ||
+        !isInterfaceIncludesIpv4 ||
+        isEmptyConfig ||
+        submitting ||
+        processingConfig;
+
+    const validateRequired = useCallback(
+        (value) => {
+            if (isEmptyConfig) {
+                return undefined;
+            }
+            return validateRequiredValue(value);
+        },
+        [isEmptyConfig],
+    );
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-lg-6">
+                    <div className="form__group form__group--settings">
+                        <label>{t('dhcp_form_gateway_input')}</label>
+
+                        <Field
+                            name="v4.gateway_ip"
+                            component={renderInputField}
+                            type="text"
+                            className="form-control"
+                            placeholder={t(ipv4placeholders.gateway_ip)}
+                            validate={[validateIpv4, validateRequired, validateNotInRange]}
+                            disabled={!isInterfaceIncludesIpv4}
+                        />
+                    </div>
+
+                    <div className="form__group form__group--settings">
+                        <label>{t('dhcp_form_subnet_input')}</label>
+
+                        <Field
+                            name="v4.subnet_mask"
+                            component={renderInputField}
+                            type="text"
+                            className="form-control"
+                            placeholder={t(ipv4placeholders.subnet_mask)}
+                            validate={[validateRequired, validateGatewaySubnetMask]}
+                            disabled={!isInterfaceIncludesIpv4}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-lg-6">
+                    <div className="form__group form__group--settings">
+                        <div className="row">
+                            <div className="col-12">
+                                <label>{t('dhcp_form_range_title')}</label>
+                            </div>
+
+                            <div className="col">
+                                <Field
+                                    name="v4.range_start"
+                                    component={renderInputField}
+                                    type="text"
+                                    className="form-control"
+                                    placeholder={t(ipv4placeholders.range_start)}
+                                    validate={[validateIpv4, validateIpForGatewaySubnetMask]}
+                                    disabled={!isInterfaceIncludesIpv4}
+                                />
+                            </div>
+
+                            <div className="col">
+                                <Field
+                                    name="v4.range_end"
+                                    component={renderInputField}
+                                    type="text"
+                                    className="form-control"
+                                    placeholder={t(ipv4placeholders.range_end)}
+                                    validate={[validateIpv4, validateIpv4RangeEnd, validateIpForGatewaySubnetMask]}
+                                    disabled={!isInterfaceIncludesIpv4}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="form__group form__group--settings">
+                        <label>{t('dhcp_form_lease_title')}</label>
+
+                        <Field
+                            name="v4.lease_duration"
+                            component={renderInputField}
+                            type="number"
+                            className="form-control"
+                            placeholder={t(ipv4placeholders.lease_duration)}
+                            validate={validateRequired}
+                            normalize={toNumber}
+                            min={1}
+                            max={UINT32_RANGE.MAX}
+                            disabled={!isInterfaceIncludesIpv4}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className="btn-list">
+                <button type="submit" className="btn btn-success btn-standard" disabled={invalid}>
+                    {t('save_config')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default reduxForm<
+    Record<string, any>,
+    Omit<FormDHCPv4Props, 'submitting' | 'handleSubmit' | 'reset' | 'change'>
+>({
+    form: FORM_NAME.DHCPv4,
+})(FormDHCPv4);

client/src/components/Settings/Dhcp/FormDHCPv6.js

@@ -1,117 +0,0 @@
-import React, { useCallback } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { useTranslation } from 'react-i18next';
-
-import {
-    renderInputField,
-    toNumber,
-} from '../../../helpers/form';
-import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
-import { validateIpv6, validateRequiredValue } from '../../../helpers/validators';
-
-const FormDHCPv6 = ({
-    handleSubmit,
-    submitting,
-    processingConfig,
-    ipv6placeholders,
-}) => {
-    const { t } = useTranslation();
-    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv6], shallowEqual);
-    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
-    const interface_name = interfaces?.values?.interface_name;
-
-    const isInterfaceIncludesIpv6 = useSelector(
-        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
-    );
-
-    const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {})
-        .some(Boolean);
-
-    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv6
-        || isEmptyConfig || submitting || processingConfig;
-
-    const validateRequired = useCallback((value) => {
-        if (isEmptyConfig) {
-            return undefined;
-        }
-        return validateRequiredValue(value);
-    }, [isEmptyConfig]);
-
-    return <form onSubmit={handleSubmit}>
-        <div className="row">
-            <div className="col-lg-6">
-                <div className="form__group form__group--settings">
-                    <div className="row">
-                        <div className="col-12">
-                            <label>{t('dhcp_form_range_title')}</label>
-                        </div>
-                        <div className="col">
-                            <Field
-                                name="v6.range_start"
-                                component={renderInputField}
-                                type="text"
-                                className="form-control"
-                                placeholder={t(ipv6placeholders.range_start)}
-                                validate={[validateIpv6, validateRequired]}
-                                disabled={!isInterfaceIncludesIpv6}
-                            />
-                        </div>
-                        <div className="col">
-                            <Field
-                                name="v6.range_end"
-                                component="input"
-                                type="text"
-                                className="form-control disabled cursor--not-allowed"
-                                placeholder={t(ipv6placeholders.range_end)}
-                                value={t(ipv6placeholders.range_end)}
-                                disabled
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col-lg-6 form__group form__group--settings">
-                <label>{t('dhcp_form_lease_title')}</label>
-                <Field
-                    name="v6.lease_duration"
-                    component={renderInputField}
-                    type="number"
-                    className="form-control"
-                    placeholder={t(ipv6placeholders.lease_duration)}
-                    validate={validateRequired}
-                    normalizeOnBlur={toNumber}
-                    min={1}
-                    max={UINT32_RANGE.MAX}
-                    disabled={!isInterfaceIncludesIpv6}
-                />
-            </div>
-        </div>
-        <div className="btn-list">
-            <button
-                type="submit"
-                className="btn btn-success btn-standard"
-                disabled={invalid}
-            >
-                {t('save_config')}
-            </button>
-        </div>
-    </form>;
-};
-
-FormDHCPv6.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    initialValues: PropTypes.object.isRequired,
-    processingConfig: PropTypes.bool.isRequired,
-    change: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    ipv6placeholders: PropTypes.object.isRequired,
-};
-
-export default reduxForm({
-    form: FORM_NAME.DHCPv6,
-})(FormDHCPv6);

client/src/components/Settings/Dhcp/FormDHCPv6.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import { renderInputField, toNumber } from '../../../helpers/form';
+import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
+import { validateIpv6, validateRequiredValue } from '../../../helpers/validators';
+import { RootState } from '../../../initialState';
+
+interface FormDHCPv6Props {
+    handleSubmit: (...args: unknown[]) => string;
+    submitting: boolean;
+    initialValues: {
+        v6?: any;
+    };
+    change: (field: string, value: any) => void;
+    reset: () => void;
+    processingConfig?: boolean;
+    ipv6placeholders?: {
+        range_start: string;
+        range_end: string;
+        lease_duration: string;
+    };
+}
+
+const FormDHCPv6 = ({ handleSubmit, submitting, processingConfig, ipv6placeholders }: FormDHCPv6Props) => {
+    const { t } = useTranslation();
+
+    const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv6], shallowEqual);
+
+    const interfaces = useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv6 = useSelector(
+        (state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {}).some(Boolean);
+
+    const invalid =
+        dhcp?.syncErrors ||
+        interfaces?.syncErrors ||
+        !isInterfaceIncludesIpv6 ||
+        isEmptyConfig ||
+        submitting ||
+        processingConfig;
+
+    const validateRequired = useCallback(
+        (value) => {
+            if (isEmptyConfig) {
+                return undefined;
+            }
+            return validateRequiredValue(value);
+        },
+        [isEmptyConfig],
+    );
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-lg-6">
+                    <div className="form__group form__group--settings">
+                        <div className="row">
+                            <div className="col-12">
+                                <label>{t('dhcp_form_range_title')}</label>
+                            </div>
+
+                            <div className="col">
+                                <Field
+                                    name="v6.range_start"
+                                    component={renderInputField}
+                                    type="text"
+                                    className="form-control"
+                                    placeholder={t(ipv6placeholders.range_start)}
+                                    validate={[validateIpv6, validateRequired]}
+                                    disabled={!isInterfaceIncludesIpv6}
+                                />
+                            </div>
+
+                            <div className="col">
+                                <Field
+                                    name="v6.range_end"
+                                    component="input"
+                                    type="text"
+                                    className="form-control disabled cursor--not-allowed"
+                                    placeholder={t(ipv6placeholders.range_end)}
+                                    value={t(ipv6placeholders.range_end)}
+                                    disabled
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="row">
+                <div className="col-lg-6 form__group form__group--settings">
+                    <label>{t('dhcp_form_lease_title')}</label>
+
+                    <Field
+                        name="v6.lease_duration"
+                        component={renderInputField}
+                        type="number"
+                        className="form-control"
+                        placeholder={t(ipv6placeholders.lease_duration)}
+                        validate={validateRequired}
+                        normalizeOnBlur={toNumber}
+                        min={1}
+                        max={UINT32_RANGE.MAX}
+                        disabled={!isInterfaceIncludesIpv6}
+                    />
+                </div>
+            </div>
+
+            <div className="btn-list">
+                <button type="submit" className="btn btn-success btn-standard" disabled={invalid}>
+                    {t('save_config')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default reduxForm<
+    Record<string, any>,
+    Omit<FormDHCPv6Props, 'handleSubmit' | 'change' | 'submitting' | 'reset'>
+>({
+    form: FORM_NAME.DHCPv6,
+})(FormDHCPv6);

client/src/components/Settings/Dhcp/Interfaces.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import { Field, reduxForm } from 'redux-form';
-import { Trans, useTranslation } from 'react-i18next';
-import propTypes from 'prop-types';
-import { renderSelectField } from '../../../helpers/form';
-import { validateRequiredValue } from '../../../helpers/validators';
-import { FORM_NAME } from '../../../helpers/constants';
-
-const renderInterfaces = (interfaces) => Object.keys(interfaces)
-    .map((item) => {
-        const option = interfaces[item];
-        const { name } = option;
-
-        const [interfaceIPv4] = option?.ipv4_addresses ?? [];
-        const [interfaceIPv6] = option?.ipv6_addresses ?? [];
-
-        const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
-
-        return <option value={name} key={name}>{optionContent}</option>;
-    });
-
-const getInterfaceValues = ({
-    gateway_ip,
-    hardware_address,
-    ip_addresses,
-}) => [
-    {
-        name: 'dhcp_form_gateway_input',
-        value: gateway_ip,
-    },
-    {
-        name: 'dhcp_hardware_address',
-        value: hardware_address,
-    },
-    {
-        name: 'dhcp_ip_addresses',
-        value: ip_addresses,
-        render: (ip_addresses) => ip_addresses
-            .map((ip) => <span key={ip} className="interface__ip">{ip}</span>),
-    },
-];
-
-const renderInterfaceValues = ({
-    gateway_ip,
-    hardware_address,
-    ip_addresses,
-}) => <div className='d-flex align-items-end dhcp__interfaces-info'>
-    <ul className="list-unstyled m-0">
-        {getInterfaceValues({
-            gateway_ip,
-            hardware_address,
-            ip_addresses,
-        }).map(({ name, value, render }) => value && <li key={name}>
-            <span className="interface__title"><Trans>{name}</Trans>: </span>
-            {render?.(value) || value}
-        </li>)}
-    </ul>
-</div>;
-
-const Interfaces = () => {
-    const { t } = useTranslation();
-
-    const {
-        processingInterfaces,
-        interfaces,
-        enabled,
-    } = useSelector((store) => store.dhcp, shallowEqual);
-
-    const interface_name = useSelector(
-        (store) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
-    );
-
-    if (processingInterfaces || !interfaces) {
-        return null;
-    }
-
-    const interfaceValue = interface_name && interfaces[interface_name];
-
-    return <div className="row dhcp__interfaces">
-        <div className="col col__dhcp">
-            <Field
-                    name="interface_name"
-                    component={renderSelectField}
-                    className="form-control custom-select pl-4 col-md"
-                    validate={[validateRequiredValue]}
-                    label='dhcp_interface_select'
-            >
-                <option value='' disabled={enabled}>
-                    {t('dhcp_interface_select')}
-                </option>
-                {renderInterfaces(interfaces)}
-            </Field>
-        </div>
-        {interfaceValue
-        && renderInterfaceValues(interfaceValue)}
-    </div>;
-};
-
-renderInterfaceValues.propTypes = {
-    gateway_ip: propTypes.string.isRequired,
-    hardware_address: propTypes.string.isRequired,
-    ip_addresses: propTypes.arrayOf(propTypes.string).isRequired,
-};
-
-export default reduxForm({
-    form: FORM_NAME.DHCP_INTERFACES,
-})(Interfaces);

client/src/components/Settings/Dhcp/Interfaces.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { renderSelectField } from '../../../helpers/form';
+import { validateRequiredValue } from '../../../helpers/validators';
+import { FORM_NAME } from '../../../helpers/constants';
+import { RootState } from '../../../initialState';
+
+const renderInterfaces = (interfaces: any) =>
+    Object.keys(interfaces).map((item) => {
+        const option = interfaces[item];
+        const { name } = option;
+
+        const [interfaceIPv4] = option?.ipv4_addresses ?? [];
+        const [interfaceIPv6] = option?.ipv6_addresses ?? [];
+
+        const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
+
+        return (
+            <option value={name} key={name}>
+                {optionContent}
+            </option>
+        );
+    });
+
+const getInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: any) => [
+    {
+        name: 'dhcp_form_gateway_input',
+        value: gateway_ip,
+    },
+    {
+        name: 'dhcp_hardware_address',
+        value: hardware_address,
+    },
+    {
+        name: 'dhcp_ip_addresses',
+        value: ip_addresses,
+        render: (ip_addresses: any) =>
+            ip_addresses.map((ip: any) => (
+                <span key={ip} className="interface__ip">
+                    {ip}
+                </span>
+            )),
+    },
+];
+
+interface renderInterfaceValuesProps {
+    gateway_ip: string;
+    hardware_address: string;
+    ip_addresses: string[];
+}
+
+const renderInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: renderInterfaceValuesProps) => (
+    <div className="d-flex align-items-end dhcp__interfaces-info">
+        <ul className="list-unstyled m-0">
+            {getInterfaceValues({
+                gateway_ip,
+                hardware_address,
+                ip_addresses,
+            }).map(
+                ({ name, value, render }) =>
+                    value && (
+                        <li key={name}>
+                            <span className="interface__title">
+                                <Trans>{name}</Trans>:{' '}
+                            </span>
+                            {render?.(value) || value}
+                        </li>
+                    ),
+            )}
+        </ul>
+    </div>
+);
+
+const Interfaces = () => {
+    const { t } = useTranslation();
+
+    const { processingInterfaces, interfaces, enabled } = useSelector((store: RootState) => store.dhcp, shallowEqual);
+
+    const interface_name =
+        useSelector((store: RootState) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name);
+
+    if (processingInterfaces || !interfaces) {
+        return null;
+    }
+
+    const interfaceValue = interface_name && interfaces[interface_name];
+
+    return (
+        <div className="row dhcp__interfaces">
+            <div className="col col__dhcp">
+                <Field
+                    name="interface_name"
+                    component={renderSelectField}
+                    className="form-control custom-select pl-4 col-md"
+                    validate={[validateRequiredValue]}
+                    label="dhcp_interface_select">
+                    <option value="" disabled={enabled}>
+                        {t('dhcp_interface_select')}
+                    </option>
+                    {renderInterfaces(interfaces)}
+                </Field>
+            </div>
+            {interfaceValue && renderInterfaceValues({
+                gateway_ip: interfaceValue.gateway_ip,
+                hardware_address: interfaceValue.hardware_address,
+                ip_addresses: interfaceValue.ip_addresses
+            })}
+        </div>
+    );
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCP_INTERFACES,
+})(Interfaces);

client/src/components/Settings/Dhcp/Leases.tsx

@@ -1,14 +1,24 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 import { Trans, withTranslation } from 'react-i18next';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE, MODAL_TYPE } from '../../../helpers/constants';
+
 import { sortIp } from '../../../helpers/helpers';
+
 import { toggleLeaseModal } from '../../../actions';
 
-class Leases extends Component {
-    cellWrap = ({ value }) => (
+interface LeasesProps {
+    leases?: unknown[];
+    t?: (...args: unknown[]) => string;
+    dispatch?: (...args: unknown[]) => unknown;
+    disabledLeasesButton?: boolean;
+}
+
+class Leases extends Component<LeasesProps> {
+    cellWrap = ({ value }: any) => (
         <div className="logs__row o-hidden">
             <span className="logs__text" title={value}>
                 {value}
@@ -16,15 +26,17 @@ class Leases extends Component {
         </div>
     );
 
-    convertToStatic = (data) => () => {
+    convertToStatic = (data: any) => () => {
         const { dispatch } = this.props;
-        dispatch(toggleLeaseModal({
-            type: MODAL_TYPE.ADD_LEASE,
-            config: data,
-        }));
-    }
+        dispatch(
+            toggleLeaseModal({
+                type: MODAL_TYPE.ADD_LEASE,
+                config: data,
+            }),
+        );
+    };
 
-    makeStatic = ({ row }) => {
+    makeStatic = ({ row }: any) => {
         const { t, disabledLeasesButton } = this.props;
         return (
             <div className="logs__row logs__row--center">
@@ -33,15 +45,14 @@ class Leases extends Component {
                     className="btn btn-icon btn-icon--green btn-outline-success btn-sm"
                     title={t('make_static')}
                     onClick={this.convertToStatic(row)}
-                    disabled={disabledLeasesButton}
-                >
+                    disabled={disabledLeasesButton}>
                     <svg className="icons icon12">
                         <use xlinkHref="#plus" />
                     </svg>
                 </button>
             </div>
         );
-    }
+    };
 
     render() {
         const { leases, t } = this.props;
@@ -54,23 +65,27 @@ class Leases extends Component {
                         accessor: 'mac',
                         minWidth: 180,
                         Cell: this.cellWrap,
-                    }, {
+                    },
+                    {
                         Header: 'IP',
                         accessor: 'ip',
                         minWidth: 230,
                         Cell: this.cellWrap,
                         sortMethod: sortIp,
-                    }, {
+                    },
+                    {
                         Header: <Trans>dhcp_table_hostname</Trans>,
                         accessor: 'hostname',
                         minWidth: 230,
                         Cell: this.cellWrap,
-                    }, {
+                    },
+                    {
                         Header: <Trans>dhcp_table_expires</Trans>,
                         accessor: 'expires',
                         minWidth: 220,
                         Cell: this.cellWrap,
-                    }, {
+                    },
+                    {
                         Header: <Trans>actions_table_header</Trans>,
                         Cell: this.makeStatic,
                     },
@@ -86,11 +101,9 @@ class Leases extends Component {
     }
 }
 
-Leases.propTypes = {
-    leases: PropTypes.array,
-    t: PropTypes.func,
-    dispatch: PropTypes.func,
-    disabledLeasesButton: PropTypes.bool,
-};
-
-export default withTranslation()(connect(() => ({}), (dispatch) => ({ dispatch }))(Leases));
+export default withTranslation()(
+    connect(
+        () => ({}),
+        (dispatch) => ({ dispatch }),
+    )(Leases),
+);

client/src/components/Settings/Dhcp/StaticLeases/Form.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Field, reduxForm } from 'redux-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -13,20 +13,32 @@ import {
     validateIpGateway,
 } from '../../../../helpers/validators';
 import { FORM_NAME } from '../../../../helpers/constants';
-import { toggleLeaseModal } from '../../../../actions';
 
-const Form = ({
-    handleSubmit,
-    reset,
-    pristine,
-    submitting,
-    processingAdding,
-    cidr,
-    isEdit,
-}) => {
+import { toggleLeaseModal } from '../../../../actions';
+import { RootState } from '../../../../initialState';
+
+interface FormStaticLeaseProps {
+    initialValues?: {
+        mac?: string;
+        ip?: string;
+        hostname?: string;
+        cidr?: string;
+        gatewayIp?: string;
+    };
+    pristine: boolean;
+    handleSubmit: (...args: unknown[]) => string;
+    reset: () => void;
+    submitting: boolean;
+    processingAdding?: boolean;
+    cidr?: string;
+    isEdit?: boolean;
+}
+
+const Form = ({ handleSubmit, reset, pristine, submitting, processingAdding, cidr, isEdit }: FormStaticLeaseProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
-    const dynamicLease = useSelector((store) => store.dhcp.leaseModalConfig, shallowEqual);
+
+    const dynamicLease = useSelector((store: RootState) => store.dhcp.leaseModalConfig, shallowEqual);
 
     const onClick = () => {
         reset();
@@ -49,6 +61,7 @@ const Form = ({
                         disabled={isEdit}
                     />
                 </div>
+
                 <div className="form__group">
                     <Field
                         id="ip"
@@ -57,14 +70,10 @@ const Form = ({
                         type="text"
                         className="form-control"
                         placeholder={t('form_enter_subnet_ip', { cidr })}
-                        validate={[
-                            validateRequiredValue,
-                            validateIpv4,
-                            validateIpv4InCidr,
-                            validateIpGateway,
-                        ]}
+                        validate={[validateRequiredValue, validateIpv4, validateIpv4InCidr, validateIpGateway]}
                     />
                 </div>
+
                 <div className="form__group">
                     <Field
                         id="hostname"
@@ -83,15 +92,14 @@ const Form = ({
                         type="button"
                         className="btn btn-secondary btn-standard"
                         disabled={submitting}
-                        onClick={onClick}
-                    >
+                        onClick={onClick}>
                         <Trans>cancel_btn</Trans>
                     </button>
+
                     <button
                         type="submit"
                         className="btn btn-success btn-standard"
-                        disabled={submitting || processingAdding || (pristine && !dynamicLease)}
-                    >
+                        disabled={submitting || processingAdding || (pristine && !dynamicLease)}>
                         <Trans>save_btn</Trans>
                     </button>
                 </div>
@@ -100,21 +108,7 @@ const Form = ({
     );
 };
 
-Form.propTypes = {
-    initialValues: PropTypes.shape({
-        mac: PropTypes.string.isRequired,
-        ip: PropTypes.string.isRequired,
-        hostname: PropTypes.string.isRequired,
-        cidr: PropTypes.string.isRequired,
-        gatewayIp: PropTypes.string,
-    }),
-    pristine: PropTypes.bool.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    cidr: PropTypes.string.isRequired,
-    isEdit: PropTypes.bool,
-};
-
-export default reduxForm({ form: FORM_NAME.LEASE })(Form);
+export default reduxForm<
+    Record<string, any>,
+    Omit<FormStaticLeaseProps, 'submitting' | 'handleSubmit' | 'reset' | 'pristine'>
+>({ form: FORM_NAME.LEASE })(Form);

client/src/components/Settings/Dhcp/StaticLeases/Modal.tsx

@@ -1,11 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
+
 import ReactModal from 'react-modal';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import Form from './Form';
+
 import { toggleLeaseModal } from '../../../../actions';
 import { MODAL_TYPE } from '../../../../helpers/constants';
+import { RootState } from '../../../../initialState';
+
+interface ModalProps {
+    isModalOpen: boolean;
+    modalType: string;
+    handleSubmit: (values: any) => void;
+    processingAdding: boolean;
+    cidr: string;
+    gatewayIp?: string;
+}
 
 const Modal = ({
     isModalOpen,
@@ -13,24 +25,20 @@ const Modal = ({
     handleSubmit,
     processingAdding,
     cidr,
-    rangeStart,
-    rangeEnd,
     gatewayIp,
-}) => {
+}: ModalProps) => {
     const dispatch = useDispatch();
 
     const toggleModal = () => dispatch(toggleLeaseModal());
-    const leaseInitialData = useSelector(
-        (state) => state.dhcp.leaseModalConfig, shallowEqual,
-    ) || {};
+
+    const leaseInitialData = useSelector((state: RootState) => state.dhcp.leaseModalConfig, shallowEqual);
 
     return (
         <ReactModal
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={toggleModal}
-        >
+            onRequestClose={toggleModal}>
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
@@ -40,25 +48,23 @@ const Modal = ({
                             <Trans>dhcp_new_static_lease</Trans>
                         )}
                     </h4>
+
                     <button type="button" className="close" onClick={toggleModal}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
+
                 <Form
                     initialValues={{
-                        mac: leaseInitialData.mac ?? '',
-                        ip: leaseInitialData.ip ?? '',
-                        hostname: leaseInitialData.hostname ?? '',
+                        mac: leaseInitialData?.mac ?? '',
+                        ip: leaseInitialData?.ip ?? '',
+                        hostname: leaseInitialData?.hostname ?? '',
                         cidr,
-                        rangeStart,
-                        rangeEnd,
                         gatewayIp,
                     }}
                     onSubmit={handleSubmit}
                     processingAdding={processingAdding}
                     cidr={cidr}
-                    rangeStart={rangeStart}
-                    rangeEnd={rangeEnd}
                     isEdit={modalType === MODAL_TYPE.EDIT_LEASE}
                 />
             </div>
@@ -66,15 +72,4 @@ const Modal = ({
     );
 };
 
-Modal.propTypes = {
-    isModalOpen: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    cidr: PropTypes.string.isRequired,
-    rangeStart: PropTypes.string,
-    rangeEnd: PropTypes.string,
-    gatewayIp: PropTypes.string,
-};
-
 export default withTranslation()(Modal);

client/src/components/Settings/Dhcp/StaticLeases/index.tsx

@@ -1,26 +1,39 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
+// @ts-expect-error FIXME: update react-table
 import ReactTable from 'react-table';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE, MODAL_TYPE } from '../../../../helpers/constants';
-import { sortIp } from '../../../../helpers/helpers';
-import Modal from './Modal';
-import {
-    addStaticLease,
-    removeStaticLease,
-    toggleLeaseModal,
-    updateStaticLease,
-} from '../../../../actions';
 
-const cellWrap = ({ value }) => (
+import { sortIp } from '../../../../helpers/helpers';
+
+import Modal from './Modal';
+import { addStaticLease, removeStaticLease, toggleLeaseModal, updateStaticLease } from '../../../../actions';
+
+interface cellWrapProps {
+    value: string;
+}
+
+const cellWrap = ({ value }: cellWrapProps) => (
     <div className="logs__row o-hidden">
-            <span className="logs__text" title={value}>
-                {value}
-            </span>
+        <span className="logs__text" title={value}>
+            {value}
+        </span>
     </div>
 );
 
+interface StaticLeasesProps {
+    staticLeases: unknown[];
+    isModalOpen: boolean;
+    modalType: string;
+    processingAdding: boolean;
+    processingDeleting: boolean;
+    processingUpdating: boolean;
+    cidr: string;
+    gatewayIp?: string;
+}
+
 const StaticLeases = ({
     isModalOpen,
     modalType,
@@ -29,14 +42,12 @@ const StaticLeases = ({
     processingUpdating,
     staticLeases,
     cidr,
-    rangeStart,
-    rangeEnd,
     gatewayIp,
-}) => {
+}: StaticLeasesProps) => {
     const [t] = useTranslation();
     const dispatch = useDispatch();
 
-    const handleSubmit = (data) => {
+    const handleSubmit = (data: any) => {
         const { mac, ip, hostname } = data;
 
         if (modalType === MODAL_TYPE.EDIT_LEASE) {
@@ -46,15 +57,17 @@ const StaticLeases = ({
         }
     };
 
-    const handleDelete = (ip, mac, hostname = '') => {
+    const handleDelete = (ip: any, mac: any, hostname = '') => {
         const name = hostname || ip;
         // eslint-disable-next-line no-alert
         if (window.confirm(t('delete_confirm', { key: name }))) {
-            dispatch(removeStaticLease({
-                ip,
-                mac,
-                hostname,
-            }));
+            dispatch(
+                removeStaticLease({
+                    ip,
+                    mac,
+                    hostname,
+                }),
+            );
         }
     };
 
@@ -89,7 +102,7 @@ const StaticLeases = ({
                         sortable: false,
                         resizable: false,
                         // eslint-disable-next-line react/display-name
-                        Cell: (row) => {
+                        Cell: (row: any) => {
                             const { ip, mac, hostname } = row.original;
 
                             return (
@@ -97,24 +110,27 @@ const StaticLeases = ({
                                     <button
                                         type="button"
                                         className="btn btn-icon btn-outline-primary btn-sm mr-2"
-                                        onClick={() => dispatch(toggleLeaseModal({
-                                            type: MODAL_TYPE.EDIT_LEASE,
-                                            config: { ip, mac, hostname },
-                                        }))}
+                                        onClick={() =>
+                                            dispatch(
+                                                toggleLeaseModal({
+                                                    type: MODAL_TYPE.EDIT_LEASE,
+                                                    config: { ip, mac, hostname },
+                                                }),
+                                            )
+                                        }
                                         disabled={processingUpdating}
-                                        title={t('edit_table_action')}
-                                    >
+                                        title={t('edit_table_action')}>
                                         <svg className="icons icon12">
                                             <use xlinkHref="#edit" />
                                         </svg>
                                     </button>
+
                                     <button
                                         type="button"
                                         className="btn btn-icon btn-outline-secondary btn-sm"
                                         onClick={() => handleDelete(ip, mac, hostname)}
                                         disabled={processingDeleting}
-                                        title={t('delete_table_action')}
-                                    >
+                                        title={t('delete_table_action')}>
                                         <svg className="icons icon12">
                                             <use xlinkHref="#delete" />
                                         </svg>
@@ -131,35 +147,17 @@ const StaticLeases = ({
                 className="-striped -highlight card-table-overflow"
                 minRows={6}
             />
+
             <Modal
                 isModalOpen={isModalOpen}
                 modalType={modalType}
                 handleSubmit={handleSubmit}
                 processingAdding={processingAdding}
                 cidr={cidr}
-                rangeStart={rangeStart}
-                rangeEnd={rangeEnd}
                 gatewayIp={gatewayIp}
             />
         </>
     );
 };
 
-StaticLeases.propTypes = {
-    staticLeases: PropTypes.array.isRequired,
-    isModalOpen: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    processingDeleting: PropTypes.bool.isRequired,
-    processingUpdating: PropTypes.bool.isRequired,
-    cidr: PropTypes.string.isRequired,
-    rangeStart: PropTypes.string,
-    rangeEnd: PropTypes.string,
-    gatewayIp: PropTypes.string,
-};
-
-cellWrap.propTypes = {
-    value: PropTypes.string.isRequired,
-};
-
 export default StaticLeases;

client/src/components/Settings/Dhcp/index.js

@@ -1,312 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import classNames from 'classnames';
-import { destroy } from 'redux-form';
-import {
-    DHCP_DESCRIPTION_PLACEHOLDERS,
-    DHCP_FORM_NAMES,
-    STATUS_RESPONSE,
-    FORM_NAME,
-} from '../../../helpers/constants';
-import Leases from './Leases';
-import StaticLeases from './StaticLeases/index';
-import Card from '../../ui/Card';
-import PageTitle from '../../ui/PageTitle';
-import Loading from '../../ui/Loading';
-import {
-    findActiveDhcp,
-    getDhcpInterfaces,
-    getDhcpStatus,
-    resetDhcp,
-    setDhcpConfig,
-    resetDhcpLeases,
-    toggleDhcp,
-    toggleLeaseModal,
-} from '../../../actions';
-import FormDHCPv4 from './FormDHCPv4';
-import FormDHCPv6 from './FormDHCPv6';
-import Interfaces from './Interfaces';
-import {
-    calculateDhcpPlaceholdersIpv4,
-    calculateDhcpPlaceholdersIpv6,
-    subnetMaskToBitMask,
-} from '../../../helpers/helpers';
-import './index.css';
-
-const Dhcp = () => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const {
-        processingStatus,
-        processingConfig,
-        processing,
-        processingInterfaces,
-        check,
-        leases,
-        staticLeases,
-        isModalOpen,
-        processingAdding,
-        processingDeleting,
-        processingUpdating,
-        processingDhcp,
-        v4,
-        v6,
-        interface_name: interfaceName,
-        enabled,
-        dhcp_available,
-        interfaces,
-        modalType,
-    } = useSelector((state) => state.dhcp, shallowEqual);
-
-    const interface_name = useSelector(
-        (state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
-    );
-    const isInterfaceIncludesIpv4 = useSelector(
-        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
-    );
-    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
-
-    const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
-    const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
-
-    useEffect(() => {
-        dispatch(getDhcpStatus());
-    }, []);
-
-    useEffect(() => {
-        if (dhcp_available) {
-            dispatch(getDhcpInterfaces());
-        }
-    }, [dhcp_available]);
-
-    useEffect(() => {
-        const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
-        const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
-        const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
-
-        const v4placeholders = ipv4
-            ? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
-            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
-
-        const v6placeholders = ipv6
-            ? calculateDhcpPlaceholdersIpv6()
-            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
-
-        setIpv4Placeholders(v4placeholders);
-        setIpv6Placeholders(v6placeholders);
-    }, [interface_name]);
-
-    const clear = () => {
-        // eslint-disable-next-line no-alert
-        if (window.confirm(t('dhcp_reset'))) {
-            Object.values(DHCP_FORM_NAMES)
-                .forEach((formName) => dispatch(destroy(formName)));
-            dispatch(resetDhcp());
-            dispatch(getDhcpStatus());
-        }
-    };
-
-    const handleSubmit = (values) => {
-        dispatch(setDhcpConfig({
-            interface_name,
-            ...values,
-        }));
-    };
-
-    const handleReset = () => {
-        if (window.confirm(t('dhcp_reset_leases_confirm'))) {
-            dispatch(resetDhcpLeases());
-        }
-    };
-
-    const enteredSomeV4Value = Object.values(v4)
-        .some(Boolean);
-    const enteredSomeV6Value = Object.values(v6)
-        .some(Boolean);
-    const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
-
-    const getToggleDhcpButton = () => {
-        const filledConfig = interface_name && (Object.values(v4)
-            .every(Boolean) || Object.values(v6)
-            .every(Boolean));
-
-        const className = classNames('btn btn-sm', {
-            'btn-gray': enabled,
-            'btn-outline-success': !enabled,
-        });
-
-        const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
-        const onClickEnable = () => {
-            const values = {
-                enabled,
-                interface_name,
-                v4: enteredSomeV4Value ? v4 : {},
-                v6: enteredSomeV6Value ? v6 : {},
-            };
-            dispatch(toggleDhcp(values));
-        };
-
-        return <button
-            type="button"
-            className={className}
-            onClick={enabled ? onClickDisable : onClickEnable}
-            disabled={processingDhcp || processingConfig
-            || (!enabled && (!filledConfig || !check))}
-        >
-            <Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
-        </button>;
-    };
-
-    const statusButtonClass = classNames('btn btn-sm dhcp-form__button', {
-        'btn-loading btn-primary': processingStatus,
-        'btn-outline-primary': !processingStatus,
-    });
-
-    const onClick = () => dispatch(findActiveDhcp(interface_name));
-
-    const toggleModal = () => dispatch(toggleLeaseModal());
-
-    const initialV4 = enteredSomeV4Value ? v4 : {};
-    const initialV6 = enteredSomeV6Value ? v6 : {};
-
-    if (processing || processingInterfaces) {
-        return <Loading />;
-    }
-
-    if (!processing && !dhcp_available) {
-        return <div className="text-center pt-5">
-            <h2>
-                <Trans>unavailable_dhcp</Trans>
-            </h2>
-            <h4>
-                <Trans>unavailable_dhcp_desc</Trans>
-            </h4>
-        </div>;
-    }
-
-    const toggleDhcpButton = getToggleDhcpButton();
-
-    const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask;
-    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
-    const disabledLeasesButton = Boolean(dhcp?.syncErrors || interfaces?.syncErrors
-        || !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values);
-    const cidr = inputtedIPv4values ? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}` : '';
-
-    return <>
-        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')} containerClass="page-title--dhcp">
-            {toggleDhcpButton}
-            <button
-                type="button"
-                className={statusButtonClass}
-                onClick={onClick}
-                disabled={enabled || !interface_name || processingConfig}
-            >
-                <Trans>check_dhcp_servers</Trans>
-            </button>
-            <button
-                type="button"
-                className='btn btn-sm btn-outline-secondary'
-                disabled={!enteredSomeValue || processingConfig}
-                onClick={clear}
-            >
-                <Trans>reset_settings</Trans>
-            </button>
-        </PageTitle>
-        {!processing && !processingInterfaces
-        && <>
-            {!enabled
-            && check
-            && (check.v4.other_server.found !== STATUS_RESPONSE.NO
-                    || check.v6.other_server.found !== STATUS_RESPONSE.NO)
-            && <div className="mb-5">
-                <hr />
-                <div className="text-danger">
-                    <Trans>dhcp_warning</Trans>
-                </div>
-            </div>}
-            <Interfaces
-                initialValues={{ interface_name: interfaceName }}
-            />
-            <Card
-                title={t('dhcp_ipv4_settings')}
-                bodyType="card-body box-body--settings"
-            >
-                <div>
-                    <FormDHCPv4
-                        onSubmit={handleSubmit}
-                        initialValues={{ v4: initialV4 }}
-                        processingConfig={processingConfig}
-                        ipv4placeholders={ipv4placeholders}
-                    />
-                </div>
-            </Card>
-            <Card
-                title={t('dhcp_ipv6_settings')}
-                bodyType="card-body box-body--settings"
-            >
-                <div>
-                    <FormDHCPv6
-                        onSubmit={handleSubmit}
-                        initialValues={{ v6: initialV6 }}
-                        processingConfig={processingConfig}
-                        ipv6placeholders={ipv6placeholders}
-                    />
-                </div>
-            </Card>
-            {enabled
-            && <Card
-                title={t('dhcp_leases')}
-                bodyType="card-body box-body--settings"
-            >
-                <div className="row">
-                    <div className="col">
-                        <Leases leases={leases} disabledLeasesButton={disabledLeasesButton}/>
-                    </div>
-                </div>
-            </Card>}
-            <Card
-                title={t('dhcp_static_leases')}
-                bodyType="card-body box-body--settings"
-            >
-                <div className="row">
-                    <div className="col-12">
-                        <StaticLeases
-                            staticLeases={staticLeases}
-                            isModalOpen={isModalOpen}
-                            toggleModal={toggleModal}
-                            modalType={modalType}
-                            processingAdding={processingAdding}
-                            processingDeleting={processingDeleting}
-                            processingUpdating={processingUpdating}
-                            cidr={cidr}
-                            rangeStart={dhcp?.values?.v4?.range_start}
-                            rangeEnd={dhcp?.values?.v4?.range_end}
-                            gatewayIp={dhcp?.values?.v4?.gateway_ip}
-                        />
-                        <div className="btn-list mt-2">
-                            <button
-                                type="button"
-                                className="btn btn-success btn-standard mt-3"
-                                onClick={toggleModal}
-                                disabled={disabledLeasesButton}
-                            >
-                                <Trans>dhcp_add_static_lease</Trans>
-                            </button>
-                            <button
-                                type="button"
-                                className="btn btn-secondary btn-standard mt-3"
-                                onClick={handleReset}
-                            >
-                                <Trans>dhcp_reset_leases</Trans>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </Card>
-        </>}
-    </>;
-};
-
-export default Dhcp;

client/src/components/Settings/Dhcp/index.tsx

@@ -0,0 +1,321 @@
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+
+import { destroy } from 'redux-form';
+import { DHCP_DESCRIPTION_PLACEHOLDERS, DHCP_FORM_NAMES, STATUS_RESPONSE, FORM_NAME } from '../../../helpers/constants';
+
+import Leases from './Leases';
+
+import StaticLeases from './StaticLeases/index';
+
+import Card from '../../ui/Card';
+
+import PageTitle from '../../ui/PageTitle';
+
+import Loading from '../../ui/Loading';
+import {
+    findActiveDhcp,
+    getDhcpInterfaces,
+    getDhcpStatus,
+    resetDhcp,
+    setDhcpConfig,
+    resetDhcpLeases,
+    toggleDhcp,
+    toggleLeaseModal,
+} from '../../../actions';
+
+import FormDHCPv4 from './FormDHCPv4';
+
+import FormDHCPv6 from './FormDHCPv6';
+
+import Interfaces from './Interfaces';
+import {
+    calculateDhcpPlaceholdersIpv4,
+    calculateDhcpPlaceholdersIpv6,
+    subnetMaskToBitMask,
+} from '../../../helpers/helpers';
+import './index.css';
+import { RootState } from '../../../initialState';
+
+const Dhcp = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        processingStatus,
+        processingConfig,
+        processing,
+        processingInterfaces,
+        check,
+        leases,
+        staticLeases,
+        isModalOpen,
+        processingAdding,
+        processingDeleting,
+        processingUpdating,
+        processingDhcp,
+        v4,
+        v6,
+        interface_name: interfaceName,
+        enabled,
+        dhcp_available,
+        interfaces,
+        modalType,
+    } = useSelector((state: RootState) => state.dhcp, shallowEqual);
+
+    const interface_name =
+        useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name);
+    const isInterfaceIncludesIpv4 =
+        useSelector((state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses);
+
+    const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv4], shallowEqual);
+
+    const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
+    const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
+
+    useEffect(() => {
+        dispatch(getDhcpStatus());
+    }, []);
+
+    useEffect(() => {
+        if (dhcp_available) {
+            dispatch(getDhcpInterfaces());
+        }
+    }, [dhcp_available]);
+
+    useEffect(() => {
+        const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
+        const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
+        const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
+
+        const v4placeholders = ipv4
+            ? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
+
+        const v6placeholders = ipv6 ? calculateDhcpPlaceholdersIpv6() : DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
+
+        setIpv4Placeholders(v4placeholders);
+        setIpv6Placeholders(v6placeholders);
+    }, [interface_name]);
+
+    const clear = () => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('dhcp_reset'))) {
+            Object.values(DHCP_FORM_NAMES).forEach((formName: any) => dispatch(destroy(formName)));
+            dispatch(resetDhcp());
+            dispatch(getDhcpStatus());
+        }
+    };
+
+    const handleSubmit = (values: any) => {
+        dispatch(
+            setDhcpConfig({
+                interface_name,
+                ...values,
+            }),
+        );
+    };
+
+    const handleReset = () => {
+        if (window.confirm(t('dhcp_reset_leases_confirm'))) {
+            dispatch(resetDhcpLeases());
+        }
+    };
+
+    const enteredSomeV4Value = Object.values(v4).some(Boolean);
+
+    const enteredSomeV6Value = Object.values(v6).some(Boolean);
+    const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
+
+    const getToggleDhcpButton = () => {
+        const filledConfig =
+            interface_name &&
+            (Object.values(v4)
+
+                .every(Boolean) ||
+                Object.values(v6).every(Boolean));
+
+        const className = classNames('btn btn-sm', {
+            'btn-gray': enabled,
+            'btn-outline-success': !enabled,
+        });
+
+        const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
+        const onClickEnable = () => {
+            const values = {
+                enabled,
+                interface_name,
+                v4: enteredSomeV4Value ? v4 : {},
+                v6: enteredSomeV6Value ? v6 : {},
+            };
+            dispatch(toggleDhcp(values));
+        };
+
+        return (
+            <button
+                type="button"
+                className={className}
+                onClick={enabled ? onClickDisable : onClickEnable}
+                disabled={processingDhcp || processingConfig || (!enabled && (!filledConfig || !check))}>
+                <Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
+            </button>
+        );
+    };
+
+    const statusButtonClass = classNames('btn btn-sm dhcp-form__button', {
+        'btn-loading btn-primary': processingStatus,
+        'btn-outline-primary': !processingStatus,
+    });
+
+    const onClick = () => dispatch(findActiveDhcp(interface_name));
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
+
+    const initialV4 = enteredSomeV4Value ? v4 : {};
+    const initialV6 = enteredSomeV6Value ? v6 : {};
+
+    if (processing || processingInterfaces) {
+        return <Loading />;
+    }
+
+    if (!processing && !dhcp_available) {
+        return (
+            <div className="text-center pt-5">
+                <h2>
+                    <Trans>unavailable_dhcp</Trans>
+                </h2>
+
+                <h4>
+                    <Trans>unavailable_dhcp_desc</Trans>
+                </h4>
+            </div>
+        );
+    }
+
+    const toggleDhcpButton = getToggleDhcpButton();
+
+    const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask;
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
+    const disabledLeasesButton = Boolean(
+        dhcp?.syncErrors ||
+            !isInterfaceIncludesIpv4 ||
+            isEmptyConfig ||
+            processingConfig ||
+            !inputtedIPv4values,
+    );
+    const cidr = inputtedIPv4values
+        ? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}`
+        : '';
+
+    return (
+        <>
+            <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')} containerClass="page-title--dhcp">
+                {toggleDhcpButton}
+
+                <button
+                    type="button"
+                    className={statusButtonClass}
+                    onClick={onClick}
+                    disabled={enabled || !interface_name || processingConfig}>
+                    <Trans>check_dhcp_servers</Trans>
+                </button>
+
+                <button
+                    type="button"
+                    className="btn btn-sm btn-outline-secondary"
+                    disabled={!enteredSomeValue || processingConfig}
+                    onClick={clear}>
+                    <Trans>reset_settings</Trans>
+                </button>
+            </PageTitle>
+            {!processing && !processingInterfaces && (
+                <>
+                    {!enabled &&
+                        check &&
+                        (check.v4.other_server.found !== STATUS_RESPONSE.NO ||
+                            check.v6.other_server.found !== STATUS_RESPONSE.NO) && (
+                            <div className="mb-5">
+                                <hr />
+
+                                <div className="text-danger">
+                                    <Trans>dhcp_warning</Trans>
+                                </div>
+                            </div>
+                        )}
+
+                    <Interfaces initialValues={{ interface_name: interfaceName }} />
+
+                    <Card title={t('dhcp_ipv4_settings')} bodyType="card-body box-body--settings">
+                        <div>
+                            <FormDHCPv4
+                                onSubmit={handleSubmit}
+                                initialValues={{ v4: initialV4 }}
+                                processingConfig={processingConfig}
+                                ipv4placeholders={ipv4placeholders}
+                            />
+                        </div>
+                    </Card>
+
+                    <Card title={t('dhcp_ipv6_settings')} bodyType="card-body box-body--settings">
+                        <div>
+                            <FormDHCPv6
+                                onSubmit={handleSubmit}
+                                initialValues={{ v6: initialV6 }}
+                                processingConfig={processingConfig}
+                                ipv6placeholders={ipv6placeholders}
+                            />
+                        </div>
+                    </Card>
+                    {enabled && (
+                        <Card title={t('dhcp_leases')} bodyType="card-body box-body--settings">
+                            <div className="row">
+                                <div className="col">
+                                    <Leases leases={leases} disabledLeasesButton={disabledLeasesButton} />
+                                </div>
+                            </div>
+                        </Card>
+                    )}
+
+                    <Card title={t('dhcp_static_leases')} bodyType="card-body box-body--settings">
+                        <div className="row">
+                            <div className="col-12">
+                                <StaticLeases
+                                    staticLeases={staticLeases}
+                                    isModalOpen={isModalOpen}
+                                    modalType={modalType}
+                                    processingAdding={processingAdding}
+                                    processingDeleting={processingDeleting}
+                                    processingUpdating={processingUpdating}
+                                    cidr={cidr}
+                                    gatewayIp={dhcp?.values?.v4?.gateway_ip}
+                                />
+
+                                <div className="btn-list mt-2">
+                                    <button
+                                        type="button"
+                                        className="btn btn-success btn-standard mt-3"
+                                        onClick={toggleModal}
+                                        disabled={disabledLeasesButton}>
+                                        <Trans>dhcp_add_static_lease</Trans>
+                                    </button>
+
+                                    <button
+                                        type="button"
+                                        className="btn btn-secondary btn-standard mt-3"
+                                        onClick={handleReset}>
+                                        <Trans>dhcp_reset_leases</Trans>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+                </>
+            )}
+        </>
+    );
+};
+
+export default Dhcp;

client/src/components/Settings/Dns/Access/Form.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import { renderTextareaField } from '../../../../helpers/form';
-import {
-    trimMultilineString,
-    removeEmptyLines,
-} from '../../../../helpers/helpers';
-import { CLIENT_ID_LINK, FORM_NAME } from '../../../../helpers/constants';
-
-const fields = [
-    {
-        id: 'allowed_clients',
-        title: 'access_allowed_title',
-        subtitle: 'access_allowed_desc',
-        normalizeOnBlur: removeEmptyLines,
-    },
-    {
-        id: 'disallowed_clients',
-        title: 'access_disallowed_title',
-        subtitle: 'access_disallowed_desc',
-        normalizeOnBlur: trimMultilineString,
-    },
-    {
-        id: 'blocked_hosts',
-        title: 'access_blocked_title',
-        subtitle: 'access_blocked_desc',
-        normalizeOnBlur: removeEmptyLines,
-    },
-];
-
-let Form = (props) => {
-    const {
-        allowedClients, handleSubmit, submitting, invalid, processingSet,
-    } = props;
-
-    const renderField = ({
-        id, title, subtitle, disabled = false, processingSet, normalizeOnBlur,
-    }) => <div key={id} className="form__group mb-5">
-        <label className="form__label form__label--with-desc" htmlFor={id}>
-            <Trans>{title}</Trans>
-            {disabled && <>
-                <span> </span>
-                (<Trans>disabled</Trans>)
-            </>}
-        </label>
-        <div className="form__desc form__desc--top">
-            <Trans components={{ a: <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">text</a> }}>{subtitle}</Trans>
-        </div>
-        <Field
-            id={id}
-            name={id}
-            component={renderTextareaField}
-            type="text"
-            className="form-control form-control--textarea font-monospace"
-            disabled={disabled || processingSet}
-            normalizeOnBlur={normalizeOnBlur}
-        />
-    </div>;
-
-    renderField.propTypes = {
-        id: PropTypes.string,
-        title: PropTypes.string,
-        subtitle: PropTypes.string,
-        disabled: PropTypes.bool,
-        normalizeOnBlur: PropTypes.func,
-    };
-
-    return (
-        <form onSubmit={handleSubmit}>
-            {
-                fields.map((f) => {
-                    const props = { ...f };
-                    if (allowedClients && f.id === 'disallowed_clients') {
-                        props.disabled = true;
-                    }
-                    return renderField(props);
-                })
-            }
-            <div className="card-actions">
-                <div className="btn-list">
-                    <button
-                        type="submit"
-                        className="btn btn-success btn-standard"
-                        disabled={submitting || invalid || processingSet}
-                    >
-                        <Trans>save_config</Trans>
-                    </button>
-                </div>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    initialValues: PropTypes.object.isRequired,
-    processingSet: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    textarea: PropTypes.bool,
-    allowedClients: PropTypes.string,
-};
-
-const selector = formValueSelector(FORM_NAME.ACCESS);
-
-Form = connect((state) => {
-    const allowedClients = selector(state, 'allowed_clients');
-    return {
-        allowedClients,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: FORM_NAME.ACCESS,
-    }),
-])(Form);

client/src/components/Settings/Dns/Access/Form.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { Field, reduxForm, formValueSelector } from 'redux-form';
+import { Trans, withTranslation } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderTextareaField } from '../../../../helpers/form';
+import { trimMultilineString, removeEmptyLines } from '../../../../helpers/helpers';
+import { CLIENT_ID_LINK, FORM_NAME } from '../../../../helpers/constants';
+
+const fields = [
+    {
+        id: 'allowed_clients',
+        title: 'access_allowed_title',
+        subtitle: 'access_allowed_desc',
+        normalizeOnBlur: removeEmptyLines,
+    },
+    {
+        id: 'disallowed_clients',
+        title: 'access_disallowed_title',
+        subtitle: 'access_disallowed_desc',
+        normalizeOnBlur: trimMultilineString,
+    },
+    {
+        id: 'blocked_hosts',
+        title: 'access_blocked_title',
+        subtitle: 'access_blocked_desc',
+        normalizeOnBlur: removeEmptyLines,
+    },
+];
+
+interface FormProps {
+    handleSubmit: (...args: unknown[]) => string;
+    submitting: boolean;
+    invalid: boolean;
+    initialValues: object;
+    processingSet: boolean;
+    t: (...args: unknown[]) => string;
+    textarea?: boolean;
+    allowedClients?: string;
+}
+
+interface renderFieldProps {
+    id?: string;
+    title?: string;
+    subtitle?: string;
+    disabled?: boolean;
+    processingSet?: boolean;
+    normalizeOnBlur?: (...args: unknown[]) => unknown;
+}
+
+let Form = (props: FormProps) => {
+    const { allowedClients, handleSubmit, submitting, invalid, processingSet } = props;
+
+    const renderField = ({
+        id,
+        title,
+        subtitle,
+        disabled = false,
+        processingSet,
+        normalizeOnBlur,
+    }: renderFieldProps) => (
+        <div key={id} className="form__group mb-5">
+            <label className="form__label form__label--with-desc" htmlFor={id}>
+                <Trans>{title}</Trans>
+
+                {disabled && (
+                    <>
+                        <span> </span>(<Trans>disabled</Trans>)
+                    </>
+                )}
+            </label>
+
+            <div className="form__desc form__desc--top">
+                <Trans
+                    components={{
+                        a: (
+                            <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">
+                                text
+                            </a>
+                        ),
+                    }}>
+                    {subtitle}
+                </Trans>
+            </div>
+
+            <Field
+                id={id}
+                name={id}
+                component={renderTextareaField}
+                type="text"
+                className="form-control form-control--textarea font-monospace"
+                disabled={disabled || processingSet}
+                normalizeOnBlur={normalizeOnBlur}
+            />
+        </div>
+    );
+
+    return (
+        <form onSubmit={handleSubmit}>
+            {fields.map((f) => {
+                return renderField({
+                    ...f,
+                    disabled: allowedClients && f.id === 'disallowed_clients' || false
+                });
+            })}
+
+            <div className="card-actions">
+                <div className="btn-list">
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || invalid || processingSet}>
+                        <Trans>save_config</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+const selector = formValueSelector(FORM_NAME.ACCESS);
+
+Form = connect((state) => {
+    const allowedClients = selector(state, 'allowed_clients');
+    return {
+        allowedClients,
+    };
+})(Form);
+
+export default flow([
+    withTranslation(),
+    reduxForm({
+        form: FORM_NAME.ACCESS,
+    }),
+])(Form);

client/src/components/Settings/Dns/Access/index.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import Form from './Form';
-import Card from '../../../ui/Card';
-import { setAccessList } from '../../../../actions/access';
-
-const Access = () => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const {
-        processing,
-        processingSet,
-        ...values
-    } = useSelector((state) => state.access, shallowEqual);
-
-    const handleFormSubmit = (values) => {
-        dispatch(setAccessList(values));
-    };
-
-    return (
-        <Card
-            title={t('access_title')}
-            subtitle={t('access_desc')}
-            bodyType="card-body box-body--settings"
-        >
-            <Form
-                initialValues={values}
-                onSubmit={handleFormSubmit}
-                processingSet={processingSet}
-            />
-        </Card>
-    );
-};
-
-export default Access;

client/src/components/Settings/Dns/Access/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import Form from './Form';
+
+import Card from '../../../ui/Card';
+import { setAccessList } from '../../../../actions/access';
+import { RootState } from '../../../../initialState';
+
+const Access = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const { processingSet, ...values } = useSelector((state: RootState) => state.access, shallowEqual);
+
+    const handleFormSubmit = (values: any) => {
+        dispatch(setAccessList(values));
+    };
+
+    return (
+        <Card title={t('access_title')} subtitle={t('access_desc')} bodyType="card-body box-body--settings">
+            <Form initialValues={values} onSubmit={handleFormSubmit} processingSet={processingSet} />
+        </Card>
+    );
+};
+
+export default Access;

client/src/components/Settings/Dns/Cache/Form.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { Trans, useTranslation } from 'react-i18next';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-
-import { renderInputField, toNumber, CheckboxField } from '../../../../helpers/form';
-import { CACHE_CONFIG_FIELDS, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
-import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
-import { clearDnsCache } from '../../../../actions/dnsConfig';
-
-const INPUTS_FIELDS = [
-    {
-        name: CACHE_CONFIG_FIELDS.cache_size,
-        title: 'cache_size',
-        description: 'cache_size_desc',
-        placeholder: 'enter_cache_size',
-    },
-    {
-        name: CACHE_CONFIG_FIELDS.cache_ttl_min,
-        title: 'cache_ttl_min_override',
-        description: 'cache_ttl_min_override_desc',
-        placeholder: 'enter_cache_ttl_min_override',
-    },
-    {
-        name: CACHE_CONFIG_FIELDS.cache_ttl_max,
-        title: 'cache_ttl_max_override',
-        description: 'cache_ttl_max_override_desc',
-        placeholder: 'enter_cache_ttl_max_override',
-    },
-];
-
-const Form = ({
-    handleSubmit, submitting, invalid,
-}) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-
-    const { processingSetConfig } = useSelector((state) => state.dnsConfig, shallowEqual);
-    const {
-        cache_ttl_max, cache_ttl_min,
-    } = useSelector((state) => state.form[FORM_NAME.CACHE].values, shallowEqual);
-
-    const minExceedsMax = cache_ttl_min > 0 && cache_ttl_max > 0 && cache_ttl_min > cache_ttl_max;
-
-    const handleClearCache = () => {
-        if (window.confirm(t('confirm_dns_cache_clear'))) {
-            dispatch(clearDnsCache());
-        }
-    };
-
-    return <form onSubmit={handleSubmit}>
-        <div className="row">
-            {INPUTS_FIELDS.map(({
-                name, title, description, placeholder, validate, min = 0, max = UINT32_RANGE.MAX,
-            }) => <div className="col-12" key={name}>
-                    <div className="col-12 col-md-7 p-0">
-                        <div className="form__group form__group--settings">
-                            <label
-                                htmlFor={name}
-                                className="form__label form__label--with-desc"
-                            >
-                                {t(title)}
-                            </label>
-                            <div className="form__desc form__desc--top">{t(description)}</div>
-                            <Field
-                                name={name}
-                                type="number"
-                                component={renderInputField}
-                                placeholder={t(placeholder)}
-                                disabled={processingSetConfig}
-                                className="form-control"
-                                validate={validate}
-                                normalizeOnBlur={replaceZeroWithEmptyString}
-                                normalize={toNumber}
-                                min={min}
-                                max={max}
-                            />
-                        </div>
-                    </div>
-                </div>)}
-            {minExceedsMax && (
-                <span className="text-danger pl-3 pb-3">
-                    {t('ttl_cache_validation')}
-                </span>
-            )}
-        </div>
-        <div className="row">
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <Field
-                        name="cache_optimistic"
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t('cache_optimistic')}
-                        disabled={processingSetConfig}
-                        subtitle={t('cache_optimistic_desc')}
-                    />
-                </div>
-            </div>
-        </div>
-        <button
-            type="submit"
-            className="btn btn-success btn-standard btn-large"
-            disabled={submitting || invalid || processingSetConfig || minExceedsMax}
-        >
-            <Trans>save_btn</Trans>
-        </button>
-        <button
-            type="button"
-            className="btn btn-outline-secondary btn-standard form__button"
-            onClick={handleClearCache}
-        >
-            <Trans>clear_cache</Trans>
-        </button>
-    </form>;
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-};
-
-export default reduxForm({ form: FORM_NAME.CACHE })(Form);

client/src/components/Settings/Dns/Cache/Form.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import { renderInputField, toNumber, CheckboxField } from '../../../../helpers/form';
+import { CACHE_CONFIG_FIELDS, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
+
+import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
+import { clearDnsCache } from '../../../../actions/dnsConfig';
+import { RootState } from '../../../../initialState';
+
+const INPUTS_FIELDS = [
+    {
+        name: CACHE_CONFIG_FIELDS.cache_size,
+        title: 'cache_size',
+        description: 'cache_size_desc',
+        placeholder: 'enter_cache_size',
+    },
+    {
+        name: CACHE_CONFIG_FIELDS.cache_ttl_min,
+        title: 'cache_ttl_min_override',
+        description: 'cache_ttl_min_override_desc',
+        placeholder: 'enter_cache_ttl_min_override',
+    },
+    {
+        name: CACHE_CONFIG_FIELDS.cache_ttl_max,
+        title: 'cache_ttl_max_override',
+        description: 'cache_ttl_max_override_desc',
+        placeholder: 'enter_cache_ttl_max_override',
+    },
+];
+
+interface CacheFormProps {
+    handleSubmit: (...args: unknown[]) => string;
+    submitting: boolean;
+    invalid: boolean;
+}
+
+const Form = ({ handleSubmit, submitting, invalid }: CacheFormProps) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const { processingSetConfig } = useSelector((state: RootState) => state.dnsConfig, shallowEqual);
+    const { cache_ttl_max, cache_ttl_min } = useSelector(
+        (state: RootState) => state.form[FORM_NAME.CACHE].values,
+        shallowEqual,
+    );
+
+    const minExceedsMax = cache_ttl_min > 0 && cache_ttl_max > 0 && cache_ttl_min > cache_ttl_max;
+
+    const handleClearCache = () => {
+        if (window.confirm(t('confirm_dns_cache_clear'))) {
+            dispatch(clearDnsCache());
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                {INPUTS_FIELDS.map(({ name, title, description, placeholder }) => (
+                    <div className="col-12" key={name}>
+                        <div className="col-12 col-md-7 p-0">
+                            <div className="form__group form__group--settings">
+                                <label htmlFor={name} className="form__label form__label--with-desc">
+                                    {t(title)}
+                                </label>
+
+                                <div className="form__desc form__desc--top">{t(description)}</div>
+
+                                <Field
+                                    name={name}
+                                    type="number"
+                                    component={renderInputField}
+                                    placeholder={t(placeholder)}
+                                    disabled={processingSetConfig}
+                                    className="form-control"
+                                    normalizeOnBlur={replaceZeroWithEmptyString}
+                                    normalize={toNumber}
+                                    min={0}
+                                    max={UINT32_RANGE.MAX}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                ))}
+                {minExceedsMax && <span className="text-danger pl-3 pb-3">{t('ttl_cache_validation')}</span>}
+            </div>
+
+            <div className="row">
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <Field
+                            name="cache_optimistic"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('cache_optimistic')}
+                            disabled={processingSetConfig}
+                            subtitle={t('cache_optimistic_desc')}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <button
+                type="submit"
+                className="btn btn-success btn-standard btn-large"
+                disabled={submitting || invalid || processingSetConfig || minExceedsMax}>
+                <Trans>save_btn</Trans>
+            </button>
+
+            <button
+                type="button"
+                className="btn btn-outline-secondary btn-standard form__button"
+                onClick={handleClearCache}>
+                <Trans>clear_cache</Trans>
+            </button>
+        </form>
+    );
+};
+
+export default reduxForm({ form: FORM_NAME.CACHE })(Form);

client/src/components/Settings/Dns/Cache/index.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import Card from '../../../ui/Card';
+
 import Form from './Form';
 import { setDnsConfig } from '../../../../actions/dnsConfig';
+
 import { replaceEmptyStringsWithZeroes, replaceZeroWithEmptyString } from '../../../../helpers/helpers';
+import { RootState } from '../../../../initialState';
 
 const CacheConfig = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
-    const {
-        cache_size, cache_ttl_max, cache_ttl_min, cache_optimistic,
-    } = useSelector((state) => state.dnsConfig, shallowEqual);
+    const { cache_size, cache_ttl_max, cache_ttl_min, cache_optimistic } = useSelector(
+        (state: RootState) => state.dnsConfig,
+        shallowEqual,
+    );
 
-    const handleFormSubmit = (values) => {
+    const handleFormSubmit = (values: any) => {
         const completedFields = replaceEmptyStringsWithZeroes(values);
         dispatch(setDnsConfig(completedFields));
     };
@@ -23,8 +28,7 @@ const CacheConfig = () => {
             title={t('dns_cache_config')}
             subtitle={t('dns_cache_config_desc')}
             bodyType="card-body box-body--settings"
-            id="dns-config"
-        >
+            id="dns-config">
             <div className="form">
                 <Form
                     initialValues={{

client/src/components/Settings/Dns/Config/Form.js

@@ -1,288 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { shallowEqual, useSelector } from 'react-redux';
-import { Field, reduxForm } from 'redux-form';
-import { Trans, useTranslation } from 'react-i18next';
-import {
-    renderInputField,
-    renderRadioField,
-    renderTextareaField,
-    CheckboxField,
-    toNumber,
-} from '../../../../helpers/form';
-import {
-    validateIpv4,
-    validateIpv6,
-    validateRequiredValue,
-    validateIp,
-    validateIPv4Subnet,
-    validateIPv6Subnet,
-} from '../../../../helpers/validators';
-import { removeEmptyLines } from '../../../../helpers/helpers';
-import { BLOCKING_MODES, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
-
-const checkboxes = [
-    {
-        name: 'dnssec_enabled',
-        placeholder: 'dnssec_enable',
-        subtitle: 'dnssec_enable_desc',
-    },
-    {
-        name: 'disable_ipv6',
-        placeholder: 'disable_ipv6',
-        subtitle: 'disable_ipv6_desc',
-    },
-];
-
-const customIps = [
-    {
-        description: 'blocking_ipv4_desc',
-        name: 'blocking_ipv4',
-        validateIp: validateIpv4,
-    },
-    {
-        description: 'blocking_ipv6_desc',
-        name: 'blocking_ipv6',
-        validateIp: validateIpv6,
-    },
-];
-
-const getFields = (processing, t) => Object.values(BLOCKING_MODES)
-    .map((mode) => (
-        <Field
-            key={mode}
-            name="blocking_mode"
-            type="radio"
-            component={renderRadioField}
-            value={mode}
-            placeholder={t(mode)}
-            disabled={processing}
-        />
-    ));
-
-const Form = ({
-    handleSubmit, submitting, invalid, processing,
-}) => {
-    const { t } = useTranslation();
-    const {
-        blocking_mode,
-        edns_cs_enabled,
-        edns_cs_use_custom,
-    } = useSelector((state) => state.form[FORM_NAME.BLOCKING_MODE].values ?? {}, shallowEqual);
-
-    return <form onSubmit={handleSubmit}>
-        <div className="row">
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <label htmlFor="ratelimit"
-                        className="form__label form__label--with-desc">
-                        <Trans>rate_limit</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        <Trans>rate_limit_desc</Trans>
-                    </div>
-                    <Field
-                        name="ratelimit"
-                        type="number"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('form_enter_rate_limit')}
-                        normalize={toNumber}
-                        validate={validateRequiredValue}
-                        min={UINT32_RANGE.MIN}
-                        max={UINT32_RANGE.MAX}
-                    />
-                </div>
-            </div>
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <label htmlFor="ratelimit_subnet_len_ipv4"
-                        className="form__label form__label--with-desc">
-                        <Trans>rate_limit_subnet_len_ipv4</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        <Trans>rate_limit_subnet_len_ipv4_desc</Trans>
-                    </div>
-                    <Field
-                        name="ratelimit_subnet_len_ipv4"
-                        type="number"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('form_enter_rate_limit_subnet_len')}
-                        normalize={toNumber}
-                        validate={[validateRequiredValue, validateIPv4Subnet]}
-                        min={0}
-                        max={32}
-                    />
-                </div>
-            </div>
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <label htmlFor="ratelimit_subnet_len_ipv6"
-                        className="form__label form__label--with-desc">
-                        <Trans>rate_limit_subnet_len_ipv6</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        <Trans>rate_limit_subnet_len_ipv6_desc</Trans>
-                    </div>
-                    <Field
-                        name="ratelimit_subnet_len_ipv6"
-                        type="number"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('form_enter_rate_limit_subnet_len')}
-                        normalize={toNumber}
-                        validate={[validateRequiredValue, validateIPv6Subnet]}
-                        min={0}
-                        max={128}
-                    />
-                </div>
-            </div>
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <label htmlFor="ratelimit_whitelist"
-                        className="form__label form__label--with-desc">
-                        <Trans>rate_limit_whitelist</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        <Trans>rate_limit_whitelist_desc</Trans>
-                    </div>
-                    <Field
-                        name="ratelimit_whitelist"
-                        component={renderTextareaField}
-                        type="text"
-                        className="form-control"
-                        placeholder={t('rate_limit_whitelist_placeholder')}
-                        normalizeOnBlur={removeEmptyLines}
-                    />
-                </div>
-            </div>
-            <div className="col-12">
-                <div className="form__group form__group--settings">
-                    <Field
-                        name="edns_cs_enabled"
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t('edns_enable')}
-                        disabled={processing}
-                        subtitle={t('edns_cs_desc')}
-                    />
-                </div>
-            </div>
-            <div className="col-12 form__group form__group--inner">
-                <div className="form__group ">
-                    <Field
-                        name="edns_cs_use_custom"
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t('edns_use_custom_ip')}
-                        disabled={processing || !edns_cs_enabled}
-                        subtitle={t('edns_use_custom_ip_desc')}
-                    />
-                </div>
-
-                {edns_cs_use_custom && (<Field
-                    name="edns_cs_custom_ip"
-                    component={renderInputField}
-                    className="form-control"
-                    placeholder={t('form_enter_ip')}
-                    validate={[validateIp, validateRequiredValue]}
-                />)}
-
-            </div>
-            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
-                <div className="form__group form__group--settings">
-                    <Field
-                        name={name}
-                        type="checkbox"
-                        component={CheckboxField}
-                        placeholder={t(placeholder)}
-                        disabled={processing}
-                        subtitle={t(subtitle)}
-                    />
-                </div>
-            </div>)}
-            <div className="col-12">
-                <div className="form__group form__group--settings mb-4">
-                    <label className="form__label form__label--with-desc">
-                        <Trans>blocking_mode</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        {Object.values(BLOCKING_MODES)
-                            .map((mode) => (
-                                <li key={mode}>
-                                    <Trans>{`blocking_mode_${mode}`}</Trans>
-                                </li>
-                            ))}
-                    </div>
-                    <div className="custom-controls-stacked">
-                        {getFields(processing, t)}
-                    </div>
-                </div>
-            </div>
-            {blocking_mode === BLOCKING_MODES.custom_ip && (
-                <>
-                    {customIps.map(({
-                        description,
-                        name,
-                        validateIp,
-                    }) => <div className="col-12 col-sm-6" key={name}>
-                            <div className="form__group form__group--settings">
-                                <label className="form__label form__label--with-desc"
-                                    htmlFor={name}><Trans>{name}</Trans>
-                                </label>
-                                <div className="form__desc form__desc--top">
-                                    <Trans>{description}</Trans>
-                                </div>
-                                <Field
-                                    name={name}
-                                    component={renderInputField}
-                                    className="form-control"
-                                    placeholder={t('form_enter_ip')}
-                                    validate={[validateIp, validateRequiredValue]}
-                                />
-                            </div>
-                        </div>)}
-                </>
-            )}
-            <div className="col-12 col-md-7">
-                <div className="form__group form__group--settings">
-                    <label htmlFor="blocked_response_ttl"
-                        className="form__label form__label--with-desc">
-                        <Trans>blocked_response_ttl</Trans>
-                    </label>
-                    <div className="form__desc form__desc--top">
-                        <Trans>blocked_response_ttl_desc</Trans>
-                    </div>
-                    <Field
-                        name="blocked_response_ttl"
-                        type="number"
-                        component={renderInputField}
-                        className="form-control"
-                        placeholder={t('form_enter_blocked_response_ttl')}
-                        normalize={toNumber}
-                        validate={validateRequiredValue}
-                        min={UINT32_RANGE.MIN}
-                        max={UINT32_RANGE.MAX}
-                    />
-                </div>
-            </div>
-        </div>
-        <button
-            type="submit"
-            className="btn btn-success btn-standard btn-large"
-            disabled={submitting || invalid || processing}
-        >
-            <Trans>save_btn</Trans>
-        </button>
-    </form>;
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    processing: PropTypes.bool.isRequired,
-};
-
-export default reduxForm({ form: FORM_NAME.BLOCKING_MODE })(Form);

client/src/components/Settings/Dns/Config/Form.tsx

@@ -0,0 +1,310 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import {
+    renderInputField,
+    renderRadioField,
+    renderTextareaField,
+    CheckboxField,
+    toNumber,
+} from '../../../../helpers/form';
+import {
+    validateIpv4,
+    validateIpv6,
+    validateRequiredValue,
+    validateIp,
+    validateIPv4Subnet,
+    validateIPv6Subnet,
+} from '../../../../helpers/validators';
+
+import { removeEmptyLines } from '../../../../helpers/helpers';
+import { BLOCKING_MODES, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
+import { RootState } from '../../../../initialState';
+
+const checkboxes = [
+    {
+        name: 'dnssec_enabled',
+        placeholder: 'dnssec_enable',
+        subtitle: 'dnssec_enable_desc',
+    },
+    {
+        name: 'disable_ipv6',
+        placeholder: 'disable_ipv6',
+        subtitle: 'disable_ipv6_desc',
+    },
+];
+
+const customIps = [
+    {
+        description: 'blocking_ipv4_desc',
+        name: 'blocking_ipv4',
+        validateIp: validateIpv4,
+    },
+    {
+        description: 'blocking_ipv6_desc',
+        name: 'blocking_ipv6',
+        validateIp: validateIpv6,
+    },
+];
+
+const getFields = (processing: any, t: any) =>
+    Object.values(BLOCKING_MODES)
+
+        .map((mode: any) => (
+            <Field
+                key={mode}
+                name="blocking_mode"
+                type="radio"
+                component={renderRadioField}
+                value={mode}
+                placeholder={t(mode)}
+                disabled={processing}
+            />
+        ));
+
+interface ConfigFormProps {
+    handleSubmit: (...args: unknown[]) => string;
+    submitting: boolean;
+    invalid: boolean;
+    processing?: boolean;
+}
+
+const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps) => {
+    const { t } = useTranslation();
+    const { blocking_mode, edns_cs_enabled, edns_cs_use_custom } = useSelector(
+        (state: RootState) => state.form[FORM_NAME.BLOCKING_MODE].values ?? {},
+        shallowEqual,
+    );
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="ratelimit" className="form__label form__label--with-desc">
+                            <Trans>rate_limit</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            <Trans>rate_limit_desc</Trans>
+                        </div>
+
+                        <Field
+                            name="ratelimit"
+                            type="number"
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_rate_limit')}
+                            normalize={toNumber}
+                            validate={validateRequiredValue}
+                            min={UINT32_RANGE.MIN}
+                            max={UINT32_RANGE.MAX}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="ratelimit_subnet_len_ipv4" className="form__label form__label--with-desc">
+                            <Trans>rate_limit_subnet_len_ipv4</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            <Trans>rate_limit_subnet_len_ipv4_desc</Trans>
+                        </div>
+
+                        <Field
+                            name="ratelimit_subnet_len_ipv4"
+                            type="number"
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_rate_limit_subnet_len')}
+                            normalize={toNumber}
+                            validate={[validateRequiredValue, validateIPv4Subnet]}
+                            min={0}
+                            max={32}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="ratelimit_subnet_len_ipv6" className="form__label form__label--with-desc">
+                            <Trans>rate_limit_subnet_len_ipv6</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            <Trans>rate_limit_subnet_len_ipv6_desc</Trans>
+                        </div>
+
+                        <Field
+                            name="ratelimit_subnet_len_ipv6"
+                            type="number"
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_rate_limit_subnet_len')}
+                            normalize={toNumber}
+                            validate={[validateRequiredValue, validateIPv6Subnet]}
+                            min={0}
+                            max={128}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="ratelimit_whitelist" className="form__label form__label--with-desc">
+                            <Trans>rate_limit_whitelist</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            <Trans>rate_limit_whitelist_desc</Trans>
+                        </div>
+
+                        <Field
+                            name="ratelimit_whitelist"
+                            component={renderTextareaField}
+                            type="text"
+                            className="form-control"
+                            placeholder={t('rate_limit_whitelist_placeholder')}
+                            normalizeOnBlur={removeEmptyLines}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <Field
+                            name="edns_cs_enabled"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('edns_enable')}
+                            disabled={processing}
+                            subtitle={t('edns_cs_desc')}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12 form__group form__group--inner">
+                    <div className="form__group ">
+                        <Field
+                            name="edns_cs_use_custom"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('edns_use_custom_ip')}
+                            disabled={processing || !edns_cs_enabled}
+                            subtitle={t('edns_use_custom_ip_desc')}
+                        />
+                    </div>
+
+                    {edns_cs_use_custom && (
+                        <Field
+                            name="edns_cs_custom_ip"
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_ip')}
+                            validate={[validateIp, validateRequiredValue]}
+                        />
+                    )}
+                </div>
+
+                {checkboxes.map(({ name, placeholder, subtitle }) => (
+                    <div className="col-12" key={name}>
+                        <div className="form__group form__group--settings">
+                            <Field
+                                name={name}
+                                type="checkbox"
+                                component={CheckboxField}
+                                placeholder={t(placeholder)}
+                                disabled={processing}
+                                subtitle={t(subtitle)}
+                            />
+                        </div>
+                    </div>
+                ))}
+
+                <div className="col-12">
+                    <div className="form__group form__group--settings mb-4">
+                        <label className="form__label form__label--with-desc">
+                            <Trans>blocking_mode</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            {Object.values(BLOCKING_MODES)
+
+                                .map((mode: any) => (
+                                    <li key={mode}>
+                                        <Trans>{`blocking_mode_${mode}`}</Trans>
+                                    </li>
+                                ))}
+                        </div>
+
+                        <div className="custom-controls-stacked">{getFields(processing, t)}</div>
+                    </div>
+                </div>
+                {blocking_mode === BLOCKING_MODES.custom_ip && (
+                    <>
+                        {customIps.map(({ description, name, validateIp }) => (
+                            <div className="col-12 col-sm-6" key={name}>
+                                <div className="form__group form__group--settings">
+                                    <label className="form__label form__label--with-desc" htmlFor={name}>
+                                        <Trans>{name}</Trans>
+                                    </label>
+
+                                    <div className="form__desc form__desc--top">
+                                        <Trans>{description}</Trans>
+                                    </div>
+
+                                    <Field
+                                        name={name}
+                                        component={renderInputField}
+                                        className="form-control"
+                                        placeholder={t('form_enter_ip')}
+                                        validate={[validateIp, validateRequiredValue]}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                    </>
+                )}
+
+                <div className="col-12 col-md-7">
+                    <div className="form__group form__group--settings">
+                        <label htmlFor="blocked_response_ttl" className="form__label form__label--with-desc">
+                            <Trans>blocked_response_ttl</Trans>
+                        </label>
+
+                        <div className="form__desc form__desc--top">
+                            <Trans>blocked_response_ttl_desc</Trans>
+                        </div>
+
+                        <Field
+                            name="blocked_response_ttl"
+                            type="number"
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_blocked_response_ttl')}
+                            normalize={toNumber}
+                            validate={validateRequiredValue}
+                            min={UINT32_RANGE.MIN}
+                            max={UINT32_RANGE.MAX}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <button
+                type="submit"
+                className="btn btn-success btn-standard btn-large"
+                disabled={submitting || invalid || processing}>
+                <Trans>save_btn</Trans>
+            </button>
+        </form>
+    );
+};
+
+export default reduxForm<Record<string, any>, Omit<ConfigFormProps, 'invalid' | 'submitting' | 'handleSubmit'>>({
+    form: FORM_NAME.BLOCKING_MODE,
+})(Form);

client/src/components/Settings/Dns/Config/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import Card from '../../../ui/Card';
+
 import Form from './Form';
 import { setDnsConfig } from '../../../../actions/dnsConfig';
+import { RootState } from '../../../../initialState';
 
 const Config = () => {
     const { t } = useTranslation();
@@ -23,18 +26,14 @@ const Config = () => {
         dnssec_enabled,
         disable_ipv6,
         processingSetConfig,
-    } = useSelector((state) => state.dnsConfig, shallowEqual);
+    } = useSelector((state: RootState) => state.dnsConfig, shallowEqual);
 
-    const handleFormSubmit = (values) => {
+    const handleFormSubmit = (values: any) => {
         dispatch(setDnsConfig(values));
     };
 
     return (
-        <Card
-            title={t('dns_config')}
-            bodyType="card-body box-body--settings"
-            id="dns-config"
-        >
+        <Card title={t('dns_config')} bodyType="card-body box-body--settings" id="dns-config">
             <div className="form">
                 <Form
                     initialValues={{