ydb-embedded-ui 1.5.1 → 1.6.0

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 
-import {ArrowToggle, Button, Tooltip} from '@yandex-cloud/uikit';
+import {ArrowToggle, Button, Popover} from '@yandex-cloud/uikit';
 
 import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
 
@@ -126,20 +126,20 @@ function getColumns({
             width: 70,
             render: ({row}) => {
                 return (
-                    <Tooltip
+                    <Popover
                         placement={['right']}
                         content={<Vdisk {...row} />}
                         contentClassName={b('vdisk-details')}
                     >
                         <Button
-                            view="clear"
+                            view="flat-secondary"
                             className={b('vdisk-details-button', {
                                 selected: row.id === selectedVdiskId,
                             })}
                         >
                             <Icon name="information" viewBox="0 0 512 512" height={16} width={16} />
                         </Button>
-                    </Tooltip>
+                    </Popover>
                 );
             },
             sortable: false,
@@ -213,7 +213,7 @@ export function PDisk(props: PDiskProps) {
                                 className={b('external-button')}
                                 href={pDiskInternalViewerLink}
                                 target="_blank"
-                                view="clear"
+                                view="flat-secondary"
                             >
                                 <Icon name="external" />
                             </Button>
@@ -289,7 +289,7 @@ export function PDisk(props: PDiskProps) {
                     <span>{data.Path}</span>
                     <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
                 </div>
-                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="clear">
+                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
                 </Button>
             </div>

package/dist/containers/Pdisk/Pdisk.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/Pool/Pool.scss

@@ -10,9 +10,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;
 
         &_groups {
@@ -30,6 +30,6 @@
     &__breadcrumbs {
         padding: 20px 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
     }
 }

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/HotKeys/HotKeys.js

@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
+import {TABLE_TYPE} from '../../Tenant';
+import {prepareQueryError} from '../../../../utils';
 
 import './HotKeys.scss';
-import {TABLE_TYPE} from '../../Tenant';
 
 const b = cn('hot-keys');
 
@@ -105,7 +106,7 @@ function HotKeys({
 
     const renderContent = () => {
         if (error) {
-            return error.data;
+            return prepareQueryError(error);
         }
         return data !== null ? (
             <div className={b('table-content')}>

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.js

@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
+import {Loader} from '@yandex-cloud/uikit';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
 
-import './TopQueries.scss';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {TenantGeneralTabsIds} from '../../TenantPages';
-import {Loader} from '@yandex-cloud/uikit';
+import {prepareQueryError} from '../../../../utils';
 
+import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
@@ -151,7 +152,7 @@ class TopQueries extends React.Component {
         if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
             message = 'No data';
         } else if (error && !error.isCancelled) {
-            message = (error.data || error).slice(0, 300);
+            message = prepareQueryError(error).slice(0, 300);
         } else if (!loading && !data) {
             message = 'No data';
         }

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/Diagnostics/TopShards/TopShards.js

@@ -1,20 +1,21 @@
 import {useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import InternalLink from '../../../../components/InternalLink/InternalLink';
+import {Loader} from '@yandex-cloud/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
-import routes, {createHref} from '../../../../routes';
 
+import InternalLink from '../../../../components/InternalLink/InternalLink';
+
+import routes, {createHref} from '../../../../routes';
 import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-
 import HistoryContext from '../../../../contexts/HistoryContext';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
+import {prepareQueryError} from '../../../../utils';
 
 import './TopShards.scss';
-import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {Loader} from '@yandex-cloud/uikit';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
@@ -123,7 +124,7 @@ function TopShards({
             return 'No data';
         }
         if (error) {
-            return error.data || error;
+            return prepareQueryError(error);
         }
 
         return data && data.length > 0 ? (

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/Preview/Preview.js

@@ -11,7 +11,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
-import {prepareQueryResponse} from '../../../utils/index';
+import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
 
 import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
 import {AutoFetcher} from '../../../utils/autofetcher';
@@ -163,7 +163,7 @@ class Preview extends React.Component {
         }
 
         if (error) {
-            message = <div className={b('message-container')}>{error.data || error}</div>;
+            message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
         }
 
         if (!loading && data.length === 0) {