daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ upstream: Allow entering comments to the Upstreams box

Browse Source 
Close #2083

Squashed commit of the following:

commit 113ad3c4ae2ca184b3945dcaa357b57303ee5fd6
Merge: 4ca1f005 bf23aa4d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 14:41:30 2020 +0300

    Merge branch 'master' into feature/2083

commit 4ca1f0056708eb23bb751587a0ec284508f35edf
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 13:14:31 2020 +0300

    Simplify filterOutComments, use assert in tests

commit bba03568aa979300e0534a2bd2f03086e25b3f87
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 12:05:00 2020 +0300

    Add ValidateUpstreams test cases

commit 181de508cf266e3a47058f2b7e1b4b4accbab827
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 11:47:03 2020 +0300

    Refactor testUpstream

commit 19c189cf7b64f4d252428dec5a608595c8e4cbc7
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 22 10:38:37 2020 +0300

    Move functions to utils

commit 003937e90e0ff02e696d45c21045a27a49cd0202
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 19:00:49 2020 +0300

    Review changes

commit b26bf64d8cef0266f33bce51c5bad324c74bb6da
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 17:58:01 2020 +0300

    + upstream: Filter out the upstream comments

commit 920975d2ba14fade07282cdb5c72a699c8083463
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 17:51:00 2020 +0300

    Trim upstreams, extract comment token

commit a9958eb305ed9af10de68ef3bffe63f216805efe
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 21 10:34:11 2020 +0300

    Fix markup styles

commit 6efa41d944c7b09454a4011d2c9ea52b5ce91bbf
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 17:59:57 2020 +0300

    Fix upstream form positioning

commit 6eb12158d0bca49d4b41eb65a3ebed44eafbe486
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 17:16:49 2020 +0300

    Update example_upstream_comment locale

commit aa9317b0243f5d30f0fcb9cbfcdf502547a8e954
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 18 13:28:30 2020 +0300

    Highlight comments in custom rules form, extract highlight logic

commit dc55245d3db9edbde60fda0a0e50e1e045e71403
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 17 22:48:29 2020 +0300

    + client: Allow entering comments to the Upstreams box
This commit is contained in:
Artem Baskal
2020-09-22 15:04:17 +03:00
parent bf23aa4d9b
commit 756f97ede1
15 changed files with 328 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/Settings/Dns/Upstream/Examples.js
View File

