ydb-embedded-ui 4.26.0 → 4.27.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.27.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.0...v4.27.1) (2024-01-10)
+
+
+### Bug Fixes
+
+* enable extract and set user settings manually ([#629](https://github.com/ydb-platform/ydb-embedded-ui/issues/629)) ([5eecd58](https://github.com/ydb-platform/ydb-embedded-ui/commit/5eecd58249688b4a8b3ecad766564f7b404e839c))
+
+## [4.27.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.26.0...v4.27.0) (2023-12-28)
+
+
+### Features
+
+* migrate from external settings api ([#621](https://github.com/ydb-platform/ydb-embedded-ui/issues/621)) ([ae2fbbe](https://github.com/ydb-platform/ydb-embedded-ui/commit/ae2fbbef66d9aba150012027baf8b89bf79cd741))
+
 ## [4.26.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.25.0...v4.26.0) (2023-12-14)
 
 

package/dist/containers/App/Content.js

@@ -16,8 +16,8 @@ import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import Header from '../Header/Header';
 import AppIcons from '../AppIcons/AppIcons';
 
-import {getParsedSettingValue} from '../../store/reducers/settings/settings';
 import {THEME_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
 
 import './App.scss';
 import PropTypes from 'prop-types';
@@ -72,7 +72,10 @@ Content.propTypes = {
 };
 
 function ContentWrapper(props) {
-    const {theme, singleClusterMode, isAuthenticated} = props;
+    const {singleClusterMode, isAuthenticated} = props;
+
+    const [theme] = useSetting(THEME_KEY);
+
     return (
         <HistoryContext.Consumer>
             {(history) => (
@@ -96,7 +99,6 @@ function ContentWrapper(props) {
 }
 
 ContentWrapper.propTypes = {
-    theme: PropTypes.string,
     singleClusterMode: PropTypes.bool,
     isAuthenticated: PropTypes.bool,
     children: PropTypes.node,
@@ -104,7 +106,6 @@ ContentWrapper.propTypes = {
 
 function mapStateToProps(state) {
     return {
-        theme: getParsedSettingValue(state, THEME_KEY),
         isAuthenticated: state.authentication.isAuthenticated,
         singleClusterMode: state.singleClusterMode,
     };

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {connect} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 import {useHistory} from 'react-router-dom';
 import cn from 'bem-cn-lite';
@@ -19,7 +19,6 @@ import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
 import {logout} from '../../store/reducers/authentication/authentication';
-import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
 import routes, {TENANT, createHref, parseQuery} from '../../routes';
 import {useSetting, useTypedSelector} from '../../utils/hooks';
@@ -117,10 +116,6 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
 
 interface AsideNavigationProps {
     children: React.ReactNode;
-    ydbUser: string;
-    compact: boolean;
-    logout: VoidFunction;
-    setSettingValue: (name: string, value: string) => void;
 }
 
 enum Panel {
@@ -189,15 +184,19 @@ export const useGetLeftNavigationItems = () => {
 
 function AsideNavigation(props: AsideNavigationProps) {
     const history = useHistory();
+    const dispatch = useDispatch();
 
     const [visiblePanel, setVisiblePanel] = useState<Panel>();
 
-    const setIsCompact = (compact: boolean) => {
-        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
-    };
+    const {user: ydbUser} = useTypedSelector((state) => state.authentication);
+    const [compact, setIsCompact] = useSetting<boolean>(ASIDE_HEADER_COMPACT_KEY);
 
     const menuItems = useGetLeftNavigationItems();
 
+    const onLogout = () => {
+        dispatch(logout());
+    };
+
     return (
         <React.Fragment>
             <AsideHeader
@@ -207,7 +206,7 @@ function AsideNavigation(props: AsideNavigationProps) {
                     onClick: () => history.push('/'),
                 }}
                 menuItems={menuItems}
-                compact={props.compact}
+                compact={compact}
                 onChangeCompact={setIsCompact}
                 className={b()}
                 renderContent={() => props.children}
@@ -248,8 +247,8 @@ function AsideNavigation(props: AsideNavigationProps) {
                             isCompact={compact}
                             popupAnchor={asideRef}
                             ydbUser={{
-                                login: props.ydbUser,
-                                logout: props.logout,
+                                login: ydbUser,
+                                logout: onLogout,
                             }}
                         />
                     </React.Fragment>
@@ -269,18 +268,4 @@ function AsideNavigation(props: AsideNavigationProps) {
     );
 }
 
-const mapStateToProps = (state: any) => {
-    const {user: ydbUser} = state.authentication;
-
-    return {
-        ydbUser,
-        compact: getParsedSettingValue(state, ASIDE_HEADER_COMPACT_KEY),
-    };
-};
-
-const mapDispatchToProps = {
-    logout,
-    setSettingValue,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AsideNavigation);
+export default AsideNavigation;

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -70,10 +70,7 @@ export const Partitions = ({path}: PartitionsProps) => {
         error: nodesError,
     } = useTypedSelector((state) => state.nodesList);
 
-    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(
-        PARTITIONS_HIDDEN_COLUMNS_KEY,
-        [],
-    );
+    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(PARTITIONS_HIDDEN_COLUMNS_KEY);
 
     const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
 

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -17,7 +17,6 @@ import {
     setTenantPath,
 } from '../../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
-import {getParsedSettingValue, setSettingValue} from '../../../../store/reducers/settings/settings';
 import {setShowPreview} from '../../../../store/reducers/schema/schema';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
@@ -86,6 +85,7 @@ function QueryEditor(props) {
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
+    const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
 
     useEffect(() => {
         if (savedPath !== path) {
@@ -417,7 +417,7 @@ function QueryEditor(props) {
 
     const storageEventHandler = (event) => {
         if (event.key === SAVED_QUERIES_KEY) {
-            props.setSettingValue(SAVED_QUERIES_KEY, event.newValue);
+            setSavedQueries(event.newValue);
         }
     };
 
@@ -430,8 +430,6 @@ function QueryEditor(props) {
     const onSaveQueryHandler = (queryName) => {
         const {
             executeQuery: {input},
-            savedQueries = [],
-            setSettingValue,
         } = props;
 
         const queryIndex = savedQueries.findIndex(
@@ -445,11 +443,11 @@ function QueryEditor(props) {
             newSavedQueries.push(newQuery);
         }
 
-        setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
+        setSavedQueries(newSavedQueries);
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries} = props;
+        const {executeQuery, explainQuery} = props;
 
         return (
             <QueryEditorControls
@@ -511,7 +509,6 @@ const mapStateToProps = (state) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
-        savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
@@ -525,7 +522,6 @@ const mapDispatchToProps = {
     goToNextQuery,
     getExplainQuery,
     getExplainQueryAst,
-    setSettingValue,
     setShowPreview,
     setMonacoHotKey,
     setTenantPath,

package/dist/services/api.ts

@@ -34,7 +34,6 @@ import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
-import {settingsApi} from '../utils/settings';
 
 const config = {withCredentials: !window.custom_backend};
 
@@ -378,10 +377,12 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path_id: tenantId?.PathId,
         });
     }
-    postSetting(name: string, value: string) {
+
+    /** @deprecated use localStorage instead */
+    postSetting(settingsApi: string, name: string, value: string) {
         return this.request({
             method: 'PATCH',
-            url: settingsApi || '',
+            url: settingsApi,
             data: {[name]: value},
         });
     }

package/dist/services/settings.ts

@@ -0,0 +1,109 @@
+import {TENANT_PAGES_IDS} from '../store/reducers/tenant/constants';
+
+import {
+    ASIDE_HEADER_COMPACT_KEY,
+    CLUSTER_INFO_HIDDEN_KEY,
+    INVERTED_DISKS_KEY,
+    LANGUAGE_KEY,
+    LAST_USED_QUERY_ACTION_KEY,
+    PARTITIONS_HIDDEN_COLUMNS_KEY,
+    QUERY_INITIAL_MODE_KEY,
+    QUERY_USE_MULTI_SCHEMA_KEY,
+    SAVED_QUERIES_KEY,
+    TENANT_INITIAL_PAGE_KEY,
+    THEME_KEY,
+    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+} from '../utils/constants';
+import {QUERY_ACTIONS, QUERY_MODES} from '../utils/query';
+import {parseJson} from '../utils/utils';
+
+export type SettingsObject = Record<string, unknown>;
+
+const USE_LOCAL_STORAGE_FOR_SETTINGS_KEY = 'useLocalStorageForSettings';
+
+/** User settings keys and their default values */
+export const DEFAULT_USER_SETTINGS: SettingsObject = {
+    [THEME_KEY]: 'system',
+    [LANGUAGE_KEY]: undefined,
+    [INVERTED_DISKS_KEY]: false,
+    [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: false,
+    [QUERY_USE_MULTI_SCHEMA_KEY]: false,
+    [SAVED_QUERIES_KEY]: [],
+    [TENANT_INITIAL_PAGE_KEY]: TENANT_PAGES_IDS.query,
+    [QUERY_INITIAL_MODE_KEY]: QUERY_MODES.script,
+    [LAST_USED_QUERY_ACTION_KEY]: QUERY_ACTIONS.execute,
+    [ASIDE_HEADER_COMPACT_KEY]: true,
+    [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
+    [CLUSTER_INFO_HIDDEN_KEY]: true,
+    [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
+};
+
+class SettingsManager {
+    constructor() {
+        // Migrate settings to LS if external API was used before
+        const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
+
+        const useLocalStorage = this.readUserSettingsValue(USE_LOCAL_STORAGE_FOR_SETTINGS_KEY);
+
+        if (settingsApi && !useLocalStorage) {
+            const externalUserSettings = window.userSettings;
+
+            if (externalUserSettings) {
+                Object.entries(externalUserSettings).forEach(([key, value]) =>
+                    this.setUserSettingsValue(key, value),
+                );
+            }
+
+            this.setUserSettingsValue(USE_LOCAL_STORAGE_FOR_SETTINGS_KEY, true);
+        }
+    }
+
+    /**
+     * Returns parsed settings value.
+     * If value cannot be parsed, returns initially stored string.
+     * If there is no value, return default value
+     */
+    readUserSettingsValue(key: string, defaultValue?: unknown) {
+        return this.readValueFromLS(key) ?? defaultValue;
+    }
+
+    /**
+     * Stringify value and set it to LS
+     */
+    setUserSettingsValue(key: string, value: unknown) {
+        return this.setValueToLS(key, value);
+    }
+
+    /**
+     * Extract values by provided settings object
+     */
+    extractSettingsFromLS = (settings: SettingsObject) => {
+        return Object.entries(settings).reduce<SettingsObject>((acc, [key, value]) => {
+            acc[key] = this.readUserSettingsValue(key, value);
+            return acc;
+        }, {});
+    };
+
+    private readValueFromLS = (key: string): unknown => {
+        try {
+            const value = localStorage.getItem(key);
+
+            return parseJson(value);
+        } catch {
+            return undefined;
+        }
+    };
+
+    private setValueToLS = (key: string, value: unknown): void => {
+        try {
+            if (typeof value === 'string') {
+                localStorage.setItem(key, value);
+            } else {
+                localStorage.setItem(key, JSON.stringify(value));
+            }
+        } catch {}
+    };
+}
+
+export const settingsManager = new SettingsManager();

package/dist/store/reducers/executeQuery.ts

@@ -9,10 +9,10 @@ import type {
     QueryInHistory,
 } from '../../types/store/executeQuery';
 import type {QueryRequestParams, QueryMode, QuerySyntax} from '../../types/store/query';
-import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {QUERY_MODES, QUERY_SYNTAX, parseQueryAPIExecuteResponse} from '../../utils/query';
 import {parseQueryError} from '../../utils/error';
+import {settingsManager} from '../../services/settings';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
@@ -28,7 +28,10 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SET_MONACO_HOT_KEY = 'query/SET_MONACO_HOT_KEY';
 const SET_TENANT_PATH = 'query/SET_TENANT_PATH';
 
-const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
+const queriesHistoryInitial = settingsManager.readUserSettingsValue(
+    QUERIES_HISTORY_KEY,
+    [],
+) as string[];
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
@@ -97,7 +100,7 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             const newQueries = [...state.history.queries, {queryText, syntax}].slice(
                 state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
             );
-            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
+            settingsManager.setUserSettingsValue(QUERIES_HISTORY_KEY, newQueries);
             const currentIndex = newQueries.length - 1;
 
             return {

package/dist/store/reducers/settings/settings.ts

@@ -1,32 +1,8 @@
 import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
-import {
-    SAVED_QUERIES_KEY,
-    THEME_KEY,
-    TENANT_INITIAL_PAGE_KEY,
-    INVERTED_DISKS_KEY,
-    ASIDE_HEADER_COMPACT_KEY,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-    PARTITIONS_HIDDEN_COLUMNS_KEY,
-    QUERY_INITIAL_MODE_KEY,
-    CLUSTER_INFO_HIDDEN_KEY,
-    LAST_USED_QUERY_ACTION_KEY,
-    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-    LANGUAGE_KEY,
-    QUERY_USE_MULTI_SCHEMA_KEY,
-} from '../../../utils/constants';
 import '../../../services/api';
-import {parseJson} from '../../../utils/utils';
-import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
-import {
-    readSavedSettingsValue,
-    settingsApi,
-    systemSettings,
-    userSettings,
-} from '../../../utils/settings';
-
-import {TENANT_PAGES_IDS} from '../tenant/constants';
+import {DEFAULT_USER_SETTINGS, SettingsObject, settingsManager} from '../../../services/settings';
 
 import type {RootState} from '..';
 import type {
@@ -39,45 +15,19 @@ import type {
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
 export const SET_SETTING_VALUE = 'settings/SET_VALUE';
+export const SET_USER_SETTINGS = 'settings/SET_USER_SETTINGS';
 
 export const ProblemFilterValues = {
     ALL: 'All',
     PROBLEMS: 'With problems',
 } as const;
 
+const userSettings = settingsManager.extractSettingsFromLS(DEFAULT_USER_SETTINGS);
+const systemSettings = window.systemSettings || {};
+
 export const initialState = {
     problemFilter: ProblemFilterValues.ALL,
-    userSettings: {
-        ...userSettings,
-        [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
-        [LANGUAGE_KEY]: readSavedSettingsValue(LANGUAGE_KEY),
-        [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
-        [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
-            USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-            'false',
-        ),
-        [QUERY_USE_MULTI_SCHEMA_KEY]: readSavedSettingsValue(QUERY_USE_MULTI_SCHEMA_KEY, 'false'),
-        [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
-        [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
-            TENANT_INITIAL_PAGE_KEY,
-            TENANT_PAGES_IDS.query,
-        ),
-        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(
-            QUERY_INITIAL_MODE_KEY,
-            QUERY_MODES.script,
-        ),
-        [LAST_USED_QUERY_ACTION_KEY]: readSavedSettingsValue(
-            LAST_USED_QUERY_ACTION_KEY,
-            QUERY_ACTIONS.execute,
-        ),
-        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
-        [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
-        [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),
-        [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: readSavedSettingsValue(
-            USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-            'false',
-        ),
-    },
+    userSettings,
     systemSettings,
 };
 
@@ -100,7 +50,15 @@ const settings: Reducer<SettingsState, SettingsAction> = (state = initialState,
                 userSettings: newSettings,
             };
         }
-
+        case SET_USER_SETTINGS: {
+            return {
+                ...state,
+                userSettings: {
+                    ...state.userSettings,
+                    ...action.data,
+                },
+            };
+        }
         default:
             return state;
     }
@@ -108,33 +66,21 @@ const settings: Reducer<SettingsState, SettingsAction> = (state = initialState,
 
 export const setSettingValue = (
     name: string,
-    value: string,
+    value: unknown,
 ): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
     return (dispatch) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
 
-        // If there is no settingsApi, use localStorage
-        if (settingsApi) {
-            window.api.postSetting(name, value);
-        } else {
-            try {
-                localStorage.setItem(name, value);
-            } catch {}
-        }
+        settingsManager.setUserSettingsValue(name, value);
     };
 };
 
-export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
-    return state.settings.userSettings[name];
+export const setUserSettings = (data: SettingsObject) => {
+    return {type: SET_USER_SETTINGS, data} as const;
 };
 
-/**
- * Returns parsed settings value.
- * If value cannot be parsed, returns initially stored string
- */
-export const getParsedSettingValue = (state: SettingsRootStateSlice, name: string) => {
-    const value = state.settings.userSettings[name];
-    return parseJson(value);
+export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
+    return state.settings.userSettings[name];
 };
 
 export const changeFilter = (filter: ProblemFilterValue) => {

package/dist/store/reducers/settings/types.ts

@@ -1,20 +1,24 @@
 import type {ValueOf} from '../../../types/common';
-import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
+import type {SettingsObject} from '../../../services/settings';
+import {changeFilter, setUserSettings, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
 export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
 
 export interface SettingsState {
     problemFilter: ProblemFilterValue;
-    userSettings: Record<string, string | undefined>;
-    systemSettings: Record<string, string | undefined>;
+    userSettings: SettingsObject;
+    systemSettings: SettingsObject;
 }
 
 export type SetSettingValueAction = {
     type: typeof SET_SETTING_VALUE;
-    data: {name: string; value: string};
+    data: {name: string; value: unknown};
 };
 
-export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;
+export type SettingsAction =
+    | ReturnType<typeof changeFilter>
+    | ReturnType<typeof setUserSettings>
+    | SetSettingValueAction;
 
 export interface SettingsRootStateSlice {
     settings: SettingsState;

package/dist/types/window.d.ts

@@ -39,8 +39,8 @@ interface Window {
     __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose;
     store?: import('redux').Store;
 
-    userSettings?: Record<string, string | undefined>;
-    systemSettings?: Record<string, string | undefined>;
+    userSettings?: import('../services/settings').SettingsObject;
+    systemSettings?: import('../services/settings').SettingsObject;
 
     api: import('../services/api').YdbEmbeddedAPI;
 }

package/dist/utils/hooks/useSetting.ts

@@ -1,22 +1,21 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
+import {getSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 
 import {useTypedSelector} from './useTypedSelector';
 
 export const useSetting = <T>(key: string, defaultValue?: T): [T, (value: T) => void] => {
     const dispatch = useDispatch();
 
-    const settingValue: T = useTypedSelector(
-        (state) => getParsedSettingValue(state, key) ?? defaultValue,
-    );
+    const settingValue = useTypedSelector((state) => {
+        // Since we type setter value as T, we assume that received value is also T
+        return (getSettingValue(state, key) ?? defaultValue) as T;
+    });
 
     const setValue = useCallback(
         (value: T) => {
-            const preparedValue = typeof value === 'string' ? value : JSON.stringify(value);
-
-            dispatch(setSettingValue(key, preparedValue));
+            dispatch(setSettingValue(key, value));
         },
         [dispatch, key],
     );

package/dist/utils/i18n/i18n.ts

@@ -3,7 +3,7 @@ import {configure as configureUiKit} from '@gravity-ui/uikit';
 import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 
 import {LANGUAGE_KEY} from '../constants';
-import {readSavedSettingsValue} from '../settings';
+import {settingsManager} from '../../services/settings';
 
 enum Lang {
     En = 'en',
@@ -11,7 +11,7 @@ enum Lang {
 }
 
 const defaultLang = Lang.En;
-const currentLang = readSavedSettingsValue(LANGUAGE_KEY, defaultLang);
+const currentLang = settingsManager.readUserSettingsValue(LANGUAGE_KEY, defaultLang) as Lang;
 
 const i18n = new I18N();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.26.0",
+  "version": "4.27.1",
   "files": [
     "dist"
   ],

package/dist/utils/settings.ts

@@ -1,13 +0,0 @@
-import {getValueFromLS} from './utils';
-
-export const userSettings = window.userSettings || {};
-export const systemSettings = window.systemSettings || {};
-
-export const settingsApi = window.web_version ? systemSettings.settingsApi : undefined;
-
-export function readSavedSettingsValue(key: string, defaultValue?: string) {
-    // If there is no settingsApi, use localStorage
-    const savedValue = settingsApi ? userSettings[key] : getValueFromLS(key);
-
-    return savedValue ?? defaultValue;
-}