ydb-embedded-ui 1.5.0 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+### [1.5.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.2...v1.5.3) (2022-05-26)
+
+
+### Bug Fixes
+
+* explicitly set lang for ydb-ui-components i18n ([5684524](https://github.com/ydb-platform/ydb-embedded-ui/commit/5684524267e2cbf19a44de75b0e0b2bf98b617fd))
+* proper icon size in uikit/Select ([a665d6d](https://github.com/ydb-platform/ydb-embedded-ui/commit/a665d6d829dae61ccf25566dd7b8cd1e46a743bb))
+* update code for @yandex-cloud/uikit@^2.0.0 ([49d67a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/49d67a1bddcba6fa138b5ebaeb280f16366b3329))
+
+
+### chore
+
+* update @yandex-cloud/uikit to 2.4.0 ([d2eb2e5](https://github.com/ydb-platform/ydb-embedded-ui/commit/d2eb2e5db147604ae346aea295ae22759712eaa4))
+* add @yandex-cloud/uikit to peer deps ([9c9f599](https://github.com/ydb-platform/ydb-embedded-ui/commit/9c9f5997dcca1be5868d013da311a28e495e7faa))
+* update ydb-ui-components to v2.0.1 ([3d6a8d3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3d6a8d30ab2ab47203eb956904e891ae106c0bc7))
+
+### [1.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.1...v1.5.2) (2022-05-26)
+
+
+### Bug Fixes
+
+* **Tenant:** always update diagnostics tabs for root ([db03266](https://github.com/ydb-platform/ydb-embedded-ui/commit/db03266fd7dd6e4588c1db0d109bdfaa8f693e2d))
+* **Tenant:** don't use HistoryAPI and redux-location-state together ([c1bc562](https://github.com/ydb-platform/ydb-embedded-ui/commit/c1bc5621e3ead44b1b84e592f8d7106bbc918e37))
+
+### [1.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.0...v1.5.1) (2022-05-25)
+
+
+### Bug Fixes
+
+* **Authentication:** submit form with enter in the login field ([7b6132a](https://github.com/ydb-platform/ydb-embedded-ui/commit/7b6132a6b2556939648167f30b08c5688b56ab98))
+
 ## [1.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.2...v1.5.0) (2022-05-24)
 
 

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -29,9 +29,9 @@
     &__heading {
         margin: 20px 20px 0;
 
-        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);
     }
 
     &__search {
@@ -48,9 +48,9 @@
         &-heading {
             margin: 0;
 
-            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);
 
             &_badge {
                 position: relative;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,5 +1,5 @@
 .kv-breadcrumbs {
     padding: 20px 0;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
 }

package/dist/components/Collapse/Collapse.scss

@@ -20,18 +20,18 @@
 
     &__title_size {
         &_s {
-            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);
         }
 
         &_m {
-            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);
         }
 
         &_l {
-            font-size: var(--yc-text-body3-font-size);
-            line-height: var(--yc-text-body3-line-height);
+            font-size: var(--yc-text-body-3-font-size);
+            line-height: var(--yc-text-body-3-line-height);
         }
     }
 
@@ -55,9 +55,9 @@
     }
 
     &__empty-state-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         font-weight: normal;
-        line-height: var(--yc-text-body-line-height);
+        line-height: var(--yc-text-body-1-line-height);
 
         opacity: 0.5;
     }

package/dist/components/EmptyState/EmptyState.scss

@@ -47,21 +47,21 @@
         font-weight: 500;
 
         &_size_s {
-            font-size: var(--yc-text-lead-font-size);
-            line-height: var(--yc-text-lead-line-height);
+            font-size: var(--yc-text-subheader-3-font-size);
+            line-height: var(--yc-text-subheader-3-line-height);
         }
 
         &_size_m {
-            font-size: var(--yc-text-title-font-size);
-            line-height: var(--yc-text-title-line-height);
+            font-size: var(--yc-text-header-2-font-size);
+            line-height: var(--yc-text-header-2-line-height);
         }
     }
 
     &__description {
         grid-area: description;
 
-        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);
     }
 
     &__actions {

package/dist/components/EntityStatus/EntityStatus.scss

@@ -5,8 +5,8 @@
     max-width: 100%;
     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);
 
     &__clipboard-button {
         display: none;
@@ -42,8 +42,8 @@
     &__label {
         margin-right: 2px;
 
-        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-complementary);
     }
@@ -96,7 +96,7 @@
     }
 
     &_size_m {
-        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);
     }
 }

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -1,15 +1,15 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    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);
 
     &__title {
         margin: 0 20px 0 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -50,7 +50,7 @@
         min-width: 100px;
         margin-right: 25px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
@@ -69,9 +69,9 @@
     &__section-title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__link {

package/dist/components/GroupViewer/GroupViewer.scss

@@ -8,7 +8,7 @@
     &__label {
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-complementary);
     }

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,12 +1,12 @@
 .info-viewer {
-    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);
     &__title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__items {

package/dist/components/PDiskViewer/PDiskViewer.scss

@@ -6,7 +6,7 @@
     &__size {
         margin-right: 24px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 0;
 
         color: var(--yc-color-text-complementary);

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,6 +1,6 @@
 .pool-usage {
-    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);
     &__info {
         display: flex;
         justify-content: space-between;
@@ -17,7 +17,7 @@
     }
 
     &__threads {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-hint);
 
@@ -29,7 +29,7 @@
     &__percents {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-primary);
     }
@@ -44,7 +44,7 @@
 
         height: 6px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
 
         border-radius: 4px;
         background-color: var(--yc-color-base-generic-accent);

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -10,7 +10,7 @@
     height: 23px;
     padding: 0 4px;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
     white-space: nowrap;
 
     color: var(--yc-color-text-light-primary);
@@ -49,20 +49,20 @@
     &_size_xs {
         height: 20px;
 
-        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);
     }
 
     &_size_s {
         height: 28px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 28px;
     }
     &_size_m {
         height: 32px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 32px;
     }
 
@@ -70,25 +70,25 @@
         height: 24px;
 
         font-size: 13px;
-        line-height: var(--yc-text-lead-line-height);
+        line-height: var(--yc-text-subheader-3-line-height);
     }
 
     &_size_n {
         height: 36px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 
     &_size_l {
         height: 38px;
 
-        font-size: var(--yc-text-lead-font-size);
+        font-size: var(--yc-text-subheader-3-font-size);
         line-height: 38px;
     }
 
     &_size_head {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 }

package/dist/components/TableSkeleton/TableSkeleton.scss

@@ -8,7 +8,7 @@
         height: var(--data-table-row-height);
 
         .yc-skeleton {
-            height: var(--yc-text-body2-line-height);
+            height: var(--yc-text-body-2-line-height);
         }
     }
 

package/dist/components/TabletsViewer/TabletsViewer.scss

@@ -17,7 +17,7 @@
         min-width: 60px;
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 18px;
         white-space: nowrap;
         text-transform: capitalize;
@@ -33,7 +33,7 @@
         margin: 0;
         margin-bottom: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: bold;
         line-height: 20px;
     }

package/dist/containers/App/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
+import {i18n as YDBComponentsI18N} from 'ydb-ui-components/build/components/i18n';
 import {I18N, i18n} from '../../utils/i18n';
 
 import ContentWrapper, {Content} from './Content';
@@ -25,7 +26,7 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(I18N.LANGS.en);
-        I18N.setDefaultLang(I18N.LANGS.en); // for the peer dependency ydb-ui-components, should match the language above
+        YDBComponentsI18N.setLang(I18N.LANGS.en);
     }
 
     componentDidMount() {

package/dist/containers/App/App.scss

@@ -3,9 +3,15 @@
 @import './NodesTable';
 
 * {
+    // FIXME: this is an overkill, potentially could break external components, needs refactoring
     box-sizing: border-box;
 }
 
+.yc-select-popup__tick-icon {
+    // this is a local fix, remove after the refactoring
+    box-sizing: content-box;
+}
+
 html,
 body,
 #root {

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

@@ -54,7 +54,7 @@ function TipPopup({dbChangePopupVisibility, dataAttribute, initialIsPopupVisible
                 <div className={b('title')}>{tipData.title}</div>
                 <div className={b('content')}>{tipData.description}</div>
                 <div className={b('cross-icon-wrapper')}>
-                    <Button view="clear" onClick={onClosePopupClick}>
+                    <Button view="flat-secondary" onClick={onClosePopupClick}>
                         <Icon data={closeIcon} size={10} className={b('cross-icon')} />
                     </Button>
                 </div>

package/dist/containers/AsideNavigation/AsideNavigation.scss

@@ -6,7 +6,7 @@
 
         margin-left: 16px;
 
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
     &__user-info-wrapper {
         display: flex;

package/dist/containers/Authentication/Authentication.scss

@@ -28,8 +28,8 @@
 
         width: 100%;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-header-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-header-1-line-height);
     }
 
     &__logo {

package/dist/containers/Authentication/Authentication.tsx

@@ -72,6 +72,7 @@ function Authentication({authenticate, error}: any) {
                         onUpdate={onLoginUpdate}
                         placeholder={'Username'}
                         error={loginError}
+                        onKeyDown={onEnterClick}
                         size="l"
                         autoFocus
                     />

package/dist/containers/Header/Header.scss

@@ -15,14 +15,14 @@
     @include body2-typography;
 
     &__cluster-info-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         text-transform: uppercase;
 
         color: var(--yc-color-text-secondary);
     }
 
     &__cluster-info-name {
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
     }
 

package/dist/containers/Header/Host/Host.scss

@@ -13,8 +13,8 @@
 
         margin-right: 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);
     }
     &__info {
         display: flex;
@@ -32,8 +32,8 @@
     &__label {
         margin-right: 10px;
 
-        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-hint);
 
@@ -42,8 +42,8 @@
         }
     }
     &__value {
-        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/Heatmap/Heatmap.js

@@ -8,8 +8,7 @@ import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {formatNumber} from '../../utils';
 
-import {Loader, Checkbox} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Checkbox, Select} from '@yandex-cloud/uikit';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Heatmap/Heatmap.scss

@@ -49,9 +49,9 @@
     &__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;
 
         &_overall {

package/dist/containers/Node/Node.scss

@@ -20,7 +20,6 @@
 
     &__tabs {
         padding: 16px 20px 0;
-        @include body2-typography();
     }
 
     &__tab {

package/dist/containers/Node/Node.tsx

@@ -98,6 +98,7 @@ function Node(props: NodeProps) {
         return (
             <div className={b('tabs')}>
                 <Tabs
+                    size="l"
                     items={nodeTabs}
                     activeTab={activeTabVerified}
                     wrapTo={({id}, node) => (

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -22,7 +22,7 @@
 
         width: 573px;
         margin-bottom: 8px;
-        padding-left: 20px;
+        padding: 0 10px 0 20px;
 
         border: 1px solid var(--yc-color-line-generic);
         border-radius: 5px;
@@ -137,9 +137,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/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);
     }
 }