ydb-embedded-ui 6.9.2 → 6.10.1

package/dist/containers/Storage/StorageNodes/{VirtualStorageNodes.js → PaginatedStorageNodes.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { ResizeableVirtualTable } from '../../../components/VirtualTable/ResizeableVirtualTable';
+import { ResizeablePaginatedTable } from '../../../components/PaginatedTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues, getUptimeParamValue } from '../../../utils/nodes';
 import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
@@ -8,7 +8,7 @@ import { getStorageNodes } from './getNodes';
 import { STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, getPreparedStorageNodesColumns, } from './getStorageNodesColumns';
 import i18n from './i18n';
 import { getRowUnavailableClassName } from './shared';
-export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
+export const PaginatedStorageNodes = ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
     const filters = React.useMemo(() => {
         return [searchValue, visibleEntities, nodesUptimeFilter, tenant];
     }, [searchValue, visibleEntities, nodesUptimeFilter, tenant]);
@@ -34,5 +34,5 @@ export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeF
         }
         return i18n('empty.default');
     };
-    return (_jsx(ResizeableVirtualTable, { columnsWidthLSKey: STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, rowHeight: 50, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, getRowClassName: getRowUnavailableClassName, dependencyArray: filters }));
+    return (_jsx(ResizeablePaginatedTable, { columnsWidthLSKey: STORAGE_NODES_COLUMNS_WIDTH_LS_KEY, parentContainer: parentContainer, columns: columns, fetchData: fetchData, rowHeight: 50, limit: 50, renderControls: renderControls, renderErrorMessage: renderErrorMessage, renderEmptyDataMessage: renderEmptyDataMessage, getRowClassName: getRowUnavailableClassName, dependencyArray: filters }));
 };

package/dist/containers/Storage/StorageWrapper.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
+import { USE_PAGINATED_TABLES_KEY } from '../../utils/constants';
 import { useSetting } from '../../utils/hooks';
+import { PaginatedStorage } from './PaginatedStorage';
 import { Storage } from './Storage';
-import { VirtualStorage } from './VirtualStorage';
 export const StorageWrapper = ({ parentContainer, ...props }) => {
-    const [useVirtualTable] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
-    if (useVirtualTable) {
-        return _jsx(VirtualStorage, { parentContainer: parentContainer, ...props });
+    const [usePaginatedTables] = useSetting(USE_PAGINATED_TABLES_KEY);
+    if (usePaginatedTables) {
+        return _jsx(PaginatedStorage, { parentContainer: parentContainer, ...props });
     }
     return _jsx(Storage, { ...props });
 };

package/dist/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -46,7 +46,7 @@
             }
 
             .data-table__sticky_moving,
-            .ydb-virtual-table__head {
+            .ydb-paginated-table__head {
                 top: 46px !important;
             }
         }

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

@@ -50,8 +50,7 @@
         width: 100%;
         padding: 15px 20px;
         @include json-tree-styles();
-        &
-            .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_expanded.json-inspector__leaf_composite {
+        & .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_composite {
             max-width: calc(100% - 50px);
         }
 

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

@@ -4,8 +4,7 @@ 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 { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import QueryEditor from './QueryEditor/QueryEditor';
 import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
@@ -15,11 +14,6 @@ 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));
     };
