feat: use meta settings service if configured

Author: artemmufazalov

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 {INVERTED_DISKS_KEY} from '../../utils/constants';
 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>(INVERTED_DISKS_KEY);
+    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

@@ -5,8 +5,8 @@ import type * as DT100 from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
 
-import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
-import {useSetting} from '../../utils/hooks';
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+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(
-        CASE_SENSITIVE_JSON_SEARCH,
-        false,
+    const {value: caseSensitiveSearch, saveValue: setCaseSensitiveSearch} = useSetting<boolean>(
+        SETTING_KEYS.CASE_SENSITIVE_JSON_SEARCH,
     );
 
     const [collapsedState, setCollapsedState] = React.useState<CollapsedState>(() => {

src/components/NetworkTable/hooks.ts

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

src/components/PaginatedTable/ResizeablePaginatedTable.tsx

@@ -1,6 +1,7 @@
 import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
 
 import {useTableResize} from '../../utils/hooks/useTableResize';
+import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
 import type {PaginatedTableProps} from './PaginatedTable';
 import {PaginatedTable} from './PaginatedTable';
@@ -23,10 +24,15 @@ export function ResizeablePaginatedTable<T, F>({
     columns,
     ...props
 }: ResizeablePaginatedTableProps<T, F>) {
-    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+    const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
+        useTableResize(columnsWidthLSKey);
 
     const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
 
+    if (isTableWidthLoading) {
+        return <TableSkeleton />;
+    }
+
     return (
         <PaginatedTable
             columns={updatedColumns}

src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -44,7 +44,8 @@ export function ResizeableDataTable<T>({
     data,
     ...props
 }: ResizeableDataTableProps<T>) {
-    const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
+    const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
+        useTableResize(columnsWidthLSKey);
 
     const handleSort = React.useCallback(
         (params: SortOrder | SortOrder[] | undefined) => {
@@ -82,7 +83,7 @@ export function ResizeableDataTable<T>({
         };
     }, [settings]);
 
-    if (isLoading) {
+    if (isLoading || isTableWidthLoading) {
         return <TableSkeleton rows={loadingSkeletonRowsCount} />;
     }
 

src/containers/App/Providers.tsx

@@ -13,9 +13,9 @@ import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 import {ComponentsProvider} from '../../components/ComponentsProvider/ComponentsProvider';
 import {componentsRegistry as defaultComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
-import {THEME_KEY} from '../../utils/constants';
+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>(THEME_KEY);
+    const {value: theme} = useSetting<string | undefined>(SETTING_KEYS.THEME);
 
     return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 }

src/containers/AppWithClusters/utils/useAdditionalTenantsProps.tsx

@@ -1,12 +1,12 @@
 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 {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../../utils/constants';
-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,9 @@ export function useAdditionalTenantsProps({
     getDatabaseLinks,
 }: GetAdditionalTenantsProps) {
     const clusterInfo = useClusterBaseInfo();
-    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+    const {value: useClusterBalancerAsBackend} = useSetting<boolean>(
+        SETTING_KEYS.USE_CLUSTER_BALANCER_AS_BACKEND,
+    );
 
     const {balancer, monitoring, logging, name: clusterName} = clusterInfo;
 

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -6,9 +6,9 @@ import {AsideHeader, FooterItem} from '@gravity-ui/navigation';
 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 {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
-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>(ASIDE_HEADER_COMPACT_KEY);
+    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,9 +1,7 @@
 import {Keyboard} from '@gravity-ui/icons';
 import {Flex, Hotkey, Icon, Link, List, Text} from '@gravity-ui/uikit';
 
-import {settingsManager} from '../../../services/settings';
 import {cn} from '../../../utils/cn';
-import {LANGUAGE_KEY} from '../../../utils/constants';
 import {SHORTCUTS_HOTKEY} from '../hooks/useHotkeysPanel';
 import i18n from '../i18n';
 
@@ -16,11 +14,6 @@ export interface InformationPopupProps {
 }
 
 export function InformationPopup({onKeyboardShortcutsClick}: InformationPopupProps) {
-    const getDocumentationLink = () => {
-        const lang = settingsManager.readUserSettingsValue(LANGUAGE_KEY, navigator.language);
-        return lang === 'ru' ? 'https://ydb.tech/docs/ru/' : 'https://ydb.tech/docs/en/';
-    };
-
     return (
         <div className={b('content', {})}>
             <div className={b('docs')}>
@@ -32,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

@@ -8,13 +8,13 @@ import {
     useClusterDashboardAvailable,
 } 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 {EXPAND_CLUSTER_DASHBOARD} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks/useSetting';
 import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
 import i18n from '../i18n';
 import {getTotalStorageGroupsUsed} from '../utils';
@@ -40,7 +40,9 @@ interface ClusterOverviewProps {
 }
 
 export function ClusterOverview(props: ClusterOverviewProps) {
-    const [expandDashboard, setExpandDashboard] = useSetting<boolean>(EXPAND_CLUSTER_DASHBOARD);
+    const {value: expandDashboard, saveValue: setExpandDashboard} = useSetting<boolean>(
+        SETTING_KEYS.EXPAND_CLUSTER_DASHBOARD,
+    );
     const bridgeModeEnabled = useBridgeModeEnabled();
 
     const bridgePiles = React.useMemo(() => {