From 8b40fe97a6b3523d03d5c762edc6aa38666e9c03 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Tue, 14 Jan 2025 15:17:00 +0300
Subject: [PATCH] stats config form

---
 .../components/Settings/LogsConfig/Form.tsx   |  32 +--
 .../components/Settings/LogsConfig/index.tsx  |  12 +-
 client/src/components/Settings/Settings.css   |   4 +
 .../components/Settings/StatsConfig/Form.tsx  | 253 +++++++++++-------
 .../components/Settings/StatsConfig/index.tsx |  14 +-
 5 files changed, 181 insertions(+), 134 deletions(-)

diff --git a/client/src/components/Settings/LogsConfig/Form.tsx b/client/src/components/Settings/LogsConfig/Form.tsx
index 396f0e5b..dce13997 100644
--- a/client/src/components/Settings/LogsConfig/Form.tsx
+++ b/client/src/components/Settings/LogsConfig/Form.tsx
@@ -10,6 +10,7 @@ import {
     DAY,
     RETENTION_CUSTOM,
     RETENTION_RANGE,
+    CUSTOM_INTERVAL,
 } from '../../../helpers/constants';
 import '../FormButton.css';
 
@@ -26,7 +27,7 @@ const getIntervalTitle = (interval: number) => {
     }
 };
 
