- client: Add default mode in the DNS settings: Merge pull request #650 in DNS/adguard-home from fix/1770 to master

Close #1770

Squashed commit of the following:

commit c1f75ea643623af78de020bd1bc49aa5b66e25c4
Merge: a5df78ad a869ec4c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 18:56:24 2020 +0300

    Merge branch 'master' into fix/1770

commit a5df78ad303305efcafcfa2a170ff567a3a06db5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 12:50:50 2020 +0300

    Revert "Update locales"

    This reverts commit 4b2b4499dea12949c53bce4ceeed595c17df84c6.

commit 4b2b4499dea12949c53bce4ceeed595c17df84c6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Jun 9 19:56:34 2020 +0300

    Update locales

commit 790cff0db84b5905362d2e2702b2cbca5c3c90b0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 17:56:01 2020 +0300

    Update Upstream component with new api, extract reduxForm HOC names in constant

commit 72de3d5a92cc33d5b234c837879fc6990291e07b
Merge: 92a4a6ae 501a4e06
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 15:55:39 2020 +0300

    Merge remote-tracking branch 'origin/update-dnsproxy' into fix/1770

commit 501a4e06ab350e46ff78656141d925de9f2e4996
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Fri Jun 5 12:47:13 2020 +0300

    openapi

commit 3930bd196572924f164ed011629356a0ac0ec631
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Fri Jun 5 12:21:32 2020 +0300

    * DNS API: new setting "upstream_mode"; remove "fastest_addr", "parallel_requests"

    * use dnsproxy v0.29.0

commit 92a4a6ae24793a2a9ca05ad3ef2078573fd4d059
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 4 18:53:42 2020 +0300

    - client: Add default mode in the DNS settings

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

@@ -7,6 +7,7 @@ import Card from '../../ui/Card';
 
 import { renderInputField } from '../../../helpers/form';
 import Info from './Info';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const Check = (props) => {
     const {
@@ -60,7 +61,7 @@ const Check = (props) => {
                         </div>
                         {check.hostname && (
                             <Fragment>
-                                <hr/>
+                                <hr />
                                 <Info
                                     filters={filters}
                                     whitelistFilters={whitelistFilters}
@@ -94,5 +95,5 @@ Check.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'domainCheckForm' }),
+    reduxForm({ form: FORM_NAME.DOMAIN_CHECK }),
 ])(Check);

client/src/components/Filters/Form.js

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField, required, isValidPath } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -19,18 +20,18 @@ const Form = (props) => {
     return (
         <form onSubmit={handleSubmit}>
             <div className="modal-body">
-            <div className="form__group">
-                <Field
-                    id="name"
-                    name="name"
-                    type="text"
-                    component={renderInputField}
-                    className="form-control"
-                    placeholder={t('enter_name_hint')}
-                    validate={[required]}
-                    normalizeOnBlur={(data) => data.trim()}
-                />
-            </div>
+                <div className="form__group">
+                    <Field
+                        id="name"
+                        name="name"
+                        type="text"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={t('enter_name_hint')}
+                        validate={[required]}
+                        normalizeOnBlur={(data) => data.trim()}
+                    />
+                </div>
                 <div className="form__group">
                     <Field
                         id="url"
@@ -79,7 +80,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'filterForm',
-    }),
+    reduxForm({ form: FORM_NAME.FILTER }),
 ])(Form);

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

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, required, domain, answer,
 } from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -104,7 +105,7 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'rewritesForm',
+        form: FORM_NAME.REWRITES,
         enableReinitialize: true,
     }),
 ])(Form);

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

@@ -6,7 +6,7 @@ import flow from 'lodash/flow';
 
 import { toggleAllServices } from '../../../helpers/helpers';
 import { renderServiceField } from '../../../helpers/form';
-import { SERVICES } from '../../../helpers/constants';
+import { FORM_NAME, SERVICES } from '../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -84,7 +84,7 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'servicesForm',
+        form: FORM_NAME.SERVICES,
         enableReinitialize: true,
     }),
 ])(Form);

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

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField } from '../../../helpers/form';
-import { RESPONSE_FILTER } from '../../../helpers/constants';
+import { FORM_NAME, RESPONSE_FILTER } from '../../../helpers/constants';
 import Tooltip from '../../ui/Tooltip';
 
 const renderFilterField = ({
@@ -124,6 +124,6 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'logsFilterForm',
+        form: FORM_NAME.LOGS_FILTER,
     }),
 ])(Form);

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

