ydb-embedded-ui 4.25.0 → 4.27.0

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -1,3 +1,5 @@
+@import '../../styles/mixins.scss';
+
 .progress-viewer {
     position: relative;
     z-index: 0;
@@ -11,12 +13,12 @@
     height: 23px;
     padding: 0 4px;
 
-    font-size: var(--yc-text-body-2-font-size);
+    font-size: var(--g-text-body-2-font-size);
     white-space: nowrap;
 
-    color: var(--yc-color-text-light-primary);
+    color: var(--g-color-text-light-primary);
     border-radius: 2px;
-    background: var(--yc-color-base-generic);
+    background: var(--g-color-base-generic);
 
     &__line {
         position: absolute;
@@ -26,13 +28,13 @@
         height: 100%;
 
         &_bg_scarlet {
-            background: var(--yc-color-infographics-danger-heavy);
+            background: var(--ydb-color-status-red);
         }
         &_bg_apple {
-            background: var(--yc-color-infographics-positive-heavy);
+            background: var(--ydb-color-status-green);
         }
         &_bg_saffron {
-            background: var(--yc-color-infographics-warning-heavy);
+            background: var(--ydb-color-status-yellow);
         }
     }
 
@@ -40,30 +42,29 @@
         position: relative;
         z-index: 1;
         &_text_contrast0 {
-            color: var(--yc-color-text-light-primary);
+            color: var(--g-color-text-light-primary);
         }
         &_text_contrast70 {
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
     }
 
     &_size_xs {
         height: 20px;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
     }
 
     &_size_s {
         height: 28px;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         line-height: 28px;
     }
     &_size_m {
         height: 32px;
 
-        font-size: var(--yc-text-body-2-font-size);
+        font-size: var(--g-text-body-2-font-size);
         line-height: 32px;
     }
 
@@ -71,25 +72,25 @@
         height: 24px;
 
         font-size: 13px;
-        line-height: var(--yc-text-subheader-3-line-height);
+        line-height: var(--g-text-subheader-3-line-height);
     }
 
     &_size_n {
         height: 36px;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         line-height: 36px;
     }
 
     &_size_l {
         height: 38px;
 
-        font-size: var(--yc-text-subheader-3-font-size);
+        font-size: var(--g-text-subheader-3-font-size);
         line-height: 38px;
     }
 
     &_size_head {
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         line-height: 36px;
     }
 }

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.scss

@@ -4,11 +4,11 @@
 
     align-items: center;
 
-    color: var(--yc-color-text-complementary);
+    color: var(--g-color-text-complementary);
     &__result-status-icon {
-        color: var(--yc-color-text-positive);
+        color: var(--g-color-text-positive);
         &_error {
-            color: var(--yc-color-text-danger);
+            color: var(--g-color-text-danger);
         }
     }
 }

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.scss

@@ -35,7 +35,7 @@
         height: 6px;
 
         &_highlighted {
-            background: var(--yc-color-line-generic);
+            background: var(--g-color-line-generic);
         }
     }
 
@@ -44,11 +44,11 @@
         height: 100%;
 
         &_color_light {
-            background: var(--yc-color-infographics-info-medium);
+            background: var(--g-color-base-info-medium);
         }
 
         &_color_dark {
-            background: var(--yc-color-infographics-info-heavy);
+            background: var(--g-color-base-info-heavy);
         }
     }
 
@@ -82,11 +82,11 @@
         line-height: 18px;
 
         &_color_primary {
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
         }
 
         &_color_secondary {
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
     }
 }

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx

@@ -101,19 +101,18 @@ export const SpeedMultiMeter = ({
                 {withValue && (
                     <div className={b('displayed-value')}>{formatValue(valueToDisplay)}</div>
                 )}
-                <div className={b('popover-container')}>
-                    <Popover
-                        content={renderPopoverContent()}
-                        placement={'bottom'}
-                        disabled={!withPopover}
-                        hasArrow={true}
-                        size="s"
-                    >
-                        <div className={b('bars')} onMouseLeave={onLeaveDiagram}>
-                            {renderValues()}
-                        </div>
-                    </Popover>
-                </div>
+                <Popover
+                    content={renderPopoverContent()}
+                    className={b('popover-container')}
+                    placement={'bottom'}
+                    disabled={!withPopover}
+                    hasArrow={true}
+                    size="s"
+                >
+                    <div className={b('bars')} onMouseLeave={onLeaveDiagram}>
+                        {renderValues()}
+                    </div>
+                </Popover>
             </div>
         </div>
     );

package/dist/components/SplitPane/SplitPane.scss

@@ -24,7 +24,7 @@
         position: relative;
         z-index: 10;
 
-        background: var(--yc-color-base-background);
+        background: var(--g-color-base-background);
 
         &::after {
             position: absolute;
@@ -35,12 +35,12 @@
 
             content: '';
 
-            background-color: var(--yc-color-base-generic-ultralight);
+            background-color: var(--g-color-base-generic-ultralight);
         }
 
         &.active::after,
         &:hover::after {
-            background-color: var(--yc-color-line-generic-hover);
+            background-color: var(--g-color-line-generic-hover);
 
             transition: background-color 1s ease;
         }
@@ -67,7 +67,7 @@
 
                 border-width: 1px 0;
                 border-style: solid;
-                border-color: var(--yc-color-base-generic-hover);
+                border-color: var(--g-color-base-generic-hover);
 
                 transform: translate(-50%, -50%);
             }
