ydb-embedded-ui 4.24.0 → 4.26.0

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,20 +14,11 @@
         gap: 12px;
     }
 
-    &__run {
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__mode-selector {
         $b: &;
 
         &__button {
-            width: 189px;
+            width: 241px;
             margin-left: 2px;
         }
 
@@ -36,24 +27,11 @@
             justify-content: space-between;
             align-items: center;
 
-            width: 163px;
+            width: 215px;
         }
 
         &__popup {
-            width: 189px;
-
-            &_extended {
-                width: 241px;
-            }
-        }
-
-        &_extended {
-            #{$b}__button {
-                width: 241px;
-            }
-            #{$b}__button-content {
-                width: 215px;
-            }
+            width: 241px;
         }
     }
 

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

@@ -19,17 +19,6 @@ const queryModeSelectorPopupQa = 'query-mode-selector-popup';
 
 const b = block('ydb-query-editor-controls');
 
-const OldQueryModeSelectorOptions = {
-    [QUERY_MODES.script]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.script],
-        description: i18n('method-description.script'),
-    },
-    [QUERY_MODES.scan]: {
-        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
-        description: i18n('method-description.scan'),
-    },
-} as const;
-
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
         title: QUERY_MODES_TITLES[QUERY_MODES.script],
@@ -63,7 +52,6 @@ interface QueryEditorControlsProps {
     disabled: boolean;
     onUpdateQueryMode: (mode: QueryMode) => void;
     queryMode: QueryMode;
-    enableAdditionalQueryModes: boolean;
     highlitedAction: QueryAction;
 }
 
