ydb-embedded-ui 4.24.0 → 4.26.0

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

@@ -9,7 +9,7 @@
 
     max-height: 100%;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__table-content {
         overflow: auto;
@@ -28,7 +28,7 @@
         width: 100%;
         padding: 10px 0;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
     &__loader {
         display: flex;

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

@@ -9,8 +9,7 @@
     max-width: 1305px;
     height: 100%;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__nodes-row {
         display: flex;
@@ -36,7 +35,7 @@
     &__left {
         height: 100%;
 
-        border-right: 1px solid var(--yc-color-base-generic-accent);
+        border-right: 1px solid var(--g-color-base-generic-accent);
     }
 
     &__placeholder {
@@ -74,25 +73,24 @@
     &__nodes-title {
         margin: 0 0 15px;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        color: var(--g-color-text-secondary);
+        border-bottom: 1px solid var(--g-color-base-generic-accent);
 
-        color: var(--yc-color-text-secondary);
-        border-bottom: 1px solid var(--yc-color-base-generic-accent);
+        @include body-2-typography();
     }
 
     &__link {
         text-decoration: none;
 
-        color: var(--yc-color-base-special);
+        color: var(--g-color-base-brand);
     }
 
     &__title {
         margin: 20px 0;
 
-        font-size: var(--yc-text-body-1-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-1-line-height);
+
+        @include body-1-typography();
     }
 
     &__checkbox-wrapper {

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

@@ -14,7 +14,7 @@
     text-align: center;
     text-transform: uppercase;
 
-    color: var(--yc-color-text-complementary);
+    color: var(--g-color-text-complementary);
     border: 1px solid transparent;
     border-radius: 4px;
 
@@ -28,27 +28,27 @@
     }
 
     &_gray {
-        background: var(--yc-color-text-secondary);
+        background: var(--ydb-color-status-grey);
     }
 
     &_black {
-        color: var(--yc-color-text-light-primary);
-        background-color: var(--yc-color-text-primary);
+        color: var(--g-color-text-light-primary);
+        background-color: var(--ydb-color-status-black);
     }
 
     &_green {
-        background-color: var(--yc-color-base-positive-heavy);
+        background-color: var(--ydb-color-status-green);
     }
 
     &_yellow {
-        background-color: var(--yc-color-base-warning-heavy);
+        background-color: var(--ydb-color-status-yellow);
     }
 
     &_red {
-        background-color: var(--yc-color-text-yandex-red);
+        background-color: var(--ydb-color-status-red);
     }
 
     &:hover {
-        border: 1px solid var(--yc-color-text-primary);
+        border: 1px solid var(--g-color-text-primary);
     }
 }

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

@@ -17,7 +17,7 @@
     }
 
     &__select-option_empty {
-        color: var(--yc-color-text-hint);
+        color: var(--g-color-text-hint);
     }
 
     &__search {
@@ -30,10 +30,6 @@
         }
     }
 
-    &__table-settings .yc-icon {
-        width: 20px;
-    }
-
     &__table-wrapper {
         overflow: auto;
         @include flex-container();

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

@@ -169,7 +169,6 @@ export const PartitionsControls = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={hadleTableColumnsSetupChange}
-                className={b('table-settings')}
             />
         </div>
     );

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

@@ -74,35 +74,35 @@
 
         &_good,
         &_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);
         }
         &_degraded,
         &_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);
         }
 
         &_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);
         }
 
         &_emergency,
         &_red {
-            color: var(--yc-color-text-danger);
-            background-color: var(--yc-color-base-danger);
+            color: var(--g-color-text-danger);
+            background-color: var(--g-color-base-danger-light);
         }
         &_unspecified,
         &_gray,
         &_grey {
-            color: var(--yc-color-text-misc);
-            background-color: var(--yc-color-base-misc);
+            color: var(--g-color-text-misc);
+            background-color: var(--g-color-base-misc-light);
         }
         &_maintenance_required,
         &_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);
         }
     }
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss

@@ -1,40 +1,5 @@
 @import '../../../../../../styles/mixins.scss';
 
