feat: confirm input changes

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../../../../routes';
-import {changeUserInput} from '../../../../../store/reducers/executeQuery';
+import {replaceUserInput} from '../../../../../store/reducers/executeQuery';
 import {
     setTopQueriesFilters,
     topQueriesApi,
@@ -52,7 +52,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
         (row: any) => {
             const {QueryText: input} = row;
 
-            dispatch(changeUserInput({input}));
+            dispatch(replaceUserInput({input}));
 
             const queryParams = parseQuery(location);
 

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

@@ -11,7 +11,7 @@ import {DateRange} from '../../../../components/DateRange';
 import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {parseQuery} from '../../../../routes';
-import {changeUserInput} from '../../../../store/reducers/executeQuery';
+import {replaceUserInput} from '../../../../store/reducers/executeQuery';
 import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import {
     TENANT_PAGE,
@@ -70,7 +70,7 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
 
     const onRowClick = React.useCallback(
         (input: string) => {
-            dispatch(changeUserInput({input}));
+            dispatch(replaceUserInput({input}));
 
             const queryParams = parseQuery(location);
 

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

@@ -26,18 +26,18 @@ const b = cn('ydb-queries-history');
 const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 
 interface QueriesHistoryProps {
-    changeUserInput: (value: {input: string}) => void;
+    replaceUserInput: (value: {input: string}) => void;
 }
 
-function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
+function QueriesHistory({replaceUserInput}: QueriesHistoryProps) {
     const dispatch = useTypedDispatch();
 
     const queriesHistory = useTypedSelector(selectQueriesHistory);
     const filter = useTypedSelector(selectQueriesHistoryFilter);
     const reversedHistory = [...queriesHistory].reverse();
 
     const onQueryClick = (query: QueryInHistory) => {
-        changeUserInput({input: query.queryText});
+        replaceUserInput({input: query.queryText});
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 

src/containers/Tenant/Query/Query.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Helmet} from 'react-helmet-async';
 
-import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {changeUserInput, replaceUserInput} from '../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import type {EPathType} from '../../../types/api/schema';
 import {cn} from '../../../utils/cn';
@@ -33,6 +33,10 @@ export const Query = (props: QueryProps) => {
         dispatch(changeUserInput(value));
     };
 
+    const handleUserInputReplace = (value: {input: string}) => {
+        dispatch(replaceUserInput(value));
+    };
+
     const activeTab = React.useMemo(
         () => queryEditorTabs.find(({id}) => id === queryTab),
         [queryTab],
@@ -44,10 +48,10 @@ export const Query = (props: QueryProps) => {
                 return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
             }
             case TENANT_QUERY_TABS_ID.history: {
-                return <QueriesHistory changeUserInput={handleUserInputChange} />;
+                return <QueriesHistory replaceUserInput={handleUserInputReplace} />;
             }
             case TENANT_QUERY_TABS_ID.saved: {
-                return <SavedQueries changeUserInput={handleUserInputChange} />;
+                return <SavedQueries replaceUserInput={handleUserInputReplace} />;
             }
             default: {
                 return null;

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

@@ -62,10 +62,10 @@ const DeleteDialog = ({visible, queryName, onCancelClick, onConfirmClick}: Delet
 const SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY = 'savedQueriesTableColumnsWidth';
 
 interface SavedQueriesProps {
-    changeUserInput: (value: {input: string}) => void;
+    replaceUserInput: (value: {input: string}) => void;
 }
 
-export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
+export const SavedQueries = ({replaceUserInput}: SavedQueriesProps) => {
     const savedQueries = useSavedQueries();
     const dispatch = useTypedDispatch();
     const filter = useTypedSelector(selectSavedQueriesFilter);
@@ -89,7 +89,7 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
     };
 
     const onQueryClick = (queryText: string, queryName: string) => {
-        changeUserInput({input: queryText});
+        replaceUserInput({input: queryText});
         dispatch(setQueryNameToEdit(queryName));
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };

src/containers/Tenant/utils/newSQLQueryActions.ts

@@ -1,4 +1,4 @@
-import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {replaceUserInput} from '../../../store/reducers/executeQuery';
 
 import {
     addTableIndex,
@@ -31,7 +31,7 @@ import {
 
 export const bindActions = (dispatch: React.Dispatch<any>) => {
     const inputQuery = (query: () => string) => () => {
-        dispatch(changeUserInput({input: query()}));
+        dispatch(replaceUserInput({input: query()}));
     };
 
     return {

src/containers/Tenant/utils/schemaActions.ts

@@ -2,7 +2,7 @@ import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import type {AppDispatch} from '../../../store';
-import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {replaceUserInput} from '../../../store/reducers/executeQuery';
 import type {GetTableSchemaDataParams} from '../../../store/reducers/tableSchemaData';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
@@ -73,7 +73,7 @@ const bindActions = (
                 : Promise.resolve(undefined);
 
         userInputDataPromise.then((tableData) => {
-            dispatch(changeUserInput({input: tmpl({...params, tableData})}));
+            dispatch(replaceUserInput({input: tmpl({...params, tableData})}));
         });
 
         dispatch(setTenantPage(TENANT_PAGES_IDS.query));

src/store/reducers/executeQuery.ts

@@ -21,6 +21,7 @@ import {api} from './api';
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
+const REPLACE_USER_INPUT = 'query/REPLACE_USER_INPUT';
 const SET_QUERY_RESULT = 'query/SET_QUERY_RESULT';
 const SET_QUERY_TRACE_READY = 'query/SET_QUERY_TRACE_READY';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
@@ -57,6 +58,21 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
     action,
 ) => {
     switch (action.type) {
+        case REPLACE_USER_INPUT: {
+            if (action.data.input === state.input) {
+                return state;
+            }
+
+            if (window.confirm('Are you sure you want to replace the input?')) {
+                return {
+                    ...state,
+                    input: action.data.input,
+                };
+            }
+
+            return state;
+        }
+
         case CHANGE_USER_INPUT: {
             return {
                 ...state,
@@ -353,6 +369,13 @@ export const changeUserInput = ({input}: {input: string}) => {
     } as const;
 };
 
+export const replaceUserInput = ({input}: {input: string}) => {
+    return {
+        type: REPLACE_USER_INPUT,
+        data: {input},
+    } as const;
+};
+
 export const setTenantPath = (value: string) => {
     return {
         type: SET_TENANT_PATH,

src/types/store/executeQuery.ts

@@ -2,6 +2,7 @@ import type {
     changeUserInput,
     goToNextQuery,
     goToPreviousQuery,
+    replaceUserInput,
     saveQueryToHistory,
     setQueryHistoryFilter,
     setQueryResult,
@@ -62,6 +63,7 @@ export type ExecuteQueryAction =
     | ReturnType<typeof goToNextQuery>
     | ReturnType<typeof goToPreviousQuery>
     | ReturnType<typeof changeUserInput>
+    | ReturnType<typeof replaceUserInput>
     | ReturnType<typeof setQueryResult>
     | ReturnType<typeof saveQueryToHistory>
     | ReturnType<typeof updateQueryInHistory>