@@ -78,14 +66,9 @@ export const QueryEditorControls = ({
     onUpdateQueryMode,
     queryMode,
     highlitedAction,
-    enableAdditionalQueryModes,
 }: QueryEditorControlsProps) => {
     const querySelectorMenuItems = useMemo(() => {
-        const options = enableAdditionalQueryModes
-            ? QueryModeSelectorOptions
-            : OldQueryModeSelectorOptions;
-
-        return Object.entries(options).map(([mode, {title, description}]) => {
+        return Object.entries(QueryModeSelectorOptions).map(([mode, {title, description}]) => {
             return {
                 text: (
                     <LabelWithPopover
@@ -100,7 +83,7 @@ export const QueryEditorControls = ({
                 },
             };
         });
-    }, [onUpdateQueryMode, enableAdditionalQueryModes]);
+    }, [onUpdateQueryMode]);
 
     const runView: ButtonView | undefined = highlitedAction === 'execute' ? 'action' : undefined;
     const explainView: ButtonView | undefined =
@@ -109,19 +92,17 @@ export const QueryEditorControls = ({
     return (
         <div className={b()}>
             <div className={b('left')}>
-                <div className={b('run')}>
-                    <Button
-                        onClick={() => {
-                            onRunButtonClick(queryMode);
-                        }}
-                        disabled={disabled}
-                        loading={runIsLoading}
-                        view={runView}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {'Run'}
-                    </Button>
-                </div>
+                <Button
+                    onClick={() => {
+                        onRunButtonClick(queryMode);
+                    }}
+                    disabled={disabled}
+                    loading={runIsLoading}
+                    view={runView}
+                >
+                    <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                    {'Run'}
+                </Button>
                 <Button
                     onClick={() => {
                         onExplainButtonClick(queryMode);
@@ -132,17 +113,11 @@ export const QueryEditorControls = ({
                 >
                     Explain
                 </Button>
-                <div
-                    className={b('mode-selector', {
-                        extended: enableAdditionalQueryModes,
-                    })}
-                >
+                <div className={b('mode-selector')}>
                     <DropdownMenu
                         items={querySelectorMenuItems}
                         popupProps={{
-                            className: b('mode-selector__popup', {
-                                extended: enableAdditionalQueryModes,
-                            }),
+                            className: b('mode-selector__popup'),
                             qa: queryModeSelectorPopupQa,
                         }}
                         switcher={

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

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-1-line-height);
+            margin-top: var(--g-text-body-1-line-height);
         }
     }
     &__field-title {
@@ -18,7 +18,7 @@
             &::after {
                 content: '*';
 
-                color: var(--yc-color-text-danger);
+                color: var(--g-color-text-danger);
             }
         }
     }
@@ -32,7 +32,7 @@
 
         height: 17px;
 
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
     &__embedded-tooltip {
         display: flex;
@@ -41,11 +41,11 @@
         height: 100%;
         margin-left: -10px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
         &:hover {
             cursor: pointer;
 
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
     }
 

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

@@ -11,7 +11,7 @@ import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {IconWrapper} from '../../../../components/Icon';
+import {Icon} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
@@ -110,10 +110,10 @@ export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: Sav
                     </div>
                     <span className={b('controls')}>
                         <Button view="flat-secondary">
-                            <IconWrapper name="pencil" viewBox="0 0 24 24" />
+                            <Icon name="pencil" viewBox="0 0 24 24" />
                         </Button>
                         <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
-                            <IconWrapper name="trash" viewBox="0 0 24 24" />
+                            <Icon name="trash" viewBox="0 0 24 24" />
                         </Button>
                     </span>
                 </div>

package/dist/containers/Tenant/Query/i18n/en.json

@@ -8,8 +8,6 @@
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
 
-  "history.cannot-set-mode": "This query is available only with '{{mode}}' query mode. You need to turn in additional query modes in settings to enable it",
-
   "delete-dialog.header": "Delete query",
   "delete-dialog.question": "Are you sure you want to delete query",
   "delete-dialog.delete": "Delete",

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -8,8 +8,6 @@
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
 
-  "history.cannot-set-mode": "Этот запрос доступен только в режиме '{{mode}}'. Вам необходимо включить дополнительные режимы выполнения запросов в настройках",
-
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",

package/dist/containers/Tenant/Tenant.scss

@@ -3,7 +3,6 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
     @include flex-container();
 }

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -4,7 +4,6 @@ import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import type {QueryMode} from '../../../types/store/query';
-import type {SetQueryModeIfAvailable} from '../../../utils/hooks';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
@@ -25,7 +24,7 @@ import {
 } from './queryTemplates';
 
 interface ActionsAdditionalEffects {
-    setQueryMode: SetQueryModeIfAvailable;
+    setQueryMode: (mode: QueryMode) => void;
     setActivePath: (path: string) => void;
 }
 
@@ -36,18 +35,16 @@ const bindActions = (
 ) => {
     const {setActivePath, setQueryMode} = additionalEffects;
 
-    const inputQuery =
-        (tmpl: (path: string) => string, mode?: QueryMode, setQueryModeErrorMessage?: string) =>
-        () => {
-            const isNewQueryModeSet = mode && setQueryMode(mode, setQueryModeErrorMessage);
+    const inputQuery = (tmpl: (path: string) => string, mode?: QueryMode) => () => {
+        if (mode) {
+            setQueryMode(mode);
+        }
 
-            if (!mode || isNewQueryModeSet) {
-                dispatch(changeUserInput({input: tmpl(path)}));
-                dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-                dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-                setActivePath(path);
-            }
-        };
+        dispatch(changeUserInput({input: tmpl(path)}));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+        setActivePath(path);
+    };
 
     return {
         createTable: inputQuery(createTableTemplate, 'script'),
@@ -56,11 +53,7 @@ const bindActions = (
         upsertQuery: inputQuery(upsertQueryTemplate),
         createExternalTable: inputQuery(createExternalTableTemplate, 'script'),
         dropExternalTable: inputQuery(dropExternalTableTemplate, 'script'),
-        selectQueryFromExternalTable: inputQuery(
-            selectQueryTemplate,
-            'query',
-            i18n('actions.externalTableSelectUnavailable'),
-        ),
+        selectQueryFromExternalTable: inputQuery(selectQueryTemplate, 'query'),
         createTopic: inputQuery(createTopicTemplate, 'script'),
         alterTopic: inputQuery(alterTopicTemplate, 'script'),
         dropTopic: inputQuery(dropTopicTemplate, 'script'),

package/dist/containers/Tenant/utils/schemaControls.tsx

@@ -6,7 +6,7 @@ import {Button} from '@gravity-ui/uikit';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {IconWrapper} from '../../../components/Icon';
+import {Icon} from '../../../components/Icon';
 
 import i18n from '../i18n';
 
@@ -44,7 +44,7 @@ export const getControls =
                 title={i18n('actions.openPreview')}
                 size="s"
             >
-                <IconWrapper name="tablePreview" />
+                <Icon name="tablePreview" />
             </Button>
         );
 

package/dist/containers/UserSettings/Setting.tsx

@@ -82,7 +82,11 @@ export const Setting = ({
     };
 
     return (
-        <Settings.Item title={title} renderTitleComponent={renderTitleComponent}>
+        <Settings.Item
+            title={title}
+            highlightedTitle={title}
+            renderTitleComponent={renderTitleComponent}
+        >
             {getSettingsElement(type)}
         </Settings.Item>
     );

package/dist/containers/UserSettings/i18n/en.json

@@ -22,12 +22,6 @@
   "settings.useBackendParamsForTables.title": "Use virtual table for cluster Nodes tab",
   "settings.useBackendParamsForTables.popover": "Use table with data load on scroll. It will increase performance, but could work unstable",
 
-  "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
-
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
-
-  "settings.tenantDiagnostics.title": "Display metrics cards for database diagnostics",
-  "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -22,12 +22,6 @@
   "settings.useBackendParamsForTables.title": "Использовать виртуализированную таблицу для вкладки Nodes кластера",
   "settings.useBackendParamsForTables.popover": "Использовать таблицу с загрузкой данных по скроллу. Это улучшит производительность, но может работать нестабильно",
 
-  "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
-
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
-
-  "settings.tenantDiagnostics.title": "Показывать карточки с метриками в диагностике базы данных",
-  "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
 }

package/dist/containers/UserSettings/settings.ts

@@ -4,8 +4,6 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
-    ENABLE_ADDITIONAL_QUERY_MODES,
-    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     THEME_KEY,
@@ -91,21 +89,11 @@ export const useBackendParamsForTables: SettingProps = {
     title: i18n('settings.useBackendParamsForTables.title'),
     helpPopoverContent: i18n('settings.useBackendParamsForTables.popover'),
 };
-export const enableQueryModesForExplainSetting: SettingProps = {
-    settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
-    title: i18n('settings.enableAdditionalQueryModes.title'),
-    helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
-};
 export const queryUseMultiSchemaSetting: SettingProps = {
     settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
-export const enableNewTenantDiagnosticsDesign: SettingProps = {
-    settingKey: DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
-    title: i18n('settings.tenantDiagnostics.title'),
-    helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
-};
 
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
@@ -115,13 +103,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [
-        useNodesEndpointSetting,
-        useBackendParamsForTables,
-        enableQueryModesForExplainSetting,
-        queryUseMultiSchemaSetting,
-        enableNewTenantDiagnosticsDesign,
-    ],
+    settings: [useNodesEndpointSetting, useBackendParamsForTables, queryUseMultiSchemaSetting],
 };
 
 export const generalPage: SettingsPage = {

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -8,7 +8,7 @@
         margin-top: 10px;
         margin-bottom: 10px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 10px;
     }
 
@@ -29,8 +29,7 @@
     }
 
     .ydb-tree-view {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
 
         // Apply margin ignoring first element of the tree
         .ydb-tree-view {

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -24,7 +24,7 @@
     &__info-label {
         font-weight: 200;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
 
         &_margin_left {
             margin-left: 5px;

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -53,7 +53,7 @@ export const NodesTreeTitle = ({
                 {versionsValues ? (
                     <div className={b('version-progress')}>
                         <span className={b('info-label', {margin: 'right'})}>Versions</span>
-                        <Progress view="thin" value={100} stack={versionsValues} />
+                        <Progress size="s" value={100} stack={versionsValues} />
                     </div>
                 ) : null}
             </div>

package/dist/index.tsx

@@ -9,6 +9,7 @@ import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
 import HistoryContext from './contexts/HistoryContext';
 
+import './styles/themes.scss';
 import './styles/constants.scss';
 import './index.css';
 

package/dist/services/api.ts

@@ -105,6 +105,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {concurrentId},
         );
     }
+    /** @deprecated use getNodes instead */
     getCompute(
         {sortOrder, sortValue, ...params}: ComputeApiRequestParams,
         {concurrentId}: AxiosOptions = {},

package/dist/store/reducers/settings/settings.ts

@@ -10,12 +10,10 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
-    ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
-    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     QUERY_USE_MULTI_SCHEMA_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
@@ -58,15 +56,7 @@ export const initialState = {
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
             'false',
         ),
-        [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
-            ENABLE_ADDITIONAL_QUERY_MODES,
-            'true',
-        ),
         [QUERY_USE_MULTI_SCHEMA_KEY]: readSavedSettingsValue(QUERY_USE_MULTI_SCHEMA_KEY, 'false'),
-        [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
-            DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
-            'true',
-        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
             TENANT_INITIAL_PAGE_KEY,