fix: unsaved changes in query editor

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx

@@ -8,7 +8,7 @@ import {
     setTopQueriesFilters,
     topQueriesApi,
 } from '../../../../../store/reducers/executeTopQueries/executeTopQueries';
-import {changeUserInput} from '../../../../../store/reducers/query/query';
+import {changeUserInput, setIsDirty} from '../../../../../store/reducers/query/query';
 import {
     TENANT_DIAGNOSTICS_TABS_IDS,
     TENANT_PAGE,
@@ -57,6 +57,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
             const {QueryText: input} = row;
 
             dispatch(changeUserInput({input}));
+            dispatch(setIsDirty(false));
 
             const queryParams = parseQuery(location);
 

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -12,7 +12,7 @@ import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {parseQuery} from '../../../../routes';
 import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
-import {changeUserInput} from '../../../../store/reducers/query/query';
+import {changeUserInput, setIsDirty} from '../../../../store/reducers/query/query';
 import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
@@ -72,6 +72,7 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
     const applyRowClick = React.useCallback(
         (input: string) => {
             dispatch(changeUserInput({input}));
+            dispatch(setIsDirty(false));
 
             const queryParams = parseQuery(location);
 

src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx

@@ -7,7 +7,7 @@ import {NavigationTree} from 'ydb-ui-components';
 
 import {getConnectToDBDialog} from '../../../../components/ConnectToDB/ConnectToDBDialog';
 import {useCreateDirectoryFeatureAvailable} from '../../../../store/reducers/capabilities/hooks';
-import {selectUserInput} from '../../../../store/reducers/query/query';
+import {selectIsDirty, selectUserInput} from '../../../../store/reducers/query/query';
 import {schemaApi} from '../../../../store/reducers/schema/schema';
 import {tableSchemaDataApi} from '../../../../store/reducers/tableSchemaData';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
@@ -42,6 +42,7 @@ export function SchemaTree(props: SchemaTreeProps) {
     const {rootPath, rootName, rootType, currentPath, onActivePathUpdate} = props;
     const dispatch = useTypedDispatch();
     const input = useTypedSelector(selectUserInput);
+    const isDirty = useTypedSelector(selectIsDirty);
     const [
         getTableSchemaDataQuery,
         {currentData: actionsSchemaData, isFetching: isActionsDataFetching},
@@ -132,7 +133,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 showCreateDirectoryDialog: createDirectoryFeatureAvailable
                     ? handleOpenCreateDirectoryDialog
                     : undefined,
-                getConfirmation: input ? getConfirmation : undefined,
+                getConfirmation: input && isDirty ? getConfirmation : undefined,
                 getConnectToDBDialog,
                 schemaData: actionsSchemaData,
                 isSchemaDataLoading: isActionsDataFetching,

src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -7,6 +7,7 @@ import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQue
 import {
     selectQueriesHistory,
     selectQueriesHistoryFilter,
+    setIsDirty,
     setQueryHistoryFilter,
 } from '../../../../store/reducers/query/query';
 import type {QueryInHistory} from '../../../../store/reducers/query/types';
@@ -39,6 +40,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
 
     const applyQueryClick = (query: QueryInHistory) => {
         changeUserInput({input: query.queryText});
+        dispatch(setIsDirty(false));
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 

src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx

@@ -11,6 +11,7 @@ import {
     goToPreviousQuery,
     selectQueriesHistory,
     selectUserInput,
+    setIsDirty,
 } from '../../../../store/reducers/query/query';
 import type {QueryAction} from '../../../../types/store/query';
 import {ENABLE_CODE_ASSISTANT, LAST_USED_QUERY_ACTION_KEY} from '../../../../utils/constants';
@@ -92,13 +93,8 @@ export function YqlEditor({
         window.ydbEditor = editor;
         const keybindings = getKeyBindings(monaco);
         monaco.editor.registerCommand('insertSnippetToEditor', (_asessor, input: string) => {
-            //suggestController is not properly typed yet in monaco-editor package
-            const contribution = editor.getContribution<any>('snippetController2');
-            if (contribution) {
-                editor.focus();
-                editor.setValue('');
-                contribution.insert(input);
-            }
+            changeUserInput({input});
+            dispatch(setIsDirty(false));
         });
 
         if (window.api.codeAssist) {
@@ -186,6 +182,7 @@ export function YqlEditor({
     const onChange = (newValue: string) => {
         updateErrorsHighlighting();
         changeUserInput({input: newValue});
+        dispatch(setIsDirty(true));
     };
     return (
         <MonacoEditor

src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -9,6 +9,7 @@ import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/Re
 import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {setIsDirty} from '../../../../store/reducers/query/query';
 import {
     deleteSavedQuery,
     selectSavedQueriesFilter,
@@ -92,6 +93,7 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
     const applyQueryClick = React.useCallback(
         ({queryText, queryName}: {queryText: string; queryName: string}) => {
             changeUserInput({input: queryText});
+            dispatch(setIsDirty(false));
             dispatch(setQueryNameToEdit(queryName));
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         },

src/store/reducers/query/query.ts

@@ -50,6 +50,9 @@ const slice = createSlice({
         changeUserInput: (state, action: PayloadAction<{input: string}>) => {
             state.input = action.payload.input;
         },
+        setIsDirty: (state, action: PayloadAction<boolean>) => {
+            state.isDirty = action.payload;
+        },
         setQueryResult: (state, action: PayloadAction<QueryResult | undefined>) => {
             state.result = action.payload;
         },
@@ -145,6 +148,7 @@ const slice = createSlice({
                 : items;
         },
         selectUserInput: (state) => state.input,
+        selectIsDirty: (state) => state.isDirty,
         selectQueriesHistoryCurrentIndex: (state) => state.history?.currentIndex,
     },
 });
@@ -162,6 +166,7 @@ export const {
     addStreamingChunks,
     setStreamQueryResponse,
     setStreamSession,
+    setIsDirty,
 } = slice.actions;
 
 export const {
@@ -172,6 +177,7 @@ export const {
     selectResult,
     selectUserInput,
     selectQueryDuration,
+    selectIsDirty,
 } = slice.selectors;
 
 interface SendQueryParams extends QueryRequestParams {

src/store/reducers/query/types.ts

@@ -61,6 +61,7 @@ export interface QueryResult {
 export interface QueryState {
     input: string;
     result?: QueryResult;
+    isDirty?: boolean;
     history: {
         queries: QueryInHistory[];
         currentIndex: number;

src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx

@@ -5,7 +5,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import {useTypedSelector} from '..';
 import {CONFIRMATION_DIALOG} from '../../../components/ConfirmationDialog/ConfirmationDialog';
 import {SaveQueryButton} from '../../../containers/Tenant/Query/SaveQuery/SaveQuery';
-import {selectUserInput} from '../../../store/reducers/query/query';
+import {selectIsDirty, selectUserInput} from '../../../store/reducers/query/query';
 
 import i18n from './i18n';
 
@@ -66,11 +66,12 @@ export function changeInputWithConfirmation<T>(callback: (args: T) => void) {
 
 export function useChangeInputWithConfirmation<T>(callback: (args: T) => void) {
     const userInput = useTypedSelector(selectUserInput);
+    const isDirty = useTypedSelector(selectIsDirty);
     const callbackWithConfirmation = React.useMemo(
         () => changeInputWithConfirmation<T>(callback),
         [callback],
     );
-    if (!userInput) {
+    if (!userInput || !isDirty) {
         return callback;
     }
     return callbackWithConfirmation;