ydb-embedded-ui 4.25.0 → 4.27.0

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.25.0",
+  "version": "4.27.0",
   "files": [
     "dist"
   ],
@@ -10,9 +10,10 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.3.0",
+    "@gravity-ui/components": "^2.9.1",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/navigation": "^0.4.0",
+    "@gravity-ui/navigation": "^1.8.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
     "@types/react": "^17.0.58",
@@ -40,7 +41,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.3.1"
+    "ydb-ui-components": "^3.5.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -107,11 +108,11 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@gravity-ui/eslint-config": "^1.0.2",
-    "@gravity-ui/icons": "^2.2.0",
+    "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.11.1",
+    "@gravity-ui/uikit": "^5.24.0",
     "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
@@ -139,6 +140,6 @@
     "url": "^0.11.0"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^3.0.1"
+    "@gravity-ui/uikit": "^5.24.0"
   }
 }

package/dist/containers/App/TipPopup/TipPopup.js

@@ -1,66 +0,0 @@
-import {useState, useEffect} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Button, Icon, Popup} from '@gravity-ui/uikit';
-import closeIcon from '../../../assets/icons/close.svg';
-
-import {DATA_QA_TUNE_COLUMNS_POPUP} from '../../../utils/constants';
-
-import './TipPopup.scss';
-
-const b = cn('km-tip-popup');
-
-const DATA = {
-    [DATA_QA_TUNE_COLUMNS_POPUP]: {
-        id: 1,
-        title: 'New feature: column selector',
-        description: 'Now you can easily tune columns visibility! 🚀',
-    },
-};
-
-function TipPopup({dbChangePopupVisibility, dataAttribute, initialIsPopupVisible}) {
-    const [isPopupVisible, setIsPopupVisible] = useState(initialIsPopupVisible ?? true);
-    const [anchor, setAnchor] = useState(null);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const anchor = document.querySelector(`[data-qa='${dataAttribute}']`);
-            if (anchor) {
-                setAnchor(anchor);
-                clearInterval(interval);
-            }
-        }, 200);
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
-
-    const onClosePopupClick = () => {
-        dbChangePopupVisibility(false);
-        setIsPopupVisible(false);
-    };
-
-    const tipData = DATA[dataAttribute];
-
-    return tipData && anchor ? (
-        <Popup
-            className={b('wrapper')}
-            anchorRef={{current: anchor}}
-            open={isPopupVisible}
-            placement={['bottom-end']}
-            hasArrow
-        >
-            <div className={b()}>
-                <div className={b('title')}>{tipData.title}</div>
-                <div className={b('content')}>{tipData.description}</div>
-                <div className={b('cross-icon-wrapper')}>
-                    <Button view="flat-secondary" onClick={onClosePopupClick}>
-                        <Icon data={closeIcon} size={10} className={b('cross-icon')} />
-                    </Button>
-                </div>
-            </div>
-        </Popup>
-    ) : null;
-}
-
-export default TipPopup;

package/dist/containers/App/TipPopup/TipPopup.scss

@@ -1,46 +0,0 @@
-.km-tip-popup {
-    position: relative;
-    z-index: 1;
-
-    max-width: 250px;
-    padding: 16px 20px 20px 16px;
-
-    font-size: 13px;
-    line-height: 18px;
-
-    color: var(--yc-color-text-primary);
-    border-radius: 4px;
-    background-color: var(--yc-color-base-background);
-
-    &__wrapper {
-        border: 1px solid var(--yc-color-text-info) !important;
-        border-radius: 4px;
-
-        .popup2__tail {
-            border: 1px solid var(--yc-color-text-info) !important;
-            background-color: var(--yc-color-base-background);
-        }
-    }
-
-    &__cross-icon-wrapper {
-        position: absolute;
-        top: 16px;
-        right: 12px;
-    }
-
-    &__cross-icon {
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__title {
-        margin-bottom: 8px;
-        padding-right: 36px;
-
-        font-size: 17px;
-        line-height: 24px;
-    }
-
-    &__content {
-        color: var(--yc-color-text-complementary);
-    }
-}

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;
-}