ydb-embedded-ui 6.4.0 → 6.6.0

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+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';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { MonacoEditor } from '../../../../components/MonacoEditor/MonacoEditor';
+import { QueryExecutionStatus } from '../../../../components/QueryExecutionStatus';
+import { explainVersions } from '../../../../store/reducers/explainQuery/utils';
+import { disableFullscreen } from '../../../../store/reducers/fullscreen';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { LANGUAGE_S_EXPRESSION_ID } from '../../../../utils/monaco/s-expression/constants';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { PaneVisibilityToggleButtons } from '../../utils/paneVisibilityToggleHelpers';
+import { renderExplainNode } from './utils';
+import './ExplainResult.scss';
+import 'react-json-inspector/json-inspector.css';
+const b = cn('ydb-query-explain-result');
+const EDITOR_OPTIONS = {
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    readOnly: true,
+    minimap: {
+        enabled: false,
+    },
+    wrappingIndent: 'indent',
+};
+const ExplainOptionIds = {
+    schema: 'schema',
+    json: 'json',
+    ast: 'ast',
+};
+const explainOptions = [
+    { value: ExplainOptionIds.schema, content: 'Schema' },
+    { value: ExplainOptionIds.json, content: 'JSON' },
+    { value: ExplainOptionIds.ast, content: 'AST' },
+];
+function GraphRoot(props) {
+    const paranoid = React.useRef();
+    const { data, opts, shapes, theme } = props;
+    React.useEffect(() => {
+        const graphRoot = document.getElementById('graphRoot');
+        if (!graphRoot) {
+            throw new Error("Can't find element with id #graphRoot");
+        }
+        graphRoot.innerHTML = '';
+        paranoid.current = getTopology('graphRoot', data, opts, shapes);
+        paranoid.current.render();
+        return () => {
+            paranoid.current = undefined;
+        };
+    }, [theme]);
+    React.useEffect(() => {
+        var _a, _b;
+        (_b = (_a = paranoid.current) === null || _a === void 0 ? void 0 : _a.updateData) === null || _b === void 0 ? void 0 : _b.call(_a, props.data);
+    }, [props.data]);
+    return _jsx("div", { id: "graphRoot", style: { height: '100vh' } });
+}
+export function ExplainResult(props) {
+    const dispatch = useTypedDispatch();
+    const [activeOption, setActiveOption] = React.useState(ExplainOptionIds.schema);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+    React.useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, [dispatch]);
+    const onSelectOption = (tabId) => {
+        setActiveOption(tabId);
+    };
+    const renderLoader = () => {
+        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
+    };
+    const renderStub = () => {
+        return (_jsx("div", { className: b('text-message'), children: `There is no ${activeOption} for the request` }));
+    };
+    const hasContent = () => {
+        var _a, _b;
+        switch (activeOption) {
+            case ExplainOptionIds.schema:
+                return Boolean((_b = (_a = props.explain) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length);
+            case ExplainOptionIds.json:
+                return Boolean(props.explain);
+            case ExplainOptionIds.ast:
+                return Boolean(props.ast);
+            default:
+                return false;
+        }
+    };
+    const renderTextExplain = () => {
+        var _a;
+        const content = (_jsx(JSONTree, { data: (_a = props.explain) === null || _a === void 0 ? void 0 : _a.pristine, isExpanded: () => true, className: b('inspector'), searchOptions: {
+                debounceTime: 300,
+            } }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
+    };
+    const renderAstExplain = () => {
+        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
+        return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
+    };
+    const renderGraph = () => {
+        const { explain = {}, theme } = props;
+        const { links, nodes, version } = explain;
+        const isSupportedVersion = version === explainVersions.v2;
+        const isEnoughDataForGraph = links && nodes && nodes.length;
+        const content = isSupportedVersion && isEnoughDataForGraph ? (_jsx("div", { className: b('explain-canvas-container', {
+                hidden: activeOption !== ExplainOptionIds.schema,
+            }), children: _jsx(GraphRoot, { theme: theme, data: { links, nodes }, opts: {
+                    renderNodeTitle: renderExplainNode,
+                    textOverflow: 'normal',
+                    initialZoomFitsCanvas: true,
+                }, shapes: {
+                    node: getYdbPlanNodeShape,
+                } }) })) : null;
+        return (_jsxs(React.Fragment, { children: [!isFullscreen && content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
+    };
+    const renderError = () => {
+        return _jsx("div", { className: b('text-message'), children: parseQueryErrorToString(props.error) });
+    };
+    const renderContent = () => {
+        const { error, loading } = props;
+        if (loading) {
+            return renderLoader();
+        }
+        if (error) {
+            return renderError();
+        }
+        if (!hasContent()) {
+            return renderStub();
+        }
+        switch (activeOption) {
+            case ExplainOptionIds.json: {
+                return renderTextExplain();
+            }
+            case ExplainOptionIds.ast: {
+                return renderAstExplain();
+            }
+            case ExplainOptionIds.schema: {
+                return renderGraph();
+            }
+            default:
+                return null;
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('controls'), children: !props.loading && (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('controls-right'), children: [_jsx(QueryExecutionStatus, { error: props.error }), !props.error && (_jsxs(React.Fragment, { children: [_jsx(Divider, {}), _jsx(RadioButton, { options: explainOptions, value: activeOption, onUpdate: onSelectOption })] }))] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(props.error) || !hasContent() }), _jsx(PaneVisibilityToggleButtons, { onCollapse: props.onCollapseResults, onExpand: props.onExpandResults, isCollapsed: props.isResultsCollapsed, initialDirection: "bottom" })] })] })) }), _jsx("div", { className: b('result'), children: renderContent() })] }));
+}

