ydb-embedded-ui 6.0.1 → 6.2.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { TextOverflow, getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
+import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
 import { Loader, RadioButton } from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 import Divider from '../../../../components/Divider/Divider';
@@ -14,7 +14,7 @@ import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
 import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
-import { getColors, renderExplainNode } from './utils';
+import { renderExplainNode } from './utils';
 import './ExplainResult.scss';
 import 'react-json-inspector/json-inspector.css';
 const b = cn('ydb-query-explain-result');
@@ -46,7 +46,7 @@ function GraphRoot(props) {
             throw new Error("Can't find element with id #graphRoot");
         }
         graphRoot.innerHTML = '';
-        paranoid.current = getTopology('graphRoot', data, Object.assign(Object.assign({}, opts), { colors: getColors() }), shapes);
+        paranoid.current = getTopology('graphRoot', data, opts, shapes);
         paranoid.current.render();
         return () => {
             paranoid.current = undefined;
@@ -109,7 +109,7 @@ export function ExplainResult(props) {
                 hidden: activeOption !== ExplainOptionIds.schema,
             }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
                     renderNodeTitle: renderExplainNode,
-                    textOverflow: TextOverflow.Normal,
+                    textOverflow: 'normal',
                     initialZoomFitsCanvas: true,
                 }, shapes: {
                     node: getYdbPlanNodeShape,

package/dist/containers/Tenant/Query/ExplainResult/utils.d.ts

@@ -1,5 +1,2 @@
 import type { GraphNode } from '@gravity-ui/paranoid';
 export declare const renderExplainNode: (node: GraphNode) => string;
-export declare function getColors(): {
-    getCommonColor: (name: string) => string;
-};

package/dist/containers/Tenant/Query/ExplainResult/utils.js

@@ -2,37 +2,3 @@ export const renderExplainNode = (node) => {
     const parts = node.name.split('|');
     return parts.length > 1 ? parts[1] : node.name;
 };
-export function getColors() {
-    const colorsMap = {
-        success: '--g-color-text-positive',
-        error: '--g-color-text-danger',
-        warning: '--g-color-text-warning',
-        errorBackground: '--g-color-base-danger-medium',
-        warningBackground: '--g-color-base-warning-medium',
-        mute: '--g-color-line-generic',
-        stroke: '--g-color-text-hint',
-        fill: '--g-color-base-generic-ultralight',
-        nodeFill: '--g-color-base-float',
-        nodeShadow: '--g-color-sfx-shadow',
-        titleColor: '--g-color-text-primary',
-        textColor: '--g-color-text-complementary',
-        buttonBorderColor: '--g-color-line-generic',
-        // groupBorderColor: '--g-color-celestial-thunder',
-        // groupFill: '--g-color-celestial',
-        titleHoverColor: '--g-color-text-link-hover',
-        nodeHover: '--g-color-base-float-hover',
-        specialHover: '--g-color-line-focus',
-    };
-    const style = getComputedStyle(document.body);
-    const colors = Object.keys(colorsMap).reduce((acc, key) => {
-        const color = style.getPropertyValue(colorsMap[key]).replace(/ /g, '');
-        if (color) {
-            acc[key] = color;
-        }
-        return acc;
-    }, {});
-    const getCommonColor = (name) => {
-        return style.getPropertyValue(`--g-color-${name}`).replace(/ /g, '');
-    };
-    return Object.assign(Object.assign({}, colors), { getCommonColor });
-}

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

@@ -1,8 +1,9 @@
-@import '../../../../styles/mixins.scss';
+@use '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;
-    @include query-data-table;
+    @include mixins.flex-container();
+    @include mixins.query-data-table();
 
     &__header {
         position: sticky;
@@ -48,9 +49,11 @@
     &__result {
         overflow: auto;
 
+        width: 100%;
+
         // This fixes last row display for ordinary preview (not fullscreen)
         height: calc(100% - 40px);
-        padding: 0 10px;
+        padding-left: 10px;
 
         // Fix white space footer block for fullscreen preview
         .kv-fullscreen & {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { selectQueriesHistory } from '../../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
@@ -11,6 +11,7 @@ import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './QueriesHistory.scss';
 const b = cn('ydb-queries-history');
+const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 function QueriesHistory({ changeUserInput }) {
     const dispatch = useTypedDispatch();
     const [queryMode, setQueryMode] = useQueryModes();
@@ -35,6 +36,7 @@ function QueriesHistory({ changeUserInput }) {
                 return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: row.queryText, maxQueryHeight: MAX_QUERY_HEIGHT }) }));
             },
             sortable: false,
+            width: 600,
         },
         {
             name: 'syntax',
@@ -46,6 +48,6 @@ function QueriesHistory({ changeUserInput }) {
             width: 200,
         },
     ];
