Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support

Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master

Squashed commit of the following:

commit daa288ae0d76178af24595cc807055902e6f09ab
Merge: 4c89cf720 1085d59a6
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Jun 10 17:22:20 2024 +0200

    merge

commit 4c89cf7209
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Jun 6 13:27:18 2024 +0300

    remove install from initial state

commit b943f2011f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 23:10:55 2024 +0200

    frontend production build fix

commit cd1be2d66d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 20:23:14 2024 +0200

    production build quickfix

commit 7b8ac01fc2
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Wed Jun 5 19:57:31 2024 +0300

    all: upd node docker

commit 02afed66d5
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:23:12 2024 +0200

    changelog fixes

commit 9c0f736f0c
Merge: 62c4fbf1e e04775c4f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:18:29 2024 +0200

    merge

commit 62c4fbf1e3
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:22:22 2024 +0200

    empty line in changelog

commit 76b1e44a93
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:20:37 2024 +0200

    changelog

commit f783e90040
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:19:13 2024 +0200

    filters.js -> filters.ts

commit 3d4ce6554c
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:18:03 2024 +0200

    generated file removed

commit e35ba58f2a
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:45:21 2024 +0200

    rollback unwanted changes

commit 1f30d4216d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:27:36 2024 +0200

    review fix

commit 6cd4e44f07
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:55:39 2024 +0200

    missing generated file restoresd

commit 2ab738b303
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:40:32 2024 +0200

    Frontend rewritten in TypeScript, added Node 18 support

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