@@ -33,7 +27,7 @@ export const Query = (props) => {
                 return _jsx(QueriesHistory, { changeUserInput: handleUserInputChange });
             }
             case TENANT_QUERY_TABS_ID.saved: {
-                return (_jsx(SavedQueries, { changeUserInput: handleUserInputChange, savedQueries: savedQueries, onDeleteQuery: handleDeleteQuery }));
+                return _jsx(SavedQueries, { changeUserInput: handleUserInputChange });
             }
             default: {
                 return null;

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

@@ -1,7 +1,7 @@
 @import '../../../styles/mixins.scss';
 
 .ydb-query {
-    max-height: 100%;
+    max-height: calc(100% - 56px); // 56px - height of TenantNavigation
     @include flex-container();
 
     &__tabs {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { goToNextQuery, goToPreviousQuery, saveQueryToHistory, setTenantPath } from '../../../../store/reducers/executeQuery';
+import { setQueryAction } from '../../../../store/reducers/queryActions/queryActions';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
 import type { EPathType } from '../../../../types/api/schema';
 import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
@@ -13,6 +14,7 @@ interface QueryEditorProps {
     goToNextQuery: (...args: Parameters<typeof goToNextQuery>) => void;
     goToPreviousQuery: (...args: Parameters<typeof goToPreviousQuery>) => void;
     setTenantPath: (...args: Parameters<typeof setTenantPath>) => void;
+    setQueryAction: (...args: Parameters<typeof setQueryAction>) => void;
     executeQuery: ExecuteQueryState;
     theme: string;
     type?: EPathType;

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

@@ -6,9 +6,10 @@ 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 { setQueryAction } from '../../../../store/reducers/queryActions/queryActions';
 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 { DEFAULT_IS_QUERY_RESULT_COLLAPSED, DEFAULT_SIZE_RESULT_PANE_KEY, LAST_USED_QUERY_ACTION_KEY, QUERY_USE_MULTI_SCHEMA_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';
@@ -17,8 +18,10 @@ import { ExecuteResult } from '../ExecuteResult/ExecuteResult';
 import { ExplainResult } from '../ExplainResult/ExplainResult';
 import { Preview } from '../Preview/Preview';
 import { QueryEditorControls } from '../QueryEditorControls/QueryEditorControls';
+import { SaveQueryDialog } from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import { useEditorOptions } from './helpers';
+import { getKeyBindings } from './keybindings';
 import './QueryEditor.scss';
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
@@ -37,14 +40,13 @@ const initialTenantCommonInfoState = {
 };
 function QueryEditor(props) {
     const editorOptions = useEditorOptions();
-    const { tenantName, path, setTenantPath: setPath, executeQuery, type, theme, changeUserInput, showPreview, } = props;
+    const { tenantName, path, setTenantPath: setPath, setQueryAction, 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();
@@ -178,15 +180,13 @@ function QueryEditor(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [monacoHotKey]);
     const editorDidMount = (editor, monaco) => {
+        const keybindings = getKeyBindings(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,
-            ],
+            keybindings: [keybindings.sendQuery],
             // A precondition for this action.
             precondition: undefined,
             // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
@@ -207,10 +207,7 @@ function QueryEditor(props) {
         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,
-            ],
+            keybindings: [keybindings.sendSelectedQuery],
             precondition: 'canSendSelectedText',
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 1,
@@ -219,10 +216,7 @@ function QueryEditor(props) {
         editor.addAction({
             id: 'previous-query',
             label: i18n('action.previous-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.UpArrow,
-            ],
+            keybindings: [keybindings.selectPreviousQuery],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
             run: () => {
@@ -232,16 +226,21 @@ function QueryEditor(props) {
         editor.addAction({
             id: 'next-query',
             label: i18n('action.next-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.DownArrow,
-            ],
+            keybindings: [keybindings.selectNextQuery],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
             run: () => {
                 props.goToNextQuery();
             },
         });
+        editor.addAction({
+            id: 'save-query',
+            label: i18n('action.save-query'),
+            keybindings: [keybindings.saveQuery],
+            run: () => {
+                setQueryAction('save');
+            },
+        });
     };
     const onChange = (newValue) => {
         props.changeUserInput({ input: newValue });
@@ -255,25 +254,12 @@ function QueryEditor(props) {
     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(QueryEditorControls, { onRunButtonClick: handleSendExecuteClick, runIsLoading: executeQueryResult.isLoading, onExplainButtonClick: handleGetExplainQueryClick, explainIsLoading: explainQueryResult.isLoading, 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 }) })] }) }));
+    return (_jsxs("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 }) })] }), _jsx(SaveQueryDialog, {})] }));
 }
 const mapStateToProps = (state) => {
     return {
@@ -287,6 +273,7 @@ const mapDispatchToProps = {
     goToNextQuery,
     setShowPreview,
     setTenantPath,
+    setQueryAction,
 };
 export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);
 function Result({ executeQueryData, executeQueryError, explainQueryData, explainQueryError, explainQueryLoading, resultVisibilityState, onExpandResultHandler, onCollapseResultHandler, type, theme, resultType, tenantName, path, showPreview, }) {

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

@@ -0,0 +1,9 @@
+import type Monaco from 'monaco-editor';
+export declare function getKeyBindings(monaco: typeof Monaco): {
+    sendQuery: number;
+    sendSelectedQuery: number;
+    selectPreviousQuery: number;
+    selectNextQuery: number;
+    saveQuery: number;
+    saveSelectedQuery: number;
+};

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

@@ -0,0 +1,13 @@
+export function getKeyBindings(monaco) {
+    const { KeyMod, KeyCode } = monaco;
+    const ctrlKey = KeyMod.CtrlCmd;
+    /* eslint-disable no-bitwise */
+    return {
+        sendQuery: ctrlKey | KeyCode.Enter,
+        sendSelectedQuery: ctrlKey | KeyMod.Shift | monaco.KeyCode.Enter,
+        selectPreviousQuery: ctrlKey | KeyCode.UpArrow,
+        selectNextQuery: ctrlKey | KeyCode.DownArrow,
+        saveQuery: ctrlKey | KeyCode.KeyS,
+        saveSelectedQuery: ctrlKey | KeyMod.Shift | KeyCode.KeyS,
+    };
+}

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

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

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

@@ -5,7 +5,7 @@ import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 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 { SaveQuery } from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 import './QueryEditorControls.scss';
 const queryModeSelectorQa = 'query-mode-selector';
@@ -33,7 +33,7 @@ const QueryModeSelectorOptions = {
         description: i18n('method-description.pg'),
     },
 };
-export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, onSaveQueryClick, savedQueries, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
+export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainButtonClick, explainIsLoading, disabled, onUpdateQueryMode, queryMode, highlightedAction, }) => {
     const querySelectorMenuItems = React.useMemo(() => {
         return Object.entries(QueryModeSelectorOptions).map(([mode, { title, description }]) => {
             return {
@@ -53,5 +53,5 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
                         }, 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, { 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, { data: ChevronDown })] }) }) }) })] }), _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, { data: ChevronDown })] }) }) }) })] }), _jsx(SaveQuery, { isSaveButtonDisabled: disabled })] }));
 };

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

