ydb-embedded-ui 5.4.0 → 6.0.0

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLocation } from 'react-router';
 import { Tabs } from '@gravity-ui/uikit';
-import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
+import { useLocation } from 'react-router';
 import { InternalLink } from '../../../../components/InternalLink/InternalLink';
 import { parseQuery } from '../../../../routes';
+import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
 import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
 import i18n from '../i18n';
 const newQuery = {
@@ -22,8 +22,8 @@ export const queryEditorTabs = [newQuery, history, saved];
 export const QueryTabs = ({ className, activeTab }) => {
     const location = useLocation();
     const queryParams = parseQuery(location);
-    return (_jsx("div", Object.assign({ className: className }, { children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTab, items: queryEditorTabs, wrapTo: ({ id }, node) => {
+    return (_jsx("div", { className: className, children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTab, items: queryEditorTabs, wrapTo: ({ id }, node) => {
                 const path = getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.queryTab]: id }));
-                return (_jsx(InternalLink, Object.assign({ to: path }, { children: node }), id));
-            } }) })));
+                return (_jsx(InternalLink, { to: path, children: node }, id));
+            } }) }));
 };

package/dist/containers/Tenant/Query/SaveQuery/SaveQuery.d.ts

@@ -3,4 +3,4 @@ declare function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }: {
     savedQueries: any;
     onSaveQuery: any;
     saveButtonDisabled: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import _ from 'lodash';
-import cn from 'bem-cn-lite';
-import { Dialog, DropdownMenu, TextInput, Button } from '@gravity-ui/uikit';
+import React from 'react';
+import { Button, Dialog, DropdownMenu, TextInput } from '@gravity-ui/uikit';
+import some from 'lodash/some';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
+import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import './SaveQuery.scss';
 const b = cn('kv-save-query');
 function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-    const [isDialogVisible, setIsDialogVisible] = useState(false);
-    const [queryName, setQueryName] = useState('');
-    const [validationError, setValidationError] = useState(null);
+    const [isDialogVisible, setIsDialogVisible] = React.useState(false);
+    const [queryName, setQueryName] = React.useState('');
+    const [validationError, setValidationError] = React.useState(null);
     const queryNameToEdit = useTypedSelector((state) => state.saveQuery);
     const dispatch = useTypedDispatch();
     const onSaveQueryClick = () => {
@@ -28,7 +28,7 @@ function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
         setValidationError(validateQueryName(value));
     };
     const validateQueryName = (value) => {
-        if (_.some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
+        if (some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
             return 'This name already exists';
         }
         return null;
@@ -45,12 +45,12 @@ function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
         dispatch(setQueryNameToEdit(null));
     };
     const renderDialog = () => {
-        return (_jsxs(Dialog, Object.assign({ open: isDialogVisible, hasCloseButton: false, size: "s", onClose: onCloseDialog, onEnterKeyDown: onSaveClick }, { children: [_jsx(Dialog.Header, { caption: "Save query" }), _jsxs(Dialog.Body, Object.assign({ className: b('dialog-body') }, { children: [singleClusterMode && (_jsx("div", Object.assign({ className: b('dialog-row') }, { children: "The query will be saved in your browser" }))), _jsxs("div", Object.assign({ className: b('dialog-row') }, { children: [_jsx("label", Object.assign({ htmlFor: "queryName", className: b('field-title', 'required') }, { children: "Query name" })), _jsxs("div", Object.assign({ className: b('control-wrapper') }, { children: [_jsx(TextInput, { id: "queryName", placeholder: "Enter query name", value: queryName, onUpdate: onQueryNameChange, hasClear: true, autoFocus: true }), _jsx("span", Object.assign({ className: b('error') }, { children: validationError }))] }))] }))] })), _jsx(Dialog.Footer, { textButtonApply: "Save", textButtonCancel: "Cancel", onClickButtonCancel: onCloseDialog, onClickButtonApply: onSaveClick, propsButtonApply: {
+        return (_jsxs(Dialog, { open: isDialogVisible, hasCloseButton: false, size: "s", onClose: onCloseDialog, onEnterKeyDown: onSaveClick, children: [_jsx(Dialog.Header, { caption: "Save query" }), _jsxs(Dialog.Body, { className: b('dialog-body'), children: [singleClusterMode && (_jsx("div", { className: b('dialog-row'), children: "The query will be saved in your browser" })), _jsxs("div", { className: b('dialog-row'), children: [_jsx("label", { htmlFor: "queryName", className: b('field-title', 'required'), children: "Query name" }), _jsxs("div", { className: b('control-wrapper'), children: [_jsx(TextInput, { id: "queryName", placeholder: "Enter query name", value: queryName, onUpdate: onQueryNameChange, hasClear: true, autoFocus: true }), _jsx("span", { className: b('error'), children: validationError })] })] })] }), _jsx(Dialog.Footer, { textButtonApply: "Save", textButtonCancel: "Cancel", onClickButtonCancel: onCloseDialog, onClickButtonApply: onSaveClick, propsButtonApply: {
                         disabled: !queryName || Boolean(validationError),
-                    } })] })));
+                    } })] }));
     };
     const renderSaveButton = (onClick) => {
-        return (_jsx(Button, Object.assign({ onClick: onClick, disabled: saveButtonDisabled }, { children: queryNameToEdit ? 'Edit query' : 'Save query' })));
+        return (_jsx(Button, { onClick: onClick, disabled: saveButtonDisabled, children: queryNameToEdit ? 'Edit query' : 'Save query' }));
     };
     const renderSaveDropdownMenu = () => {
         const items = [

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.d.ts

@@ -7,5 +7,5 @@ interface SavedQueriesProps {
     }) => void;
     onDeleteQuery: (queryName: string) => void;
 }
-export declare const SavedQueries: ({ savedQueries, changeUserInput, onDeleteQuery }: SavedQueriesProps) => JSX.Element;
+export declare const SavedQueries: ({ savedQueries, changeUserInput, onDeleteQuery }: SavedQueriesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,25 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import block from 'bem-cn-lite';
-import { Dialog, Button } from '@gravity-ui/uikit';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
-import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
-import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
-import { Icon } from '../../../../components/Icon';
+import { setQueryTab } from '../../../../store/reducers/tenant/tenant';
+import { cn } from '../../../../utils/cn';
 import { useTypedDispatch } from '../../../../utils/hooks';
 import { MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS } from '../../utils/constants';
 import i18n from '../i18n';
 import './SavedQueries.scss';
-const b = block('ydb-saved-queries');
+const b = cn('ydb-saved-queries');
 const DeleteDialog = ({ visible, queryName, onCancelClick, onConfirmClick }) => {
-    return (_jsxs(Dialog, Object.assign({ open: visible, hasCloseButton: false, size: "s", onClose: onCancelClick, onEnterKeyDown: onConfirmClick }, { children: [_jsx(Dialog.Header, { caption: i18n('delete-dialog.header') }), _jsxs(Dialog.Body, Object.assign({ className: b('dialog-body') }, { children: [i18n('delete-dialog.question'), _jsx("span", Object.assign({ className: b('dialog-query-name') }, { children: ` ${queryName}?` }))] })), _jsx(Dialog.Footer, { textButtonApply: i18n('delete-dialog.delete'), textButtonCancel: i18n('delete-dialog.cancel'), onClickButtonCancel: onCancelClick, onClickButtonApply: 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 })] }));
 };
 export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) => {
     const dispatch = useTypedDispatch();
-    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
-    const [queryNameToDelete, setQueryNameToDelete] = useState('');
+    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = React.useState(false);
+    const [queryNameToDelete, setQueryNameToDelete] = React.useState('');
     const closeDeleteDialog = () => {
         setIsDeleteDialogVisible(false);
         setQueryNameToDelete('');
@@ -48,18 +48,18 @@ export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) =
         {
             name: 'name',
             header: 'Name',
-            render: ({ row: query }) => _jsx("div", Object.assign({ className: b('query-name') }, { children: query.name })),
+            render: ({ row: query }) => _jsx("div", { className: b('query-name'), children: query.name }),
             width: 200,
         },
         {
             name: 'body',
             header: 'Query Text',
-            render: ({ row: query }) => (_jsxs("div", Object.assign({ className: b('query') }, { children: [_jsx("div", Object.assign({ className: b('query-body') }, { children: _jsx(TruncatedQuery, { value: query.body, maxQueryHeight: MAX_QUERY_HEIGHT }) })), _jsxs("span", Object.assign({ className: b('controls') }, { children: [_jsx(Button, Object.assign({ view: "flat-secondary" }, { children: _jsx(Icon, { name: "pencil", viewBox: "0 0 24 24" }) })), _jsx(Button, Object.assign({ view: "flat-secondary", onClick: onDeleteQueryClick(query.name) }, { children: _jsx(Icon, { name: "trash", viewBox: "0 0 24 24" }) }))] }))] }))),
+            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,
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ 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(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: {
                         columnId: 'name',
                         order: DataTable.ASCENDING,
-                    } }) })), _jsx(DeleteDialog, { visible: isDeleteDialogVisible, queryName: queryNameToDelete, onCancelClick: onCancelDeleteClick, onConfirmClick: onConfirmDeleteClick })] }));
+                    } }) }), _jsx(DeleteDialog, { visible: isDeleteDialogVisible, queryName: queryNameToDelete, onCancelClick: onCancelDeleteClick, onConfirmClick: onConfirmDeleteClick })] }));
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { EPathType } from '../../../../types/api/schema';
 interface SchemaTreeProps {
     rootPath: string;
@@ -6,5 +5,5 @@ interface SchemaTreeProps {
     rootType?: EPathType;
     currentPath?: string;
 }
-export declare function SchemaTree(props: SchemaTreeProps): JSX.Element;
+export declare function SchemaTree(props: SchemaTreeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import React from 'react';
 import { NavigationTree } from 'ydb-ui-components';
-import { setCurrentSchemaPath, preloadSchemas } from '../../../../store/reducers/schema/schema';
+import { preloadSchemas, setCurrentSchemaPath } from '../../../../store/reducers/schema/schema';
 import { useQueryModes, useTypedDispatch } from '../../../../utils/hooks';
 import { isChildlessPathType, mapPathTypeToNavigationTreeType } from '../../utils/schema';
 import { getActions } from '../../utils/schemaActions';
@@ -38,7 +38,7 @@ export function SchemaTree(props) {
     const handleActivePathUpdate = (activePath) => {
         dispatch(setCurrentSchemaPath(activePath));
     };
-    useEffect(() => {
+    React.useEffect(() => {
         // if the cached path is not in the current tree, show root
         if (!(currentPath === null || currentPath === void 0 ? void 0 : currentPath.startsWith(rootPath))) {
             handleActivePathUpdate(rootPath);

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

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

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

@@ -1,72 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
-import { Icon } from '../../../../components/Icon';
-import { isExternalTable } from '../../utils/schema';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { SchemaViewerColumns, prepareColumnDescriptions, prepareFamilies, prepareSchemaTableColumns, } from './helpers';
 import './SchemaViewer.scss';
 const b = cn('schema-viewer');
-const SchemaViewerColumns = {
-    id: 'Id',
-    name: 'Name',
-    key: 'Key',
-    type: 'Type',
-    notNull: 'NotNull',
+export const SchemaViewer = ({ className, 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({
+                type,
+                b,
+                families,
+                keyColumnIds,
+                withFamilies,
+            }), settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: {
+                columnId: SchemaViewerColumns.key,
+                order: DataTable.ASCENDING,
+            } })) }));
 };
-export const SchemaViewer = ({ keyColumnIds = [], columns = [], type }) => {
-    // Keys should be displayd by their order in keyColumnIds (Primary Key)
-    const keyColumnsOrderValues = useMemo(() => {
-        return keyColumnIds.reduce((result, keyColumnId, index) => {
-            // Put columns with negative values, so they will be the first with ascending sort
-            // Minus keyColumnIds.length for the first key, -1 for the last
-            result[keyColumnId] = index - keyColumnIds.length;
-            return result;
-        }, {});
-    }, [keyColumnIds]);
-    let dataTableColumns = [
-        {
-            name: SchemaViewerColumns.id,
-            width: 40,
-        },
-        {
-            name: SchemaViewerColumns.key,
-            width: 40,
-            // Table should start with key columns on sort click
-            defaultOrder: DataTable.ASCENDING,
-            sortAccessor: (row) => {
-                // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
-                return (row.Id && keyColumnsOrderValues[row.Id]) || 1;
-            },
-            render: ({ row }) => {
-                return row.Id && keyColumnIds.includes(row.Id) ? (_jsx("div", Object.assign({ className: b('key-icon') }, { children: _jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }) }))) : null;
-            },
-        },
-        {
-            name: SchemaViewerColumns.name,
-            width: 100,
-        },
-        {
-            name: SchemaViewerColumns.type,
-            width: 100,
-        },
-        {
-            name: SchemaViewerColumns.notNull,
-            width: 100,
-            // Table should start with notNull columns on sort click
-            defaultOrder: DataTable.DESCENDING,
-            render: ({ row }) => {
-                if (row.NotNull) {
-                    return '\u2713';
-                }
-                return undefined;
-            },
-        },
-    ];
-    if (isExternalTable(type)) {
-        // External tables don't have key columns
-        dataTableColumns = dataTableColumns.filter((column) => column.name !== SchemaViewerColumns.key);
-    }
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: columns, columns: dataTableColumns, settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: { columnId: SchemaViewerColumns.key, order: DataTable.ASCENDING } }) })));
-};
-export default SchemaViewer;

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