-.indicator {
-    width: 12px;
-    height: 12px;
-    margin-right: 4px;
-
-    border-radius: 4px;
-
-    &_good,
-    &_green {
-        background-color: var(--yc-color-base-positive-heavy);
-    }
-    &_degraded,
-    &_yellow {
-        background-color: var(--yc-color-base-warning-heavy);
-    }
-
-    &_blue {
-        background-color: var(--yc-color-base-info-heavy);
-    }
-
-    &_emergency,
-    &_red {
-        background: var(--yc-color-base-danger-heavy);
-    }
-    &_unspecified,
-    &_gray,
-    &_grey {
-        background: var(--yc-color-text-complementary);
-    }
-    &_maintenance_required,
-    &_orange {
-        background: var(--yc-color-text-warning-heavy);
-    }
-}
-
 .issue-tree {
     display: flex;
 
@@ -54,7 +19,7 @@
         padding: 8px 20px;
 
         border-radius: 4px;
-        background: var(--yc-color-base-generic);
+        background: var(--g-color-base-generic);
     }
 
     &__inspector {

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss

@@ -21,10 +21,10 @@
 
             cursor: pointer;
 
-            color: var(--yc-color-text-link);
+            color: var(--g-color-text-link);
 
             &:hover {
-                color: var(--yc-color-text-link-hover);
+                color: var(--g-color-text-link-hover);
             }
         }
         &_message {
@@ -45,6 +45,6 @@
     }
 
     &__field-label {
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

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

@@ -20,11 +20,11 @@
         flex-direction: column;
         align-items: center;
 
-        font-size: var(--yc-text-header-1-font-size);
-        line-height: var(--yc-text-header-1-line-height);
         text-align: center;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
+
+        @include header-1-typography();
     }
 
     &__progress {
@@ -35,18 +35,18 @@
     }
 
     &__resources {
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &_active {
         #{$b}__content {
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
 
         #{$b}__progress-bar-circle-bg {
-            stroke: var(--yc-color-base-float);
+            stroke: var(--g-color-base-float);
         }
     }
 }

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

@@ -33,57 +33,6 @@
         gap: 10px;
     }
 
