+ client: Display upstreams list loaded from a file

Squashed commit of the following:

commit b5abc9115806f345c8d0dd5ea00b8552d27813f9
Merge: 92708411 c1c8abdd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 14:38:06 2020 +0300

    Merge branch '1680-upstreams-file' into feature/1680

commit 92708411f07638c037e049ee8012d15bdeda77e4
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 4 13:54:24 2020 +0300

    + client: Display upstreams list loaded from a file

client/src/__locales/en.json

@@ -574,5 +574,7 @@
     "original_response": "Original response",
     "click_to_view_queries": "Click to view queries",
     "port_53_faq_link": "Port 53 is often occupied by \"DNSStubListener\" or \"systemd-resolved\" services. Please read <0>this instruction</0> on how to resolve this.",
-    "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client."
+    "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client.",
+    "configured_in": "Configured in {{path}}",
+    "please_read_wiki": "Please read the wiki"
 }

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

@@ -5,51 +5,61 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
+import i18next from 'i18next';
 import Examples from './Examples';
 import { renderRadioField, renderTextareaField } from '../../../../helpers/form';
-import { DNS_REQUEST_OPTIONS, FORM_NAME } from '../../../../helpers/constants';
+import { DNS_REQUEST_OPTIONS, FORM_NAME, UPSTREAM_CONFIGURATION_WIKI_LINK } from '../../../../helpers/constants';
 import { testUpstream } from '../../../../actions';
 import { removeEmptyLines } from '../../../../helpers/helpers';
 
-const getInputFields = () => [{
-    // eslint-disable-next-line react/display-name
-    getTitle: () => <label className="form__label" htmlFor="upstream_dns">
-        <Trans>upstream_dns</Trans>
-    </label>,
-    name: 'upstream_dns',
-    type: 'text',
-    component: renderTextareaField,
-    className: 'form-control form-control--textarea font-monospace',
-    placeholder: 'upstream_dns',
-    normalizeOnBlur: removeEmptyLines,
-},
-{
-    name: 'upstream_mode',
-    type: 'radio',
-    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: 'upstream_mode',
-    type: 'radio',
-    value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
-    component: renderRadioField,
-    subtitle: 'fastest_addr_desc',
-    placeholder: 'fastest_addr',
-}];
+const Title = () => <label className="form__label" htmlFor="upstream_dns">
+    {i18next.t('upstream_dns')}
+    <div>
+        <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank"
+           rel="noopener noreferrer">{i18next.t('please_read_wiki')}</a>
+    </div>
+</label>;
+
+const getInputFields = (upstream_dns_file) => [
+    {
+        getTitle: Title,
+        name: 'upstream_dns',
+        type: 'text',
+        value: 'test',
+        component: renderTextareaField,
+        className: 'form-control form-control--textarea font-monospace',
+        placeholder: 'upstream_dns',
+        normalizeOnBlur: removeEmptyLines,
+        disabled: !!upstream_dns_file,
+    },
+    {
+        name: 'upstream_mode',
+        type: 'radio',
+        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: 'upstream_mode',
+        type: 'radio',
+        value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
+        component: renderRadioField,
+        subtitle: 'fastest_addr_desc',
+        placeholder: 'fastest_addr',
+    },
+];
 
 const Form = ({
-    submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit,
+    submitting, invalid, handleSubmit,
 }) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
@@ -57,6 +67,9 @@ const Form = ({
     const bootstrap_dns = useSelector(
         (store) => store.form[FORM_NAME.UPSTREAM].values.bootstrap_dns,
     );
+    const upstream_dns_file = useSelector((state) => state.dnsConfig.upstream_dns_file);
+    const processingTestUpstream = useSelector((state) => state.settings.processingTestUpstream);
+    const processingSetConfig = useSelector((state) => state.dnsConfig.processingSetConfig);
 
     const handleUpstreamTest = () => dispatch(testUpstream({
         upstream_dns,
@@ -67,7 +80,7 @@ const Form = ({
         'btn-loading': processingTestUpstream,
     });
 
-    const INPUT_FIELDS = getInputFields();
+    const INPUT_FIELDS = getInputFields(upstream_dns_file);
 
     return <form onSubmit={handleSubmit}>
         <div className="row">
@@ -146,8 +159,6 @@ Form.propTypes = {
     initialValues: PropTypes.object,
     upstream_dns: PropTypes.string,
     bootstrap_dns: PropTypes.string,
-    processingTestUpstream: PropTypes.bool,
-    processingSetConfig: PropTypes.bool,
 };
 
 export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);

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

@@ -12,15 +12,28 @@ const Upstream = () => {
         upstream_dns,
         bootstrap_dns,
         upstream_mode,
-        processingSetConfig,
     } = useSelector((state) => state.dnsConfig, shallowEqual);
 
-    const { processingTestUpstream } = useSelector((state) => state.settings, shallowEqual);
+    const upstream_dns_file = useSelector((state) => state.dnsConfig.upstream_dns_file);
 
     const handleSubmit = (values) => {
-        dispatch(setDnsConfig(values));
+        const {
+            bootstrap_dns,
+            upstream_dns,
+            upstream_mode,
+        } = values;
+
+        const dnsConfig = {
+            bootstrap_dns,
+            upstream_mode,
+            ...(upstream_dns_file ? null : { upstream_dns }),
+        };
+
+        dispatch(setDnsConfig(dnsConfig));
     };
 
+    const upstreamDns = upstream_dns_file ? t('configured_in', { path: upstream_dns_file }) : upstream_dns;
+
     return <Card
         title={t('upstream_dns')}
         subtitle={t('upstream_dns_hint')}
@@ -30,13 +43,11 @@ const Upstream = () => {
             <div className="col">
                 <Form
                     initialValues={{
-                        upstream_dns,
+                        upstream_dns: upstreamDns,
                         bootstrap_dns,
                         upstream_mode,
                     }}
                     onSubmit={handleSubmit}
-                    processingTestUpstream={processingTestUpstream}
-                    processingSetConfig={processingSetConfig}
                 />
             </div>
         </div>

client/src/helpers/constants.js

@@ -52,6 +52,7 @@ export const REPOSITORY = {
 
 export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
 export const PORT_53_FAQ_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/FAQ#bindinuse';
+export const UPSTREAM_CONFIGURATION_WIKI_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#upstreams';
 
 export const ADDRESS_IN_USE_TEXT = 'address already in use';
 

client/src/reducers/dnsConfig.js

@@ -48,6 +48,7 @@ const dnsConfig = handleActions(
         edns_cs_enabled: false,
         disable_ipv6: false,
         dnssec_enabled: false,
+        upstream_dns_file: '',
     },
 );