-    return (_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
+    return (_jsx("div", { className: b(), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY, columns: columns, data: reversedHistory, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('history.empty'), onRowClick: (row) => onQueryClick(row), rowClassName: () => b('table-row') }) }));
 }
 export default QueriesHistory;

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

@@ -7,7 +7,6 @@
     padding: 0 16px;
 
     @include flex-container();
-    @include table-styles;
 
     &__table-row {
         cursor: pointer;

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

@@ -10,6 +10,7 @@ import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, } from '../../../../utils/constants';
 import { useQueryModes, useSetting } from '../../../../utils/hooks';
+import { LANGUAGE_YQL_ID } from '../../../../utils/monaco/yql/constants';
 import { QUERY_ACTIONS } from '../../../../utils/query';
 import { parseJson } from '../../../../utils/utils';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
@@ -286,7 +287,7 @@ function QueryEditor(props) {
     };
     return (_jsx("div", { className: b(), children: _jsxs(SplitPane, { direction: "vertical", defaultSizePaneKey: DEFAULT_SIZE_RESULT_PANE_KEY, triggerCollapse: resultVisibilityState.triggerCollapse, triggerExpand: resultVisibilityState.triggerExpand, minSize: [0, 52], collapsedSizes: [100, 0], onSplitStartDragAdditional: onSplitStartDragAdditional, children: [_jsxs("div", { className: b('pane-wrapper', {
                         top: true,
-                    }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) })] }) }));
+                    }), children: [_jsx("div", { className: b('monaco-wrapper'), children: _jsx("div", { className: b('monaco'), children: _jsx(MonacoEditor, { language: LANGUAGE_YQL_ID, value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, theme: `vs-${theme}` }) }) }), renderControls()] }), _jsx("div", { className: b('pane-wrapper'), children: _jsx(Result, { executeQuery: executeQuery, explainQuery: explainQuery, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, handleAstQuery: handleAstQuery, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) })] }) }));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ENABLE_AUTOCOMPLETE, useSetting } from '../../../../lib';
+import { AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE } from '../../../../utils/constants';
+import { useSetting } from '../../../../utils/hooks';
 export const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -9,9 +10,10 @@ export const EDITOR_OPTIONS = {
 };
 export function useEditorOptions() {
     const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
+    const [autocompleteOnEnter] = useSetting(AUTOCOMPLETE_ON_ENTER);
     const options = React.useMemo(() => {
         const useAutocomplete = Boolean(enableAutocomplete);
-        return Object.assign({ quickSuggestions: useAutocomplete, suggestOnTriggerCharacters: useAutocomplete }, EDITOR_OPTIONS);
-    }, [enableAutocomplete]);
+        return Object.assign({ quickSuggestions: useAutocomplete, suggestOnTriggerCharacters: useAutocomplete, acceptSuggestionOnEnter: autocompleteOnEnter ? 'on' : 'off' }, EDITOR_OPTIONS);
+    }, [enableAutocomplete, autocompleteOnEnter]);
     return options;
 }

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

