ydb-embedded-ui 1.5.0 → 1.5.3

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -5,7 +5,7 @@
     display: inline-block;
 
     width: 100%;
-    height: var(--yc-text-body2-line-height);
+    height: var(--yc-text-body-2-line-height);
 
     border: 1px solid var(--yc-color-infographics-misc-medium);
     border-radius: 2px;
@@ -67,7 +67,7 @@
         position: absolute;
         z-index: 2;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: inherit;
 
         color: inherit;

package/dist/containers/Storage/Storage.scss

@@ -16,12 +16,12 @@
         overflow: auto;
         flex-grow: 1;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
-            height: var(--yc-text-body2-line-height) !important;
+            height: var(--yc-text-body-2-line-height) !important;
         }
 
         table {

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 
 import Vdisk from '../Vdisk/Vdisk';
 //@ts-ignore
@@ -90,15 +90,15 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
                 return (
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
-                            <Tooltip
+                            <Popover
                                 content={<span className={b('tooltip')}>{value as string}</span>}
                                 placement={['right']}
-                                behavior={TooltipBehavior.Immediate}
+                                behavior={PopoverBehavior.Immediate}
                             >
                                 <span className={b('pool-name')}>
                                     {splitted[splitted.length - 1]}
                                 </span>
-                            </Tooltip>
+                            </Popover>
                         )}
                     </div>
                 );

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 import Pdisk from '../Pdisk/Pdisk';
@@ -71,13 +71,13 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
             render: ({value}) => {
                 return (
                     <div className={b('tooltip-wrapper')}>
-                        <Tooltip
+                        <Popover
                             content={<span className={b('tooltip')}>{value as string}</span>}
                             placement={['right']}
-                            behavior={TooltipBehavior.Immediate}
+                            behavior={PopoverBehavior.Immediate}
                         >
                             <span className={b('pool-name')}>{value as string}</span>
-                        </Tooltip>
+                        </Popover>
                     </div>
                 );
             },

package/dist/containers/Tablet/Tablet.scss

@@ -46,9 +46,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -84,9 +84,9 @@
     &__top-label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 }

package/dist/containers/Tablets/Tablets.js

@@ -12,8 +12,7 @@ import {
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 
 import Tablet from '../../components/Tablet/Tablet';
-import {Loader} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Select} from '@yandex-cloud/uikit';
 import ReactList from 'react-list';
 import {AutoFetcher} from '../../utils/autofetcher';
 

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -5,8 +5,7 @@ import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Loader} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Select} from '@yandex-cloud/uikit';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -10,8 +10,8 @@
         display: flex;
         flex-direction: column;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
     }
 
     &__node-meta {

package/dist/containers/Tenant/Acl/Acl.scss

@@ -38,8 +38,8 @@
     }
 
     &__text {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
 

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

@@ -3,7 +3,7 @@ import qs from 'qs';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
-import {useHistory, useLocation} from 'react-router';
+import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@yandex-cloud/uikit';
 
@@ -34,8 +34,10 @@ import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
 import {GeneralPagesIds, DATABASE_PAGES, TABLE_PAGES, DIR_PAGES} from './DiagnosticsPages';
 //@ts-ignore
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 
 import './Diagnostics.scss';
+
 interface DiagnosticsProps {
     type: string;
     additionalTenantInfo?: any;
@@ -51,16 +53,17 @@ function Diagnostics(props: DiagnosticsProps) {
         currentSchema: currentItem = {},
         autorefresh,
     } = useSelector((state: any) => state.schema);
+    const {
+        diagnosticsTab = GeneralPagesIds.overview,
+    } = useSelector((state: any) => state.tenant);
 
     const location = useLocation();
 
-    const history = useHistory();
-
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName, generalTab = GeneralPagesIds.overview} = queryParams;
+    const {name: tenantName} = queryParams;
 
     const isDatabase = currentSchemaPath === tenantName;
 
@@ -76,25 +79,20 @@ function Diagnostics(props: DiagnosticsProps) {
             pages = TABLE_PAGES;
         }
         return pages;
-    }, [props.type]);
+    }, [props.type, isDatabase]);
 
     const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.generalTab]: tab,