@@ -91,7 +91,7 @@
 
                 border-width: 0 1px;
                 border-style: solid;
-                border-color: var(--yc-color-base-generic-hover);
+                border-color: var(--g-color-base-generic-hover);
 
                 transform: translate(-50%, -50%);
             }

package/dist/components/TableSkeleton/TableSkeleton.scss

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

package/dist/components/Tablet/Tablet.scss

@@ -1,8 +1,8 @@
 .tablet {
     cursor: pointer;
 
-    color: var(--yc-color-text-complementary);
-    border-color: var(--yc-color-base-generic-medium-hover);
+    color: var(--g-color-text-complementary);
+    border-color: var(--g-color-base-generic-medium-hover);
 
     &__wrapper {
         margin-right: 2px;
@@ -17,24 +17,24 @@
     }
 
     &_status_gray {
-        background-color: var(--yc-color-text-complementary);
+        background-color: var(--ydb-color-status-grey);
     }
     &_status_yellow {
-        background-color: var(--yc-color-base-warning-heavy);
+        background-color: var(--ydb-color-status-yellow);
     }
     &_status_orange {
-        background-color: var(--yc-color-text-warning-heavy);
+        background-color: var(--ydb-color-status-orange);
     }
     &_status_red {
-        background-color: var(--yc-color-base-danger-heavy);
+        background-color: var(--ydb-color-status-red);
     }
     &_status_green {
-        background-color: var(--yc-color-base-positive-heavy);
+        background-color: var(--ydb-color-status-green);
     }
-    &_state_blue {
-        background-color: var(--yc-color-base-info-heavy);
+    &_status_blue {
+        background-color: var(--ydb-color-status-blue);
     }
     &_status_black {
-        background-color: var(--yc-color-text-secondary);
+        background-color: var(--ydb-color-status-black);
     }
 }

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -15,33 +15,33 @@
         text-decoration: none;
         text-transform: uppercase;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
         border: 1px solid;
         border-radius: 2px;
 
         &_state_green {
-            color: var(--yc-color-text-positive);
-            background-color: var(--yc-color-base-positive);
+            color: var(--g-color-text-positive);
+            background-color: var(--g-color-base-positive-light);
         }
         &_state_yellow {
-            color: var(--yc-color-text-warning);
-            background-color: var(--yc-color-base-warning);
+            color: var(--g-color-text-warning);
+            background-color: var(--g-color-base-warning-light);
         }
         &_state_blue {
-            color: var(--yc-color-text-info);
-            background-color: var(--yc-color-base-info);
+            color: var(--g-color-text-info);
+            background-color: var(--g-color-base-info-light);
         }
         &_state_orange {
-            color: var(--yc-color-text-warning-heavy);
-            background-color: var(--yc-color-infographics-warning-light);
+            color: var(--g-color-text-warning-heavy);
+            background-color: var(--g-color-base-warning-light);
         }
         &_state_red {
-            color: var(--yc-color-text-danger);
-            background: var(--yc-color-base-danger);
+            color: var(--g-color-text-danger);
+            background: var(--g-color-base-danger-light);
         }
         &_state_gray {
-            color: var(--yc-color-text-secondary);
-            border: 1px solid var(--yc-color-line-generic-hover);
+            color: var(--g-color-text-secondary);
+            border: 1px solid var(--g-color-line-generic-hover);
         }
     }
 }

package/dist/components/Tag/Tag.scss

@@ -5,15 +5,15 @@
     font-size: 12px;
     text-transform: uppercase;
 
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
     border-radius: 3px;
-    background: var(--yc-color-base-generic);
+    background: var(--g-color-base-generic);
 
     &:last-child {
         margin-right: 0;
     }
 
     &_type_blue {
-        background-color: var(--yc-color-celestial-thunder);
+        background-color: var(--g-color-celestial-thunder);
     }
 }

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -10,7 +10,7 @@
 
         &_color {
             &_secondary {
-                color: var(--yc-color-text-secondary);
+                color: var(--g-color-text-secondary);
             }
         }
     }

package/dist/components/UsageLabel/UsageLabel.scss

@@ -1,6 +1,6 @@
 .ydb-usage-label {
     &_overload {
-        color: var(--yc-color-text-light-primary);
-        background-color: var(--yc-color-base-danger-heavy);
+        color: var(--g-color-text-light-primary);
+        background-color: var(--ydb-color-status-red);
     }
 }