package/dist/src/containers/Tenant/Query/Preview/Preview.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Loader } from '@gravity-ui/uikit';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import { QueryResultTable } from '../../../../components/QueryResultTable';
+import { previewApi } from '../../../../store/reducers/preview';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { isExternalTableType, isTableType } from '../../utils/schema';
+import i18n from '../i18n';
+import './Preview.scss';
+const b = cn('kv-preview');
+export const Preview = ({ database, type }) => {
+    const dispatch = useTypedDispatch();
+    const isPreviewAvailable = isTableType(type);
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+    const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+    const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh, skip: !isPreviewAvailable });
+    const loading = isFetching && currentData === undefined;
+    const data = currentData !== null && currentData !== void 0 ? currentData : {};
+    const handleClosePreview = () => {
+        dispatch(setShowPreview(false));
+    };
+    const renderHeader = () => {
+        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { data: Xmark, size: 18 }) })] })] }));
+    };
+    if (loading) {
+        return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
+    }
+    let message;
+    if (!isPreviewAvailable) {
+        message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
+    }
+    else if (error) {
+        message = (_jsx("div", { className: b('message-container', 'error'), children: parseQueryErrorToString(error) }));
+    }
+    const content = message !== null && message !== void 0 ? message : (_jsx("div", { className: b('result'), children: _jsx(QueryResultTable, { data: data.result, columns: data.columns }) }));
+    return (_jsxs("div", { className: b(), children: [renderHeader(), isFullscreen ? _jsx(Fullscreen, { children: content }) : content] }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, setTenantPath } from '../../../../store/reducers/executeQuery';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import type { EPathType } from '../../../../types/api/schema';
+import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
+import './QueryEditor.scss';
+interface QueryEditorProps {
+    path: string;
+    changeUserInput: (arg: {
+        input: string;
+    }) => void;
+    goToNextQuery: (...args: Parameters<typeof goToNextQuery>) => void;
+    goToPreviousQuery: (...args: Parameters<typeof goToPreviousQuery>) => void;
+    setTenantPath: (...args: Parameters<typeof setTenantPath>) => void;
+    executeQuery: ExecuteQueryState;
+    theme: string;
+    type?: EPathType;
+    showPreview: boolean;
+    setShowPreview: (...args: Parameters<typeof setShowPreview>) => void;
+    saveQueryToHistory: (...args: Parameters<typeof saveQueryToHistory>) => void;
+}
+declare function QueryEditor(props: QueryEditorProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, {
+    theme: string;
+    path: string;
+    type?: EPathType | undefined;
+    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/src/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -0,0 +1,322 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { executeQueryApi, goToNextQuery, goToPreviousQuery, saveQueryToHistory, setTenantPath, } from '../../../../store/reducers/executeQuery';
+import { explainQueryApi } from '../../../../store/reducers/explainQuery/explainQuery';
+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';
+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 = {
+    EXECUTE: 'execute',
+    EXPLAIN: 'explain',
+};
+const MONACO_HOT_KEY_ACTIONS = {
+    sendQuery: 'sendQuery',
+    sendSelectedQuery: 'sendSelectedQuery',
+};
+const b = cn('query-editor');
+const initialTenantCommonInfoState = {
+    triggerExpand: false,
+    triggerCollapse: false,
+    collapsed: true,
+};
+function QueryEditor(props) {
+    const editorOptions = useEditorOptions();
+    const { path, setTenantPath: setPath, executeQuery, type, theme, changeUserInput, showPreview, } = props;
+    const { tenantPath: savedPath } = executeQuery;
+    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] = React.useState(null);
+    const [sendExecuteQuery, executeQueryResult] = executeQueryApi.useExecuteQueryMutation();
+    const [sendExplainQuery, explainQueryResult] = explainQueryApi.useExplainQueryMutation();
+    React.useEffect(() => {
+        if (savedPath !== path) {
+            if (savedPath) {
+                changeUserInput({ input: '' });
+            }
+            setPath(path);
+        }
+    }, [changeUserInput, setPath, path, savedPath]);
+    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();
+            }
+        };
+        const onChangeWindow = throttle(() => {
+            updateEditor();
+        }, 100);
+        updateEditor();
+        window.addEventListener('resize', onChangeWindow);
+        return () => {
+            window.removeEventListener('resize', onChangeWindow);
+        };
+    }, []);
+    React.useEffect(() => {
+        const storageEventHandler = (event) => {
+            if (event.key === SAVED_QUERIES_KEY) {
+                const v = parseJson(event.newValue);
+                setSavedQueries(v);
+            }
+        };
+        window.addEventListener('storage', storageEventHandler);
+        return () => {
+            window.removeEventListener('storage', storageEventHandler);
+        };
+    }, [setSavedQueries]);
+    React.useEffect(() => {
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
+    }, []);
+    React.useEffect(() => {
+        if (props.showPreview || isResultLoaded) {
+            dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+        }
+        else {
+            dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
+        }
+    }, [props.showPreview, isResultLoaded]);
+    React.useEffect(() => {
+        var _a;
+        const { input, history } = executeQuery;
+        const hasUnsavedInput = input
+            ? input !== ((_a = history.queries[history.queries.length - 1]) === null || _a === void 0 ? void 0 : _a.queryText)
+            : false;
+        if (hasUnsavedInput) {
+            window.onbeforeunload = (e) => {
+                e.preventDefault();
+                // Chrome requires returnValue to be set
+                e.returnValue = '';
+            };
+        }
+        else {
+            window.onbeforeunload = null;
+        }
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [executeQuery]);
+    const handleSendExecuteClick = (mode, text) => {
+        var _a;
+        if (!mode) {
+            return;
+        }
+        const { input, history } = executeQuery;
+        const schema = useMultiSchema ? 'multi' : 'modern';
+        const query = text !== null && text !== void 0 ? text : input;
+        setLastUsedQueryAction(QUERY_ACTIONS.execute);
+        setResultType(RESULT_TYPES.EXECUTE);
+        sendExecuteQuery({
+            query,
+            database: path,
+            mode,
+            schema,
+        });
+        setIsResultLoaded(true);
+        props.setShowPreview(false);
+        // Don't save partial queries in history
+        if (!text) {
+            const { queries, currentIndex } = history;
+            if (query !== ((_a = queries[currentIndex]) === null || _a === void 0 ? void 0 : _a.queryText)) {
+                props.saveQueryToHistory(input, mode);
+            }
+        }
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    const handleGetExplainQueryClick = (mode) => {
+        const { input } = executeQuery;
+        setLastUsedQueryAction(QUERY_ACTIONS.explain);
+        setResultType(RESULT_TYPES.EXPLAIN);
+        sendExplainQuery({
+            query: input,
+            database: path,
+            mode: mode,
+        });
+        setIsResultLoaded(true);
+        props.setShowPreview(false);
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    React.useEffect(() => {
+        var _a, _b;
+        if (monacoHotKey === null) {
+            return;
+        }
+        setMonacoHotKey(null);
+        switch (monacoHotKey) {
+            case MONACO_HOT_KEY_ACTIONS.sendQuery: {
+                if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
+                    handleGetExplainQueryClick(queryMode);
+                }
+                else {
+                    handleSendExecuteClick(queryMode);
+                }
+                break;
+            }
+            case MONACO_HOT_KEY_ACTIONS.sendSelectedQuery: {
+                const selection = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getSelection();
+                const model = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getModel();
+                if (selection && model) {
+                    const text = model.getValueInRange({
+                        startLineNumber: selection.getSelectionStart().lineNumber,
+                        startColumn: selection.getSelectionStart().column,
+                        endLineNumber: selection.getPosition().lineNumber,
+                        endColumn: selection.getPosition().column,
+                    });
+                    handleSendExecuteClick(queryMode, text);
+                }
+                break;
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monacoHotKey]);
+    const editorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        editor.focus();
+        editor.addAction({
+            id: 'sendQuery',
+            label: i18n('action.send-query'),
+            keybindings: [
+                // eslint-disable-next-line no-bitwise
+                monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+            ],
+            // A precondition for this action.
+            precondition: undefined,
+            // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+            keybindingContext: undefined,
+            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
+            contextMenuOrder: 1,
+            // Method that will be executed when the action is triggered.
+            // @param editor The editor instance is passed in as a convenience
+            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendQuery),
+        });
+        const canSendSelectedText = editor.createContextKey('canSendSelectedText', false);
+        editor.onDidChangeCursorSelection(({ selection, secondarySelections }) => {
+            const notEmpty = selection.selectionStartLineNumber !== selection.positionLineNumber ||
+                selection.selectionStartColumn !== selection.positionColumn;
+            const hasMultipleSelections = secondarySelections.length > 0;
+            canSendSelectedText.set(notEmpty && !hasMultipleSelections);
+        });
+        editor.addAction({
+            id: 'sendSelectedQuery',
+            label: i18n('action.send-selected-query'),
+            keybindings: [
+                // eslint-disable-next-line no-bitwise
+                monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+            ],
+            precondition: 'canSendSelectedText',
+            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
+            contextMenuOrder: 1,
+            run: () => setMonacoHotKey(MONACO_HOT_KEY_ACTIONS.sendSelectedQuery),
+        });
+        editor.addAction({
+            id: 'previous-query',
+            label: i18n('action.previous-query'),
+            keybindings: [
+                // eslint-disable-next-line no-bitwise
+                monaco.KeyMod.CtrlCmd | monaco.KeyCode.UpArrow,
+            ],
+            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
+            contextMenuOrder: 2,
+            run: () => {
+                props.goToPreviousQuery();
+            },
+        });
+        editor.addAction({
+            id: 'next-query',
+            label: i18n('action.next-query'),
+            keybindings: [
+                // eslint-disable-next-line no-bitwise
+                monaco.KeyMod.CtrlCmd | monaco.KeyCode.DownArrow,
+            ],
+            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
+            contextMenuOrder: 3,
+            run: () => {
+                props.goToNextQuery();
+            },
+        });
+    };
+    const onChange = (newValue) => {
+        props.changeUserInput({ input: newValue });
+    };
+    const onCollapseResultHandler = () => {
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
+    };
+    const onExpandResultHandler = () => {
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+    const onSplitStartDragAdditional = () => {
+        dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
+    };
+    const onSaveQueryHandler = (queryName) => {
+        const { input } = executeQuery;
+        const queryIndex = savedQueries.findIndex((el) => el.name.toLowerCase() === queryName.toLowerCase());
+        const newSavedQueries = [...savedQueries];
+        const newQuery = { name: queryName, body: input };
+        if (queryIndex === -1) {
+            newSavedQueries.push(newQuery);
+        }
+        else {
+            newSavedQueries[queryIndex] = newQuery;
+        }
+        setSavedQueries(newSavedQueries);
+    };
+    const renderControls = () => {
+        return (_jsx(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQueryResult.isLoading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, onSaveQueryClick: onSaveQueryHandler, savedQueries: savedQueries, disabled: !executeQuery.input, onUpdateQueryMode: setQueryMode, queryMode: queryMode, highlightedAction: lastUsedQueryAction }));
+    };
+    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: 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, { executeQueryData: executeQueryResult.data, executeQueryError: executeQueryResult.error, explainQueryData: explainQueryResult.data, explainQueryError: explainQueryResult.error, explainQueryLoading: explainQueryResult.isLoading, resultVisibilityState: resultVisibilityState, onExpandResultHandler: onExpandResultHandler, onCollapseResultHandler: onCollapseResultHandler, type: type, theme: theme, resultType: resultType, path: path, showPreview: showPreview }) })] }) }));
+}
+const mapStateToProps = (state) => {
+    return {
+        executeQuery: state.executeQuery,
+        showPreview: state.schema.showPreview,
+    };
+};
+const mapDispatchToProps = {
+    saveQueryToHistory,
+    goToPreviousQuery,
+    goToNextQuery,
+    setShowPreview,
+    setTenantPath,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);
+function Result({ executeQueryData, executeQueryError, explainQueryData, explainQueryError, explainQueryLoading, resultVisibilityState, onExpandResultHandler, onCollapseResultHandler, type, theme, resultType, path, showPreview, }) {
+    if (showPreview) {
+        return _jsx(Preview, { database: path, type: type });
+    }
+    if (resultType === RESULT_TYPES.EXECUTE) {
+        if (executeQueryData || executeQueryError) {
+            const _a = executeQueryData || {}, { stats } = _a, data = __rest(_a, ["stats"]);
+            return (_jsx(ExecuteResult, { data: data, stats: stats, error: executeQueryError, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
+        }
+        return null;
+    }
+    if (resultType === RESULT_TYPES.EXPLAIN) {
+        const { plan, ast } = explainQueryData || {};
+        return (_jsx(ExplainResult, { error: explainQueryError, explain: plan, ast: ast, loading: explainQueryLoading, theme: theme, isResultsCollapsed: resultVisibilityState.collapsed, onExpandResults: onExpandResultHandler, onCollapseResults: onCollapseResultHandler }));
+    }
+    return null;
+}

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

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

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { viewSchemaApi } from '../../../../store/reducers/viewSchema/viewSchema';
+import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { isColumnEntityType, isExternalTableType, isRowTableType, isViewType, } from '../../utils/schema';
+import { SCHEMA_COLUMNS_WIDTH_LS_KEY, SCHEMA_TABLE_COLUMS_IDS, getColumnTableColumns, getExternalTableColumns, getRowTableColumns, getViewColumns, } from './columns';
+import { prepareSchemaData, prepareViewSchema } from './prepareData';
+import { b } from './shared';
+import './SchemaViewer.scss';
+export const SchemaViewer = ({ type, path, tenantName, extended = false }) => {
+    const { data: schemaData, loading } = useTypedSelector((state) => state.schema);
+    const currentObjectData = path ? schemaData[path] : undefined;
+    const viewSchemaRequestParams = isViewType(type) && path && tenantName ? { path, database: tenantName } : skipToken;
+    const { data: viewColumnsData, isLoading: isViewSchemaLoading } = viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
+    const tableData = React.useMemo(() => {
+        if (isViewType(type)) {
+            return prepareViewSchema(viewColumnsData);
+        }
+        return prepareSchemaData(type, currentObjectData);
+    }, [currentObjectData, type, viewColumnsData]);
+    const columns = React.useMemo(() => {
+        if (isViewType(type)) {
+            return getViewColumns();
+        }
+        if (isExternalTableType(type)) {
+            return getExternalTableColumns();
+        }
+        if (isColumnEntityType(type)) {
+            return getColumnTableColumns();
+        }
+        if (isRowTableType(type)) {
+            return getRowTableColumns(extended);
+        }
+        return [];
+    }, [type, extended]);
+    const renderContent = () => {
+        if (loading || isViewSchemaLoading) {
+            return _jsx(TableSkeleton, {});
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: SCHEMA_COLUMNS_WIDTH_LS_KEY, data: tableData, columns: columns, settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: {
+                columnId: SCHEMA_TABLE_COLUMS_IDS.isKeyColumn,
+                order: DataTable.ASCENDING,
+            } }));
+    };
+    return _jsx("div", { className: b(null), children: renderContent() });
+};

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

@@ -0,0 +1,16 @@
+import type { SchemaColumn } from './types';
+export declare const SCHEMA_COLUMNS_WIDTH_LS_KEY = "schemaTableColumnsWidth";
+export declare const SCHEMA_TABLE_COLUMS_IDS: {
+    id: "id";
+    name: "name";
+    isKeyColumn: "isKeyColumn";
+    type: "type";
+    notNull: "notNull";
+    familyName: "familyName";
+    prefferedPoolKind: "prefferedPoolKind";
+    columnCodec: "columnCodec";
+};
+export declare function getViewColumns(): SchemaColumn[];
+export declare function getExternalTableColumns(): SchemaColumn[];
+export declare function getColumnTableColumns(): SchemaColumn[];
+export declare function getRowTableColumns(extended: boolean): SchemaColumn[];