add user-filter-enabled button to fullscreen user rules

Extension/src/pages/common/components/UserRulesEditor/UserRulesEditor.jsx

@@ -1,21 +1,25 @@
 import React, {
+    useState,
     useContext,
     useEffect,
     useRef,
     useCallback,
 } from 'react';
 import { observer } from 'mobx-react';
 import { Range } from 'ace-builds';
+import debounce from 'lodash/debounce';
 import { SimpleRegex } from '@adguard/tsurlfilter/dist/es/simple-regex';
 
 import { userRulesEditorStore } from './UserRulesEditorStore';
 import { Editor } from '../Editor';
 import { UserRulesSavingButton } from './UserRulesSavingButton';
 import { reactTranslator } from '../../../../common/translators/reactTranslator';
 import { Popover } from '../ui/Popover';
+import { Checkbox } from '../ui/Checkbox';
 import { Icon } from '../ui/Icon';
 import { messenger } from '../../../services/messenger';
 import { MESSAGE_TYPES, NOTIFIER_TYPES } from '../../../../common/constants';
+import { HANDLER_DELAY_MS } from '../../constants';
 import { handleFileUpload } from '../../../helpers';
 import { log } from '../../../../common/log';
 import { ToggleWrapButton } from './ToggleWrapButton';
@@ -27,6 +31,7 @@ import { exportData, ExportTypes } from '../../utils/export';
  */
 export const UserRulesEditor = observer(({ fullscreen, uiStore }) => {
     const store = useContext(userRulesEditorStore);
+    const [userFilterEnabled, setUserFilterEnabledSettingId] = useState(false);
 
     const editorRef = useRef(null);
     const inputRef = useRef(null);
@@ -40,6 +45,7 @@ export const UserRulesEditor = observer(({ fullscreen, uiStore }) => {
     useEffect(() => {
         (async () => {
             await store.requestSettingsData();
+            setUserFilterEnabledSettingId(store.userFilterEnabled);
         })();
     }, [store]);
 
@@ -291,6 +297,10 @@ export const UserRulesEditor = observer(({ fullscreen, uiStore }) => {
         window.close();
     };
 
+    const handleUserRulesToggle = debounce((e) => {
+        store.updateSetting(e.id, e.data);
+    }, HANDLER_DELAY_MS);
+
     const fullscreenTooltipText = fullscreen
         ? reactTranslator.getMessage('options_editor_close_fullscreen_button_tooltip')
         : reactTranslator.getMessage('options_editor_open_fullscreen_button_tooltip');
@@ -307,6 +317,20 @@ export const UserRulesEditor = observer(({ fullscreen, uiStore }) => {
             />
             <div className="actions actions--divided">
                 <div className="actions__group">
+                    {
+                        fullscreen && (
+                            <>
+                                <div className="title__inner">
+                                    <h2 className="title">{reactTranslator.getMessage('fullscreen_user_rules_title')}</h2>
+                                </div>
+                                <Checkbox
+                                    id="user-filter-enabled"
+                                    handler={handleUserRulesToggle}
+                                    value={userFilterEnabled}
+                                />
+                            </>
+                        )
+                    }
                     <UserRulesSavingButton onClick={saveClickHandler} />
                     <input
                         type="file"

Extension/src/pages/common/components/UserRulesEditor/UserRulesEditorStore.js

@@ -102,6 +102,16 @@ class UserRulesEditorStore {
         return this.userRulesEditorWrap;
     }
 
+    @computed
+    get userFilterEnabledSettingId() {
+        return this.settings.names.USER_FILTER_ENABLED;
+    }
+
+    @computed
+    get userFilterEnabled() {
+        return this.settings.values[this.userFilterEnabledSettingId];
+    }
+
     // eslint-disable-next-line class-methods-use-this
     async saveUserRules(value) {
         savingService.send(SAVING_FSM_EVENTS.SAVE, { value });

Extension/src/pages/common/constants.js

@@ -1 +1,2 @@
 export const MIN_FILTERS_UPDATE_DISPLAY_DURATION = 2000;
+export const HANDLER_DELAY_MS = 2000; // less time leads to interface freeze

Extension/src/pages/options/components/Settings/Setting.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from './Checkbox';
+import { Checkbox } from '../../../common/components/ui/Checkbox';
 import { Select } from '../../../common/components/ui/Select';
 import { TextInput } from './TextInput';
 import { Textarea } from './Textarea';

Extension/src/pages/options/components/UserRules/UserRulesSwitcher.jsx

@@ -4,8 +4,7 @@ import debounce from 'lodash/debounce';
 
 import { rootStore } from '../../stores/RootStore';
 import { Setting, SETTINGS_TYPES } from '../Settings/Setting';
-
-const HANDLER_DELAY_MS = 2000; // less time leads to interface freeze
+import { HANDLER_DELAY_MS } from '../../../common/constants';
 
 export const UserRulesSwitcher = observer(() => {
     const { settingsStore } = useContext(rootStore);