-    &__common-info {
-        display: flex;
-        gap: 20px;
-
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
-    }
-
-    &__system-tablets {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-
-        margin-bottom: 35px;
-    }
-
-    &__collapse-title {
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
-    &__section {
-        border-radius: 10px;
-
-        &_metrics {
-            .info-viewer__label {
-                min-width: 150px;
-            }
-            .info-viewer__value {
-                min-width: 100px;
-            }
-        }
-
-        &_pools {
-            display: grid;
-            grid-gap: 7px 20px;
-
-            grid-template-columns: 110px 110px;
-        }
-    }
-
-    &__section-title {
-        margin-bottom: 20px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
     &__info {
         position: sticky;
         left: 0;
@@ -94,9 +43,9 @@
     &__title {
         margin-bottom: 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 700;
-        line-height: var(--yc-text-body-2-line-height);
+
+        @include body-2-typography();
     }
 
     &__table {

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

@@ -5,7 +5,7 @@
 
     height: 100%;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__loader {
         display: flex;

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -29,7 +29,7 @@
         top: 19px; // centered relative to the heading
         right: 5px; // centered relative to the collapsed panel
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         &_hidden {
             visibility: hidden;
         }
@@ -86,14 +86,10 @@
     &__info-controls {
         display: flex;
         gap: 4px;
-
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
 
     &__info-action-button {
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         &_hidden {
             display: none;
         }
@@ -116,7 +112,7 @@
 
         padding: 12px 12px 10px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
+        border-bottom: 1px solid var(--g-color-line-generic);
     }
 
     &__info-title {
@@ -144,7 +140,7 @@
         text-transform: lowercase;
 
         border-radius: 3px;
-        background-color: var(--yc-color-base-generic);
+        background-color: var(--g-color-base-generic);
 
         &_error {
             padding: 3px 0;

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

@@ -5,7 +5,8 @@ import {Link} from 'react-router-dom';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 
-import {Button, HelpPopover, Tabs} from '@gravity-ui/uikit';
+import {Button, Tabs} from '@gravity-ui/uikit';
+import {HelpPopover} from '@gravity-ui/components';
 
 import SplitPane from '../../../components/SplitPane';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -44,8 +44,8 @@
         height: 53px;
         padding: 12px 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
 
     &__controls-right {
@@ -57,9 +57,6 @@
     &__controls-left {
         display: flex;
         gap: 4px;
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
     &__inspector {
         max-width: calc(100% - 50px);
@@ -81,7 +78,7 @@
         height: 100%;
         margin: 20px;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         @include table-styles();
         table {
             width: 100% !important;

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.scss

@@ -22,8 +22,8 @@
         height: 53px;
         padding: 12px 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
     &__controls-right {
         display: flex;
@@ -34,9 +34,6 @@
     &__controls-left {
         display: flex;
         gap: 4px;
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
     &__explain-canvas-container {
         overflow-y: auto;

package/dist/containers/Tenant/Query/Issues/Issues.scss

@@ -12,7 +12,7 @@
 
         padding: 10px 0;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__error-message-text {
@@ -48,7 +48,7 @@
 
         text-align: left;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__message {
@@ -57,9 +57,9 @@
         margin-right: auto;
         margin-left: 10px;
 
-        font-family: var(--yc-font-family-monospace);
-        font-size: var(--yc-text-code-2-font-size);
-        line-height: var(--yc-text-header-2-line-height);
+        font-family: var(--g-font-family-monospace);
+        font-size: var(--g-text-code-2-font-size);
+        line-height: var(--g-text-header-2-line-height);
     }
 
     &__message-text {
@@ -79,14 +79,11 @@
 
         font-size: 12px;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 
     &__arrow-toggle {
         margin-right: 5px;
-        .yc-button__text {
-            margin: 0 5px;
-        }
     }
 }
 
@@ -98,19 +95,19 @@
     white-space: nowrap;
 
     &_severity_fatal &__icon {
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
 
     &_severity_error &__icon {
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
 
     &_severity_warning &__icon {
-        color: var(--yc-color-text-warning);
+        color: var(--g-color-text-warning);
     }
 
     &_severity_info &__icon {
-        color: var(--yc-color-text-info);
+        color: var(--g-color-text-info);
     }
 
     &__title {
@@ -118,6 +115,6 @@
 
         text-transform: capitalize;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 }

package/dist/containers/Tenant/Query/Preview/Preview.scss

@@ -4,10 +4,6 @@
     height: 100%;
     @include query-data-table;
 
-    .yc-button__text {
-        margin: 0 6px;
-    }
-
     &__header {
         position: sticky;
         top: 0;
@@ -19,8 +15,8 @@
         height: 53px;
         padding: 0 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
 
     &__title {
@@ -30,7 +26,7 @@
     &__table-name {
         margin-left: 4px;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 
     &__controls-left {

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -9,7 +9,7 @@ import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {selectQueriesHistory} from '../../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {useQueryModes, useTypedSelector} from '../../../../utils/hooks';
-import {QUERY_MODES, QUERY_MODES_TITLES, QUERY_SYNTAX} from '../../../../utils/query';
+import {QUERY_MODES, QUERY_SYNTAX} from '../../../../utils/query';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
 import i18n from '../i18n';
@@ -31,22 +31,15 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const reversedHistory = [...queriesHistory].reverse();
 
     const onQueryClick = (query: QueryInHistory) => {
-        let isQueryModeSet = true;
-
         if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
-            isQueryModeSet = setQueryMode(
-                QUERY_MODES.pg,
-                i18n('history.cannot-set-mode', {mode: QUERY_MODES_TITLES[QUERY_MODES.pg]}),
-            );
+            setQueryMode(QUERY_MODES.pg);
         } else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
             // Set query mode for queries with yql syntax
-            isQueryModeSet = setQueryMode(QUERY_MODES.script);
+            setQueryMode(QUERY_MODES.script);
         }
 
-        if (isQueryModeSet) {
-            changeUserInput({input: query.queryText});
-            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-        }
+        changeUserInput({input: query.queryText});
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
     const columns: Column<QueryInHistory>[] = [

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.scss

@@ -4,7 +4,7 @@
 
     margin-left: 10px;
 
-    color: var(--yc-color-text-complementary);
+    color: var(--g-color-text-complementary);
 
     &__item-with-popover {
         white-space: nowrap;

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -23,12 +23,11 @@ import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
-    ENABLE_ADDITIONAL_QUERY_MODES,
     LAST_USED_QUERY_ACTION_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../../utils/constants';
 import {useSetting, useQueryModes} from '../../../../utils/hooks';
-import {QUERY_ACTIONS, QUERY_MODES, isNewQueryMode} from '../../../../utils/query';
+import {QUERY_ACTIONS} from '../../../../utils/query';
 
 import {
     PaneVisibilityActionTypes,
@@ -85,16 +84,9 @@ function QueryEditor(props) {
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
-    const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
-    useEffect(() => {
-        if (isNewQueryMode(queryMode) && !enableAdditionalQueryModes) {
-            setQueryMode(QUERY_MODES.script);
-        }
-    }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
-
     useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
@@ -470,7 +462,6 @@ function QueryEditor(props) {
                 disabled={!executeQuery.input}
                 onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
-                enableAdditionalQueryModes={enableAdditionalQueryModes}
                 highlitedAction={lastUsedQueryAction}
             />
         );