+ client: Update packages - Merge pull request #613 in DNS/adguard-home from fix/1597 to master

Close #1597

Squashed commit of the following:

commit 1eb89586dd71260e561420fe669abc8b56a506a1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 20 14:54:10 2020 +0300

    Fix translation in install options

commit 1ebdc9ebfe12a609f978e47db6505c7095b10f7e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 20 13:11:34 2020 +0300

    Remove commented code

commit 2a8302c65a2a3cf7b6b1596115d1153dac32a794
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 19:02:49 2020 +0300

    Update i18n packages, add development browserlist, downgrade eslint to match peerDepencancies version

commit 3fcf73fb14cd9da508522d1a300b66af24da95e5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 17:30:37 2020 +0300

    Remove all unused dependencies

commit e761810e3e54e188ada41245bdce7414cd0f03e8
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 16:35:24 2020 +0300

    Remove unused dependencies

commit d89d27da6befcaabcdc12bf5e7e94cbb24140010
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 16:14:09 2020 +0300

    Update regular dependencies

commit d2dfd01233d059870d5173ffd748cf61a477936f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 15:34:10 2020 +0300

    Update all dev dependancies

commit 02b6fb480e9d310039fbe9b7aae062a41128f070
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 14:14:44 2020 +0300

    Update all postcss packages

commit 5e1fa5f99ad75f77e5e429b28ee1ca0b5e65a9a0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:45:02 2020 +0300

    Prevent git from converting linebreaks in .js files

commit 0b9b3b0dccd47cfa50c9531fb61729e6b5a04523
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:43:01 2020 +0300

    Prevent git from converting linebreaks in .js files

commit 18b7495e9ef7130b1ac4dbba84c54127d16c6350
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 19 12:24:47 2020 +0300

    Remove linebreak-style eslint rule

commit df893dec53adebb1d662fe805fab508fd4ed5e06
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 20:55:47 2020 +0300

    Add prop types

commit 36178ecfc5c7fa11a6ee08d7705ca8560941af40
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 18:52:07 2020 +0300

    Update eslint and babel, fix eslint warnings

commit f045b4a2e6b9b78f7e88e3b5d1419c29966a8230
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon May 18 16:45:49 2020 +0300

    Update css loading webpack rules

commit 247fa1ed548ef0706a03fdada8309c1454d191f8
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 16:13:49 2020 +0300

    Suppress linebreak-style eslint error for Windows

commit d6499aac507100d6918c849c06d739d80f2229f0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 14:55:07 2020 +0300

    Suppress eslint exit code

commit ae2d6c614ea23a90d515168f8752e959298894ef
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 14:05:18 2020 +0300

    Edit css file warnings

commit 60675050f2a5baebc679fc05da7e033e5c740d90
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 13:10:26 2020 +0300

    Remove uglifyjs plugin

commit a27806434dd8672e71a26c7a2e810d77e5e229fa
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 01:29:17 2020 +0300

    Fix DefinePlugin value

commit 8f2966ca59195c2f70bca5072d20515d536f42a6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Sat May 16 01:05:03 2020 +0300

    Update webpack

client/src/helpers/form.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
     R_IPV4, R_MAC, R_HOST, R_IPV6, R_CIDR, R_CIDR_IPV6,
     UNSAFE_PORTS, R_URL_REQUIRES_PROTOCOL, R_WIN_ABSOLUTE_PATH, R_UNIX_ABSOLUTE_PATH,
