fix: unsaved changes in query editor

Author: astandrik

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

@@ -56,7 +56,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
         (row: any) => {
             const {QueryText: input} = row;
 
-            dispatch(changeUserInput({input}));
+            dispatch(changeUserInput({input, isDirty: false}));
 
             const queryParams = parseQuery(location);
 

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

@@ -71,7 +71,7 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
 
     const applyRowClick = React.useCallback(
         (input: string) => {
-            dispatch(changeUserInput({input}));
+            dispatch(changeUserInput({input, isDirty: false}));
 
             const queryParams = parseQuery(location);
 

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

@@ -27,7 +27,7 @@ const b = cn('ydb-queries-history');
 const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 
 interface QueriesHistoryProps {
-    changeUserInput: (value: {input: string}) => void;
+    changeUserInput: (value: {input: string; isDirty?: boolean}) => void;
 }
 
 function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
@@ -38,7 +38,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const reversedHistory = [...queriesHistory].reverse();
 
     const applyQueryClick = (query: QueryInHistory) => {
-        changeUserInput({input: query.queryText});
+        changeUserInput({input: query.queryText, isDirty: false});
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 

src/containers/Tenant/Query/Query.tsx

@@ -29,7 +29,7 @@ export const Query = (props: QueryProps) => {
 
     const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
 
-    const handleUserInputChange = (value: {input: string}) => {
+    const handleUserInputChange = (value: {input: string; isDirty?: boolean}) => {
         dispatch(changeUserInput(value));
     };
 

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

@@ -66,7 +66,7 @@ const initialTenantCommonInfoState = {
 interface QueryEditorProps {
     tenantName: string;
     path: string;
-    changeUserInput: (arg: {input: string}) => void;
+    changeUserInput: (arg: {input: string; isDirty?: boolean}) => void;
     theme: string;
     type?: EPathType;
 }

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

@@ -32,7 +32,7 @@ import {getKeyBindings} from './keybindings';
 const CONTEXT_MENU_GROUP_ID = 'navigation';
 
 interface YqlEditorProps {
-    changeUserInput: (arg: {input: string}) => void;
+    changeUserInput: (arg: {input: string; isDirty?: boolean}) => void;
     theme: string;
     handleGetExplainQueryClick: (text: string) => void;
     handleSendExecuteClick: (text: string, partial?: boolean) => void;
@@ -92,13 +92,7 @@ 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, isDirty: false});
         });
 
         if (window.api.codeAssist) {
@@ -185,7 +179,7 @@ export function YqlEditor({
 
     const onChange = (newValue: string) => {
         updateErrorsHighlighting();
-        changeUserInput({input: newValue});
+        changeUserInput({input: newValue, isDirty: true});
     };
     return (
         <MonacoEditor

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

@@ -63,7 +63,7 @@ const DeleteDialog = ({visible, queryName, onCancelClick, onConfirmClick}: Delet
 const SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY = 'savedQueriesTableColumnsWidth';
 
 interface SavedQueriesProps {
-    changeUserInput: (value: {input: string}) => void;
+    changeUserInput: (value: {input: string; isDirty?: boolean}) => void;
 }
 
 export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
@@ -91,7 +91,7 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
 
     const applyQueryClick = React.useCallback(
         ({queryText, queryName}: {queryText: string; queryName: string}) => {
-            changeUserInput({input: queryText});
+            changeUserInput({input: queryText, isDirty: false});
             dispatch(setQueryNameToEdit(queryName));
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         },

src/store/reducers/query/query.ts

@@ -47,8 +47,9 @@ const slice = createSlice({
     name: 'query',
     initialState,
     reducers: {
-        changeUserInput: (state, action: PayloadAction<{input: string}>) => {
+        changeUserInput: (state, action: PayloadAction<{input: string; isDirty?: boolean}>) => {
             state.input = action.payload.input;
+            state.isDirty = action.payload.isDirty;
         },
         setQueryResult: (state, action: PayloadAction<QueryResult | undefined>) => {
             state.result = action.payload;
@@ -145,6 +146,7 @@ const slice = createSlice({
                 : items;
         },
         selectUserInput: (state) => state.input,
+        selectIsDirty: (state) => state.isDirty,
         selectQueriesHistoryCurrentIndex: (state) => state.history?.currentIndex,
     },
 });
@@ -172,6 +174,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;