-type FormValues = {
+export type FormValues = {
     enabled: boolean;
     anonymize_client_ip: boolean;
     interval: number;
@@ -36,18 +37,18 @@ type FormValues = {
 
 type Props = {
     initialValues: Partial<FormValues>;
-    onSubmit: (values: FormValues) => void;
-    handleClear: () => void;
     processing: boolean;
-    processingClear: boolean;
+    processingReset: boolean;
+    onSubmit: (values: FormValues) => void;
+    onReset: () => void;
 }
 
-export const LogsConfigForm = ({
+export const Form = ({
     initialValues,
-    onSubmit,
     processing,
-    processingClear,
-    handleClear,
+    processingReset,
+    onSubmit,
+    onReset,
 }: Props) => {
     const {
         register,
@@ -62,7 +63,7 @@ export const LogsConfigForm = ({
           anonymize_client_ip: initialValues.anonymize_client_ip || false,
           interval: initialValues.interval || DAY,
           customInterval: initialValues.customInterval || null,
-          ignored: initialValues.ignored ?? '',
+          ignored: initialValues.ignored || '',
         },
     });
 
@@ -89,8 +90,6 @@ export const LogsConfigForm = ({
         processing ||
         (intervalValue === RETENTION_CUSTOM && !customIntervalValue);
 
-    console.log(intervalValue, RETENTION_CUSTOM, customIntervalValue);
-
     return (
         <form onSubmit={handleSubmit(onSubmitForm)}>
             <div className="form__group form__group--settings">
@@ -132,9 +131,9 @@ export const LogsConfigForm = ({
                 </label>
             </div>
 
-            <label className="form__label">
+            <div className="form__label">
                 <Trans>query_log_retention</Trans>
-            </label>
+            </div>
 
             <div className="form__group form__group--settings">
                 <div className="custom-controls-stacked">
@@ -143,8 +142,8 @@ export const LogsConfigForm = ({
                             type="radio"
                             className="custom-control-input"
                             disabled={processing}
-                            value={RETENTION_CUSTOM}
                             checked={!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)}
+                            value={RETENTION_CUSTOM}
                             onChange={(e) => {
                                 setValue('interval', parseInt(e.target.value, 10));
                             }}
@@ -160,6 +159,7 @@ export const LogsConfigForm = ({
                             <input
                                 type="number"
                                 className="form-control"
+                                name={CUSTOM_INTERVAL}
                                 min={RETENTION_RANGE.MIN}
                                 max={RETENTION_RANGE.MAX}
                                 disabled={processing}
@@ -220,8 +220,8 @@ export const LogsConfigForm = ({
                 <button
                     type="button"
                     className="btn btn-outline-secondary btn-standard form__button"
-                    onClick={handleClear}
-                    disabled={processingClear}
+                    onClick={onReset}
+                    disabled={processingReset}
                 >
                     <Trans>query_log_clear</Trans>
                 </button>
diff --git a/client/src/components/Settings/LogsConfig/index.tsx b/client/src/components/Settings/LogsConfig/index.tsx
index e4c262b3..31897aeb 100644
--- a/client/src/components/Settings/LogsConfig/index.tsx
+++ b/client/src/components/Settings/LogsConfig/index.tsx
@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
 
-import { LogsConfigForm } from './Form';
+import { Form, FormValues } from './Form';
 import { HOUR } from '../../../helpers/constants';
 
 interface LogsConfigProps {
@@ -20,7 +20,7 @@ interface LogsConfigProps {
 }
 
 class LogsConfig extends Component<LogsConfigProps> {
-    handleFormSubmit = (values: any) => {
+    handleFormSubmit = (values: FormValues) => {
         const { t, interval: prevInterval } = this.props;
         const { interval, customInterval, ...rest } = values;
 
@@ -65,7 +65,7 @@ class LogsConfig extends Component<LogsConfigProps> {
         return (
             <Card title={t('query_log_configuration')} bodyType="card-body box-body--settings" id="logs-config">
                 <div className="form">
-                    <LogsConfigForm
+                    <Form
                         initialValues={{
                             enabled,
                             interval,
@@ -73,10 +73,10 @@ class LogsConfig extends Component<LogsConfigProps> {
                             anonymize_client_ip,
                             ignored: ignored?.join('\n'),
                         }}
-                        onSubmit={this.handleFormSubmit}
                         processing={processing}
-                        processingClear={processingClear}
-                        handleClear={this.handleClear}
+                        processingReset={processingClear}
+                        onSubmit={this.handleFormSubmit}
+                        onReset={this.handleClear}
                     />
                 </div>
             </Card>
diff --git a/client/src/components/Settings/Settings.css b/client/src/components/Settings/Settings.css
index 39efcddf..49bb301f 100644
--- a/client/src/components/Settings/Settings.css
+++ b/client/src/components/Settings/Settings.css
@@ -98,6 +98,10 @@
     margin: 0 0 8px;
 }
 
+.form__label {
+    margin-bottom: 8px;
+}
+
 .form__label--bold {
     font-weight: 700;
 }
diff --git a/client/src/components/Settings/StatsConfig/Form.tsx b/client/src/components/Settings/StatsConfig/Form.tsx
index cd8af68f..90c86c44 100644
--- a/client/src/components/Settings/StatsConfig/Form.tsx
+++ b/client/src/components/Settings/StatsConfig/Form.tsx
@@ -1,23 +1,12 @@
 import React, { useEffect } from 'react';
-import { change, Field, formValueSelector, reduxForm } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import { connect } from 'react-redux';
+import { Trans } from 'react-i18next';
+import i18next from 'i18next';
 
+import { useForm } from 'react-hook-form';
 import {
-    renderRadioField,
-    toNumber,
-    CheckboxField,
-    renderTextareaField,
-    toFloatNumber,
-    renderInputField,
-} from '../../../helpers/form';
-import {
-    FORM_NAME,
     STATS_INTERVALS_DAYS,
     DAY,
     RETENTION_CUSTOM,
-    RETENTION_CUSTOM_INPUT,
     CUSTOM_INTERVAL,
     RETENTION_RANGE,
 } from '../../../helpers/constants';
@@ -25,66 +14,102 @@ import {
 import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
 import '../FormButton.css';
 
-const getIntervalTitle = (intervalMs: any, t: any) => {
-    switch (intervalMs) {
+const getIntervalTitle = (interval: any) => {
+    switch (interval) {
         case RETENTION_CUSTOM:
-            return t('settings_custom');
+            return i18next.t('settings_custom');
         case DAY:
-            return t('interval_24_hour');
+            return i18next.t('interval_24_hour');
         default:
-            return t('interval_days', { count: intervalMs / DAY });
+            return i18next.t('interval_days', { count: interval / DAY });
     }
 };
 
-interface FormProps {
-    handleSubmit: (...args: unknown[]) => string;
-    handleReset: (...args: unknown[]) => string;
-    change: (...args: unknown[]) => unknown;
-    submitting: boolean;
-    invalid: boolean;
-    processing: boolean;
-    processingReset: boolean;
-    t: (...args: unknown[]) => string;
-    interval?: number;
-    customInterval?: number;
-    dispatch: (...args: unknown[]) => unknown;
+export type FormValues = {
+    enabled: boolean;
+    interval: number;
+    customInterval?: number | null;
+    ignored: string;
 }
 
-let Form = (props: FormProps) => {
+type Props = {
+    initialValues: Partial<FormValues>;
+    processing: boolean;
+    processingReset: boolean;
+    onSubmit: (values: FormValues) => void;
+    onReset: () => void;
+}
+
+export const Form = ({
+    initialValues,
+    processing,
+    processingReset,
+    onSubmit,
+    onReset,
+}: Props) => {
     const {
+        register,
         handleSubmit,
-        processing,
-        submitting,
-        invalid,
-        handleReset,
-        processingReset,
-        t,
-        interval,
-        customInterval,
-        dispatch,
-    } = props;
+        watch,
+        setValue,
+        formState: { isSubmitting },
+      } = useForm<FormValues>({
+        mode: 'onChange',
+        defaultValues: {
+          enabled: initialValues.enabled || false,
+          interval: initialValues.interval || DAY,
+          customInterval: initialValues.customInterval || null,
+          ignored: initialValues.ignored || '',
+        },
+    });
+
+    const intervalValue = watch('interval');
+    const customIntervalValue = watch('customInterval');
 
     useEffect(() => {
-        if (STATS_INTERVALS_DAYS.includes(interval)) {
-            dispatch(change(FORM_NAME.STATS_CONFIG, CUSTOM_INTERVAL, null));
+        if (STATS_INTERVALS_DAYS.includes(intervalValue)) {
+            setValue('customInterval', null);
         }
-    }, [interval]);
+    }, [intervalValue]);
+
+    const onSubmitForm = (data: FormValues) => {
+        onSubmit(data);
+    };
+
+    const handleIgnoredBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        const trimmed = trimLinesAndRemoveEmpty(e.target.value);
+        setValue('ignored', trimmed);
+    };
+
+    const disableSubmit =
+        isSubmitting ||
+        processing ||
+        (intervalValue === RETENTION_CUSTOM && !customIntervalValue);
 
     return (
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit(onSubmitForm)}>
             <div className="form__group form__group--settings">
-                <Field
-                    name="enabled"
-                    type="checkbox"
-                    component={CheckboxField}
-                    placeholder={t('statistics_enable')}
-                    disabled={processing}
-                />
+                <label className="checkbox">
+                    <span className="checkbox__marker" />
+
+                    <input
+                        type="checkbox"
+                        className="checkbox__input"
+                        {...register('enabled')}
+                        disabled={processing}
+                    />
+
+                    <span className="checkbox__label">
+                        <span className="checkbox__label-text checkbox__label-text--long">
+                            <span className="checkbox__label-title">{i18next.t('statistics_enable')}</span>
+                        </span>
+                    </span>
+                </label>
             </div>
 
-            <label className="form__label form__label--with-desc">
+            <div className="form__label form__label--with-desc">
                 <Trans>statistics_retention</Trans>
-            </label>
+            </div>
 
             <div className="form__desc form__desc--top">
                 <Trans>statistics_retention_desc</Trans>
@@ -92,21 +117,28 @@ let Form = (props: FormProps) => {
 
             <div className="form__group form__group--settings mt-2">
                 <div className="custom-controls-stacked">
-                    <Field
-                        key={RETENTION_CUSTOM}
-                        name="interval"
-                        type="radio"
-                        component={renderRadioField}
-                        value={STATS_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
-                        placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
-                        normalize={toFloatNumber}
-                        disabled={processing}
-                    />
-                    {!STATS_INTERVALS_DAYS.includes(interval) && (
-                        <div className="form__group--input">
-                            <div className="form__desc form__desc--top">{t('custom_retention_input')}</div>
+                    <label className="custom-control custom-radio">
+                        <input
+                            type="radio"
+                            className="custom-control-input"
+                            disabled={processing}
+                            checked={!STATS_INTERVALS_DAYS.includes(intervalValue)}
+                            value={RETENTION_CUSTOM}
+                            onChange={(e) => {
+                                setValue('interval', parseInt(e.target.value, 10));
+                            }}
+                        />
 
-                            <Field
+                        <span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
+                    </label>
+
+                    {!STATS_INTERVALS_DAYS.includes(intervalValue) && (
+                        <div className="form__group--input">
+                            <div className="form__desc form__desc--top">
+                                {i18next.t('custom_retention_input')}
+                            </div>
+
+                            {/* <Field
                                 key={RETENTION_CUSTOM_INPUT}
                                 name={CUSTOM_INTERVAL}
                                 type="number"
@@ -116,34 +148,61 @@ let Form = (props: FormProps) => {
                                 normalize={toFloatNumber}
                                 min={RETENTION_RANGE.MIN}
                                 max={RETENTION_RANGE.MAX}
+                            /> */}
+
+                            <input
+                                name={CUSTOM_INTERVAL}
+                                type="number"
+                                className="form-control"
+                                min={RETENTION_RANGE.MIN}
+                                max={RETENTION_RANGE.MAX}
+                                disabled={processing}
+                                {...register('customInterval')}
+                                onChange={(e) => {
+                                    setValue('customInterval', parseInt(e.target.value, 10));
+                                }}
                             />
                         </div>
                     )}
                     {STATS_INTERVALS_DAYS.map((interval) => (
-                        <Field
-                            key={interval}
-                            name="interval"
-                            type="radio"
-                            component={renderRadioField}
-                            value={interval}
-                            placeholder={getIntervalTitle(interval, t)}
-                            normalize={toNumber}
-                            disabled={processing}
-                        />
+                        // <Field
+                        //     key={interval}
+                        //     name="interval"
+                        //     type="radio"
+                        //     component={renderRadioField}
+                        //     value={interval}
+                        //     placeholder={getIntervalTitle(interval, t)}
+                        //     normalize={toNumber}
+                        //     disabled={processing}
+                        // />
+                        <label key={interval} className="custom-control custom-radio">
+                            <input
+                                type="radio"
+                                className="custom-control-input"
+                                disabled={processing}
+                                value={interval}
+                                checked={intervalValue === interval}
+                                onChange={(e) => {
+                                    setValue("interval", parseInt(e.target.value, 10));
+                                }}
+                            />
+
+                            <span className="custom-control-label">{getIntervalTitle(interval)}</span>
+                        </label>
                     ))}
                 </div>
             </div>
 
-            <label className="form__label form__label--with-desc">
+            <div className="form__label form__label--with-desc">
                 <Trans>ignore_domains_title</Trans>
-            </label>
+            </div>
 
             <div className="form__desc form__desc--top">
                 <Trans>ignore_domains_desc_stats</Trans>
             </div>
 
             <div className="form__group form__group--settings">
-                <Field
+                {/* <Field
                     name="ignored"
                     type="textarea"
                     className="form-control form-control--textarea font-monospace text-input"
@@ -151,6 +210,13 @@ let Form = (props: FormProps) => {
                     placeholder={t('ignore_domains')}
                     disabled={processing}
                     normalizeOnBlur={trimLinesAndRemoveEmpty}
+                /> */}
+                <textarea
+                    className="form-control form-control--textarea font-monospace text-input"
+                    placeholder={i18next.t('ignore_domains')}
+                    disabled={processing}
+                    {...register('ignored')}
+                    onBlur={handleIgnoredBlur}
                 />
             </div>
 
@@ -158,19 +224,15 @@ let Form = (props: FormProps) => {
                 <button
                     type="submit"
                     className="btn btn-success btn-standard btn-large"
-                    disabled={
-                        submitting ||
-                        invalid ||
-                        processing ||
-                        (!STATS_INTERVALS_DAYS.includes(interval) && !customInterval)
-                    }>
+                    disabled={disableSubmit}
+                >
                     <Trans>save_btn</Trans>
                 </button>
 
                 <button
                     type="button"
                     className="btn btn-outline-secondary btn-standard form__button"
-                    onClick={() => handleReset()}
+                    onClick={onReset}
                     disabled={processingReset}>
                     <Trans>statistics_clear</Trans>
                 </button>
@@ -178,16 +240,3 @@ let Form = (props: FormProps) => {
         </form>
     );
 };
-
-const selector = formValueSelector(FORM_NAME.STATS_CONFIG);
-
-Form = connect((state) => {
-    const interval = selector(state, 'interval');
-    const customInterval = selector(state, CUSTOM_INTERVAL);
-    return {
-        interval,
-        customInterval,
-    };
-})(Form);
-
-export default flow([withTranslation(), reduxForm({ form: FORM_NAME.STATS_CONFIG })])(Form);
diff --git a/client/src/components/Settings/StatsConfig/index.tsx b/client/src/components/Settings/StatsConfig/index.tsx
index ba96a561..1240dbb6 100644
--- a/client/src/components/Settings/StatsConfig/index.tsx
+++ b/client/src/components/Settings/StatsConfig/index.tsx
@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
 
-import Form from './Form';
+import { Form, FormValues } from './Form';
 import { HOUR } from '../../../helpers/constants';
 
 interface StatsConfigProps {
@@ -19,7 +19,7 @@ interface StatsConfigProps {
 }
 
 class StatsConfig extends Component<StatsConfigProps> {
-    handleFormSubmit = ({ enabled, interval, ignored, customInterval }: any) => {
+    handleFormSubmit = ({ enabled, interval, ignored, customInterval }: FormValues) => {
         const { t, interval: prevInterval } = this.props;
         const newInterval = customInterval ? customInterval * HOUR : interval;
 
@@ -49,17 +49,11 @@ class StatsConfig extends Component<StatsConfigProps> {
     render() {
         const {
             t,
-
             interval,
-
             customInterval,
-
             processing,
-
             processingReset,
-
             ignored,
-
             enabled,
         } = this.props;
 
@@ -73,10 +67,10 @@ class StatsConfig extends Component<StatsConfigProps> {
                             enabled,
                             ignored: ignored.join('\n'),
                         }}
-                        onSubmit={this.handleFormSubmit}
                         processing={processing}
                         processingReset={processingReset}
-                        handleReset={this.handleReset}
+                        onSubmit={this.handleFormSubmit}
+                        onReset={this.handleReset}
                     />
                 </div>
             </Card>