review fix

Author: IldarKamalov

client_v2/.eslintrc.cjs

@@ -40,16 +40,7 @@ module.exports = {
                 argsIgnorePattern: '^_',
             },
         ],
-        'import/extensions': [
-            'error',
-            'ignorePackages',
-            {
-                js: 'never',
-                jsx: 'never',
-                ts: 'never',
-                tsx: 'never',
-            },
-        ],
+        'import/extensions': 'off',
         'class-methods-use-this': 'off',
         'no-shadow': 'off',
         camelcase: 'off',

client_v2/package-lock.json

@@ -85,7 +85,6 @@
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.5.5",
-        "eslint-import-resolver-webpack": "^0.13.10",
         "eslint-plugin-jsx-a11y": "^6.8.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react": "^7.34.1",

client_v2/package.json

@@ -27,10 +27,10 @@ export const Radio = <T extends number | string | boolean = string>({
         {options.map((o) => (
             <label
                 key={`${o.value}`}
-                htmlFor={name ? `${name}-${String(o.value)}` : String(o.value)}
+                htmlFor={name ? `${name}-${o.value}` : String(o.value)}
                 className={cn(s.radio, className)}>
                 <input
-                    id={name ? `${name}-${String(o.value)}` : String(o.value)}
+                    id={name ? `${name}-${o.value}` : String(o.value)}
                     type="radio"
                     className={s.input}
                     name={name}

client_v2/src/common/controls/Radio/Radio.tsx

@@ -3,6 +3,7 @@
     width: 100%;
 
     @media (min-width: 768px) {
+        max-width: 100%;
         width: 720px;
     }
 }

client_v2/src/common/ui/ConfirmDialog/ConfirmDialog.module.pcss

@@ -7,7 +7,7 @@ import { Sidebar } from 'panel/common/ui/Sidebar';
 import { Icons } from 'panel/common/ui/Icons';
 import { Footer } from 'panel/common/ui/Footer';
 import { Header } from 'panel/common/ui/Header';
-import Settings from 'panel/containers/Settings';
+import { Settings } from 'panel/components/Settings';
 
 import { LocalesType } from 'panel/common/intl';
 import Toasts from '../Toasts';

client_v2/src/components/App/index.tsx

@@ -6,6 +6,8 @@ import theme from 'panel/lib/theme';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import { Link } from 'panel/common/ui/Link';
 
+import { setFiltersConfig } from 'panel/actions/filtering';
+import { useDispatch } from 'react-redux';
 import { SwitchGroup } from './SettingsGroup';
 
 export type FormValues = {
@@ -15,11 +17,12 @@ export type FormValues = {
 
 type Props = {
     initialValues: FormValues;
-    setFiltersConfig: (values: FormValues) => void;
     processing: boolean;
 };
 
-export const FiltersConfig = ({ initialValues, setFiltersConfig, processing }: Props) => {
+export const FiltersConfig = ({ initialValues, processing }: Props) => {
+    const dispatch = useDispatch();
+
     const { watch, control, setValue } = useForm({
         mode: 'onBlur',
         defaultValues: initialValues,
@@ -28,7 +31,7 @@ export const FiltersConfig = ({ initialValues, setFiltersConfig, processing }: P
     const enabled = watch('enabled');
 
     useEffect(() => {
-        setFiltersConfig({ ...initialValues, enabled });
+        dispatch(setFiltersConfig({ ...initialValues, enabled }));
     }, [enabled]);
 
     return (

client_v2/src/components/Settings/FiltersConfig.tsx

@@ -31,7 +31,7 @@ export const IgnoredDomains = ({ control, processing, ignoreEnabled, setValue, s
             onChange={(e) => setValue('ignore_enabled', e.target.checked)}
             disabled={processing}>
             <Controller
-                name={'ignored'}
+                name="ignored"
                 control={control}
                 render={({ field, fieldState }) => (
                     <Textarea
@@ -71,7 +71,7 @@ export const IgnoredDomains = ({ control, processing, ignoreEnabled, setValue, s
                                 </a>
                             </div>
                         }
-                        placeholder={'example.com\n*.example.com\n||example.com^'}
+                        placeholder="example.com\n*.example.com\n||example.com^"
                         size="large"
                         disabled={processing || !ignoreEnabled}
                         errorMessage={fieldState.error?.message}

client_v2/src/components/Settings/IgnoredDomains/IgnoredDomains.tsx

@@ -4,6 +4,8 @@ import { ConfirmDialog } from 'panel/common/ui/ConfirmDialog';
 import intl from 'panel/common/intl';
 import { HOUR } from 'panel/helpers/constants';
 import { formatIntervalText } from 'panel/components/Settings/helpers';
+import { useDispatch } from 'react-redux';
+import { clearLogs, setLogsConfig } from 'panel/actions/queryLogs';
 import { Form, FormValues } from './Form';
 
 export type LogsConfigPayload = {
@@ -22,8 +24,6 @@ type Props = {
     processing: boolean;
     ignored: string[];
     processingClear: boolean;
-    setLogsConfig: (values: LogsConfigPayload) => unknown;
-    clearLogs: () => void;
 };
 
 export const LogsConfig = ({
@@ -34,9 +34,9 @@ export const LogsConfig = ({
     processing,
     processingClear,
     ignored,
-    setLogsConfig,
-    clearLogs,
 }: Props) => {
+    const dispatch = useDispatch();
+
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
     const [confirmConfig, setConfirmConfig] = useState<LogsConfigPayload | null>(null);
 
@@ -49,7 +49,7 @@ export const LogsConfig = ({
     };
 
     const handleClearConfirm = () => {
-        clearLogs();
+        dispatch(clearLogs());
         handleClose();
     };
 
@@ -69,7 +69,7 @@ export const LogsConfig = ({
             return;
         }
 
-        setLogsConfig(data);
+        dispatch(setLogsConfig(data));
     };
 
     return (
@@ -91,7 +91,7 @@ export const LogsConfig = ({
                 <ConfirmDialog
                     onClose={() => setConfirmConfig(null)}
                     onConfirm={() => {
-                        setLogsConfig(confirmConfig);
+                        dispatch(setLogsConfig(confirmConfig));
                         setConfirmConfig(null);
                     }}
                     buttonText={intl.getMessage('settings_yes_decrease')}

client_v2/src/components/Settings/LogsConfig/LogsConfig.tsx

@@ -26,10 +26,16 @@ export const RetentionCustomInput = <TFormValues extends { customInterval?: numb
     placeholder,
 }: Props<TFormValues>) => {
     const inputRef = useRef<HTMLInputElement>(null);
+    const prevIntervalRef = useRef(intervalValue);
 
     useEffect(() => {
-        if (intervalValue === RETENTION_CUSTOM && !processing) {
-            inputRef.current?.focus();
+        const wasCustom = prevIntervalRef.current === RETENTION_CUSTOM;
+        const isCustom = intervalValue === RETENTION_CUSTOM;
+
+        prevIntervalRef.current = intervalValue;
+
+        if (!wasCustom && isCustom && !processing) {
+            inputRef.current?.focus({ preventScroll: true });
         }
     }, [intervalValue, processing]);
 
@@ -51,11 +57,7 @@ export const RetentionCustomInput = <TFormValues extends { customInterval?: numb
                         }}
                         onBlur={field.onBlur}
                         disabled={processing || intervals.includes(intervalValue)}
-                        error={
-                            intervalValue === RETENTION_CUSTOM &&
-                            fieldState.isTouched &&
-                            String(field.value ?? '').trim() === ''
-                        }
+                        error={!!fieldState.error}
                         min={RETENTION_RANGE.MIN}
                         max={RETENTION_RANGE.MAX}
                     />