feat: configure meta settings, use for table columns width

src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
 import {cn} from '../../utils/cn';
-import {INVERTED_DISKS_KEY} from '../../utils/constants';
 import {getSeverityColor} from '../../utils/disks/helpers';
 import {useSetting} from '../../utils/hooks';
 
@@ -30,7 +30,7 @@ export function DiskStateProgressBar({
     content,
     className,
 }: DiskStateProgressBarProps) {
-    const [inverted] = useSetting<boolean | undefined>(INVERTED_DISKS_KEY);
+    const [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,7 +5,7 @@ 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 {SETTING_KEYS} from '../../store/reducers/settings/constants';
 import {useSetting} from '../../utils/hooks';
 import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
 import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
@@ -122,7 +122,7 @@ function JsonViewerComponent({
     withClipboardButton,
 }: JsonViewerComponentProps) {
     const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
-        CASE_SENSITIVE_JSON_SEARCH,
+        SETTING_KEYS.CASE_SENSITIVE_JSON_SEARCH,
         false,
     );
 

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 {SETTING_KEYS} from '../../store/reducers/settings/constants';
 import {useSetting} from '../../utils/hooks';
 
 export function useShouldShowDatabaseNetworkTable() {
     const viewerNodesHasNetworkStats = useViewerNodesHandlerHasNetworkStats();
-    const [networkTableEnabled] = useSetting(ENABLE_NETWORK_TABLE_KEY);
+    const [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 [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,7 +13,7 @@ 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 {toaster} from '../../utils/createToast';
 import {useSetting} from '../../utils/hooks';
 
@@ -57,7 +57,7 @@ export function Providers({
 }
 
 function Theme({children}: {children: React.ReactNode}) {
-    const [theme] = useSetting<string | undefined>(THEME_KEY);
+    const [theme] = useSetting<string | undefined>(SETTING_KEYS.THEME);
 
     return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 }

src/containers/AppWithClusters/utils/useAdditionalTenantsProps.tsx

@@ -1,11 +1,11 @@
 import {isNil} from 'lodash';
 
 import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
+import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
 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';
@@ -23,7 +23,9 @@ export function useAdditionalTenantsProps({
     getDatabaseLinks,
 }: GetAdditionalTenantsProps) {
     const clusterInfo = useClusterBaseInfo();
-    const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+    const [useClusterBalancerAsBackend] = useSetting<boolean>(
+        SETTING_KEYS.USE_CLUSTER_BALANCER_AS_BACKEND,
+    );
 
     const {balancer, monitoring, logging, name: clusterName} = clusterInfo;
 

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -6,8 +6,8 @@ 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 {cn} from '../../utils/cn';
-import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
 import {useSetting} from '../../utils/hooks';
 
 import {InformationPopup} from './InformationPopup';
@@ -76,7 +76,7 @@ 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 [compact, setIsCompact] = useSetting<boolean>(SETTING_KEYS.ASIDE_HEADER_COMPACT);
 
     const toggleInformationPopup = () => setInformationPopupVisible((prev) => !prev);
 

src/containers/AsideNavigation/InformationPopup/InformationPopup.tsx

@@ -2,8 +2,8 @@ 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 {LANGUAGE_KEY} from '../../../utils/constants';
 import {SHORTCUTS_HOTKEY} from '../hooks/useHotkeysPanel';
 import i18n from '../i18n';
 
@@ -17,7 +17,10 @@ export interface InformationPopupProps {
 
 export function InformationPopup({onKeyboardShortcutsClick}: InformationPopupProps) {
     const getDocumentationLink = () => {
-        const lang = settingsManager.readUserSettingsValue(LANGUAGE_KEY, navigator.language);
+        const lang = settingsManager.readUserSettingsValue(
+            SETTING_KEYS.LANGUAGE,
+            navigator.language,
+        );
         return lang === 'ru' ? 'https://ydb.tech/docs/ru/' : 'https://ydb.tech/docs/en/';
     };
 

src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -8,12 +8,12 @@ import {
     useClusterDashboardAvailable,
 } from '../../../store/reducers/capabilities/hooks';
 import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
+import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
 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';
@@ -40,7 +40,9 @@ interface ClusterOverviewProps {
 }
 
 export function ClusterOverview(props: ClusterOverviewProps) {
-    const [expandDashboard, setExpandDashboard] = useSetting<boolean>(EXPAND_CLUSTER_DASHBOARD);
+    const [expandDashboard, setExpandDashboard] = useSetting<boolean>(
+        SETTING_KEYS.EXPAND_CLUSTER_DASHBOARD,
+    );
     const bridgeModeEnabled = useBridgeModeEnabled();
 
     const bridgePiles = React.useMemo(() => {

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

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

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

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

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

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

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

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

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -22,13 +22,13 @@ import {
 import type {QueryResult} from '../../../../store/reducers/query/types';
 import {setQueryAction} from '../../../../store/reducers/queryActions/queryActions';
 import {selectShowPreview, setShowPreview} from '../../../../store/reducers/schema/schema';
+import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {EPathSubType, EPathType} from '../../../../types/api/schema';
 import type {QueryAction} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
-    LAST_USED_QUERY_ACTION_KEY,
 } from '../../../../utils/constants';
 import {
     useEventHandler,
@@ -90,7 +90,7 @@ export default function QueryEditor(props: QueryEditorProps) {
     const {resetBanner} = useChangedQuerySettings();
 
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting<QueryAction>(
-        LAST_USED_QUERY_ACTION_KEY,
+        SETTING_KEYS.LAST_USED_QUERY_ACTION,
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
     const [isQueryStreamingEnabled] = useQueryStreamingSetting();

src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx

@@ -13,8 +13,8 @@ import {
     selectUserInput,
     setIsDirty,
 } from '../../../../store/reducers/query/query';
+import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {QueryAction} from '../../../../types/store/query';
-import {ENABLE_CODE_ASSISTANT, LAST_USED_QUERY_ACTION_KEY} from '../../../../utils/constants';
 import {
     useEventHandler,
     useSetting,
@@ -50,12 +50,12 @@ export function YqlEditor({
     const [monacoGhostInstance, setMonacoGhostInstance] =
         React.useState<ReturnType<typeof createMonacoGhostInstance>>();
     const historyQueries = useTypedSelector(selectQueriesHistory);
-    const [isCodeAssistEnabled] = useSetting(ENABLE_CODE_ASSISTANT);
+    const [isCodeAssistEnabled] = useSetting(SETTING_KEYS.ENABLE_CODE_ASSISTANT);
 
     const editorOptions = useEditorOptions();
     const updateErrorsHighlighting = useUpdateErrorsHighlighting();
 
-    const [lastUsedQueryAction] = useSetting<QueryAction>(LAST_USED_QUERY_ACTION_KEY);
+    const [lastUsedQueryAction] = useSetting<QueryAction>(SETTING_KEYS.LAST_USED_QUERY_ACTION);
 
     const getLastQueryText = useEventHandler(() => {
         if (!historyQueries || historyQueries.length === 0) {

src/containers/Tenant/Query/QueryEditor/helpers.ts

@@ -5,8 +5,8 @@ import type Monaco from 'monaco-editor';
 
 import {codeAssistApi} from '../../../../store/reducers/codeAssist/codeAssist';
 import {selectQueriesHistory} from '../../../../store/reducers/query/query';
+import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {TelemetryOpenTabs} from '../../../../types/api/codeAssist';
-import {AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE} from '../../../../utils/constants';
 import {useSetting, useTypedSelector} from '../../../../utils/hooks';
 import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
 import {useSavedQueries} from '../utils/useSavedQueries';
@@ -23,8 +23,8 @@ const EDITOR_OPTIONS: EditorOptions = {
 };
 
 export function useEditorOptions() {
-    const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
-    const [autocompleteOnEnter] = useSetting(AUTOCOMPLETE_ON_ENTER);
+    const [enableAutocomplete] = useSetting(SETTING_KEYS.ENABLE_AUTOCOMPLETE);
+    const [autocompleteOnEnter] = useSetting(SETTING_KEYS.AUTOCOMPLETE_ON_ENTER);
 
     const options = React.useMemo<EditorOptions>(() => {
         const useAutocomplete = Boolean(enableAutocomplete);

src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx

@@ -13,10 +13,10 @@ import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus'
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import {selectResultTab, setResultTab} from '../../../../store/reducers/query/query';
 import type {QueryResult} from '../../../../store/reducers/query/types';
+import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {ValueOf} from '../../../../types/common';
 import type {QueryAction} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
-import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
@@ -106,7 +106,7 @@ export function QueryResultViewer({
     const isExplain = resultType === 'explain';
 
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
-    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
+    const [useShowPlanToSvg] = useSetting<boolean>(SETTING_KEYS.USE_SHOW_PLAN_SVG);
 
     // Get the saved tab for the current query type, or use default
     const getDefaultSection = (): SectionID => {