package/dist/components/UsageLabel/UsageLabel.tsx

@@ -6,7 +6,7 @@ import './UsageLabel.scss';
 
 const b = cn('ydb-usage-label');
 
-interface UsageLabelProps extends LabelProps {
+interface UsageLabelProps extends Omit<LabelProps, 'value'> {
     value: number | string;
     overloadThreshold?: number;
 }

package/dist/components/VirtualTable/VirtualTable.scss

@@ -8,11 +8,11 @@
 
     --virtual-table-sort-icon-space: 18px;
 
-    --virtual-table-border-color: var(--yc-color-base-generic-hover);
-    --virtual-table-hover-color: var(--yc-color-base-float-hover);
+    --virtual-table-border-color: var(--g-color-base-generic-hover);
+    --virtual-table-hover-color: var(--g-color-base-float-hover);
 
     width: 100%;
-    @include body2-typography();
+    @include body-2-typography();
 
     &__table {
         width: 100%;

package/dist/containers/App/App.scss

@@ -23,30 +23,38 @@ body,
 }
 
 :root {
-    --yc-color-infographics-yellow-light: rgba(255, 199, 0, 0.15);
-    --yc-color-infographics-yellow-medium: rgba(255, 219, 77, 0.4);
-    --yc-color-base-warning-orange: #ff922e;
+    --g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
+    --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);
 
     --data-table-row-height: 40px;
 }
 
-.yc-root {
-    --ydb-data-table-color-hover: var(--yc-color-base-float-hover);
+.g-root {
+    --ydb-data-table-color-hover: var(--g-color-base-float-hover);
+
+    // Colors for tablets, status icons and progress bars
+    --ydb-color-status-grey: var(--g-color-base-neutral-heavy);
+    --ydb-color-status-green: var(--g-color-base-positive-heavy);
+    --ydb-color-status-yellow: var(--g-color-base-warning-heavy);
+    --ydb-color-status-orange: #ff922e;
+    --ydb-color-status-red: var(--g-color-base-danger-heavy);
+    --ydb-color-status-blue: var(--g-color-base-info-heavy);
+    --ydb-color-status-black: var(--g-color-base-misc-heavy);
 }
 
 :is(#tab, .yc-tabs-item_active .yc-tabs-item__title) {
-    color: var(--yc-color-text-primary) !important;
+    color: var(--g-color-text-primary) !important;
 }
 
 :is(#tab, .yc-tabs-item__title) {
-    color: var(--yc-color-text-secondary);
+    color: var(--g-color-text-secondary);
 }
 
-.ycn-aside-header__pane-container {
+.gn-aside-header__pane-container {
     height: 100%;
 }
 
-.ycn-aside-header__content {
+.gn-aside-header__content {
     position: relative;
 
     display: flex;
@@ -71,7 +79,7 @@ body,
 
     .data-table {
         width: 100%;
-        @include body2-typography();
+        @include body-2-typography();
 
         &__table {
             max-width: 100%;
@@ -105,22 +113,10 @@ body,
         justify-content: center;
         align-items: center;
     }
-
-    // Should be removed after https://github.com/ydb-platform/ydb-embedded-ui/issues/344
-    .yc-button__text {
-        display: flex;
-        align-items: center;
-    }
-
-    .g-select {
-        .yc-button__text {
-            align-items: baseline;
-        }
-    }
 }
 
 .error {
-    color: var(--yc-color-text-danger);
+    color: var(--g-color-text-danger);
 }
 
 .data-table__row:hover .entity-status__clipboard-button,
@@ -128,7 +124,7 @@ body,
     display: flex;
 }
 
-.yc-root .data-table_highlight-rows .data-table__row:hover {
+.g-root .data-table_highlight-rows .data-table__row:hover {
     background: var(--ydb-data-table-color-hover);
 }
 

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

@@ -6,7 +6,7 @@
 
         margin-left: 16px;
 
-        line-height: var(--yc-text-body-2-line-height);
+        line-height: var(--g-text-body-2-line-height);
     }
     &__user-info-wrapper {
         display: flex;
@@ -15,9 +15,6 @@
     &__ydb-internal-user-title {
         font-weight: 500;
     }
-    &__user-icon {
-        color: var(--yc-color-text-misc);
-    }
     &__ydb-user-wrapper {
         width: 300px;
         padding: 10px;

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/Authentication/Authentication.scss

@@ -28,8 +28,8 @@
 
         width: 100%;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-header-1-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-header-1-line-height);
     }
 
     &__logo {
@@ -45,7 +45,7 @@
         margin: 34px 0 16px;
 
         font-weight: 600;
-        @include title-typography();
+        @include header-2-typography;
     }
 
     &__form-wrapper {
@@ -60,7 +60,7 @@
         padding: 40px;
 
         border-radius: 16px;
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__field-wrapper {