@@ -3,6 +3,7 @@ import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { Button, Dialog } from '@gravity-ui/uikit';
 import { Icon } from '../../../../components/Icon';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
@@ -16,6 +17,7 @@ const b = cn('ydb-saved-queries');
 const DeleteDialog = ({ visible, queryName, onCancelClick, onConfirmClick }) => {
     return (_jsxs(Dialog, { open: visible, hasCloseButton: false, size: "s", onClose: onCancelClick, onEnterKeyDown: onConfirmClick, children: [_jsx(Dialog.Header, { caption: i18n('delete-dialog.header') }), _jsxs(Dialog.Body, { className: b('dialog-body'), children: [i18n('delete-dialog.question'), _jsx("span", { className: b('dialog-query-name'), children: ` ${queryName}?` })] }), _jsx(Dialog.Footer, { textButtonApply: i18n('delete-dialog.delete'), textButtonCancel: i18n('delete-dialog.cancel'), onClickButtonCancel: onCancelClick, onClickButtonApply: onConfirmClick })] }));
 };
+const SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY = 'savedQueriesTableColumnsWidth';
 export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) => {
     const dispatch = useTypedDispatch();
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = React.useState(false);
@@ -56,9 +58,10 @@ export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) =
             header: 'Query Text',
             render: ({ row: query }) => (_jsxs("div", { className: b('query'), children: [_jsx("div", { className: b('query-body'), children: _jsx(TruncatedQuery, { value: query.body, maxQueryHeight: MAX_QUERY_HEIGHT }) }), _jsxs("span", { className: b('controls'), children: [_jsx(Button, { view: "flat-secondary", children: _jsx(Icon, { name: "pencil", viewBox: "0 0 24 24" }) }), _jsx(Button, { view: "flat-secondary", onClick: onDeleteQueryClick(query.name), children: _jsx(Icon, { name: "trash", viewBox: "0 0 24 24" }) })] })] })),
             sortable: false,
+            resizeMinWidth: 650,
         },
     ];
-    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b(), children: _jsx(DataTable, { theme: "yandex-cloud", columns: columns, data: savedQueries, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('saved.empty'), rowClassName: () => b('row'), onRowClick: (row) => onQueryClick(row.body, row.name), initialSortOrder: {
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b(), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY, columns: columns, data: savedQueries, settings: QUERY_TABLE_SETTINGS, emptyDataMessage: i18n('saved.empty'), rowClassName: () => b('row'), onRowClick: (row) => onQueryClick(row.body, row.name), initialSortOrder: {
                         columnId: 'name',
                         order: DataTable.ASCENDING,
                     } }) }), _jsx(DeleteDialog, { visible: isDeleteDialogVisible, queryName: queryNameToDelete, onCancelClick: onCancelDeleteClick, onConfirmClick: onConfirmDeleteClick })] }));

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

@@ -9,7 +9,6 @@
     padding: 0 16px;
 
     @include flex-container();
