all: sync with master

client/src/components/Settings/LogsConfig/Form.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
-    change,
-    Field,
-    formValueSelector,
-    reduxForm,
-} from 'redux-form';
+import { change, Field, formValueSelector, reduxForm } from 'redux-form';
 import { connect } from 'react-redux';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
@@ -17,6 +11,7 @@ import {
     renderInputField,
     renderRadioField,
 } from '../../../helpers/form';
+
 import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
 import {
     FORM_NAME,
@@ -30,7 +25,7 @@ import {
 } from '../../../helpers/constants';
 import '../FormButton.css';
 
-const getIntervalTitle = (interval, t) => {
+const getIntervalTitle = (interval: any, t: any) => {
     switch (interval) {
         case RETENTION_CUSTOM:
             return t('settings_custom');
@@ -43,20 +38,34 @@ const getIntervalTitle = (interval, t) => {
     }
 };
 
-const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => (
-    <Field
-        key={interval}
-        name="interval"
-        type="radio"
-        component={renderRadioField}
-        value={interval}
-        placeholder={getIntervalTitle(interval, t)}
-        normalize={toNumber}
-        disabled={processing}
-    />
-));
+const getIntervalFields = (processing: any, t: any, toNumber: any) =>
+    QUERY_LOG_INTERVALS_DAYS.map((interval) => (
+        <Field
+            key={interval}
+            name="interval"
+            type="radio"
+            component={renderRadioField}
+            value={interval}
+            placeholder={getIntervalTitle(interval, t)}
+            normalize={toNumber}
+            disabled={processing}
+        />
+    ));
 
-let Form = (props) => {
+interface FormProps {
+    handleSubmit: (...args: unknown[]) => string;
+    handleClear: (...args: unknown[]) => unknown;
+    submitting: boolean;
+    invalid: boolean;
+    processing: boolean;
+    processingClear: boolean;
+    t: (...args: unknown[]) => string;
+    interval?: number;
+    customInterval?: number;
+    dispatch: (...args: unknown[]) => unknown;
+}
+
+let Form = (props: FormProps) => {
     const {
         handleSubmit,
         submitting,
@@ -87,6 +96,7 @@ let Form = (props) => {
                     disabled={processing}
                 />
             </div>
+
             <div className="form__group form__group--settings">
                 <Field
                     name="anonymize_client_ip"
@@ -97,9 +107,11 @@ let Form = (props) => {
                     disabled={processing}
                 />
             </div>
+
             <label className="form__label">
                 <Trans>query_log_retention</Trans>
             </label>
+
             <div className="form__group form__group--settings">
                 <div className="custom-controls-stacked">
                     <Field
@@ -107,19 +119,15 @@ let Form = (props) => {
                         name="interval"
                         type="radio"
                         component={renderRadioField}
-                        value={QUERY_LOG_INTERVALS_DAYS.includes(interval)
-                            ? RETENTION_CUSTOM
-                            : interval
-                        }
+                        value={QUERY_LOG_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
                         placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
                         normalize={toFloatNumber}
                         disabled={processing}
                     />
                     {!QUERY_LOG_INTERVALS_DAYS.includes(interval) && (
                         <div className="form__group--input">
-                            <div className="form__desc form__desc--top">
-                                {t('custom_rotation_input')}
-                            </div>
+                            <div className="form__desc form__desc--top">{t('custom_rotation_input')}</div>
+
                             <Field
                                 key={RETENTION_CUSTOM_INPUT}
                                 name={CUSTOM_INTERVAL}
@@ -136,12 +144,15 @@ let Form = (props) => {
                     {getIntervalFields(processing, t, toFloatNumber)}
                 </div>
             </div>
+
             <label className="form__label form__label--with-desc">
                 <Trans>ignore_domains_title</Trans>
             </label>
+
             <div className="form__desc form__desc--top">
                 <Trans>ignore_domains_desc_query</Trans>
             </div>
+
             <div className="form__group form__group--settings">
                 <Field
                     name="ignored"
@@ -153,25 +164,25 @@ let Form = (props) => {
                     normalizeOnBlur={trimLinesAndRemoveEmpty}
                 />
             </div>
+
             <div className="mt-5">
                 <button
                     type="submit"
                     className="btn btn-success btn-standard btn-large"
                     disabled={
-                        submitting
-                        || invalid
-                        || processing
-                        || (!QUERY_LOG_INTERVALS_DAYS.includes(interval) && !customInterval)
-                    }
-                >
+                        submitting ||
+                        invalid ||
+                        processing ||
+                        (!QUERY_LOG_INTERVALS_DAYS.includes(interval) && !customInterval)
+                    }>
                     <Trans>save_btn</Trans>
                 </button>
+
                 <button
                     type="button"
                     className="btn btn-outline-secondary btn-standard form__button"
                     onClick={() => handleClear()}
-                    disabled={processingClear}
-                >
+                    disabled={processingClear}>
                     <Trans>query_log_clear</Trans>
                 </button>
             </div>
@@ -179,19 +190,6 @@ let Form = (props) => {
     );
 };
 
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    handleClear: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    processing: PropTypes.bool.isRequired,
-    processingClear: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    interval: PropTypes.number,
-    customInterval: PropTypes.number,
-    dispatch: PropTypes.func.isRequired,
-};
-
 const selector = formValueSelector(FORM_NAME.LOG_CONFIG);
 
 Form = connect((state) => {
@@ -203,7 +201,4 @@ Form = connect((state) => {
     };
 })(Form);
 
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.LOG_CONFIG }),
-])(Form);
+export default flow([withTranslation(), reduxForm({ form: FORM_NAME.LOG_CONFIG })])(Form);

client/src/components/Settings/LogsConfig/index.tsx

@@ -1,13 +1,26 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
+
 import Form from './Form';
 import { HOUR } from '../../../helpers/constants';
 
-class LogsConfig extends Component {
-    handleFormSubmit = (values) => {
+interface LogsConfigProps {
+    interval: number;
+    customInterval?: number;
+    enabled: boolean;
+    anonymize_client_ip: boolean;
+    processing: boolean;
+    ignored: unknown[];
+    processingClear: boolean;
+    setLogsConfig: (...args: unknown[]) => unknown;
+    clearLogs: (...args: unknown[]) => unknown;
+    t: (...args: unknown[]) => string;
+}
+
+class LogsConfig extends Component<LogsConfigProps> {
+    handleFormSubmit = (values: any) => {
         const { t, interval: prevInterval } = this.props;
         const { interval, customInterval, ...rest } = values;
 
@@ -40,21 +53,24 @@ class LogsConfig extends Component {
     render() {
         const {
             t,
+
             enabled,
+
             interval,
+
             processing,
+
             processingClear,
+
             anonymize_client_ip,
+
             ignored,
+
             customInterval,
         } = this.props;
 
         return (
-            <Card
-                title={t('query_log_configuration')}
-                bodyType="card-body box-body--settings"
-                id="logs-config"
-            >
+            <Card title={t('query_log_configuration')} bodyType="card-body box-body--settings" id="logs-config">
                 <div className="form">
                     <Form
                         initialValues={{
@@ -75,17 +91,4 @@ class LogsConfig extends Component {
     }
 }
 
-LogsConfig.propTypes = {
-    interval: PropTypes.number.isRequired,
-    customInterval: PropTypes.number,
-    enabled: PropTypes.bool.isRequired,
-    anonymize_client_ip: PropTypes.bool.isRequired,
-    processing: PropTypes.bool.isRequired,
-    ignored: PropTypes.array.isRequired,
-    processingClear: PropTypes.bool.isRequired,
-    setLogsConfig: PropTypes.func.isRequired,
-    clearLogs: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(LogsConfig);