@@ -1,6 +1,7 @@
-export default SaveQuery;
-declare function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }: {
-    savedQueries: any;
-    onSaveQuery: any;
-    saveButtonDisabled: any;
-}): import("react/jsx-runtime").JSX.Element;
+import './SaveQuery.scss';
+interface SaveQueryProps {
+    isSaveButtonDisabled?: boolean;
+}
+export declare function SaveQuery({ isSaveButtonDisabled }: SaveQueryProps): import("react/jsx-runtime").JSX.Element;
+export declare function SaveQueryDialog(): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,70 +1,78 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button, Dialog, DropdownMenu, TextInput } from '@gravity-ui/uikit';
-import some from 'lodash/some';
-import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
+import { clearQueryNameToEdit, saveQuery, selectQueryAction, selectQueryName, setQueryAction, } from '../../../../store/reducers/queryActions/queryActions';
 import { cn } from '../../../../utils/cn';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { useSavedQueries } from '../utils/useSavedQueries';
+import i18n from './i18n';
 import './SaveQuery.scss';
-const b = cn('kv-save-query');
-function SaveQuery({ savedQueries, onSaveQuery, saveButtonDisabled }) {
-    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-    const [isDialogVisible, setIsDialogVisible] = React.useState(false);
-    const [queryName, setQueryName] = React.useState('');
-    const [validationError, setValidationError] = React.useState(null);
-    const queryNameToEdit = useTypedSelector((state) => state.saveQuery);
+const b = cn('ydb-save-query');
+export function SaveQuery({ isSaveButtonDisabled }) {
     const dispatch = useTypedDispatch();
+    const queryNameToEdit = useTypedSelector(selectQueryName);
     const onSaveQueryClick = () => {
-        setIsDialogVisible(true);
-        dispatch(setQueryNameToEdit(null));
-    };
-    const onCloseDialog = () => {
-        setIsDialogVisible(false);
-        setQueryName('');
-        setValidationError(null);
-    };
-    const onQueryNameChange = (value) => {
-        setQueryName(value);
-        setValidationError(validateQueryName(value));
-    };
-    const validateQueryName = (value) => {
-        if (some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
-            return 'This name already exists';
-        }
-        return null;
-    };
-    const onSaveClick = () => {
-        if (!queryName || validationError) {
-            return;
-        }
-        onSaveQuery(queryName);
-        onCloseDialog();
+        dispatch(setQueryAction('save'));
+        dispatch(clearQueryNameToEdit());
     };
     const onEditQueryClick = () => {
-        onSaveQuery(queryNameToEdit);
-        dispatch(setQueryNameToEdit(null));
-    };
-    const renderDialog = () => {
-        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),
-                    } })] }));
+        dispatch(saveQuery(queryNameToEdit));
+        dispatch(clearQueryNameToEdit());
     };