-} from '../helpers/constants';
+} from './constants';
 import { createOnBlurHandler } from './helpers';
 
 export const renderField = (props, elementType) => {
@@ -13,7 +13,7 @@ export const renderField = (props, elementType) => {
         autoComplete, meta: { touched, error },
     } = props;
 
-    const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur);
+    const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
 
     const element = React.createElement(elementType, {
         ...input,
@@ -28,7 +28,8 @@ export const renderField = (props, elementType) => {
     return (
         <Fragment>
             {element}
-            {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+            {!disabled && touched && error
+            && <span className="form__message form__message--error">{error}</span>}
         </Fragment>
     );
 };
@@ -36,18 +37,21 @@ export const renderField = (props, elementType) => {
 renderField.propTypes = {
     id: PropTypes.string.isRequired,
     input: PropTypes.object.isRequired,
-    meta: PropTypes.object.isRequired,
     className: PropTypes.string,
     placeholder: PropTypes.string,
     type: PropTypes.string,
     disabled: PropTypes.bool,
     autoComplete: PropTypes.bool,
     normalizeOnBlur: PropTypes.func,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
 };
 
-export const renderTextareaField = props => renderField(props, 'textarea');
+export const renderTextareaField = (props) => renderField(props, 'textarea');
 
-export const renderInputField = props => renderField(props, 'input');
+export const renderInputField = (props) => renderField(props, 'input');
 
 export const renderGroupField = ({
     input,
@@ -62,7 +66,7 @@ export const renderGroupField = ({
     meta: { touched, error },
     normalizeOnBlur,
 }) => {
-    const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur);
+    const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
 
     return (
         <Fragment>
@@ -77,8 +81,8 @@ export const renderGroupField = ({
                     autoComplete={autoComplete}
                     onBlur={onBlur}
                 />
-                {isActionAvailable &&
-                <span className="input-group-append">
+                {isActionAvailable
+                && <span className="input-group-append">
                         <button
                             type="button"
                             className="btn btn-secondary btn-icon"
@@ -91,26 +95,50 @@ export const renderGroupField = ({
                     </span>
                 }
             </div>
-            {!disabled &&
-            touched &&
-            (error && <span className="form__message form__message--error">{error}</span>)}
+            {!disabled && touched && error
+            && <span className="form__message form__message--error">{error}</span>}
         </Fragment>
     );
 };
 
+renderGroupField.propTypes = {
+    input: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+    type: PropTypes.string,
+    disabled: PropTypes.bool,
+    autoComplete: PropTypes.bool,
+    isActionAvailable: PropTypes.bool,
+    removeField: PropTypes.func,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
+    normalizeOnBlur: PropTypes.func,
+};
+
 export const renderRadioField = ({
     input, placeholder, disabled, meta: { touched, error },
-}) => (
-    <Fragment>
-        <label className="custom-control custom-radio custom-control-inline">
-            <input {...input} type="radio" className="custom-control-input" disabled={disabled} />
-            <span className="custom-control-label">{placeholder}</span>
-        </label>
-        {!disabled &&
-        touched &&
-        (error && <span className="form__message form__message--error">{error}</span>)}
-    </Fragment>
-);
+}) => <Fragment>
+    <label className="custom-control custom-radio custom-control-inline">
+        <input {...input} type="radio" className="custom-control-input" disabled={disabled} />
+        <span className="custom-control-label">{placeholder}</span>
+    </label>
+    {!disabled
+    && touched
+    && (error && <span className="form__message form__message--error">{error}</span>)}
+</Fragment>;
+
+renderRadioField.propTypes = {
+    input: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
+};
 
 export const renderSelectField = ({
     input,
@@ -120,12 +148,11 @@ export const renderSelectField = ({
     onClick,
     modifier = 'checkbox--form',
     meta: { touched, error },
-}) => (
-        <Fragment>
-            <label className={`checkbox ${modifier}`} onClick={onClick}>
-                <span className="checkbox__marker" />
-                <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
-                <span className="checkbox__label">
+}) => <Fragment>
+    <label className={`checkbox ${modifier}`} onClick={onClick}>
+        <span className="checkbox__marker" />
+        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
+        <span className="checkbox__label">
                     <span className="checkbox__label-text checkbox__label-text--long">
                         <span className="checkbox__label-title">{placeholder}</span>
                         {subtitle && (
@@ -136,12 +163,24 @@ export const renderSelectField = ({
                         )}
                     </span>
                 </span>
-            </label>
-            {!disabled &&
-            touched &&
-            (error && <span className="form__message form__message--error">{error}</span>)}
-        </Fragment>
-);
+    </label>
+    {!disabled
+    && touched
+    && (error && <span className="form__message form__message--error">{error}</span>)}
+</Fragment>;
+
+renderSelectField.propTypes = {
+    input: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    subtitle: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    modifier: PropTypes.string,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
+};
 
 export const renderServiceField = ({
     input,
@@ -150,27 +189,36 @@ export const renderServiceField = ({
     modifier,
     icon,
     meta: { touched, error },
-}) => (
-    <Fragment>
-        <label className={`service custom-switch ${modifier}`}>
-            <input
-                {...input}
-                type="checkbox"
-                className="custom-switch-input"
-                value={placeholder.toLowerCase()}
-                disabled={disabled}
-            />
-            <span className="service__switch custom-switch-indicator"></span>
-            <span className="service__text">{placeholder}</span>
-            <svg className="service__icon">
-                <use xlinkHref={`#${icon}`} />
-            </svg>
-        </label>
-        {!disabled &&
-        touched &&
-        (error && <span className="form__message form__message--error">{error}</span>)}
-    </Fragment>
-);
+}) => <Fragment>
+    <label className={`service custom-switch ${modifier}`}>
+        <input
+            {...input}
+            type="checkbox"
+            className="custom-switch-input"
+            value={placeholder.toLowerCase()}
+            disabled={disabled}
+        />
+        <span className="service__switch custom-switch-indicator"></span>
+        <span className="service__text">{placeholder}</span>
+        <svg className="service__icon">
+            <use xlinkHref={`#${icon}`} />
+        </svg>
+    </label>
+    {!disabled && touched && error
+    && <span className="form__message form__message--error">{error}</span>}
+</Fragment>;
+
+renderServiceField.propTypes = {
+    input: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    modifier: PropTypes.string,
+    icon: PropTypes.string,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.object,
+    }).isRequired,
+};
 
 // Validation functions
 // If the value is valid, the validation function should return undefined.
@@ -259,7 +307,8 @@ export const validInstallPort = (value) => {
 export const portTLS = (value) => {
     if (value === 0) {
         return undefined;
-    } else if (value && (value < 80 || value > 65535)) {
+    }
+    if (value && (value < 80 || value > 65535)) {
         return <Trans>form_error_port_range</Trans>;
     }
     return undefined;
@@ -293,7 +342,7 @@ export const isValidUrl = (value) => {
     return undefined;
 };
 
-export const isValidAbsolutePath = value => R_WIN_ABSOLUTE_PATH.test(value)
+export const isValidAbsolutePath = (value) => R_WIN_ABSOLUTE_PATH.test(value)
     || R_UNIX_ABSOLUTE_PATH.test(value);
 
 export const isValidPath = (value) => {
@@ -303,4 +352,4 @@ export const isValidPath = (value) => {
     return undefined;
 };
 
-export const toNumber = value => value && parseInt(value, 10);
+export const toNumber = (value) => value && parseInt(value, 10);

client/src/helpers/helpers.js

@@ -46,16 +46,17 @@ export const formatDateTime = (dateTime, options = DEFAULT_DATE_FORMAT_OPTIONS)
     return parsedTime.toLocaleString(currentLanguage, options);
 };
 
-export const formatDetailedDateTime = dateTime =>
-    formatDateTime(dateTime, DETAILED_DATE_FORMAT_OPTIONS);
+export const formatDetailedDateTime = (dateTime) => formatDateTime(
+    dateTime, DETAILED_DATE_FORMAT_OPTIONS,
+);
 
 /**
  * @param string
  * @returns boolean
  */
-export const isToday = date => isSameDay(new Date(date), new Date());
+export const isToday = (date) => isSameDay(new Date(date), new Date());
 
-export const normalizeLogs = logs => logs.map((log) => {
+export const normalizeLogs = (logs) => logs.map((log) => {
     const {
         time,
         question,
@@ -104,8 +105,8 @@ export const normalizeHistory = (history, interval) => {
     }));
 };
 
-export const normalizeTopStats = stats => (
-    stats.map(item => ({
+export const normalizeTopStats = (stats) => (
+    stats.map((item) => ({
         name: Object.keys(item)[0],
         count: Object.values(item)[0],
     }))
@@ -114,7 +115,7 @@ export const normalizeTopStats = stats => (
 export const addClientInfo = (data, clients, param) => (
     data.map((row) => {
         const clientIp = row[param];
-        const info = clients.find(item => item[clientIp]) || '';
+        const info = clients.find((item) => item[clientIp]) || '';
         return {
             ...row,
             info: (info && info[clientIp]) || '',
@@ -122,7 +123,7 @@ export const addClientInfo = (data, clients, param) => (
     })
 );
 
-export const normalizeFilters = filters => (
+export const normalizeFilters = (filters) => (
     filters ? filters.map((filter) => {
         const {
             id,
@@ -130,7 +131,7 @@ export const normalizeFilters = filters => (
             enabled,
             last_updated,
             name = 'Default name',
-            rules_count: rules_count = 0,
+            rules_count = 0,
         } = filter;
 
         return {
@@ -166,10 +167,10 @@ export const getPercent = (amount, number) => {
     return 0;
 };
 
-export const captitalizeWords = text => text.split(/[ -_]/g).map(str => str.charAt(0).toUpperCase() + str.substr(1)).join(' ');
+export const captitalizeWords = (text) => text.split(/[ -_]/g).map((str) => str.charAt(0).toUpperCase() + str.substr(1)).join(' ');
 
 export const getInterfaceIp = (option) => {
-    const onlyIPv6 = option.ip_addresses.every(ip => ip.includes(':'));
+    const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
     let interfaceIP = option.ip_addresses[0];
 
     if (!onlyIPv6) {
@@ -231,7 +232,7 @@ export const checkRedirect = (url, attempts) => {
         return false;
     }
 
-    const rmTimeout = t => t && clearTimeout(t);
+    const rmTimeout = (t) => t && clearTimeout(t);
     const setRecursiveTimeout = (time, ...args) => setTimeout(
         checkRedirect,
         time,
@@ -282,7 +283,7 @@ export const normalizeTextarea = (text) => {
         return [];
     }
 
-    return text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
+    return text.replace(/[;, ]/g, '\n').split('\n').filter((n) => n);
 };
 
 /**
@@ -298,18 +299,20 @@ export const normalizeTextarea = (text) => {
  * @returns {Object.<string, number>} normalizedTopClients.configured - configured clients
  */
 
-export const normalizeTopClients = topClients => topClients.reduce((nameToCountMap, clientObj) => {
-    const { name, count, info: { name: infoName } } = clientObj;
-    // eslint-disable-next-line no-param-reassign
-    nameToCountMap.auto[name] = count;
-    // eslint-disable-next-line no-param-reassign
-    nameToCountMap.configured[infoName] = count;
-    return nameToCountMap;
-}, { auto: {}, configured: {} });
+export const normalizeTopClients = (topClients) => topClients.reduce(
+    (nameToCountMap, clientObj) => {
+        const { name, count, info: { name: infoName } } = clientObj;
+        // eslint-disable-next-line no-param-reassign
+        nameToCountMap.auto[name] = count;
+        // eslint-disable-next-line no-param-reassign
+        nameToCountMap.configured[infoName] = count;
+        return nameToCountMap;
+    }, { auto: {}, configured: {} },
+);
 
 export const getClientInfo = (clients, ip) => {
     const client = clients
-        .find(item => item.ip_addrs && item.ip_addrs.find(clientIp => clientIp === ip));
+        .find((item) => item.ip_addrs && item.ip_addrs.find((clientIp) => clientIp === ip));
 
     if (!client) {
         return '';
@@ -322,7 +325,7 @@ export const getClientInfo = (clients, ip) => {
 };
 
 export const getAutoClientInfo = (clients, ip) => {
-    const client = clients.find(item => ip === item.ip);
+    const client = clients.find((item) => ip === item.ip);
 
     if (!client) {
         return '';
@@ -341,7 +344,7 @@ export const sortClients = (clients) => {
 
         if (nameA > nameB) {
             return 1;
-        } else if (nameA < nameB) {
+        } if (nameA < nameB) {
             return -1;
         }
 
@@ -352,7 +355,7 @@ export const sortClients = (clients) => {
 };
 
 export const toggleAllServices = (services, change, isSelected) => {
-    services.forEach(service => change(`blocked_services.${service.id}`, isSelected));
+    services.forEach((service) => change(`blocked_services.${service.id}`, isSelected));
 };
 
 export const secondsToMilliseconds = (seconds) => {
@@ -363,7 +366,7 @@ export const secondsToMilliseconds = (seconds) => {
     return seconds;
 };
 
-export const normalizeRulesTextarea = text => text && text.replace(/^\n/g, '').replace(/\n\s*\n/g, '\n');
+export const normalizeRulesTextarea = (text) => text && text.replace(/^\n/g, '').replace(/\n\s*\n/g, '\n');
 
 export const isVersionGreater = (currentVersion, previousVersion) => (
     versionCompare(currentVersion, previousVersion) === -1
@@ -395,7 +398,7 @@ export const normalizeWhois = (whois) => {
     return whois;
 };
 
-export const isValidQuestionType = type => type && DNS_RECORD_TYPES.includes(type.toUpperCase());
+export const isValidQuestionType = (type) => type && DNS_RECORD_TYPES.includes(type.toUpperCase());
 
 export const getPathWithQueryString = (path, params) => {
     const searchParams = new URLSearchParams(params);
@@ -429,19 +432,20 @@ export const createOnBlurHandler = (event, input, normalizeOnBlur) => (
         ? input.onBlur(normalizeOnBlur(event.target.value))
         : input.onBlur());
 
-export const checkFiltered = reason => reason.indexOf(FILTERED) === 0;
-export const checkRewrite = reason => reason === FILTERED_STATUS.REWRITE;
-export const checkRewriteHosts = reason => reason === FILTERED_STATUS.REWRITE_HOSTS;
-export const checkBlackList = reason => reason === FILTERED_STATUS.FILTERED_BLACK_LIST;
-export const checkWhiteList = reason => reason === FILTERED_STATUS.NOT_FILTERED_WHITE_LIST;
-export const checkNotFilteredNotFound = reason => reason === FILTERED_STATUS.NOT_FILTERED_NOT_FOUND;
-export const checkSafeSearch = reason => reason === FILTERED_STATUS.FILTERED_SAFE_SEARCH;
-export const checkSafeBrowsing = reason => reason === FILTERED_STATUS.FILTERED_SAFE_BROWSING;
-export const checkParental = reason => reason === FILTERED_STATUS.FILTERED_PARENTAL;
-export const checkBlockedService = reason => reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+export const checkFiltered = (reason) => reason.indexOf(FILTERED) === 0;
+export const checkRewrite = (reason) => reason === FILTERED_STATUS.REWRITE;
+export const checkRewriteHosts = (reason) => reason === FILTERED_STATUS.REWRITE_HOSTS;
+export const checkBlackList = (reason) => reason === FILTERED_STATUS.FILTERED_BLACK_LIST;
+export const checkWhiteList = (reason) => reason === FILTERED_STATUS.NOT_FILTERED_WHITE_LIST;
+// eslint-disable-next-line max-len
+export const checkNotFilteredNotFound = (reason) => reason === FILTERED_STATUS.NOT_FILTERED_NOT_FOUND;
+export const checkSafeSearch = (reason) => reason === FILTERED_STATUS.FILTERED_SAFE_SEARCH;
+export const checkSafeBrowsing = (reason) => reason === FILTERED_STATUS.FILTERED_SAFE_BROWSING;
+export const checkParental = (reason) => reason === FILTERED_STATUS.FILTERED_PARENTAL;
+export const checkBlockedService = (reason) => reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
 
 export const getCurrentFilter = (url, filters) => {
-    const filter = filters && filters.find(item => url === item.url);
+    const filter = filters && filters.find((item) => url === item.url);
 
     if (filter) {
         const { enabled, name, url } = filter;

client/src/helpers/trackers/trackers.js

@@ -74,7 +74,7 @@ export const getSourceData = (trackerData) => {
             name: 'Whotracks.me',
             url: `https://whotracks.me/trackers/${trackerData.id}.html`,
         };
-    } else if (trackerData.source === sources.ADGUARD) {
+    } if (trackerData.source === sources.ADGUARD) {
         return {
             name: 'AdGuard',
             url: REPOSITORY.TRACKERS_DB,

client/src/helpers/versionCompare.js

@@ -2,7 +2,7 @@
 * Project: tiny-version-compare https://github.com/bfred-it/tiny-version-compare
 * License (MIT) https://github.com/bfred-it/tiny-version-compare/blob/master/LICENSE
 */
-const split = v => String(v).replace(/^[vr]/, '') // Drop initial 'v' or 'r'
+const split = (v) => String(v).replace(/^[vr]/, '') // Drop initial 'v' or 'r'
     .replace(/([a-z]+)/gi, '.$1.') // Sort each word separately
     .replace(/[-.]+/g, '.') // Consider dashes as separators (+ trim multiple separators)
     .split('.');