@@ -0,0 +1,338 @@
+import React, { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import classnames from 'classnames';
+
+import Examples from './Examples';
+
+import { renderRadioField, renderTextareaField, CheckboxField } from '../../../../helpers/form';
+import { DNS_REQUEST_OPTIONS, FORM_NAME, 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';
+import { RootState } from '../../../../initialState';
+
+const UPSTREAM_DNS_NAME = 'upstream_dns';
+const UPSTREAM_MODE_NAME = 'upstream_mode';
+
+interface renderFieldProps {
+    name: string;
+    component: any;
+    type: string;
+    className?: string;
+    placeholder: string;
+    subtitle?: string;
+    value?: string;
+    normalizeOnBlur?: (...args: unknown[]) => unknown;
+    containerClass?: string;
+    onScroll?: (...args: unknown[]) => unknown;
+}
+
+const renderField = ({
+    name,
+    component,
+    type,
+    className,
+    placeholder,
+    subtitle,
+    value,
+    normalizeOnBlur,
+    containerClass,
+    onScroll,
+}: renderFieldProps) => {
+    const { t } = useTranslation();
+
+    const processingTestUpstream = useSelector((state: RootState) => state.settings.processingTestUpstream);
+
+    const processingSetConfig = useSelector((state: RootState) => state.dnsConfig.processingSetConfig);
+
+    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>
+    );
+};
+
+interface renderTextareaWithHighlightFieldProps {
+    className: string;
+    disabled?: boolean;
+    id: string;
+    input?: object;
+    meta?: object;
+    normalizeOnBlur?: (...args: unknown[]) => unknown;
+    onScroll?: (...args: unknown[]) => unknown;
+    placeholder: string;
+    type: string;
+}
+
+const renderTextareaWithHighlightField = (props: renderTextareaWithHighlightFieldProps) => {
+    const upstream_dns = useSelector((store: RootState) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
+
+    const upstream_dns_file = useSelector((state: RootState) => state.dnsConfig.upstream_dns_file);
+    const ref = useRef(null);
+
+    const onScroll = (e: any) => syncScroll(e, ref);
+
+    return (
+        <>
+            {renderTextareaField({
+                ...props,
+                disabled: !!upstream_dns_file,
+                onScroll,
+                normalizeOnBlur: trimLinesAndRemoveEmpty,
+            })}
+
+            {getTextareaCommentsHighlight(ref, upstream_dns)}
+        </>
+    );
+};
+
+const INPUT_FIELDS = [
+    {
+        name: UPSTREAM_MODE_NAME,
+        type: 'radio',
+        value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
+        component: renderRadioField,
+        subtitle: 'load_balancing_desc',
+        placeholder: 'load_balancing',
+    },
+    {
+        name: UPSTREAM_MODE_NAME,
+        type: 'radio',
+        value: DNS_REQUEST_OPTIONS.PARALLEL,
+        component: renderRadioField,
+        subtitle: 'upstream_parallel',
+        placeholder: 'parallel_requests',
+    },
+    {
+        name: UPSTREAM_MODE_NAME,
+        type: 'radio',
+        value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
+        component: renderRadioField,
+        subtitle: 'fastest_addr_desc',
+        placeholder: 'fastest_addr',
+    },
+];
+
+interface FormProps {
+    handleSubmit?: (...args: unknown[]) => string;
+    submitting?: boolean;
+    invalid?: boolean;
+    initialValues?: object;
+    upstream_dns?: string;
+    fallback_dns?: string;
+    bootstrap_dns?: string;
+}
+
+const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+
+    const upstream_dns = useSelector((store: RootState) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
+
+    const processingTestUpstream = useSelector((state: RootState) => state.settings.processingTestUpstream);
+
+    const processingSetConfig = useSelector((state: RootState) => state.dnsConfig.processingSetConfig);
+    const defaultLocalPtrUpstreams = useSelector((state: RootState) => state.dnsConfig.default_local_ptr_upstreams);
+
+    const handleUpstreamTest = () => dispatch(testUpstreamWithFormValues());
+
+    const testButtonClass = classnames('btn btn-primary btn-standard mr-2', {
+        'btn-loading': processingTestUpstream,
+    });
+
+    const components = {
+        a: <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank" rel="noopener noreferrer" />,
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="form--upstream">
+            <div className="row">
+                <label className="col form__label" htmlFor={UPSTREAM_DNS_NAME}>
+                    <Trans components={components}>upstream_dns_help</Trans>{' '}
+                    <Trans
+                        components={[
+                            <a
+                                href="https://link.adtidy.org/forward.html?action=dns_kb_providers&from=ui&app=home"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                key="0">
+                                DNS providers
+                            </a>,
+                        ]}>
+                        dns_providers
+                    </Trans>
+                </label>
+
+                <div className="col-12 mb-4">
+                    <div className="text-edit-container">
+                        <Field
+                            id={UPSTREAM_DNS_NAME}
+                            name={UPSTREAM_DNS_NAME}
+                            component={renderTextareaWithHighlightField}
+                            type="text"
+                            className="form-control form-control--textarea font-monospace text-input"
+                            placeholder={t('upstream_dns')}
+                            disabled={processingSetConfig || processingTestUpstream}
+                            normalizeOnBlur={removeEmptyLines}
+                        />
+                    </div>
+                </div>
+                {INPUT_FIELDS.map(renderField)}
+
+                <div className="col-12">
+                    <Examples />
+
+                    <hr />
+                </div>
+
+                <div className="col-12">
+                    <label className="form__label form__label--with-desc" htmlFor="fallback_dns">
+                        <Trans>fallback_dns_title</Trans>
+                    </label>
+
+                    <div className="form__desc form__desc--top">
+                        <Trans>fallback_dns_desc</Trans>
+                    </div>
+
+                    <Field
+                        id="fallback_dns"
+                        name="fallback_dns"
+                        component={renderTextareaField}
+                        type="text"
+                        className="form-control form-control--textarea form-control--textarea-small font-monospace"
+                        placeholder={t('fallback_dns_placeholder')}
+                        disabled={processingSetConfig}
+                        normalizeOnBlur={removeEmptyLines}
+                    />
+                </div>
+
+                <div className="col-12">
+                    <hr />
+                </div>
+
+                <div className="col-12 mb-2">
+                    <label className="form__label form__label--with-desc" htmlFor="bootstrap_dns">
+                        <Trans>bootstrap_dns</Trans>
+                    </label>
+
+                    <div className="form__desc form__desc--top">
+                        <Trans>bootstrap_dns_desc</Trans>
+                    </div>
+
+                    <Field
+                        id="bootstrap_dns"
+                        name="bootstrap_dns"
+                        component={renderTextareaField}
+                        type="text"
+                        className="form-control form-control--textarea form-control--textarea-small font-monospace"
+                        placeholder={t('bootstrap_dns')}
+                        disabled={processingSetConfig}
+                        normalizeOnBlur={removeEmptyLines}
+                    />
+                </div>
+
+                <div className="col-12">
+                    <hr />
+                </div>
+
+                <div className="col-12">
+                    <label className="form__label form__label--with-desc" htmlFor="local_ptr">
+                        <Trans>local_ptr_title</Trans>
+                    </label>
+
+                    <div className="form__desc form__desc--top">
+                        <Trans>local_ptr_desc</Trans>
+                    </div>
+
+                    <div className="form__desc form__desc--top">
+                        {/** TODO: Add internazionalization for "" */}
+                        {defaultLocalPtrUpstreams?.length > 0 ? (
+                            <Trans values={{ ip: defaultLocalPtrUpstreams.map((s: any) => `"${s}"`).join(', ') }}>
+                                local_ptr_default_resolver
+                            </Trans>
+                        ) : (
+                            <Trans>local_ptr_no_default_resolver</Trans>
+                        )}
+                    </div>
+
+                    <Field
+                        id="local_ptr_upstreams"
+                        name="local_ptr_upstreams"
+                        component={renderTextareaField}
+                        type="text"
+                        className="form-control form-control--textarea form-control--textarea-small font-monospace"
+                        placeholder={t('local_ptr_placeholder')}
+                        disabled={processingSetConfig}
+                        normalizeOnBlur={removeEmptyLines}
+                    />
+
+                    <div className="mt-4">
+                        <Field
+                            name="use_private_ptr_resolvers"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('use_private_ptr_resolvers_title')}
+                            subtitle={t('use_private_ptr_resolvers_desc')}
+                            disabled={processingSetConfig}
+                        />
+                    </div>
+                </div>
+
+                <div className="col-12">
+                    <hr />
+                </div>
+
+                <div className="col-12 mb-4">
+                    <Field
+                        name="resolve_clients"
+                        type="checkbox"
+                        component={CheckboxField}
+                        placeholder={t('resolve_clients_title')}
+                        subtitle={t('resolve_clients_desc')}
+                        disabled={processingSetConfig}
+                    />
+                </div>
+            </div>
+
+            <div className="card-actions">
+                <div className="btn-list">
+                    <button
+                        type="button"
+                        className={testButtonClass}
+                        onClick={handleUpstreamTest}
+                        disabled={!upstream_dns || processingTestUpstream}>
+                        <Trans>test_upstream_btn</Trans>
+                    </button>
+
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || invalid || processingSetConfig || processingTestUpstream}>
+                        <Trans>apply_btn</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);