ydb-embedded-ui 6.7.0 → 6.9.0

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { changeUserInput } from '../../../store/reducers/executeQuery';
+import { TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
+import { cn } from '../../../utils/cn';
+import { SAVED_QUERIES_KEY } from '../../../utils/constants';
+import { useSetting, useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import QueriesHistory from './QueriesHistory/QueriesHistory';
+import QueryEditor from './QueryEditor/QueryEditor';
+import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
+import { SavedQueries } from './SavedQueries/SavedQueries';
+import './Query.scss';
+const b = cn('ydb-query');
+export const Query = (props) => {
+    const dispatch = useTypedDispatch();
+    const { queryTab = TENANT_QUERY_TABS_ID.newQuery } = useTypedSelector((state) => state.tenant);
+    const [savedQueries, setSavedQueries] = useSetting(SAVED_QUERIES_KEY, []);
+    const handleDeleteQuery = (queryName) => {
+        const newSavedQueries = savedQueries.filter((el) => el.name.toLowerCase() !== queryName.toLowerCase());
+        setSavedQueries(newSavedQueries);
+    };
+    const handleUserInputChange = (value) => {
+        dispatch(changeUserInput(value));
+    };
+    const activeTab = React.useMemo(() => queryEditorTabs.find(({ id }) => id === queryTab), [queryTab]);
+    const renderContent = () => {
+        switch (queryTab) {
+            case TENANT_QUERY_TABS_ID.newQuery: {
+                return _jsx(QueryEditor, { changeUserInput: handleUserInputChange, ...props });
+            }
+            case TENANT_QUERY_TABS_ID.history: {
+                return _jsx(QueriesHistory, { changeUserInput: handleUserInputChange });
+            }
+            case TENANT_QUERY_TABS_ID.saved: {
+                return (_jsx(SavedQueries, { changeUserInput: handleUserInputChange, savedQueries: savedQueries, onDeleteQuery: handleDeleteQuery }));
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+    return (_jsxs("div", { className: b(), children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", { className: b('content'), children: renderContent() })] }));
+};

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

@@ -0,0 +1,35 @@
+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 {
+    tenantName: string;
+    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;
+    tenantName: string;
+    changeUserInput: (arg: {
+        input: string;
+    }) => void;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null>;
+    store?: import("redux").Store;
+}>;
+export default _default;

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

@@ -0,0 +1,308 @@
+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 { 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 { tenantName, 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 !== tenantName) {
+            if (savedPath) {
+                changeUserInput({ input: '' });
+            }
+            setPath(tenantName);
+        }
+    }, [changeUserInput, setPath, tenantName, 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(() => {
+        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: tenantName,
+            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: tenantName,
+            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, tenantName: tenantName, 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, tenantName, path, showPreview, }) {
+    if (showPreview) {
+        return _jsx(Preview, { database: tenantName, path: path, type: type });
+    }
+    if (resultType === RESULT_TYPES.EXECUTE) {
+        if (executeQueryData || executeQueryError) {
+            const { stats, ...data } = executeQueryData || {};
+            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/containers/Tenant/Query/QueryEditor/helpers.js

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from '@gravity-ui/uikit';
+import { useLocation } from 'react-router-dom';
+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 = {
+    id: TENANT_QUERY_TABS_ID.newQuery,
+    title: i18n('tabs.newQuery'),
+};
+const history = {
+    id: TENANT_QUERY_TABS_ID.history,
+    title: i18n('tabs.history'),
+};
+const saved = {
+    id: TENANT_QUERY_TABS_ID.saved,
+    title: i18n('tabs.saved'),
+};
+export const queryEditorTabs = [newQuery, history, saved];
+export const QueryTabs = ({ className, activeTab }) => {
+    const location = useLocation();
+    const queryParams = parseQuery(location);
+    return (_jsx("div", { className: className, children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTab, items: queryEditorTabs, wrapTo: ({ id }, node) => {
+                const path = getTenantPath({
+                    ...queryParams,
+                    [TenantTabsGroups.queryTab]: id,
+                });
+                return (_jsx(InternalLink, { to: path, children: node }, id));
+            } }) }));
+};

package/dist/containers/Tenant/Query/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "controls.query-mode-selector_type" | "tabs.newQuery" | "tabs.history" | "tabs.saved" | "history.empty" | "saved.empty" | "delete-dialog.header" | "delete-dialog.question" | "delete-dialog.delete" | "delete-dialog.cancel" | "preview.title" | "preview.not-available" | "preview.close" | "method-description.script" | "method-description.scan" | "method-description.data" | "method-description.query" | "method-description.pg" | "query-duration.description" | "action.send-query" | "action.send-selected-query" | "action.previous-query" | "action.next-query", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,9 @@
+import './CreateDirectoryDialog.scss';
+interface SchemaTreeProps {
+    open: boolean;
+    onClose: VoidFunction;
+    parentPath: string;
+    onSuccess: (value: string) => void;
+}
+export declare function CreateDirectoryDialog({ open, onClose, parentPath, onSuccess }: SchemaTreeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Dialog, TextInput } from '@gravity-ui/uikit';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { schemaApi } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import i18n from '../../i18n';
+import './CreateDirectoryDialog.scss';
+const b = cn('ydb-schema-create-directory-dialog');
+const relativePathInputId = 'relativePath';
+function validateRelativePath(value) {
+    if (!value) {
+        return i18n('schema.tree.dialog.empty');
+    }
+    if (/\s/.test(value)) {
+        return i18n('schema.tree.dialog.whitespace');
+    }
+    return '';
+}
+export function CreateDirectoryDialog({ open, onClose, parentPath, onSuccess }) {
+    const [validationError, setValidationError] = React.useState('');
+    const [relativePath, setRelativePath] = React.useState('');
+    const [create, response] = schemaApi.useCreateDirectoryMutation();
+    const resetErrors = () => {
+        setValidationError('');
+        response.reset();
+    };
+    const handleUpdate = (updated) => {
+        setRelativePath(updated);
+        resetErrors();
+    };
+    const handleClose = () => {
+        onClose();
+        setRelativePath('');
+        resetErrors();
+    };
+    const handleSubmit = () => {
+        const path = `${parentPath}/${relativePath}`;
+        create({
+            database: parentPath,
+            path,
+        })
+            .unwrap()
+            .then(() => {
+            handleClose();
+            onSuccess(relativePath);
+        });
+    };
+    return (_jsxs(Dialog, { open: open, onClose: handleClose, size: "s", children: [_jsx(Dialog.Header, { caption: i18n('schema.tree.dialog.header') }), _jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    const validationError = validateRelativePath(relativePath);
+                    setValidationError(validationError);
+                    if (!validationError) {
+                        handleSubmit();
+                    }
+                }, children: [_jsxs(Dialog.Body, { children: [_jsxs("label", { htmlFor: relativePathInputId, className: b('label'), children: [_jsx("span", { className: b('description'), children: i18n('schema.tree.dialog.description') }), `${parentPath}/`] }), _jsx("div", { className: b('input-wrapper'), children: _jsx(TextInput, { placeholder: i18n('schema.tree.dialog.placeholder'), value: relativePath, onUpdate: handleUpdate, autoFocus: true, hasClear: true, autoComplete: false, disabled: response.isLoading, validationState: validationError ? 'invalid' : undefined, id: relativePathInputId, errorMessage: validationError }) }), response.isError && (_jsx(ResponseError, { error: response.error, defaultMessage: i18n('schema.tree.dialog.invalid') }))] }), _jsx(Dialog.Footer, { loading: response.isLoading, textButtonApply: i18n('schema.tree.dialog.buttonApply'), textButtonCancel: i18n('schema.tree.dialog.buttonCancel'), onClickButtonCancel: handleClose, propsButtonApply: { type: 'submit' } })] })] }));
+}

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

@@ -0,0 +1,14 @@
+.ydb-schema-create-directory-dialog {
+    &__label {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 8px;
+    }
+    &__description {
+        color: var(--g-color-text-secondary);
+    }
+    &__input-wrapper {
+        min-height: 48px;
+    }
+}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// todo: tableTree is very smart, so it is impossible to update it without re-render
+// It is need change NavigationTree to dump component and pass props from parent component
+// In this case we can store state of tree - uploaded entities, opened nodes, selected entity and so on
+import React from 'react';
+import { NavigationTree } from 'ydb-ui-components';
+import { schemaApi } from '../../../../store/reducers/schema/schema';
+import { useQueryModes, useTypedDispatch } from '../../../../utils/hooks';
+import { isChildlessPathType, mapPathTypeToNavigationTreeType } from '../../utils/schema';
+import { getActions } from '../../utils/schemaActions';
+import { getControls } from '../../utils/schemaControls';
+import { CreateDirectoryDialog } from '../CreateDirectoryDialog/CreateDirectoryDialog';
+export function SchemaTree(props) {
+    const { rootPath, rootName, rootType, currentPath, onActivePathUpdate } = props;
+    const dispatch = useTypedDispatch();
+    const [_, setQueryMode] = useQueryModes();
+    const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
+    const [parentPath, setParentPath] = React.useState('');
+    const [schemaTreeKey, setSchemaTreeKey] = React.useState('');
+    const fetchPath = async (path) => {
+        const promise = dispatch(schemaApi.endpoints.getSchema.initiate({ path }, { forceRefetch: true }));
+        const { data } = await promise;
+        promise.unsubscribe();
+        if (!data) {
+            throw new Error(`no describe data about path ${path}`);
+        }
+        const { PathDescription: { Children = [] } = {} } = data;
+        const childItems = Children.map((childData) => {
+            const { Name = '', PathType, PathSubType } = childData;
+            return {
+                name: Name,
+                type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
+                // FIXME: should only be explicitly set to true for tables with indexes
+                // at the moment of writing there is no property to determine this, fix later
+                expandable: !isChildlessPathType(PathType, PathSubType),
+            };
+        });
+        return childItems;
+    };
+    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))) {
+            onActivePathUpdate(rootPath);
+        }
+    }, [currentPath, onActivePathUpdate, rootPath]);
+    const handleSuccessSubmit = (relativePath) => {
+        const newPath = `${parentPath}/${relativePath}`;
+        onActivePathUpdate(newPath);
+        setSchemaTreeKey(newPath);
+    };
+    const handleCloseDialog = () => {
+        setCreateDirectoryOpen(false);
+    };
+    const handleOpenCreateDirectoryDialog = (value) => {
+        setParentPath(value);
+        setCreateDirectoryOpen(true);
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(CreateDirectoryDialog, { onClose: handleCloseDialog, open: createDirectoryOpen, parentPath: parentPath, onSuccess: handleSuccessSubmit }), _jsx(NavigationTree, { rootState: {
+                    path: rootPath,
+                    name: rootName,
+                    type: mapPathTypeToNavigationTreeType(rootType),
+                    collapsed: false,
+                }, fetchPath: fetchPath, getActions: getActions(dispatch, {
+                    setActivePath: onActivePathUpdate,
+                    setQueryMode,
+                    showCreateDirectoryDialog: handleOpenCreateDirectoryDialog,
+                }), renderAdditionalNodeElements: getControls(dispatch, {
+                    setActivePath: onActivePathUpdate,
+                }), activePath: currentPath, onActivePathUpdate: onActivePathUpdate, cache: false, virtualize: true }, schemaTreeKey)] }));
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "column-title.id" | "column-title.name" | "column-title.key" | "column-title.type" | "column-title.notNull" | "column-title.autoIncrement" | "column-title.family" | "column-title.media" | "column-title.compression", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;