-    @include table-styles;
 
     &__row {
         cursor: pointer;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.d.ts

@@ -1,10 +1,9 @@
 import type { EPathType } from '../../../../types/api/schema';
 import './SchemaViewer.scss';
 interface SchemaViewerProps {
-    className?: string;
     type?: EPathType;
     path?: string;
     withFamilies?: boolean;
 }
-export declare const SchemaViewer: ({ className, type, path, withFamilies }: SchemaViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SchemaViewer: ({ type, path, withFamilies }: SchemaViewerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { useTypedSelector } from '../../../../utils/hooks';
-import { SchemaViewerColumns, prepareColumnDescriptions, prepareFamilies, prepareSchemaTableColumns, } from './helpers';
+import { SCHEMA_COLUMNS_WIDTH_LS_KEY, SchemaViewerColumns, prepareColumnDescriptions, prepareFamilies, prepareSchemaTableColumns, } from './helpers';
 import './SchemaViewer.scss';
 const b = cn('schema-viewer');
-export const SchemaViewer = ({ className, type, path, withFamilies = false }) => {
+export const SchemaViewer = ({ type, path, withFamilies = false }) => {
     const { data, loading } = useTypedSelector((state) => state.schema);
     const currentObjectData = path ? data[path] : undefined;
     const { columns, keyColumnIds } = prepareColumnDescriptions(type, currentObjectData);
     const families = prepareFamilies(currentObjectData);
-    return (_jsx("div", { className: b(null, className), children: loading ? (_jsx(TableSkeleton, {})) : (_jsx(DataTable, { theme: "yandex-cloud", data: columns, columns: prepareSchemaTableColumns({
+    return (_jsx("div", { className: b(null), children: loading ? (_jsx(TableSkeleton, {})) : (_jsx(ResizeableDataTable, { columnsWidthLSKey: SCHEMA_COLUMNS_WIDTH_LS_KEY, data: columns, columns: prepareSchemaTableColumns({
                 type,
                 b,
                 families,

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.d.ts

@@ -16,6 +16,7 @@ export declare function prepareColumnDescriptions(type?: EPathType, scheme?: TEv
     keyColumnIds: number[];
 };
 export declare function prepareFamilies(scheme?: TEvDescribeSchemeResult): Record<number, TFamilyDescription>;
+export declare const SCHEMA_COLUMNS_WIDTH_LS_KEY = "schemaTableColumnsWidth";
 export declare function prepareSchemaTableColumns(options: {
     type?: EPathType;
     b: ClassNameFormatter;

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.js

@@ -69,6 +69,7 @@ export function prepareFamilies(scheme) {
         return acc;
     }, {})) !== null && _e !== void 0 ? _e : {});
 }
+export const SCHEMA_COLUMNS_WIDTH_LS_KEY = 'schemaTableColumnsWidth';
 export function prepareSchemaTableColumns(options) {
     const keyColumnsOrderValues = options.keyColumnIds.reduce((result, keyColumnId, index) => {
         // Put columns with negative values, so they will be the first with ascending sort
@@ -79,14 +80,15 @@ export function prepareSchemaTableColumns(options) {
     const columns = [
         {
             name: SchemaViewerColumns.id,
-            width: 40,
+            width: 60,
         },
     ];
     if (!isExternalTable(options.type)) {
         // External tables don't have key columns
         columns.push({
             name: SchemaViewerColumns.key,
-            width: 40,
+            width: 70,
+            resizeMinWidth: 70,
             // Table should start with key columns on sort click
             defaultOrder: DataTable.ASCENDING,
             // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns

package/dist/containers/Tenant/Tenant.js

@@ -47,7 +47,7 @@ function Tenant(props) {
     React.useEffect(() => {
         if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
             const register = async () => {
-                const { registerYQLCompletionItemProvider } = await import('../../utils/monaco/yqlSuggestions/registerCompletionItemProvider');
+                const { registerYQLCompletionItemProvider } = await import('../../utils/monaco/yql/yql.completionItemProvider');
                 registerYQLCompletionItemProvider(tenantName);
             };
             register().catch(console.error);

package/dist/containers/Tenants/Tenants.js

@@ -8,6 +8,7 @@ import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
 import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
 import { ProblemFilter } from '../../components/ProblemFilter';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { TabletsStatistic } from '../../components/TabletsStatistic';
@@ -22,6 +23,7 @@ import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import './Tenants.scss';
 const b = cn('tenants');
+const DATABASES_COLUMNS_WIDTH_LS_KEY = 'databasesTableColumnsWidth';
 export const Tenants = ({ additionalTenantsProps }) => {
     const dispatch = useTypedDispatch();
     const { currentData, isFetching, error } = tenantsApi.useGetTenantsInfoQuery({ clusterName }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
@@ -75,6 +77,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
             {
                 name: 'Type',
                 width: 200,
+                resizeMinWidth: 150,
                 render: ({ row }) => {
                     if (row.Type !== 'Serverless') {
                         return row.Type;
@@ -138,6 +141,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 name: 'PoolStats',
                 header: 'Pools',
                 width: 100,
+                resizeMinWidth: 60,
                 sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
                 defaultOrder: DataTable.DESCENDING,
                 align: DataTable.LEFT,
@@ -147,7 +151,8 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 name: 'Tablets',
                 header: 'Tablets States',
                 sortable: false,
-                width: 430,
+                width: 500,
+                resizeMinWidth: 500,
                 render: ({ row }) => {
                     const backend = getTenantBackend(row);
                     return row.Tablets ? (_jsx(TabletsStatistic, { path: row.Name, tablets: row.Tablets, nodeIds: row.NodeIds || [], backend: backend })) : ('—');
@@ -157,10 +162,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
         if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
             return _jsx(Illustration, { name: "thumbsUp", width: "200" });
         }
-        return (_jsx(DataTable, { theme: "yandex-cloud", data: filteredTenants, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: "No such tenants" }));
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: DATABASES_COLUMNS_WIDTH_LS_KEY, data: filteredTenants, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: "No such tenants" }));
     };
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, className: b('table'), children: renderTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderTable() })] }));
 };

package/dist/containers/Tenants/Tenants.scss

@@ -25,20 +25,28 @@
         }
     }
 
-    &__table {
-        @include table-styles;
+    &__type {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
     }
 
     &__type-value {
-        margin-right: 10px;
+        overflow: hidden;
+
+        width: min-content;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
     &__type-button {
-        visibility: hidden;
+        display: none;
     }
 
     .data-table__row:hover &__type-button {
-        visibility: visible;
+        display: block;
     }
 
     &__name-wrapper {

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

@@ -7,6 +7,8 @@
     "section.dev-setting": "Development settings",
     "settings.editor.autocomplete.title": "Enable autocomplete",
     "settings.editor.autocomplete.description": "You’re always able to get suggestions by pressing Ctrl+Space.",
+    "settings.editor.autocomplete-on-enter.title": "Accept suggestion on Enter",
+    "settings.editor.autocomplete-on-enter.description": "Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions.",
     "settings.theme.title": "Interface theme",
     "settings.theme.option-dark": "Dark",
     "settings.theme.option-light": "Light",

package/dist/containers/UserSettings/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "page.editor" | "section.dev-setting" | "settings.editor.autocomplete.title" | "settings.editor.autocomplete.description" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "page.editor" | "section.dev-setting" | "settings.editor.autocomplete.title" | "settings.editor.autocomplete.description" | "settings.editor.autocomplete-on-enter.title" | "settings.editor.autocomplete-on-enter.description" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/UserSettings/settings.d.ts

@@ -20,6 +20,7 @@ export declare const useNodesEndpointSetting: SettingProps;
 export declare const useVirtualTables: SettingProps;
 export declare const queryUseMultiSchemaSetting: SettingProps;
 export declare const enableAutocompleteSetting: SettingProps;
+export declare const autocompleteOnEnterSetting: SettingProps;
 export declare const appearanceSection: SettingsSection;
 export declare const experimentsSection: SettingsSection;
 export declare const devSettingsSection: SettingsSection;

package/dist/containers/UserSettings/settings.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flask, PencilToSquare, StarFill } from '@gravity-ui/icons';
-import { BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
+import { AUTOCOMPLETE_ON_ENTER, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
 import { Lang, defaultLang } from '../../utils/i18n';
 import { ClusterModeGuard } from '../ClusterModeGuard';
 import i18n from './i18n';
@@ -73,6 +73,11 @@ export const enableAutocompleteSetting = {
     title: i18n('settings.editor.autocomplete.title'),
     description: i18n('settings.editor.autocomplete.description'),
 };
+export const autocompleteOnEnterSetting = {
+    settingKey: AUTOCOMPLETE_ON_ENTER,
+    title: i18n('settings.editor.autocomplete-on-enter.title'),
+    description: i18n('settings.editor.autocomplete-on-enter.description'),
+};
 export const appearanceSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
@@ -86,7 +91,7 @@ export const experimentsSection = {
 export const devSettingsSection = {
     id: 'devSettingsSection',
     title: i18n('section.dev-setting'),
-    settings: [enableAutocompleteSetting],
+    settings: [enableAutocompleteSetting, autocompleteOnEnterSetting],
 };
 export const generalPage = {
     id: 'generalPage',

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

@@ -23,8 +23,6 @@
 
         @include freeze-nth-column(1);
         @include freeze-nth-column(2, 80px);
-
-        @include table-styles;
     }
 
     .ydb-tree-view {

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -3,15 +3,18 @@ import DataTable from '@gravity-ui/react-data-table';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
 import { isUnavailableNode } from '../../../utils/nodes';
 import { getDefaultNodePath } from '../../Node/NodePages';
+const VERSIONS_COLUMNS_WIDTH_LS_KEY = 'versionsTableColumnsWidth';
 const columns = [
     {
         name: 'NodeId',
         header: '#',
-        width: '80px',
+        width: 80,
+        resizeMinWidth: 80,
         align: DataTable.LEFT,
         render: ({ row }) => row.NodeId,
     },
@@ -25,7 +28,7 @@ const columns = [
             const nodePath = !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
             return (_jsx(EntityStatus, { name: title, path: nodePath, hasClipboardButton: true, showStatus: false }));
         },
-        width: '400px',
+        width: 400,
         align: DataTable.LEFT,
     },
     {
@@ -34,14 +37,14 @@ const columns = [
         render: ({ row }) => row.Endpoints
             ? row.Endpoints.map(({ Name, Address }) => `${Name} ${Address}`).join(', ')
             : '-',
-        width: '300px',
+        width: 300,
         align: DataTable.LEFT,
     },
     {
         name: 'uptime',
         header: 'Uptime',
         sortAccessor: ({ StartTime }) => StartTime && -StartTime,
-        width: '120px',
+        width: 120,
         align: DataTable.LEFT,
         render: ({ row }) => row.uptime,
     },
@@ -51,7 +54,7 @@ const columns = [
         sortAccessor: ({ MemoryUsed = 0 }) => Number(MemoryUsed),
         defaultOrder: DataTable.DESCENDING,
         render: ({ row }) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
-        width: '120px',
+        width: 120,
         align: DataTable.RIGHT,
     },
     {
@@ -60,7 +63,7 @@ const columns = [
         sortAccessor: ({ MemoryLimit = 0 }) => Number(MemoryLimit),
         defaultOrder: DataTable.DESCENDING,
         render: ({ row }) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
-        width: '120px',
+        width: 120,
         align: DataTable.RIGHT,
     },
     {
@@ -68,7 +71,8 @@ const columns = [
         header: 'Pools',
         sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
         defaultOrder: DataTable.DESCENDING,
-        width: '120px',
+        width: 80,
+        resizeMinWidth: 60,
         render: ({ row }) => (row.PoolStats ? _jsx(PoolsGraph, { pools: row.PoolStats }) : '—'),
         align: DataTable.LEFT,
     },
@@ -77,11 +81,12 @@ const columns = [
         header: 'Load average',
         sortAccessor: ({ LoadAverage = [] }) => LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
         defaultOrder: DataTable.DESCENDING,
-        width: '200px',
+        width: 140,
+        resizeMinWidth: 140,
         render: ({ row }) => row.LoadAverage && row.LoadAverage.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAverage[0], percents: true, capacity: 100, colorizeProgress: true })) : ('—'),
         align: DataTable.LEFT,
     },
 ];
 export const NodesTable = ({ nodes }) => {
-    return (_jsx(DataTable, { theme: "yandex-cloud", data: nodes, columns: columns, settings: DEFAULT_TABLE_SETTINGS }));
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: VERSIONS_COLUMNS_WIDTH_LS_KEY, data: nodes, columns: columns, settings: DEFAULT_TABLE_SETTINGS }));
 };

package/dist/services/api.d.ts

@@ -2,6 +2,7 @@ import AxiosWrapper from '@gravity-ui/axios-wrapper';
 import type { ComputeApiRequestParams, NodesApiRequestParams } from '../store/reducers/nodes/types';
 import type { StorageApiRequestParams } from '../store/reducers/storage/types';
 import type { TMetaInfo } from '../types/api/acl';
+import type { TQueryAutocomplete } from '../types/api/autocomplete';
 import type { TClusterInfo } from '../types/api/cluster';
 import type { TComputeInfo } from '../types/api/compute';
 import type { DescribeConsumerResult } from '../types/api/consumer';
@@ -14,6 +15,7 @@ import type { TEvNodesInfo } from '../types/api/nodesList';
 import type { TEvPDiskStateResponse } from '../types/api/pdisk';
 import type { Actions, ExplainActions, ExplainResponse, QueryAPIResponse, Schemas } from '../types/api/query';
 import type { JsonRenderRequestParams, JsonRenderResponse } from '../types/api/render';
+import type { RestartPDiskResponse } from '../types/api/restartPDisk';
 import type { TEvDescribeSchemeResult } from '../types/api/schema';
 import type { TStorageInfo } from '../types/api/storage';
 import type { TEvSystemStateResponse } from '../types/api/systemState';
@@ -104,7 +106,7 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
         failDomainIdx: string | number;
         vDiskIdx: string | number;
     }): Promise<any>;
-    restartPDisk(nodeId: number | string, pDiskId: number | string): Promise<any>;
+    restartPDisk(nodeId: number | string, pDiskId: number | string): Promise<RestartPDiskResponse>;
     killTablet(id?: string): Promise<string>;
     stopTablet(id?: string, hiveId?: string): Promise<string>;
     resumeTablet(id?: string, hiveId?: string): Promise<string>;
@@ -115,6 +117,12 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     authenticate(user: string, password: string): Promise<any>;
     logout(): Promise<any>;
     whoami(): Promise<TUserToken>;
+    autocomplete(params: {
+        database: string;
+        prefix?: string;
+        limit?: number;
+        table?: string[];
+    }): Promise<TQueryAutocomplete>;
     getClustersList(_?: never, { signal }?: {
         signal?: AbortSignal;
     }): Promise<MetaClusters>;

package/dist/services/api.js

@@ -302,6 +302,11 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     whoami() {
         return this.get(this.getPath('/viewer/json/whoami'), {});
     }
+    autocomplete(params) {
+        const { table } = params, rest = __rest(params, ["table"]);
+        const tablesParam = table === null || table === void 0 ? void 0 : table.join(',');
+        return this.get(this.getPath('/viewer/json/autocomplete'), Object.assign(Object.assign({}, rest), { table: tablesParam }), { concurrentId: 'sql-autocomplete' });
+    }
     // used if not single cluster mode
     getClustersList(_, { signal } = {}) {
         return this.get(`${META_BACKEND || ''}/meta/clusters`, null, {

package/dist/services/settings.js

@@ -1,5 +1,5 @@
 import { TENANT_PAGES_IDS } from '../store/reducers/tenant/constants';
-import { ASIDE_HEADER_COMPACT_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../utils/constants';
+import { ASIDE_HEADER_COMPACT_KEY, AUTOCOMPLETE_ON_ENTER, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../utils/constants';
 import { QUERY_ACTIONS, QUERY_MODES } from '../utils/query';
 import { parseJson } from '../utils/utils';
 /** User settings keys and their default values */
@@ -19,6 +19,7 @@ export const DEFAULT_USER_SETTINGS = {
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: false,
+    [AUTOCOMPLETE_ON_ENTER]: true,
 };
 class SettingsManager {
     constructor() {