ydb-embedded-ui 4.25.0 → 4.27.0

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/Partitions.tsx

@@ -70,10 +70,7 @@ export const Partitions = ({path}: PartitionsProps) => {
         error: nodesError,
     } = useTypedSelector((state) => state.nodesList);
 
-    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(
-        PARTITIONS_HIDDEN_COLUMNS_KEY,
-        [],
-    );
+    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(PARTITIONS_HIDDEN_COLUMNS_KEY);
 
     const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
 

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

@@ -43,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/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

@@ -17,7 +17,6 @@ import {
     setTenantPath,
 } from '../../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
-import {getParsedSettingValue, setSettingValue} from '../../../../store/reducers/settings/settings';
 import {setShowPreview} from '../../../../store/reducers/schema/schema';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
@@ -86,6 +85,7 @@ function QueryEditor(props) {
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
+    const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
 
     useEffect(() => {
         if (savedPath !== path) {
@@ -417,7 +417,7 @@ function QueryEditor(props) {
 
     const storageEventHandler = (event) => {
         if (event.key === SAVED_QUERIES_KEY) {
-            props.setSettingValue(SAVED_QUERIES_KEY, event.newValue);
+            setSavedQueries(event.newValue);
         }
     };
 
@@ -430,8 +430,6 @@ function QueryEditor(props) {
     const onSaveQueryHandler = (queryName) => {
         const {
             executeQuery: {input},
-            savedQueries = [],
-            setSettingValue,
         } = props;
 
         const queryIndex = savedQueries.findIndex(
@@ -445,11 +443,11 @@ function QueryEditor(props) {
             newSavedQueries.push(newQuery);
         }
 
-        setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
+        setSavedQueries(newSavedQueries);
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries} = props;
+        const {executeQuery, explainQuery} = props;
 
         return (
             <QueryEditorControls
@@ -511,7 +509,6 @@ const mapStateToProps = (state) => {
     return {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
-        savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
@@ -525,7 +522,6 @@ const mapDispatchToProps = {
     goToNextQuery,
     getExplainQuery,
     getExplainQueryAst,
-    setSettingValue,
     setShowPreview,
     setMonacoHotKey,
     setTenantPath,

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

@@ -11,12 +11,6 @@
 
     @include query-data-table;
 
-    & .yc-button__text {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__monaco {
         position: relative;
 
@@ -25,7 +19,7 @@
         width: 100%;
         height: 100%;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
     }
 
     &__monaco-wrapper {
@@ -40,12 +34,12 @@
         display: flex;
         flex-direction: column;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
 
         &_top {
             padding: 0 16px;
 
-            border-bottom: 1px solid var(--yc-color-line-generic);
+            border-bottom: 1px solid var(--g-color-line-generic);
         }
     }
 }

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

@@ -14,15 +14,6 @@
         gap: 12px;
     }
 
-    &__run {
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__mode-selector {
         $b: &;