-    const renderSaveButton = (onClick) => {
-        return (_jsx(Button, { onClick: onClick, disabled: saveButtonDisabled, children: queryNameToEdit ? 'Edit query' : 'Save query' }));
+    const renderSaveButton = () => {
+        return (_jsx(Button, { onClick: onSaveQueryClick, disabled: isSaveButtonDisabled, children: i18n('action.save') }));
     };
     const renderSaveDropdownMenu = () => {
         const items = [
             {
                 action: onEditQueryClick,
-                text: 'Edit existing',
+                text: i18n('action.edit-existing'),
             },
             {
                 action: onSaveQueryClick,
-                text: 'Save as new',
+                text: i18n('action.save-as-new'),
             },
         ];
-        return (_jsx(DropdownMenu, { items: items, switcher: renderSaveButton(), popupPlacement: ['top'] }));
+        return (_jsx(DropdownMenu, { items: items, renderSwitcher: (props) => (_jsx(Button, { ...props, disabled: isSaveButtonDisabled, children: i18n('action.edit') })), popupProps: { placement: 'top' } }));
+    };
+    return queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton();
+}
+export function SaveQueryDialog() {
+    const savedQueries = useSavedQueries();
+    const dispatch = useTypedDispatch();
+    const queryAction = useTypedSelector(selectQueryAction);
+    const [queryName, setQueryName] = React.useState('');
+    const [validationError, setValidationError] = React.useState();
+    const validateQueryName = (value) => {
+        if (!value) {
+            return i18n('error.name-not-empty');
+        }
+        if (savedQueries.some((q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
+            return i18n('error.name-exists');
+        }
+        return undefined;
+    };
+    const onCloseDialog = () => {
+        dispatch(setQueryAction('idle'));
+        setQueryName('');
+        setValidationError(undefined);
+    };
+    const handleQueryNameChange = (value) => {
+        setQueryName(value);
+        setValidationError(undefined);
+    };
+    const onSaveClick = () => {
+        dispatch(saveQuery(queryName));
+        onCloseDialog();
     };
-    return (_jsxs(React.Fragment, { children: [queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton(onSaveQueryClick), isDialogVisible && renderDialog()] }));
+    return (_jsxs(Dialog, { open: queryAction === 'save', hasCloseButton: false, size: "s", onClose: onCloseDialog, children: [_jsx(Dialog.Header, { caption: i18n('action.save') }), _jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    const validationError = validateQueryName(queryName);
+                    setValidationError(validationError);
+                    if (!validationError) {
+                        onSaveClick();
+                    }
+                }, children: [_jsxs(Dialog.Body, { className: b('dialog-body'), children: [_jsx("div", { className: b('dialog-row'), children: i18n('description') }), _jsxs("div", { className: b('dialog-row'), children: [_jsx("label", { htmlFor: "queryName", className: b('field-title', 'required'), children: i18n('input-label') }), _jsx("div", { className: b('control-wrapper'), children: _jsx(TextInput, { id: "queryName", placeholder: i18n('input-placeholder'), value: queryName, onUpdate: handleQueryNameChange, hasClear: true, autoFocus: true, autoComplete: false, validationState: validationError ? 'invalid' : undefined, errorMessage: validationError }) })] })] }), _jsx(Dialog.Footer, { textButtonApply: i18n('button-apply'), textButtonCancel: i18n('button-cancel'), onClickButtonCancel: onCloseDialog, propsButtonApply: {
+                            type: 'submit',
+                        } })] })] }));
 }
-export default SaveQuery;

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