@@ -1,5 +1,4 @@
 .schema-viewer {
-    padding: 0px 12px;
     &__key-icon {
         display: flex;
         align-items: center;

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

@@ -0,0 +1,25 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { Column } from '@gravity-ui/react-data-table';
+import type { EPathType, TColumnDescription, TEvDescribeSchemeResult, TFamilyDescription } from '../../../../types/api/schema';
+export declare const SchemaViewerColumns: {
+    id: string;
+    name: string;
+    key: string;
+    type: string;
+    notNull: string;
+    familyName: string;
+    preferredPoolKind: string;
+    columnCodec: string;
+};
+export declare function prepareColumnDescriptions(type?: EPathType, scheme?: TEvDescribeSchemeResult): {
+    columns: TColumnDescription[];
+    keyColumnIds: number[];
+};
+export declare function prepareFamilies(scheme?: TEvDescribeSchemeResult): Record<number, TFamilyDescription>;
+export declare function prepareSchemaTableColumns(options: {
+    type?: EPathType;
+    b: ClassNameFormatter;
+    families: Record<number, TFamilyDescription>;
+    keyColumnIds: number[];
+    withFamilies: boolean;
+}): Column<TColumnDescription>[];

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { Icon } from '../../../../components/Icon';
+import { EColumnCodec } from '../../../../types/api/schema';
+import { isColumnEntityType, isExternalTable, isRowTable, isTableType } from '../../utils/schema';
+export const SchemaViewerColumns = {
+    id: 'Id',
+    name: 'Name',
+    key: 'Key',
+    type: 'Type',
+    notNull: 'NotNull',
+    familyName: 'Family',
+    preferredPoolKind: 'Media',
+    columnCodec: 'Compression',
+};
+function prepareOlapTableSchema(tableSchema = {}) {
+    const { Name, Schema } = tableSchema;
+    if (Schema) {
+        const { Columns, KeyColumnNames } = Schema;
+        const KeyColumnIds = KeyColumnNames === null || KeyColumnNames === void 0 ? void 0 : KeyColumnNames.map((name) => {
+            const column = Columns === null || Columns === void 0 ? void 0 : Columns.find((el) => el.Name === name);
+            return column === null || column === void 0 ? void 0 : column.Id;
+        }).filter((id) => id !== undefined);
+        return {
+            Columns,
+            KeyColumnNames,
+            Name,
+            KeyColumnIds,
+        };
+    }
+    return {
+        Name,
+    };
+}
+function formatColumnCodec(codec) {
+    if (!codec) {
+        return null;
+    }
+    if (codec === EColumnCodec.ColumnCodecPlain) {
+        return 'None';
+    }
+    return codec.replace('ColumnCodec', '').toLocaleLowerCase();
+}
+export function prepareColumnDescriptions(type, scheme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    let keyColumnIds = [];
+    let columns = [];
+    if (isTableType(type) && isColumnEntityType(type)) {
+        const description = (_a = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _a === void 0 ? void 0 : _a.ColumnTableDescription;
+        const columnTableSchema = prepareOlapTableSchema(description);
+        keyColumnIds = (_b = columnTableSchema.KeyColumnIds) !== null && _b !== void 0 ? _b : [];
+        columns = (_c = columnTableSchema.Columns) !== null && _c !== void 0 ? _c : [];
+    }
+    else if (isExternalTable(type)) {
+        columns = (_f = (_e = (_d = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _d === void 0 ? void 0 : _d.ExternalTableDescription) === null || _e === void 0 ? void 0 : _e.Columns) !== null && _f !== void 0 ? _f : [];
+    }
+    else {
+        keyColumnIds = (_j = (_h = (_g = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _g === void 0 ? void 0 : _g.Table) === null || _h === void 0 ? void 0 : _h.KeyColumnIds) !== null && _j !== void 0 ? _j : [];
+        columns = (_m = (_l = (_k = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _k === void 0 ? void 0 : _k.Table) === null || _l === void 0 ? void 0 : _l.Columns) !== null && _m !== void 0 ? _m : [];
+    }
+    return { columns, keyColumnIds };
+}
+export function prepareFamilies(scheme) {
+    var _a, _b, _c, _d, _e;
+    return ((_e = (_d = (_c = (_b = (_a = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _a === void 0 ? void 0 : _a.Table) === null || _b === void 0 ? void 0 : _b.PartitionConfig) === null || _c === void 0 ? void 0 : _c.ColumnFamilies) === null || _d === void 0 ? void 0 : _d.reduce((acc, family) => {
+        if (family.Id) {
+            acc[family.Id] = family;
+        }
+        return acc;
+    }, {})) !== null && _e !== void 0 ? _e : {});
+}
+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
+        // Minus keyColumnIds.length for the first key, -1 for the last
+        result[keyColumnId] = index - options.keyColumnIds.length;
+        return result;
+    }, {});
+    const columns = [
+        {
+            name: SchemaViewerColumns.id,
+            width: 40,
+        },
+    ];
+    if (!isExternalTable(options.type)) {
+        // External tables don't have key columns
+        columns.push({
+            name: SchemaViewerColumns.key,
+            width: 40,
+            // 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
+            sortAccessor: (row) => (row.Id && keyColumnsOrderValues[row.Id]) || 1,
+            render: ({ row }) => {
+                return row.Id && options.keyColumnIds.includes(row.Id) ? (_jsx("div", { className: options.b('key-icon'), children: _jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }) })) : null;
+            },
+        });
+    }
+    columns.push({
+        name: SchemaViewerColumns.name,
+        width: 100,
+    }, {
+        name: SchemaViewerColumns.type,
+        width: 100,
+    }, {
+        name: SchemaViewerColumns.notNull,
+        width: 100,
+        // Table should start with notNull columns on sort click
+        defaultOrder: DataTable.DESCENDING,
+        render: ({ row }) => {
+            if (row.NotNull) {
+                return '\u2713';
+            }
+            return undefined;
+        },
+    });
+    if (options.withFamilies && isRowTable(options.type)) {
+        columns.push({
+            name: SchemaViewerColumns.familyName,
+            width: 100,
+            render: ({ row }) => (row.Family ? options.families[row.Family].Name : undefined),
+            sortAccessor: (row) => (row.Family ? options.families[row.Family].Name : undefined),
+        }, {
+            name: SchemaViewerColumns.preferredPoolKind,
+            width: 100,
+            render: ({ row }) => {
+                var _a, _b;
+                return row.Family
+                    ? (_b = (_a = options.families[row.Family].StorageConfig) === null || _a === void 0 ? void 0 : _a.Data) === null || _b === void 0 ? void 0 : _b.PreferredPoolKind
+                    : undefined;
+            },
+            sortAccessor: (row) => {
+                var _a, _b;
+                return row.Family
+                    ? (_b = (_a = options.families[row.Family].StorageConfig) === null || _a === void 0 ? void 0 : _a.Data) === null || _b === void 0 ? void 0 : _b.PreferredPoolKind
+                    : undefined;
+            },
+        }, {
+            name: SchemaViewerColumns.columnCodec,
+            width: 100,
+            render: ({ row }) => row.Family
+                ? formatColumnCodec(options.families[row.Family].ColumnCodec)
+                : undefined,
+            sortAccessor: (row) => row.Family ? options.families[row.Family].ColumnCodec : undefined,
+        });
+    }
+    return columns;
+}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../types/additionalProps';
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../types/additionalProps';
 import './Tenant.scss';
 interface TenantProps {
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function Tenant(props: TenantProps): JSX.Element;
+declare function Tenant(props: TenantProps): import("react/jsx-runtime").JSX.Element;
 export default Tenant;

package/dist/containers/Tenant/Tenant.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef } from 'react';
-import cn from 'bem-cn-lite';
-import { useLocation } from 'react-router';
+import React from 'react';
 import qs from 'qs';
 import { Helmet } from 'react-helmet-async';
-import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { disableAutorefresh, getSchema } from '../../store/reducers/schema/schema';
-import { registerYQLCompletionItemProvider } from '../../utils/monaco';
-import SplitPane from '../../components/SplitPane';
+import { useLocation } from 'react-router';
 import { AccessDenied } from '../../components/Errors/403';
-import { ObjectSummary } from './ObjectSummary/ObjectSummary';
+import SplitPane from '../../components/SplitPane';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { getSchema } from '../../store/reducers/schema/schema';
+import { cn } from '../../utils/cn';
+import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
-import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from './utils/paneVisibilityToggleHelpers';
+import { ObjectSummary } from './ObjectSummary/ObjectSummary';
 import i18n from './i18n';
+import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from './utils/paneVisibilityToggleHelpers';
 import './Tenant.scss';
 const b = cn('tenant-page');
 const getTenantSummaryState = () => {
@@ -27,15 +26,15 @@ const getTenantSummaryState = () => {
 };
 function Tenant(props) {
     var _a;
-    const [summaryVisibilityState, dispatchSummaryVisibilityAction] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, getTenantSummaryState);
-    const previousTenant = useRef();
+    const [summaryVisibilityState, dispatchSummaryVisibilityAction] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, getTenantSummaryState);
+    const previousTenant = React.useRef();
     const { currentSchemaPath, currentSchema: currentItem = {} } = useTypedSelector((state) => state.schema);
     const { PathType: preloadedPathType, PathSubType: preloadedPathSubType } = useTypedSelector((state) => {
         var _a, _b;
         return currentSchemaPath
-            ? ((_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) || {}
-            : {};
-    });
+            ? (_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self
+            : undefined;
+    }) || {};
     const { PathType: currentPathType, PathSubType: currentPathSubType } = ((_a = currentItem.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
     const { error: { status: schemaStatus = 200 } = {} } = useTypedSelector((state) => state.schema);
     const dispatch = useTypedDispatch();
@@ -45,22 +44,25 @@ function Tenant(props) {
     });
     const { name } = queryParams;
     const tenantName = name;
-    if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
-        registerYQLCompletionItemProvider(tenantName);
-        previousTenant.current = tenantName;
-    }
-    useEffect(() => {
+    React.useEffect(() => {
+        if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
+            const register = async () => {
+                const { registerYQLCompletionItemProvider } = await import('../../utils/monaco/yqlSuggestions/registerCompletionItemProvider');
+                registerYQLCompletionItemProvider(tenantName);
+            };
+            register().catch(console.error);
+            previousTenant.current = tenantName;
+        }
+    }, [tenantName]);
+    React.useEffect(() => {
         dispatch(getSchema({ path: tenantName }));
     }, [tenantName, dispatch]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (currentSchemaPath) {
             dispatch(getSchema({ path: currentSchemaPath }));
         }
     }, [currentSchemaPath, dispatch]);
-    useEffect(() => {
-        dispatch(disableAutorefresh());
-    }, [currentSchemaPath, tenantName, dispatch]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (tenantName) {
             dispatch(setHeaderBreadcrumbs('tenant', { tenantName }));
         }
@@ -76,10 +78,6 @@ function Tenant(props) {
     };
     const showBlockingError = schemaStatus === 403;
     const title = currentSchemaPath || tenantName || i18n('page.title');
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral
-                    // @ts-expect-error
-                    , { 
-                        // @ts-expect-error
-                        type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps, tenantName: tenantName })] })))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, { defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional, children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral, { type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps, tenantName: tenantName })] }))] }));
 }
 export default Tenant;

package/dist/containers/Tenant/utils/index.d.ts

@@ -1,2 +1,2 @@
-import { TPathDescription } from '../../../types/api/schema';
+import type { TPathDescription } from '../../../types/api/schema';
 export declare const getEntityName: (pathDescription?: TPathDescription) => string | undefined;

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './ToggleButton.scss';
 export interface InitialPaneState {
     triggerExpand: boolean;
@@ -18,5 +17,5 @@ interface ToggleButtonProps {
     initialDirection?: 'right' | 'left' | 'top' | 'bottom';
     className?: string;
 }
-export declare function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection, className, }: ToggleButtonProps): JSX.Element;
+export declare function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection, className, }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};