@@ -20,7 +20,7 @@ import {
     renderSelectField,
     renderServiceField,
 } from '../../../helpers/form';
-import { SERVICES } from '../../../helpers/constants';
+import { FORM_NAME, SERVICES } from '../../../helpers/constants';
 import './Service.css';
 
 const settingsCheckboxes = [
@@ -338,7 +338,7 @@ Form.propTypes = {
     tagsOptions: PropTypes.array.isRequired,
 };
 
-const selector = formValueSelector('clientForm');
+const selector = formValueSelector(FORM_NAME.CLIENT);
 
 Form = connect((state) => {
     const useGlobalSettings = selector(state, 'use_global_settings');
@@ -352,7 +352,7 @@ Form = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'clientForm',
+        form: FORM_NAME.CLIENT,
         enableReinitialize: true,
         validate,
     }),

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

@@ -8,6 +8,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, required, ipv4, isPositive, toNumber,
 } from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const renderInterfaces = ((interfaces) => (
     Object.keys(interfaces).map((item) => {
@@ -221,7 +222,7 @@ Form.propTypes = {
     change: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('dhcpForm');
+const selector = formValueSelector(FORM_NAME.DHCP);
 
 Form = connect((state) => {
     const interfaceValue = selector(state, 'interface_name');
@@ -232,5 +233,5 @@ Form = connect((state) => {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'dhcpForm' }),
+    reduxForm({ form: FORM_NAME.DHCP }),
 ])(Form);

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

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, ipv4, mac, required,
 } from '../../../../helpers/form';
+import { FORM_NAME } from '../../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -94,5 +95,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'leaseForm' }),
+    reduxForm({ form: FORM_NAME.LEASE }),
 ])(Form);

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

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import { renderTextareaField } from '../../../../helpers/form';
 import { normalizeMultiline } from '../../../../helpers/helpers';
+import { FORM_NAME } from '../../../../helpers/constants';
 
 const fields = [
     {
@@ -84,4 +85,4 @@ Form.propTypes = {
     textarea: PropTypes.bool,
 };
 
-export default flow([withTranslation(), reduxForm({ form: 'accessForm' })])(Form);
+export default flow([withTranslation(), reduxForm({ form: FORM_NAME.ACCESS })])(Form);

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

@@ -15,7 +15,7 @@ import {
     biggerOrEqualZero,
     toNumber,
 } from '../../../../helpers/form';
-import { BLOCKING_MODES } from '../../../../helpers/constants';
+import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';
 
 const checkboxes = [{
     name: 'edns_cs_enabled',
@@ -60,91 +60,91 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
 let Form = ({
     handleSubmit, submitting, invalid, processing, blockingMode, t,
 }) => <form onSubmit={handleSubmit}>
-        <div className="row">
-            <div className="col-12 col-sm-6">
-                <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={[required, biggerOrEqualZero]}
-                    />
+    <div className="row">
+        <div className="col-12 col-sm-6">
+            <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={[required, biggerOrEqualZero]}
+                />
+            </div>
+        </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={renderSelectField}
+                    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>
-            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
+        </div>
+        {blockingMode === BLOCKING_MODES.custom_ip && (
+            <Fragment>
+                {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}
-                            type="checkbox"
-                            component={renderSelectField}
-                            placeholder={t(placeholder)}
-                            disabled={processing}
-                            subtitle={t(subtitle)}
+                            component={renderInputField}
+                            className="form-control"
+                            placeholder={t('form_enter_ip')}
+                            validate={[validateIp, required]}
                         />
                     </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>
-            {blockingMode === BLOCKING_MODES.custom_ip && (
-                <Fragment>
-                    {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, required]}
-                            />
-                        </div>
-                    </div>)}
-                </Fragment>
-            )}
-        </div>
-        <button
-            type="submit"
-            className="btn btn-success btn-standard btn-large"
-            disabled={submitting || invalid || processing}
-        >
-            <Trans>save_btn</Trans>
-        </button>
-    </form>;
+            </Fragment>
+        )}
+    </div>
+    <button
+        type="submit"
+        className="btn btn-success btn-standard btn-large"
+        disabled={submitting || invalid || processing}
+    >
+        <Trans>save_btn</Trans>
+    </button>
+</form>;
 
 Form.propTypes = {
     blockingMode: PropTypes.string.isRequired,
@@ -155,7 +155,7 @@ Form.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('blockingModeForm');
+const selector = formValueSelector(FORM_NAME.BLOCKING_MODE);
 
 Form = connect((state) => {
     const blockingMode = selector(state, 'blocking_mode');
@@ -166,7 +166,5 @@ Form = connect((state) => {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'blockingModeForm',
-    }),
+    reduxForm({ form: FORM_NAME.BLOCKING_MODE }),
 ])(Form);

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
 import Examples from './Examples';
 import { renderRadioField } from '../../../../helpers/form';
-import { DNS_REQUEST_OPTIONS } from '../../../../helpers/constants';
+import { DNS_REQUEST_OPTIONS, FORM_NAME } from '../../../../helpers/constants';
+import { testUpstream } from '../../../../actions';
 
 const getInputFields = () => [{
     // eslint-disable-next-line react/display-name
@@ -22,15 +22,23 @@ const getInputFields = () => [{
     placeholder: 'upstream_dns',
 },
 {
-    name: 'dnsRequestOption',
+    name: 'upstream_mode',
     type: 'radio',
-    value: DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS,
+    value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
+    component: renderRadioField,
+    subtitle: 'load_balancing_desc',
+    placeholder: 'load_balancing',
+},
+{
+    name: 'upstream_mode',
+    type: 'radio',
+    value: DNS_REQUEST_OPTIONS.PARALLEL,
     component: renderRadioField,
     subtitle: 'upstream_parallel',
     placeholder: 'parallel_requests',
 },
 {
-    name: 'dnsRequestOption',
+    name: 'upstream_mode',
     type: 'radio',
     value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
     component: renderRadioField,
@@ -38,22 +46,22 @@ const getInputFields = () => [{
     placeholder: 'fastest_addr',
 }];
 
-let Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        testUpstream,
-        submitting,
-        invalid,
-        processingSetConfig,
-        processingTestUpstream,
+const Form = ({
+    submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit,
+}) => {
+    const dispatch = useDispatch();
+    const [t] = useTranslation();
+    const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
+    const bootstrap_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM]
+        .values.bootstrap_dns);
+
+    const handleUpstreamTest = () => dispatch(testUpstream({
         upstream_dns,
         bootstrap_dns,
-    } = props;
+    }));
 
-    const testButtonClass = classnames({
-        'btn btn-primary btn-standard mr-2': true,
-        'btn btn-primary btn-standard mr-2 btn-loading': processingTestUpstream,
+    const testButtonClass = classnames('btn btn-primary btn-standard mr-2', {
+        'btn-loading': processingTestUpstream,
     });
 
     const INPUT_FIELDS = getInputFields();
@@ -106,11 +114,7 @@ let Form = (props) => {
                 <button
                     type="button"
                     className={testButtonClass}
-                    onClick={() => testUpstream({
-                        upstream_dns,
-                        bootstrap_dns,
-                    })
-                    }
+                    onClick={handleUpstreamTest}
                     disabled={!upstream_dns || processingTestUpstream}
                 >
                     <Trans>test_upstream_btn</Trans>
@@ -131,7 +135,6 @@ let Form = (props) => {
 
 Form.propTypes = {
     handleSubmit: PropTypes.func,
-    testUpstream: PropTypes.func,
     submitting: PropTypes.bool,
     invalid: PropTypes.bool,
     initialValues: PropTypes.object,
@@ -139,24 +142,6 @@ Form.propTypes = {
     bootstrap_dns: PropTypes.string,
     processingTestUpstream: PropTypes.bool,
     processingSetConfig: PropTypes.bool,
-    t: PropTypes.func,
 };
 
-const selector = formValueSelector('upstreamForm');
-
-Form = connect((state) => {
-    const upstream_dns = selector(state, 'upstream_dns');
-    const bootstrap_dns = selector(state, 'bootstrap_dns');
-
-    return {
-        upstream_dns,
-        bootstrap_dns,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: 'upstreamForm',
-    }),
-])(Form);
+export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);

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

@@ -1,83 +1,56 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import cn from 'classnames';
-
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import Form from './Form';
 import Card from '../../../ui/Card';
-import { DNS_REQUEST_OPTIONS } from '../../../../helpers/constants';
+import { setDnsConfig } from '../../../../actions/dnsConfig';
 
+const Upstream = (props) => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
 
-class Upstream extends Component {
-    handleSubmit = ({ bootstrap_dns, upstream_dns, dnsRequestOption }) => {
-        const disabledOption = dnsRequestOption === DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS
-            ? DNS_REQUEST_OPTIONS.FASTEST_ADDR
-            : DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS;
+    const handleSubmit = (values) => {
+        dispatch(setDnsConfig(values));
+    };
 
-        const formattedValues = {
-            bootstrap_dns,
+    const {
+        processingTestUpstream,
+        dnsConfig: {
             upstream_dns,
-            [dnsRequestOption]: true,
-            [disabledOption]: false,
-        };
+            bootstrap_dns,
+            processingSetConfig,
+            upstream_mode,
+        },
+    } = props;
 
-        this.props.setDnsConfig(formattedValues);
-    };
-
-    handleTest = (values) => {
-        this.props.testUpstream(values);
-    };
-
-    render() {
-        const {
-            t,
-            processingTestUpstream,
-            dnsConfig: {
-                upstream_dns,
-                bootstrap_dns,
-                fastest_addr,
-                parallel_requests,
-                processingSetConfig,
-            },
-        } = this.props;
-
-        const dnsRequestOption = cn({
-            parallel_requests,
-            fastest_addr,
-        });
-
-        return (
-            <Card
-                title={t('upstream_dns')}
-                subtitle={t('upstream_dns_hint')}
-                bodyType="card-body box-body--settings"
-            >
-                <div className="row">
-                    <div className="col">
-                        <Form
-                            initialValues={{
-                                upstream_dns,
-                                bootstrap_dns,
-                                dnsRequestOption,
-                            }}
-                            testUpstream={this.handleTest}
-                            onSubmit={this.handleSubmit}
-                            processingTestUpstream={processingTestUpstream}
-                            processingSetConfig={processingSetConfig}
-                        />
-                    </div>
+    return (
+        <Card
+            title={t('upstream_dns')}
+            subtitle={t('upstream_dns_hint')}
+            bodyType="card-body box-body--settings"
+        >
+            <div className="row">
+                <div className="col">
+                    <Form
+                        initialValues={{
+                            upstream_dns,
+                            bootstrap_dns,
+                            upstream_mode,
+                        }}
+                        onSubmit={handleSubmit}
+                        processingTestUpstream={processingTestUpstream}
+                        processingSetConfig={processingSetConfig}
+                    />
                 </div>
-            </Card>
-        );
-    }
-}
-
-Upstream.propTypes = {
-    testUpstream: PropTypes.func.isRequired,
-    processingTestUpstream: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    dnsConfig: PropTypes.object.isRequired,
-    setDnsConfig: PropTypes.func.isRequired,
+            </div>
+        </Card>
+    );
 };
 
-export default withTranslation()(Upstream);
+Upstream.propTypes = {
+    processingTestUpstream: PropTypes.bool.isRequired,
+    dnsConfig: PropTypes.object.isRequired,
+};
+
+export default Upstream;

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

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Upstream from './Upstream';
 import Access from './Access';
@@ -8,58 +8,52 @@ import Config from './Config';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
 
-class Dns extends Component {
-    componentDidMount() {
-        this.props.getAccessList();
-        this.props.getDnsConfig();
-    }
+const Dns = (props) => {
+    const [t] = useTranslation();
 
-    render() {
-        const {
-            t,
-            settings,
-            access,
-            setAccessList,
-            testUpstream,
-            dnsConfig,
-            setDnsConfig,
-        } = this.props;
+    useEffect(() => {
+        props.getAccessList();
+        props.getDnsConfig();
+    }, []);
 
-        const isDataLoading = access.processing || dnsConfig.processingGetConfig;
+    const {
+        settings,
+        access,
+        setAccessList,
+        dnsConfig,
+        setDnsConfig,
+    } = props;
 
-        return (
-            <Fragment>
-                <PageTitle title={t('dns_settings')} />
-                {isDataLoading
-                    ? <Loading />
-                    : <Fragment>
-                        <Upstream
-                            processingTestUpstream={settings.processingTestUpstream}
-                            testUpstream={testUpstream}
-                            dnsConfig={dnsConfig}
-                            setDnsConfig={setDnsConfig}
-                        />
-                        <Config
-                            dnsConfig={dnsConfig}
-                            setDnsConfig={setDnsConfig}
-                        />
-                        <Access access={access} setAccessList={setAccessList} />
-                    </Fragment>}
-            </Fragment>
-        );
-    }
-}
+    const isDataLoading = access.processing || dnsConfig.processingGetConfig;
+
+    return (
+        <>
+            <PageTitle title={t('dns_settings')} />
+            {isDataLoading
+                ? <Loading />
+                : <>
+                    <Upstream
+                        processingTestUpstream={settings.processingTestUpstream}
+                        dnsConfig={dnsConfig}
+                    />
+                    <Config
+                        dnsConfig={dnsConfig}
+                        setDnsConfig={setDnsConfig}
+                    />
+                    <Access access={access} setAccessList={setAccessList} />
+                </>}
+        </>
+    );
+};
 
 Dns.propTypes = {
     settings: PropTypes.object.isRequired,
-    testUpstream: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
     setAccessList: PropTypes.func.isRequired,
     access: PropTypes.object.isRequired,
     dnsConfig: PropTypes.object.isRequired,
     setDnsConfig: PropTypes.func.isRequired,
     getDnsConfig: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dns);
+export default Dns;

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

@@ -17,6 +17,7 @@ import {
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -394,7 +395,7 @@ Form.propTypes = {
     privateKeySource: PropTypes.string,
 };
 
-const selector = formValueSelector('encryptionForm');
+const selector = formValueSelector(FORM_NAME.ENCRYPTION);
 
 Form = connect((state) => {
     const isEnabled = selector(state, 'enabled');
@@ -418,7 +419,7 @@ Form = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'encryptionForm',
+        form: FORM_NAME.ENCRYPTION,
         validate,
     }),
 ])(Form);

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

@@ -5,12 +5,13 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, toNumber } from '../../../helpers/form';
-import { FILTERS_INTERVALS_HOURS } from '../../../helpers/constants';
+import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
     if (interval === 0) {
         return t('disabled');
-    } if (interval === 72 || interval === 168) {
+    }
+    if (interval === 72 || interval === 168) {
         return t('interval_days', { count: interval / 24 });
     }
 
@@ -81,7 +82,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'filterConfigForm',
-    }),
+    reduxForm({ form: FORM_NAME.FILTER_CONFIG }),
 ])(Form);

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

@@ -5,22 +5,22 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
-import { QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
+import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
     const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
     return (
-            <Field
-                key={interval}
-                name="interval"
-                type="radio"
-                component={renderRadioField}
-                value={interval}
-                placeholder={title}
-                normalize={toNumber}
-                disabled={processing}
-            />
+        <Field
+            key={interval}
+            name="interval"
+            type="radio"
+            component={renderRadioField}
+            value={interval}
+            placeholder={title}
+            normalize={toNumber}
+            disabled={processing}
+        />
     );
 });
 
@@ -91,7 +91,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'logConfigForm',
-    }),
+    reduxForm({ form: FORM_NAME.LOG_CONFIG }),
 ])(Form);

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

@@ -5,22 +5,22 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderRadioField, toNumber } from '../../../helpers/form';
-import { STATS_INTERVALS_DAYS } from '../../../helpers/constants';
+import { FORM_NAME, STATS_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => {
     const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
     return (
-            <Field
-                key={interval}
-                name="interval"
-                type="radio"
-                component={renderRadioField}
-                value={interval}
-                placeholder={title}
-                normalize={toNumber}
-                disabled={processing}
-            />
+        <Field
+            key={interval}
+            name="interval"
+            type="radio"
+            component={renderRadioField}
+            value={interval}
+            placeholder={title}
+            normalize={toNumber}
+            disabled={processing}
+        />
     );
 });
 
@@ -76,7 +76,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'statsConfigForm',
-    }),
+    reduxForm({ form: FORM_NAME.STATS_CONFIG }),
 ])(Form);