@@ -1,4 +1,4 @@
-.kv-save-query {
+.ydb-save-query {
     &__dialog-row {
         display: flex;
         align-items: flex-start;
@@ -25,37 +25,7 @@
     &__control-wrapper {
         display: flex;
         flex-grow: 1;
-        flex-direction: column;
-    }
-    &__error {
-        display: inline-block;
-
-        height: 17px;
-
-        color: var(--g-color-text-danger);
-    }
-    &__embedded-tooltip {
-        display: flex;
-        align-items: center;
-
-        height: 100%;
-        margin-left: -10px;
 
-        color: var(--g-color-text-secondary);
-        &:hover {
-            cursor: pointer;
-
-            color: var(--g-color-text-complementary);
-        }
-    }
-
-    &__embedded-popup {
-        max-width: 150px !important;
-        padding: 10px;
-
-        border-radius: 5px;
-        &::before {
-            border-radius: 5px;
-        }
+        min-height: 48px;
     }
 }

package/dist/containers/Tenant/Query/SaveQuery/i18n/en.json

@@ -0,0 +1,13 @@
+{
+    "action.save": "Save query",
+    "action.edit": "Edit query",
+    "action.save-as-new": "Save as new",
+    "action.edit-existing": "Edit existing",
+    "description": "The query will be saved in your browser",
+    "input-label": "Query name",
+    "input-placeholder": "Enter query name",
+    "button-apply": "Save",
+    "button-cancel": "Cancel",
+    "error.name-exists": "This name already exists",
+    "error.name-not-empty": "Name should not be empty"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "description" | "button-cancel" | "action.save" | "action.edit" | "action.save-as-new" | "action.edit-existing" | "input-label" | "input-placeholder" | "button-apply" | "error.name-exists" | "error.name-not-empty", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

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

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-save-query-dialog';
+export default registerKeysets(COMPONENT, { en });

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

@@ -1,11 +1,8 @@
-import type { SavedQuery } from '../../../../types/store/query';
 import './SavedQueries.scss';
 interface SavedQueriesProps {
-    savedQueries: SavedQuery[];
     changeUserInput: (value: {
         input: string;
     }) => void;
-    onDeleteQuery: (queryName: string) => void;
 }
-export declare const SavedQueries: ({ savedQueries, changeUserInput, onDeleteQuery }: SavedQueriesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SavedQueries: ({ changeUserInput }: SavedQueriesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,20 +5,22 @@ import DataTable from '@gravity-ui/react-data-table';
 import { Button, Dialog, Icon } from '@gravity-ui/uikit';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
-import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
+import { deleteSavedQuery, setQueryNameToEdit, } from '../../../../store/reducers/queryActions/queryActions';
 import { TENANT_QUERY_TABS_ID } from '../../../../store/reducers/tenant/constants';
 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 { useSavedQueries } from '../utils/useSavedQueries';
 import './SavedQueries.scss';
 const b = cn('ydb-saved-queries');
 const DeleteDialog = ({ visible, queryName, onCancelClick, onConfirmClick }) => {
     return (_jsxs(Dialog, { open: visible, hasCloseButton: false, size: "s", onClose: onCancelClick, onEnterKeyDown: onConfirmClick, children: [_jsx(Dialog.Header, { caption: i18n('delete-dialog.header') }), _jsxs(Dialog.Body, { className: b('dialog-body'), children: [i18n('delete-dialog.question'), _jsx("span", { className: b('dialog-query-name'), children: ` ${queryName}?` })] }), _jsx(Dialog.Footer, { textButtonApply: i18n('delete-dialog.delete'), textButtonCancel: i18n('delete-dialog.cancel'), onClickButtonCancel: onCancelClick, onClickButtonApply: onConfirmClick })] }));
 };
 const SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY = 'savedQueriesTableColumnsWidth';
-export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) => {
+export const SavedQueries = ({ changeUserInput }) => {
+    const savedQueries = useSavedQueries();
     const dispatch = useTypedDispatch();
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = React.useState(false);
     const [queryNameToDelete, setQueryNameToDelete] = React.useState('');
@@ -31,7 +33,7 @@ export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) =
     };
     const onConfirmDeleteClick = () => {
         closeDeleteDialog();
-        onDeleteQuery(queryNameToDelete);
+        dispatch(deleteSavedQuery(queryNameToDelete));
         setQueryNameToDelete('');
     };
     const onQueryClick = (queryText, queryName) => {

package/dist/containers/Tenant/Query/i18n/en.json

@@ -21,5 +21,6 @@
     "action.send-query": "Send query",
     "action.send-selected-query": "Send selected query",
     "action.previous-query": "Previous query in history",
-    "action.next-query": "Next query in history"
+    "action.next-query": "Next query in history",
+    "action.save-query": "Save query"
 }

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

@@ -1,2 +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;
+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" | "action.save-query", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

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

@@ -0,0 +1,2 @@
+import type { SavedQuery } from '../../../../types/store/query';
+export declare function useSavedQueries(): SavedQuery[];

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

@@ -0,0 +1,5 @@
+import { SAVED_QUERIES_KEY, useSetting } from '../../../../lib';
+export function useSavedQueries() {
+    const [savedQueries] = useSetting(SAVED_QUERIES_KEY, []);
+    return savedQueries;
+}