-            }),
-        );
+        dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
-        if (pages.find((el) => el.id === generalTab)) {
-            return generalTab;
+        if (pages.find((el) => el.id === diagnosticsTab)) {
+            return diagnosticsTab;
         } else {
             const newPage = pages[0].id;
             forwardToDiagnosticTab(newPage);
             return newPage;
         }
-    }, [pages, generalTab]);
+    }, [pages, diagnosticsTab]);
 
     const onAutorefreshToggle = (value: boolean) => {
         if (value) {
@@ -105,12 +103,7 @@ function Diagnostics(props: DiagnosticsProps) {
     };
 
     const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: tab,
-            }),
-        );
+        dispatch(setTopLevelTab(tab));
     };
 
     const renderTabContent = () => {
@@ -118,7 +111,7 @@ function Diagnostics(props: DiagnosticsProps) {
 
         const tenantNameString = tenantName as string;
 
-        switch (generalTab) {
+        switch (diagnosticsTab) {
             case GeneralPagesIds.overview: {
                 return (
                     <DetailedOverview
@@ -171,6 +164,7 @@ function Diagnostics(props: DiagnosticsProps) {
             <div className={b('header-wrapper')}>
                 <div className={b('tabs')}>
                     <Tabs
+                        size="l"
                         items={pages}
                         activeTab={activeTab as string}
                         wrapTo={({id}, node) => {

package/dist/containers/Tenant/Diagnostics/Network/Network.scss

@@ -9,8 +9,8 @@
     max-width: 1305px;
     height: 100%;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__nodes-row {
         display: flex;
@@ -74,8 +74,8 @@
     &__nodes-title {
         margin: 0 0 15px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         color: var(--yc-color-text-secondary);
         border-bottom: 1px solid var(--yc-color-base-generic-accent);
@@ -90,9 +90,9 @@
     &__title {
         margin: 20px 0;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-line-height);
+        line-height: var(--yc-text-body-1-line-height);
     }
 
     &__checkbox-wrapper {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -46,9 +46,9 @@
     }
 
     &__collapse-title {
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         //text-transform: uppercase;
     }
 
@@ -75,8 +75,8 @@
     &__section-title {
         margin-bottom: 20px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss

@@ -22,8 +22,8 @@
     }
 
     &__text {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
 

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.scss

@@ -16,23 +16,22 @@
         padding: 13px 20px 0;
 
         box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
-        @include body3-typography();
         .yc-tabs {
             box-shadow: unset;
         }
     }
     &__tab {
         text-decoration: none;
-    }
 
-    &__loader {
-        display: flex;
+        // fix for bug in uikit, gap is set for yc-tabs__item:not(:last-child),
+        // it doesn't work for wrapped items
+        // feel free to remove if the bug is fixed
+        &:not(:last-child) {
+            margin-right: var(--yc-tabs-gap);
+        }
     }
 
-    &__tab-label {
+    &__loader {
         display: flex;
-        gap: 5px;
-
-        align-items: center;
     }
 }

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -38,21 +38,11 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const {name: tenantName, general: generalTab} = queryParams;
 
     const renderTabs = () => {
-        const pages = TENANT_GENERAL_TABS.map((page) => {
-            return {
-                ...page,
-                title: (
-                    <div className={b('tab-label')}>
-                        {page.icon}
-                        {page.title}
-                    </div>
-                ),
-            };
-        });
         return (
             <div className={b('tabs')}>
                 <Tabs
-                    items={pages}
+                    size="xl"
+                    items={TENANT_GENERAL_TABS}
                     activeTab={generalTab as string}
                     wrapTo={({id}, node) => {
                         const path = createHref(routes.tenant, undefined, {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -6,7 +6,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
+import {Button, HelpPopover, Loader, Tabs} from '@yandex-cloud/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
@@ -36,6 +36,7 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 
 import './ObjectSummary.scss';
 
@@ -126,6 +127,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
         return (
             <div className={b('tabs')}>
                 <Tabs
+                    size="l"
                     items={tabsItems}
                     activeTab={infoTab as string}
                     wrapTo={({id}, node) => {
@@ -222,12 +224,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        history.push(
-            createHref(routes.tenant, undefined, {
-                ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-            }),
-        );
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
     };
 
     const renderCommonInfoControls = () => {
@@ -264,7 +261,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
             <div className={b('entity-type')}>{type}</div>
         ) : (
             <div className={b('entity-type', {error: true})}>
-                <HelpTooltip content={message} offset={{left: 0}} />
+                <HelpPopover content={message} offset={{left: 0}} />
             </div>
         );
     };

package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.scss

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-line-height);
+            margin-top: var(--yc-text-body-1-line-height);
         }
     }
     &__field-title {

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -1,5 +1,4 @@
 import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
 
 import {NavigationTree} from 'ydb-ui-components';
 
@@ -26,7 +25,6 @@ export function SchemaTree(props: SchemaTreeProps) {
     } = props;
 
     const dispatch = useDispatch();
-    const history = useHistory();
 
     const fetchPath = (path: string) => window.api.getSchema(
         {path},
@@ -55,7 +53,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 collapsed: false,
             }}
             fetchPath={fetchPath}
-            getActions={getActions(dispatch, history, handleActivePathUpdate)}
+            getActions={getActions(dispatch, handleActivePathUpdate)}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

package/dist/containers/Tenant/Tenant.scss

@@ -3,8 +3,8 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     @include flex-container();
 
     .yc-tabs {

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -1,13 +1,11 @@
-import qs from 'qs';
 import {Dispatch} from 'react';
-import {History} from 'history';
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 
-import routes, {createHref} from '../../../routes';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
+import {setTopLevelTab} from '../../../store/reducers/tenant';
 import createToast from '../../../utils/createToast';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
+import {TenantGeneralTabsIds} from '../TenantPages';
 
 const createTableTemplate = (path: string) => {
     return `CREATE TABLE \`${path}/my_table\`
@@ -36,29 +34,16 @@ VALUES ( );`;
 
 export const getActions = (
     dispatch: Dispatch<any>,
-    history: History<unknown>,
     setActivePath: (path: string) => void,
 ) =>
     (path: string, type: NavigationTreeNodeType) => {
-        const queryParams = qs.parse(location.search, {
-            ignoreQueryPrefix: true,
-        });
-
         const switchTabToQuery = () => {
-            history.push(
-                createHref(routes.tenant, undefined, {
-                    ...queryParams,
-                    [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
-                }),
-            );
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         };
 
         const onCreateTableClick = () => {
             dispatch(changeUserInput({input: createTableTemplate(path)}));
             switchTabToQuery();
-            // here and in the other handlers this should be called after switching tab:
-            // redux-location-state catches the history.push event from the tab switching
-            // before active path updates in url, preventing its update at all
             setActivePath(path);
         };
 

package/dist/containers/Vdisk/Vdisk.scss

@@ -20,9 +20,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss

@@ -27,9 +27,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/store/reducers/tenant.js

@@ -3,6 +3,8 @@ import '../../services/api';
 import _ from 'lodash';
 
 const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
+const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
+const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 
 const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
     switch (action.type) {
@@ -41,6 +43,20 @@ const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
             };
         }
 
+        case SET_TOP_LEVEL_TAB: {
+            return {
+                ...state,
+                topLevelTab: action.data,
+            };
+        }
+
+        case SET_DIAGNOSTICS_TAB: {
+            return {
+                ...state,
+                diagnosticsTab: action.data,
+            };
+        }
+
         default:
             return state;
     }
@@ -73,4 +89,18 @@ export const getTenantInfo = ({path}) => {
     });
 };
 
+export function setTopLevelTab(tab) {
+    return {
+        type: SET_TOP_LEVEL_TAB,
+        data: tab,
+    };
+}
+
+export function setDiagnosticsTab(tab) {
+    return {
+        type: SET_DIAGNOSTICS_TAB,
+        data: tab,
+    };
+}
+
 export default tenantReducer;

package/dist/store/state-url-mapping.js

@@ -42,6 +42,12 @@ const paramSetup = {
             stateKey: 'tablets.typeFilter',
             type: 'array',
         },
+        general: {
+            stateKey: 'tenant.topLevelTab',
+        },
+        generalTab: {
+            stateKey: 'tenant.diagnosticsTab',
+        },
     },
 };