ydb-embedded-ui 5.5.0 → 6.0.0

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath } from '../../../../store/reducers/executeQuery';
+import React from 'react';
+import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, sendExecuteQuery, setTenantPath } from '../../../../store/reducers/executeQuery';
 import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import type { EPathType } from '../../../../types/api/schema';
 import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
 import type { ExplainQueryState } from '../../../../types/store/explainQuery';
-import type { EPathType } from '../../../../types/api/schema';
 import './QueryEditor.scss';
 interface QueryEditorProps {
     path: string;
@@ -20,11 +20,20 @@ interface QueryEditorProps {
     executeQuery: ExecuteQueryState;
     explainQuery: ExplainQueryState;
     theme: string;
-    type: EPathType;
+    type?: EPathType;
     showPreview: boolean;
     setShowPreview: (...args: Parameters<typeof setShowPreview>) => void;
     saveQueryToHistory: (...args: Parameters<typeof saveQueryToHistory>) => void;
 }
-declare function QueryEditor(props: QueryEditorProps): JSX.Element;
-declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, import("react-redux").Omit<QueryEditorProps, "executeQuery" | "explainQuery" | "setTenantPath" | "showPreview" | "sendExecuteQuery" | "saveQueryToHistory" | "goToPreviousQuery" | "goToNextQuery" | "getExplainQuery" | "getExplainQueryAst" | "setShowPreview">>;
+declare function QueryEditor(props: QueryEditorProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, {
+    theme: string;
+    type?: EPathType | undefined;
+    path: string;
+    changeUserInput: (arg: {
+        input: string;
+    }) => void;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;

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

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef, useState } from 'react';
-import { connect } from 'react-redux';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import throttle from 'lodash/throttle';
+import { connect } from 'react-redux';
 import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
 import SplitPane from '../../../../components/SplitPane';
-import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath, } from '../../../../store/reducers/executeQuery';
+import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, sendExecuteQuery, setTenantPath, } from '../../../../store/reducers/executeQuery';
 import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