@@ -1,25 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Trans, withTranslation } from 'react-i18next';
import { COMMENT_LINE_DEFAULT_TOKEN } from '../../../../helpers/constants';
const Examples = (props) => (
<div className="list leading-loose">
<p>
<Trans
components={[
<a
href="https://kb.adguard.com/general/dns-providers"
target="_blank"
rel="noopener noreferrer"
key="0"
>
DNS providers
</a>,
]}
>
dns_providers
</Trans>
</p>
<Trans>examples_title</Trans>:
<ol className="leading-loose">
<li>
@@ -141,6 +126,12 @@ const Examples = (props) => (
</Trans>
</span>
</li>
<li>
<code>{COMMENT_LINE_DEFAULT_TOKEN} comment</code> –&nbsp;
<span>
<Trans>example_upstream_comment</Trans>
</span>
</li>
</ol>
</div>
);

166
client/src/components/Settings/Dns/Upstream/Form.js
View File

@@ -1,43 +1,114 @@
import React from 'react';
import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next';
import classnames from 'classnames';
import Examples from './Examples';
import { renderRadioField, renderTextareaField } from '../../../../helpers/form';
import { DNS_REQUEST_OPTIONS, FORM_NAME, UPSTREAM_CONFIGURATION_WIKI_LINK } from '../../../../helpers/constants';
import { testUpstream } from '../../../../actions';
import { removeEmptyLines } from '../../../../helpers/helpers';
import {
DNS_REQUEST_OPTIONS,
FORM_NAME,
isFirefox,
UPSTREAM_CONFIGURATION_WIKI_LINK,
} from '../../../../helpers/constants';
import { testUpstreamWithFormValues } from '../../../../actions';
import { removeEmptyLines, trimLinesAndRemoveEmpty } from '../../../../helpers/helpers';
import { getTextareaCommentsHighlight, syncScroll } from '../../../../helpers/highlightTextareaComments';
import '../../../ui/texareaCommentsHighlight.css';
const UPSTREAM_DNS_NAME = 'upstream_dns';
const UPSTREAM_MODE_NAME = 'upstream_mode';
const Title = () => {
const components = {
a: <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank"
rel="noopener noreferrer" />,
};
const renderField = ({
name, component, type, className, placeholder,
subtitle, value, normalizeOnBlur, containerClass, onScroll,
}) => {
const { t } = useTranslation();
const processingTestUpstream = useSelector((state) => state.settings.processingTestUpstream);
const processingSetConfig = useSelector((state) => state.dnsConfig.processingSetConfig);
return <label className="form__label" htmlFor={UPSTREAM_DNS_NAME}>
<Trans components={components}>upstream_dns_help</Trans>
</label>;
return <div
key={placeholder}
className={classnames('col-12 mb-4', containerClass)}
>
<Field
id={name}
value={value}
name={name}
component={component}
type={type}
className={className}
placeholder={t(placeholder)}
subtitle={t(subtitle)}
disabled={processingSetConfig || processingTestUpstream}
normalizeOnBlur={normalizeOnBlur}
onScroll={onScroll}
/>
</div>;
};
const getInputFields = (upstream_dns_file) => [
renderField.propTypes = {
name: PropTypes.string.isRequired,
component: PropTypes.element.isRequired,
type: PropTypes.string.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string.isRequired,
subtitle: PropTypes.string,
value: PropTypes.string,
normalizeOnBlur: PropTypes.func,
containerClass: PropTypes.string,
onScroll: PropTypes.func,
};
const renderTextareaWithHighlightField = (props) => {
const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
const upstream_dns_file = useSelector((state) => state.dnsConfig.upstream_dns_file);
const ref = useRef(null);
const onScroll = (e) => syncScroll(e, ref);
return <>
{renderTextareaField({
...props,
disabled: !!upstream_dns_file,
onScroll,
normalizeOnBlur: trimLinesAndRemoveEmpty,
})}
{getTextareaCommentsHighlight(ref, upstream_dns)}
</>;
};
renderTextareaWithHighlightField.propTypes = {
className: PropTypes.string.isRequired,
disabled: PropTypes.bool,
id: PropTypes.string.isRequired,
input: PropTypes.object,
meta: PropTypes.object,
normalizeOnBlur: PropTypes.func,
onScroll: PropTypes.func,
placeholder: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
};
const INPUT_FIELDS = [
{
getTitle: Title,
name: UPSTREAM_DNS_NAME,
type: 'text',
value: 'test',
component: renderTextareaField,
className: 'form-control form-control--textarea font-monospace',
component: renderTextareaWithHighlightField,
className: classnames('form-control form-control--textarea font-monospace text-input', {
'text-input--larger': isFirefox,
}),
containerClass: classnames('text-edit-container', {
'mb-4': !isFirefox,
'mb-6': isFirefox,
}),
placeholder: 'upstream_dns',
normalizeOnBlur: removeEmptyLines,
disabled: !!upstream_dns_file,
},
{
name: 'upstream_mode',
name: UPSTREAM_MODE_NAME,
type: 'radio',
value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
component: renderRadioField,
@@ -45,7 +116,7 @@ const getInputFields = (upstream_dns_file) => [
placeholder: 'load_balancing',
},
{
name: 'upstream_mode',
name: UPSTREAM_MODE_NAME,
type: 'radio',
value: DNS_REQUEST_OPTIONS.PARALLEL,
component: renderRadioField,
@@ -53,7 +124,7 @@ const getInputFields = (upstream_dns_file) => [
placeholder: 'parallel_requests',
},
{
name: 'upstream_mode',
name: UPSTREAM_MODE_NAME,
type: 'radio',
value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
component: renderRadioField,
@@ -68,44 +139,39 @@ const Form = ({
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 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,
bootstrap_dns,
}));
const handleUpstreamTest = () => dispatch(testUpstreamWithFormValues());
const testButtonClass = classnames('btn btn-primary btn-standard mr-2', {
'btn-loading': processingTestUpstream,
});
const INPUT_FIELDS = getInputFields(upstream_dns_file);
const components = {
a: <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank"
rel="noopener noreferrer" />,
};
return <form onSubmit={handleSubmit}>
return <form onSubmit={handleSubmit} className="form--upstream">
<div className="row">
{INPUT_FIELDS.map(({
name, component, type, className, placeholder,
getTitle, subtitle, disabled, value, normalizeOnBlur,
}) => <div className="col-12 mb-4" key={placeholder}>
{typeof getTitle === 'function' && getTitle()}
<Field
id={name}
value={value}
name={name}
component={component}
type={type}
className={className}
placeholder={t(placeholder)}
subtitle={t(subtitle)}
disabled={processingSetConfig || processingTestUpstream || disabled}
normalizeOnBlur={normalizeOnBlur}
/>
</div>)}
<label className="col form__label" htmlFor={UPSTREAM_DNS_NAME}>
<Trans components={components}>upstream_dns_help</Trans>
{' '}
<Trans components={[
<a
href="https://kb.adguard.com/general/dns-providers"
target="_blank"
rel="noopener noreferrer"
key="0"
>
DNS providers
</a>,
]}>
dns_providers
</Trans>
</label>
{INPUT_FIELDS.map(renderField)}
<div className="col-12">
<Examples />
<hr />