Pull request 2632: AGDNS-3866 fix browsing security and parental control settings translations

Squashed commit of the following:

commit 8a12d4f
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 14 17:15:22 2026 +0300

    changelog

commit 6443155
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 14 17:13:38 2026 +0300

    AGDNS-3866 fix browsing security and parental control translations

Author: IldarKamalov

CHANGELOG.md

@@ -61,6 +61,8 @@ In this release, the schema version has changed from 33 to 34.
 
 ### Fixed
 
+- Safe Browsing and Parental Control labels on the General Settings page not updating after changing the UI language.
+
 - Incorrect forwarding of root domain requests when domain-specific upstreams are configured ([#7058]).
 
 - The strict SNI check setting is not persisted when the TLS configuration is changed ([#8327]).

client/src/actions/index.tsx

@@ -79,27 +79,17 @@ export const initSettingsRequest = createAction('SETTINGS_INIT_REQUEST');
 export const initSettingsFailure = createAction('SETTINGS_INIT_FAILURE');
 export const initSettingsSuccess = createAction('SETTINGS_INIT_SUCCESS');
 
-export const initSettings =
-    (
-        settingsList = {
-            safebrowsing: {},
-            parental: {},
-        },
-    ) =>
-    async (dispatch: any) => {
+export const initSettings = () => async (dispatch: any) => {
         dispatch(initSettingsRequest());
         try {
             const safebrowsingStatus = await apiClient.getSafebrowsingStatus();
             const parentalStatus = await apiClient.getParentalStatus();
             const safesearchStatus = await apiClient.getSafesearchStatus();
-            const { safebrowsing, parental } = settingsList;
             const newSettingsList = {
                 safebrowsing: {
-                    ...safebrowsing,
                     enabled: safebrowsingStatus.enabled,
                 },
                 parental: {
-                    ...parental,
                     enabled: parentalStatus.enabled,
                 },
                 safesearch: {

client/src/components/Settings/index.tsx

@@ -16,29 +16,10 @@ import PageTitle from '../ui/PageTitle';
 
 import Card from '../ui/Card';
 
-import { getObjectKeysSorted, captitalizeWords } from '../../helpers/helpers';
+import { captitalizeWords } from '../../helpers/helpers';
 import './Settings.css';
 import { SettingsData } from '../../initialState';
 
-const ORDER_KEY = 'order';
-
-const SETTINGS = {
-    safebrowsing: {
-        enabled: false,
-        title: i18next.t('use_adguard_browsing_sec'),
-        subtitle: i18next.t('use_adguard_browsing_sec_hint'),
-        testId: 'safebrowsing',
-        [ORDER_KEY]: 0,
-    },
-    parental: {
-        enabled: false,
-        title: i18next.t('use_adguard_parental'),
-        subtitle: i18next.t('use_adguard_parental_hint'),
-        testId: 'parental',
-        [ORDER_KEY]: 1,
-    },
-};
-
 interface SettingsProps {
     initSettings: (...args: unknown[]) => unknown;
     settings: SettingsData;
@@ -82,7 +63,7 @@ interface SettingsProps {
 
 class Settings extends Component<SettingsProps> {
     componentDidMount() {
-        this.props.initSettings(SETTINGS);
+        this.props.initSettings();
 
         this.props.getStatsConfig();
 
@@ -91,31 +72,9 @@ class Settings extends Component<SettingsProps> {
         this.props.getFilteringStatus();
     }
 
-    renderSettings = (settings: any) =>
-        getObjectKeysSorted(SETTINGS, ORDER_KEY).map((key: any) => {
-            const setting = settings[key];
-            const { enabled, title, subtitle, testId } = setting;
-
-            return (
-                <div key={key} className="form__group form__group--checkbox">
-                    <Checkbox
-                        data-testid={testId}
-                        value={enabled}
-                        title={title}
-                        subtitle={subtitle}
-                        onChange={(checked) => this.props.toggleSetting(key, !checked)}
-                    />
-                </div>
-            );
-        });
-
     renderSafeSearch = () => {
-        const {
-            settings: {
-                settingsList: { safesearch },
-            },
-        } = this.props;
-        const { enabled } = safesearch || {};
+        const safesearch = this.props.settings.settingsList?.safesearch || {};
+        const { enabled } = safesearch;
         const searches = { ...(safesearch || {}) };
         delete searches.enabled;
 
@@ -164,6 +123,8 @@ class Settings extends Component<SettingsProps> {
             setFiltersConfig,
             t,
         } = this.props;
+        const safebrowsingEnabled = settings.settingsList?.safebrowsing?.enabled ?? false;
+        const parentalEnabled = settings.settingsList?.parental?.enabled ?? false;
 
         const isDataReady = !settings.processing && !stats.processingGetConfig && !queryLogs.processingGetConfig;
 
@@ -187,7 +148,24 @@ class Settings extends Component<SettingsProps> {
                                             processing={filtering.processingSetConfig}
                                             setFiltersConfig={setFiltersConfig}
                                         />
-                                        {this.renderSettings(settings.settingsList)}
+                                        <div className="form__group form__group--checkbox">
+                                            <Checkbox
+                                                data-testid="safebrowsing"
+                                                value={safebrowsingEnabled}
+                                                title={t('use_adguard_browsing_sec')}
+                                                subtitle={t('use_adguard_browsing_sec_hint')}
+                                                onChange={(checked) => this.props.toggleSetting('safebrowsing', !checked)}
+                                            />
+                                        </div>
+                                        <div className="form__group form__group--checkbox">
+                                            <Checkbox
+                                                data-testid="parental"
+                                                value={parentalEnabled}
+                                                title={t('use_adguard_parental')}
+                                                subtitle={t('use_adguard_parental_hint')}
+                                                onChange={(checked) => this.props.toggleSetting('parental', !checked)}
+                                            />
+                                        </div>
                                         {this.renderSafeSearch()}
                                     </div>
                                 </Card>