-import { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, SAVED_QUERIES_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../../../utils/constants';
-import { useSetting, useQueryModes } from '../../../../utils/hooks';
+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 { QUERY_ACTIONS } from '../../../../utils/query';
 import { parseJson } from '../../../../utils/utils';
-import { useEditorOptions } from './helpers';
 import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from '../../utils/paneVisibilityToggleHelpers';
-import { Preview } from '../Preview/Preview';
 import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
+import { Preview } from '../Preview/Preview';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
 import i18n from '../i18n';
+import { useEditorOptions } from './helpers';
 import './QueryEditor.scss';
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
@@ -39,14 +39,14 @@ function QueryEditor(props) {
     const editorOptions = useEditorOptions();
     const { path, setTenantPath: setPath, executeQuery, explainQuery, type, theme, changeUserInput, showPreview, } = props;
     const { tenantPath: savedPath } = executeQuery;
-    const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
-    const [isResultLoaded, setIsResultLoaded] = useState(false);
+    const [resultType, setResultType] = React.useState(RESULT_TYPES.EXECUTE);
+    const [isResultLoaded, setIsResultLoaded] = React.useState(false);
     const [queryMode, setQueryMode] = useQueryModes();
     const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
     const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY);
-    const [monacoHotKey, setMonacoHotKey] = useState(null);
-    useEffect(() => {
+    const [monacoHotKey, setMonacoHotKey] = React.useState(null);
+    React.useEffect(() => {
         if (savedPath !== path) {
             if (savedPath) {
                 changeUserInput({ input: '' });
@@ -54,9 +54,9 @@ function QueryEditor(props) {
             setPath(path);
         }
     }, [changeUserInput, setPath, path, savedPath]);
-    const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
-    const editorRef = useRef();
-    useEffect(() => {
+    const [resultVisibilityState, dispatchResultVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED), initialTenantCommonInfoState);
+    const editorRef = React.useRef();
+    React.useEffect(() => {
         const updateEditor = () => {
             if (editorRef.current) {
                 editorRef.current.layout();
@@ -71,7 +71,7 @@ function QueryEditor(props) {
             window.removeEventListener('resize', onChangeWindow);
         };
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         const storageEventHandler = (event) => {
             if (event.key === SAVED_QUERIES_KEY) {
                 const v = parseJson(event.newValue);
@@ -83,10 +83,10 @@ function QueryEditor(props) {
             window.removeEventListener('storage', storageEventHandler);
         };
     }, [setSavedQueries]);
-    useEffect(() => {
+    React.useEffect(() => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         if (props.showPreview || isResultLoaded) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
         }
@@ -94,7 +94,7 @@ function QueryEditor(props) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
     }, [props.showPreview, isResultLoaded]);
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
         const { input, history } = executeQuery;
         const hasUnsavedInput = input
@@ -154,7 +154,7 @@ function QueryEditor(props) {
         props.setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };
-    useEffect(() => {
+    React.useEffect(() => {
         var _a, _b;
         if (monacoHotKey === null) {
             return;
@@ -284,11 +284,9 @@ function QueryEditor(props) {
     const renderControls = () => {
         return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQuery.loading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQuery.loading, onSaveQueryClick: onSaveQueryHandler, savedQueries: savedQueries, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs(SplitPane, Object.assign({ 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", Object.assign({ className: b('pane-wrapper', {
+    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", Object.assign({ className: b('monaco-wrapper') }, { children: _jsx("div", Object.assign({ className: b('monaco') }, { children: _jsx(MonacoEditor, { language: "sql", value: executeQuery.input, options: editorOptions, onChange: onChange, editorDidMount: editorDidMount, 
-                                    // pass noop otherwise it will throw error
-                                    editorWillUnmount: () => { }, theme: `vs-${theme}` }) })) })), renderControls()] })), _jsx("div", Object.assign({ 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: "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 }) })] }) }));
 }
 const mapStateToProps = (state) => {
     return {

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

@@ -1,5 +1,5 @@
+import React from 'react';
 import { ENABLE_AUTOCOMPLETE, useSetting } from '../../../../lib';
-import { useMemo } from 'react';
 export const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -9,7 +9,7 @@ export const EDITOR_OPTIONS = {
 };
 export function useEditorOptions() {
     const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
-    const options = useMemo(() => {
+    const options = React.useMemo(() => {
         const useAutocomplete = Boolean(enableAutocomplete);
         return Object.assign({ quickSuggestions: useAutocomplete, suggestOnTriggerCharacters: useAutocomplete }, EDITOR_OPTIONS);
     }, [enableAutocomplete]);

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

@@ -12,5 +12,5 @@ interface QueryEditorControlsProps {
     queryMode: QueryMode;
     highlightedAction: QueryAction;
 }
-export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => JSX.Element;
+export declare const QueryEditorControls: ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }: QueryEditorControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import React from 'react';
 import { Button, DropdownMenu } from '@gravity-ui/uikit';
-import { useMemo } from 'react';
-import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
 import { Icon } from '../../../../components/Icon';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
+import { cn } from '../../../../utils/cn';
+import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
 import SaveQuery from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import './QueryEditorControls.scss';
 const queryModeSelectorQa = 'query-mode-selector';
 const queryModeSelectorPopupQa = 'query-mode-selector-popup';
-const b = block('ydb-query-editor-controls');
+const b = cn('ydb-query-editor-controls');
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
         title: QUERY_MODES_TITLES[QUERY_MODES.script],
@@ -34,7 +34,7 @@ const QueryModeSelectorOptions = {
     },
 };
 export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
-    const querySelectorMenuItems = useMemo(() => {
+    const querySelectorMenuItems = React.useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
             return {
                 text: (_jsx(LabelWithPopover, { className: b('item-with-popover'), contentClassName: b('popover'), text: title, popoverContent: description })),
@@ -46,12 +46,12 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
     }, [onUpdateQueryMode]);
     const runView = highlightedAction === 'execute' ? 'action' : undefined;
     const explainView = highlightedAction === 'explain' ? 'action' : undefined;
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('left') }, { children: [_jsxs(Button, Object.assign({ onClick: () => {
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
                             onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView }, { children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] })), _jsx(Button, Object.assign({ onClick: () => {
+                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] }), _jsx(Button, { onClick: () => {
                             onExplainButtonClick(queryMode);
-                        }, disabled: disabled, loading: explainIsLoading, view: explainView }, { children: "Explain" })), _jsx("div", Object.assign({ className: b('mode-selector') }, { children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
+                        }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
                                 className: b('mode-selector__popup'),
                                 qa: queryModeSelectorPopupQa,
-                            }, switcher: _jsx(Button, Object.assign({ className: b('mode-selector__button'), qa: queryModeSelectorQa }, { children: _jsxs("span", Object.assign({ className: b('mode-selector__button-content') }, { children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] })) })) }) }))] })), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] })));
+                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] }) }) }) })] }), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] }));
 };

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

@@ -3,12 +3,11 @@
     flex: 0 0 40px;
     justify-content: space-between;
     align-items: flex-end;
+    gap: 24px;
 
     min-height: 40px;
     padding: 5px 0px;
 
-    gap: 24px;
-
     &__left {
         display: flex;
         gap: 12px;

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

@@ -13,5 +13,5 @@ interface QueryEditorTabsProps {
     className?: string;
     activeTab?: TenantQueryTab;
 }
-export declare const QueryTabs: ({ className, activeTab }: QueryEditorTabsProps) => JSX.Element;
+export declare const QueryTabs: ({ className, activeTab }: QueryEditorTabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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 React from 'react';
+import { Button, Dialog, DropdownMenu, TextInput } from '@gravity-ui/uikit';
 import some from 'lodash/some';
-import cn from 'bem-cn-lite';
-import { Dialog, DropdownMenu, TextInput, Button } from '@gravity-ui/uikit';
 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 = () => {
@@ -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>[];