- 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/__locales/en.json

@@ -3,6 +3,8 @@
     "example_upstream_reserved": "You can specify DNS upstream <0>for the specific domain(s)</0>",
     "upstream_parallel": "Use parallel requests to speed up resolving by simultaneously querying all upstream servers",
     "parallel_requests": "Parallel requests",
+    "load_balancing": "Load-balancing",
+    "load_balancing_desc": "Query one server at a time. AdGuard Home will use the weighted random algorithm to pick the server so that the fastest server will be used more often.",
     "bootstrap_dns": "Bootstrap DNS servers",
     "bootstrap_dns_desc": "Bootstrap DNS servers are used to resolve IP addresses of the DoH/DoT resolvers you specify as upstreams.",
     "check_dhcp_servers": "Check for DHCP servers",

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 {
@@ -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',
@@ -144,7 +144,7 @@ let Form = ({
     >
         <Trans>save_btn</Trans>
     </button>
-    </form>;
+</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,50 +1,28 @@
-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 formattedValues = {
-            bootstrap_dns,
-            upstream_dns,
-            [dnsRequestOption]: true,
-            [disabledOption]: false,
+    const handleSubmit = (values) => {
+        dispatch(setDnsConfig(values));
     };
 
-        this.props.setDnsConfig(formattedValues);
-    };
-
-    handleTest = (values) => {
-        this.props.testUpstream(values);
-    };
-
-    render() {
     const {
-            t,
         processingTestUpstream,
         dnsConfig: {
             upstream_dns,
             bootstrap_dns,
-                fastest_addr,
-                parallel_requests,
             processingSetConfig,
+            upstream_mode,
         },
-        } = this.props;
-
-        const dnsRequestOption = cn({
-            parallel_requests,
-            fastest_addr,
-        });
+    } = props;
 
     return (
         <Card
@@ -58,10 +36,9 @@ class Upstream extends Component {
                         initialValues={{
                             upstream_dns,
                             bootstrap_dns,
-                                dnsRequestOption,
+                            upstream_mode,
                         }}
-                            testUpstream={this.handleTest}
-                            onSubmit={this.handleSubmit}
+                        onSubmit={handleSubmit}
                         processingTestUpstream={processingTestUpstream}
                         processingSetConfig={processingSetConfig}
                     />
@@ -69,15 +46,11 @@ class Upstream extends Component {
             </div>
         </Card>
     );
-    }
-}
-
-Upstream.propTypes = {
-    testUpstream: PropTypes.func.isRequired,
-    processingTestUpstream: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    dnsConfig: PropTypes.object.isRequired,
-    setDnsConfig: PropTypes.func.isRequired,
 };
 
-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();
+
+    useEffect(() => {
+        props.getAccessList();
+        props.getDnsConfig();
+    }, []);
 
-    render() {
     const {
-            t,
         settings,
         access,
         setAccessList,
-            testUpstream,
         dnsConfig,
         setDnsConfig,
-        } = this.props;
+    } = props;
 
     const isDataLoading = access.processing || dnsConfig.processingGetConfig;
 
     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>
+                </>}
+        </>
     );
-    }
-}
+};
 
 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,7 +5,7 @@ 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 });
@@ -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,7 +5,7 @@ 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 });
@@ -76,7 +76,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'statsConfigForm',
-    }),
+    reduxForm({ form: FORM_NAME.STATS_CONFIG }),
 ])(Form);

client/src/containers/Dns.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { testUpstream } from '../actions';
 import { getAccessList, setAccessList } from '../actions/access';
 import {
     getRewritesList,
@@ -25,7 +24,6 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
-    testUpstream,
     getAccessList,
     setAccessList,
     getRewritesList,

client/src/helpers/constants.js

@@ -377,12 +377,33 @@ export const ACTION = {
 };
 
 export const DNS_REQUEST_OPTIONS = {
-    PARALLEL_REQUESTS: 'parallel_requests',
+    PARALLEL: 'parallel',
     FASTEST_ADDR: 'fastest_addr',
+    LOAD_BALANCING: '',
 };
 
 export const IP_MATCH_LIST_STATUS = {
     NOT_FOUND: 'NOT_FOUND', // not found in the list
-    EXACT: 'EXACT', // found exact match (ip === ip)
+    EXACT: 'EXACT', // found exact match (including the match of short and long forms)
     CIDR: 'CIDR', // the ip is in the specified CIDR range
 };
+
+export const FORM_NAME = {
+    UPSTREAM: 'upstream',
+    DOMAIN_CHECK: 'domainCheck',
+    FILTER: 'filter',
+    REWRITES: 'rewrites',
+    LOGS_FILTER: 'logsFilter',
+    CLIENT: 'client',
+    DHCP: 'dhcp',
+    LEASE: 'lease',
+    ACCESS: 'access',
+    BLOCKING_MODE: 'blockingMode',
+    ENCRYPTION: 'encryption',
+    FILTER_CONFIG: 'filterConfig',
+    LOG_CONFIG: 'logConfig',
+    SERVICES: 'services',
+    STATS_CONFIG: 'statsConfig',
+    INSTALL: 'install',
+    LOGIN: 'login',
+};

client/src/install/Setup/Auth.js

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import i18n from '../../i18n';
 import Controls from './Controls';
 import { renderInputField } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const required = (value) => {
     if (value || value === 0) {
@@ -100,7 +101,7 @@ Auth.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
         validate,

client/src/install/Setup/Devices.js

@@ -8,6 +8,7 @@ import flow from 'lodash/flow';
 import Guide from '../../components/ui/Guide';
 import Controls from './Controls';
 import AddressList from './AddressList';
+import { FORM_NAME } from '../../helpers/constants';
 
 let Devices = (props) => (
     <div className="setup__step">
@@ -56,7 +57,7 @@ Devices = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/install/Setup/Settings.js

@@ -9,7 +9,7 @@ import Controls from './Controls';
 import AddressList from './AddressList';
 
 import { getInterfaceIp } from '../../helpers/helpers';
-import { ALL_INTERFACES_IP } from '../../helpers/constants';
+import { ALL_INTERFACES_IP, FORM_NAME } from '../../helpers/constants';
 import {
     renderInputField, required, validInstallPort, toNumber,
 } from '../../helpers/form';
@@ -373,7 +373,7 @@ Settings.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('install');
+const selector = formValueSelector(FORM_NAME.INSTALL);
 
 const SettingsForm = connect((state) => {
     const webIp = selector(state, 'web.ip');
@@ -392,7 +392,7 @@ const SettingsForm = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/install/Setup/Submit.js

@@ -6,6 +6,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import Controls from './Controls';
+import { FORM_NAME } from '../../helpers/constants';
 
 let Submit = (props) => (
     <div className="setup__step">
@@ -50,7 +51,7 @@ Submit = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/login/Login/Form.js

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField, required } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -70,7 +71,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
-        form: 'loginForm',
-    }),
+    reduxForm({ form: FORM_NAME.LOGIN }),
 ])(Form);