feat: use meta settings service if configured

src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 import {cn} from '../../utils/cn';
 import {getSeverityColor} from '../../utils/disks/helpers';
-import {useSetting} from '../../utils/hooks';
 
 import './DiskStateProgressBar.scss';
 
@@ -30,7 +30,7 @@ export function DiskStateProgressBar({
     content,
     className,
 }: DiskStateProgressBarProps) {
-    const [inverted] = useSetting<boolean | undefined>(SETTING_KEYS.INVERTED_DISKS);
+    const {value: inverted} = useSetting<boolean | undefined>(SETTING_KEYS.INVERTED_DISKS);
 
     const mods: Record<string, boolean | undefined> = {inverted, compact, faded, empty, inactive};
 

src/components/JsonViewer/JsonViewer.tsx

@@ -6,7 +6,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
 
 import {SETTING_KEYS} from '../../store/reducers/settings/constants';
-import {useSetting} from '../../utils/hooks';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
 import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
 
@@ -121,9 +121,8 @@ function JsonViewerComponent({
     toolbarClassName,
     withClipboardButton,
 }: JsonViewerComponentProps) {
-    const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
+    const {value: caseSensitiveSearch, saveValue: setCaseSensitiveSearch} = useSetting<boolean>(
         SETTING_KEYS.CASE_SENSITIVE_JSON_SEARCH,
-        false,
     );
 
     const [collapsedState, setCollapsedState] = React.useState<CollapsedState>(() => {

src/components/NetworkTable/hooks.ts

@@ -3,18 +3,18 @@ import {
     useViewerNodesHandlerHasNetworkStats,
 } from '../../store/reducers/capabilities/hooks';
 import {SETTING_KEYS} from '../../store/reducers/settings/constants';
-import {useSetting} from '../../utils/hooks';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 
 export function useShouldShowDatabaseNetworkTable() {
     const viewerNodesHasNetworkStats = useViewerNodesHandlerHasNetworkStats();
-    const [networkTableEnabled] = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
+    const {value: networkTableEnabled} = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
 
     return Boolean(viewerNodesHasNetworkStats && networkTableEnabled);
 }
 
 export function useShouldShowClusterNetworkTable() {
     const nodesHasWorkingClusterNetworkStats = useNodesHandlerHasWorkingClusterNetworkStats();
-    const [networkTableEnabled] = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
+    const {value: networkTableEnabled} = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
 
     return Boolean(nodesHasWorkingClusterNetworkStats && networkTableEnabled);
 }

src/containers/App/Providers.tsx

@@ -14,8 +14,8 @@ import {ComponentsProvider} from '../../components/ComponentsProvider/Components
 import {componentsRegistry as defaultComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 import {toaster} from '../../utils/createToast';
-import {useSetting} from '../../utils/hooks';
 
 import {AppTitleProvider} from './AppTitleContext';
 
@@ -57,7 +57,7 @@ export function Providers({
 }
 
 function Theme({children}: {children: React.ReactNode}) {
-    const [theme] = useSetting<string | undefined>(SETTING_KEYS.THEME);
+    const {value: theme} = useSetting<string | undefined>(SETTING_KEYS.THEME);
 
     return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 }

src/containers/AppWithClusters/utils/useAdditionalTenantsProps.tsx

@@ -2,11 +2,11 @@ import {isNil} from 'lodash';
 
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
 import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
+import {useSetting} from '../../../store/reducers/settings/useSetting';
 import type {AdditionalTenantsProps} from '../../../types/additionalProps';
 import type {ETenantType} from '../../../types/api/tenant';
 import type {GetDatabaseLinks} from '../../../uiFactory/types';
 import {uiFactory} from '../../../uiFactory/uiFactory';
-import {useSetting} from '../../../utils/hooks';
 import type {GetLogsLink} from '../../../utils/logs';
 import type {GetMonitoringLink} from '../../../utils/monitoring';
 import {prepareBackendFromBalancer} from '../../../utils/parseBalancer';
@@ -23,7 +23,7 @@ export function useAdditionalTenantsProps({
     getDatabaseLinks,
 }: GetAdditionalTenantsProps) {
     const clusterInfo = useClusterBaseInfo();
-    const [useClusterBalancerAsBackend] = useSetting<boolean>(
+    const {value: useClusterBalancerAsBackend} = useSetting<boolean>(
         SETTING_KEYS.USE_CLUSTER_BALANCER_AS_BACKEND,
     );
 

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -7,8 +7,8 @@ import type {IconData} from '@gravity-ui/uikit';
 import {useHistory} from 'react-router-dom';
 
 import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 import {cn} from '../../utils/cn';
-import {useSetting} from '../../utils/hooks';
 
 import {InformationPopup} from './InformationPopup';
 import {useHotkeysPanel} from './hooks/useHotkeysPanel';
@@ -76,7 +76,9 @@ export function AsideNavigation(props: AsideNavigationProps) {
 
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
     const [informationPopupVisible, setInformationPopupVisible] = React.useState(false);
-    const [compact, setIsCompact] = useSetting<boolean>(SETTING_KEYS.ASIDE_HEADER_COMPACT);
+    const {value: compact, saveValue: setIsCompact} = useSetting<boolean>(
+        SETTING_KEYS.ASIDE_HEADER_COMPACT,
+    );
 
     const toggleInformationPopup = () => setInformationPopupVisible((prev) => !prev);
 
@@ -110,7 +112,7 @@ export function AsideNavigation(props: AsideNavigationProps) {
                     onClick: () => history.push('/'),
                 }}
                 menuItems={props.menuItems}
-                compact={compact}
+                compact={Boolean(compact)}
                 onChangeCompact={setIsCompact}
                 className={b()}
                 renderContent={() => props.content}

src/containers/AsideNavigation/InformationPopup/InformationPopup.tsx

@@ -1,8 +1,6 @@
 import {Keyboard} from '@gravity-ui/icons';
 import {Flex, Hotkey, Icon, Link, List, Text} from '@gravity-ui/uikit';
 
-import {settingsManager} from '../../../services/settings';
-import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
 import {cn} from '../../../utils/cn';
 import {SHORTCUTS_HOTKEY} from '../hooks/useHotkeysPanel';
 import i18n from '../i18n';
@@ -16,14 +14,6 @@ export interface InformationPopupProps {
 }
 
 export function InformationPopup({onKeyboardShortcutsClick}: InformationPopupProps) {
-    const getDocumentationLink = () => {
-        const lang = settingsManager.readUserSettingsValue(
-            SETTING_KEYS.LANGUAGE,
-            navigator.language,
-        );
-        return lang === 'ru' ? 'https://ydb.tech/docs/ru/' : 'https://ydb.tech/docs/en/';
-    };
-
     return (
         <div className={b('content', {})}>
             <div className={b('docs')}>
@@ -35,7 +25,7 @@ export function InformationPopup({onKeyboardShortcutsClick}: InformationPopupPro
                         items={[
                             {
                                 text: i18n('help-center.item.documentation'),
-                                url: getDocumentationLink(),
+                                url: 'https://ydb.tech/docs',
                             },
                         ]}
                         filterable={false}

src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -9,13 +9,13 @@ import {
 } from '../../../store/reducers/capabilities/hooks';
 import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
 import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
+import {useSetting} from '../../../store/reducers/settings/useSetting';
 import type {AdditionalClusterProps} from '../../../types/additionalProps';
 import {isClusterInfoV2, isClusterInfoV5} from '../../../types/api/cluster';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
 import {valueIsDefined} from '../../../utils';
 import {useResizeObserverTrigger} from '../../../utils/hooks/useResizeObserverTrigger';
-import {useSetting} from '../../../utils/hooks/useSetting';
 import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
 import i18n from '../i18n';
 import {getTotalStorageGroupsUsed} from '../utils';
@@ -41,7 +41,7 @@ interface ClusterOverviewProps {
 }
 
 export function ClusterOverview(props: ClusterOverviewProps) {
-    const [expandDashboard, setExpandDashboard] = useSetting<boolean>(
+    const {value: expandDashboard, saveValue: setExpandDashboard} = useSetting<boolean>(
         SETTING_KEYS.EXPAND_CLUSTER_DASHBOARD,
     );
 

src/containers/Cluster/ClusterOverview/components/ClusterMetricsNetwork.tsx

@@ -1,7 +1,7 @@
 import {DoughnutMetrics} from '../../../../components/DoughnutMetrics/DoughnutMetrics';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
+import {useSetting} from '../../../../store/reducers/settings/useSetting';
 import {formatBytes} from '../../../../utils/bytesParsers';
-import {useSetting} from '../../../../utils/hooks/useSetting';
 import i18n from '../../i18n';
 import type {ClusterMetricsBaseProps} from '../shared';
 import {calculateBaseDiagramValues} from '../utils';
@@ -23,7 +23,9 @@ export function ClusterMetricsNetwork({
     collapsed,
     ...rest
 }: ClusterMetricsNetworkProps) {
-    const [showNetworkUtilization] = useSetting<boolean>(SETTING_KEYS.SHOW_NETWORK_UTILIZATION);
+    const {value: showNetworkUtilization} = useSetting<boolean>(
+        SETTING_KEYS.SHOW_NETWORK_UTILIZATION,
+    );
     if (!showNetworkUtilization) {
         return null;
     }

src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx

@@ -10,10 +10,11 @@ import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/Re
 import {hotKeysApi} from '../../../../store/reducers/hotKeys/hotKeys';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
+import {useSetting} from '../../../../store/reducers/settings/useSetting';
 import type {HotKey} from '../../../../types/api/hotkeys';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useAutoRefreshInterval, useSetting} from '../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../utils/hooks';
 
 import i18n from './i18n';
 
@@ -121,7 +122,9 @@ export function HotKeys({path, database, databaseFullPath}: HotKeysProps) {
 }
 
 function HelpCard() {
-    const [helpHidden, setHelpHidden] = useSetting(SETTING_KEYS.IS_HOTKEYS_HELP_HIDDEN);
+    const {value: helpHidden, saveValue: setHelpHidden} = useSetting(
+        SETTING_KEYS.IS_HOTKEYS_HELP_HIDDEN,
+    );
 
     if (helpHidden) {
         return null;

src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx

@@ -5,6 +5,7 @@ import {useLocation} from 'react-router-dom';
 
 import {getTenantPath, parseQuery} from '../../../../../routes';
 import {SETTING_KEYS} from '../../../../../store/reducers/settings/constants';
+import {useSetting} from '../../../../../store/reducers/settings/useSetting';
 import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
 import type {
@@ -14,7 +15,6 @@ import type {
 } from '../../../../../store/reducers/tenants/utils';
 import type {ETenantType} from '../../../../../types/api/tenant';
 import {cn} from '../../../../../utils/cn';
-import {useSetting} from '../../../../../utils/hooks';
 import {calculateMetricAggregates} from '../../../../../utils/metrics';
 // no direct legend formatters needed here – handled in subcomponents
 import {TenantTabsGroups} from '../../../TenantPages';
@@ -99,7 +99,9 @@ export function MetricsTabs({
     );
 
     // Pass raw network values; DedicatedMetricsTabs computes percent and legend
-    const [showNetworkUtilization] = useSetting<boolean>(SETTING_KEYS.SHOW_NETWORK_UTILIZATION);
+    const {value: showNetworkUtilization} = useSetting<boolean>(
+        SETTING_KEYS.SHOW_NETWORK_UTILIZATION,
+    );
 
     // card variant is handled within subcomponents
 

src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TenantNetwork.tsx

@@ -2,9 +2,10 @@ import {Flex} from '@gravity-ui/uikit';
 
 import {getTenantPath} from '../../../../../routes';
 import {SETTING_KEYS} from '../../../../../store/reducers/settings/constants';
+import {useSetting} from '../../../../../store/reducers/settings/useSetting';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {cn} from '../../../../../utils/cn';
-import {useSearchQuery, useSetting} from '../../../../../utils/hooks';
+import {useSearchQuery} from '../../../../../utils/hooks';
 import {TenantTabsGroups} from '../../../TenantPages';
 import {StatsWrapper} from '../StatsWrapper/StatsWrapper';
 import i18n from '../i18n';
@@ -22,7 +23,7 @@ interface TenantNetworkProps {
 
 export function TenantNetwork({database}: TenantNetworkProps) {
     const query = useSearchQuery();
-    const [networkTableEnabled] = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
+    const {value: networkTableEnabled} = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
 
     const tab = networkTableEnabled
         ? {[TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.network}

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -12,18 +12,15 @@ import {
     TENANT_METRICS_TABS_IDS,
     TENANT_PAGES_IDS,
 } from '../../../../store/reducers/tenant/constants';
-import {
-    setDiagnosticsTab,
-    setTenantPage,
-    tenantApi,
-} from '../../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab, tenantApi} from '../../../../store/reducers/tenant/tenant';
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {getInfoTabLinks} from '../../../../utils/additionalProps';
 import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
+import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 
 import {HealthcheckPreview} from './Healthcheck/HealthcheckPreview';
@@ -53,6 +50,8 @@ export function TenantOverview({
     const clusterName = useClusterNameFromQuery();
     const dispatch = useTypedDispatch();
 
+    const {handleTenantPageChange} = useTenantPage();
+
     const isMetaDatabasesAvailable = useDatabasesAvailable();
 
     const {currentData: tenant, isFetching} = tenantApi.useGetTenantInfoQuery(
@@ -196,7 +195,7 @@ export function TenantOverview({
     );
 
     const handleOpenMonitoring = () => {
-        dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+        handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
         dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.monitoring));
     };
 

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -3,10 +3,10 @@ import {useThemeValue} from '@gravity-ui/uikit';
 import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import type {AdditionalTenantsProps} from '../../../types/additionalProps';
 import {cn} from '../../../utils/cn';
-import {useTypedSelector} from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import {Query} from '../Query/Query';
 import {TenantNavigation} from '../TenantNavigation/TenantNavigation';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 
 import './ObjectGeneral.scss';
 
@@ -19,7 +19,7 @@ interface ObjectGeneralProps {
 function ObjectGeneral({additionalTenantProps}: ObjectGeneralProps) {
     const theme = useThemeValue();
 
-    const {tenantPage} = useTypedSelector((state) => state.tenant);
+    const {tenantPage} = useTenantPage();
 
     const renderPageContent = () => {
         switch (tenantPage) {

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -36,6 +36,7 @@ import {prepareSystemViewType} from '../../../utils/schema';
 import {EntityTitle} from '../EntityTitle/EntityTitle';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {useCurrentSchema} from '../TenantContext';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups} from '../TenantPages';
 import {useTenantQueryParams} from '../useTenantQueryParams';
 import {getSummaryControls} from '../utils/controls';
@@ -91,6 +92,8 @@ export function ObjectSummary({
         (state) => state.tenant,
     );
 
+    const {handleTenantPageChange} = useTenantPage();
+
     const location = useLocation();
 
     const queryParams = qs.parse(location.search, {
@@ -411,7 +414,7 @@ export function ObjectSummary({
                 {showPreview &&
                     getSummaryControls(
                         dispatch,
-                        {setActivePath: handleSchemaChange},
+                        {setActivePath: handleSchemaChange, setTenantPage: handleTenantPageChange},
                         'm',
                     )(path, 'preview')}
                 <ClipboardButton

src/containers/Tenant/ObjectSummary/SchemaActions.tsx

@@ -4,16 +4,20 @@ import {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGES_IDS,
 } from '../../../store/reducers/tenant/constants';
-import {setDiagnosticsTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {useTenantPage} from '../TenantNavigation/useTenantNavigation';
 
 import i18n from './i18n';
 
 import ArrowRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
 
 export function SchemaActions() {
     const dispatch = useTypedDispatch();
-    const {diagnosticsTab, tenantPage} = useTypedSelector((state) => state.tenant);
+    const {diagnosticsTab} = useTypedSelector((state) => state.tenant);
+
+    const {tenantPage, handleTenantPageChange} = useTenantPage();
+
     const diagnosticsSchemaActive =
         tenantPage === TENANT_PAGES_IDS.diagnostics &&
         diagnosticsTab === TENANT_DIAGNOSTICS_TABS_IDS.schema;
@@ -24,7 +28,7 @@ export function SchemaActions() {
                 <Button
                     title={i18n('action_openInDiagnostics')}
                     onClick={() => {
-                        dispatch(setTenantPage(TENANT_PAGES_IDS.diagnostics));
+                        handleTenantPageChange(TENANT_PAGES_IDS.diagnostics);
                         dispatch(setDiagnosticsTab(TENANT_DIAGNOSTICS_TABS_IDS.schema));
                     }}
                     size="s"