+ client: handle upstream DNS servers for clients

client/src/__locales/en.json

@@ -108,6 +108,7 @@
     "upstream_dns": "Upstream DNS servers",
     "upstream_dns_hint": "If you keep this field empty, AdGuard Home will use <a href='https://www.quad9.net/' target='_blank'>Quad9</a> as an upstream.",
     "test_upstream_btn": "Test upstreams",
+    "upstreams": "Upstreams",
     "apply_btn": "Apply",
     "disabled_filtering_toast": "Disabled filtering",
     "enabled_filtering_toast": "Enabled filtering",

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

@@ -4,6 +4,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
+import { normalizeTextarea } from '../../../helpers/helpers';
 import Card from '../../ui/Card';
 import Modal from './Modal';
 import WrapCell from './WrapCell';
@@ -20,13 +21,20 @@ class ClientsTable extends Component {
     };
 
     handleSubmit = (values) => {
-        let config = values;
+        const config = values;
 
-        if (values && values.blocked_services) {
+        if (values) {
-            const blocked_services = Object
+            if (values.blocked_services) {
-                .keys(values.blocked_services)
+                config.blocked_services = Object
-                .filter(service => values.blocked_services[service]);
+                    .keys(values.blocked_services)
-            config = { ...values, blocked_services };
+                    .filter(service => values.blocked_services[service]);
+            }
+
+            if (values.upstreams && typeof values.upstreams === 'string') {
+                config.upstreams = normalizeTextarea(values.upstreams);
+            } else {
+                config.upstreams = [];
+            }
         }
 
         if (this.props.modalType === MODAL_TYPE.EDIT) {
@@ -40,10 +48,10 @@ class ClientsTable extends Component {
         const client = clients.find(item => name === item.name);
 
         if (client) {
+            const { upstreams, whois_info, ...values } = client;
             return {
-                use_global_settings: true,
+                upstreams: (upstreams && upstreams.join('\n')) || '',
-                use_global_blocked_services: true,
+                ...values,
-                ...client,
             };
         }
 
@@ -143,6 +151,24 @@ class ClientsTable extends Component {
                 );
             },
         },
+        {
+            Header: this.props.t('upstreams'),
+            accessor: 'upstreams',
+            minWidth: 120,
+            Cell: ({ value }) => {
+                const title = value && value.length > 0 ? (
+                    <Trans>settings_custom</Trans>
+                ) : (
+                    <Trans>settings_global</Trans>
+                );
+
+                return (
+                    <div className="logs__row logs__row--overflow">
+                        <div className="logs__text">{title}</div>
+                    </div>
+                );
+            },
+        },
         {
             Header: this.props.t('whois'),
             accessor: 'whois_info',

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

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 
 import i18n from '../../../i18n';
 import Tabs from '../../ui/Tabs';
+import Examples from '../Dns/Upstream/Examples';
 import { toggleAllServices } from '../../../helpers/helpers';
 import {
     renderField,
@@ -223,6 +224,17 @@ let Form = (props) => {
                             </div>
                         </div>
                     </div>
+                    <div label="upstream" title={props.t('upstream_dns')}>
+                        <Field
+                            id="upstreams"
+                            name="upstreams"
+                            component="textarea"
+                            type="text"
+                            className="form-control form-control--textarea mb-5"
+                            placeholder={t('upstream_dns')}
+                        />
+                        <Examples />
+                    </div>
                 </Tabs>
             </div>