fix: unsaved changes in query editor (#2026)

Author: astandrik

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/QueryEditor.tsx

@@ -16,6 +16,7 @@ import {
     selectQueriesHistoryCurrentIndex,
     selectResult,
     selectTenantPath,
+    setIsDirty,
     setTenantPath,
 } from '../../../../store/reducers/query/query';
 import type {QueryResult} from '../../../../store/reducers/query/types';
@@ -174,6 +175,7 @@ export default function QueryEditor(props: QueryEditorProps) {
             if (text !== historyQueries[historyCurrentIndex]?.queryText) {
                 dispatch(saveQueryToHistory({queryText: text, queryId}));
             }
+            dispatch(setIsDirty(false));
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     });

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';
@@ -186,6 +187,7 @@ export function YqlEditor({
     const onChange = (newValue: string) => {
         updateErrorsHighlighting();
         changeUserInput({input: newValue});
+        dispatch(setIsDirty(true));
     };
     return (
         <MonacoEditor

src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx

@@ -4,6 +4,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import type {ButtonProps} from '@gravity-ui/uikit';
 import {Button, Dialog, DropdownMenu, TextInput} from '@gravity-ui/uikit';
 
+import {setIsDirty} from '../../../../store/reducers/query/query';
 import {
     clearQueryNameToEdit,
     saveQuery,
@@ -55,6 +56,7 @@ export function SaveQuery({buttonProps = {}}: SaveQueryProps) {
 
     const onEditQueryClick = () => {
         dispatch(saveQuery(queryNameToEdit));
+        dispatch(setIsDirty(false));
         dispatch(clearQueryNameToEdit());
     };
 
@@ -130,6 +132,7 @@ function SaveQueryDialog({onSuccess, onCancel, onClose, open}: SaveQueryDialogPr
 
     const onSaveClick = () => {
         dispatch(saveQuery(queryName));
+        dispatch(setIsDirty(false));
         onCloseDialog();
         onSuccess?.();
     };

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

@@ -31,6 +31,7 @@ const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
 const initialState: QueryState = {
     input: '',
+    isDirty: false,
     history: {
         queries: queriesHistoryInitial
             .slice(sliceLimit < 0 ? 0 : sliceLimit)
@@ -50,6 +51,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 +149,7 @@ const slice = createSlice({
                 : items;
         },
         selectUserInput: (state) => state.input,
+        selectIsDirty: (state) => state.isDirty,
         selectQueriesHistoryCurrentIndex: (state) => state.history?.currentIndex,
     },
 });
@@ -162,6 +167,7 @@ export const {
     addStreamingChunks,
     setStreamQueryResponse,
     setStreamSession,
+    setIsDirty,
 } = slice.actions;
 
 export const {
@@ -172,6 +178,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;

tests/suites/tenant/TenantPage.ts

@@ -3,6 +3,11 @@ import type {Locator, Page} from '@playwright/test';
 import {PageModel} from '../../models/PageModel';
 import {tenantPage} from '../../utils/constants';
 
+import {QueryEditor, QueryTabs} from './queryEditor/models/QueryEditor';
+import {SaveQueryDialog} from './queryEditor/models/SaveQueryDialog';
+import {UnsavedChangesModal} from './queryEditor/models/UnsavedChangesModal';
+import {SavedQueriesTable} from './savedQueries/models/SavedQueriesTable';
+
 export const VISIBILITY_TIMEOUT = 10 * 1000;
 
 export enum NavigationTabs {
@@ -11,6 +16,11 @@ export enum NavigationTabs {
 }
 
 export class TenantPage extends PageModel {
+    queryEditor: QueryEditor;
+    saveQueryDialog: SaveQueryDialog;
+    savedQueriesTable: SavedQueriesTable;
+    unsavedChangesModal: UnsavedChangesModal;
+
     private navigation: Locator;
     private radioGroup: Locator;
     private diagnosticsContainer: Locator;
@@ -25,6 +35,11 @@ export class TenantPage extends PageModel {
         this.diagnosticsContainer = page.locator('.kv-tenant-diagnostics');
         this.emptyState = page.locator('.empty-state');
         this.emptyStateTitle = this.emptyState.locator('.empty-state__title');
+
+        this.queryEditor = new QueryEditor(page);
+        this.saveQueryDialog = new SaveQueryDialog(page);
+        this.savedQueriesTable = new SavedQueriesTable(page);
+        this.unsavedChangesModal = new UnsavedChangesModal(page);
     }
 
     async isDiagnosticsVisible() {
@@ -46,4 +61,48 @@ export class TenantPage extends PageModel {
         await tabInput.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
         await tabInput.click();
     }
+
+    async saveQuery(queryText: string, name?: string): Promise<string> {
+        const queryName = name || `Query ${Date.now()}`;
+        await this.queryEditor.setQuery(queryText);
+        await this.queryEditor.clickSaveButton();
+        await this.saveQueryDialog.setQueryName(queryName);
+        await this.saveQueryDialog.clickSave();
+        return queryName;
+    }
+
+    async editAsNewQuery(queryText: string, name?: string): Promise<string> {
+        const queryName = name || `Query ${Date.now()}`;
+        await this.queryEditor.setQuery(queryText);
+        await this.queryEditor.clickEditButton();
+        await this.queryEditor.clickSaveAsNewEditButton();
+        await this.saveQueryDialog.setQueryName(queryName);
+        await this.saveQueryDialog.clickSave();
+        return queryName;
+    }
+
+    async openSavedQuery(queryName: string): Promise<void> {
+        // Wait before switching to saved query tabs
+        // https://github.com/microsoft/monaco-editor/issues/4702
+        await this.page.waitForTimeout(500);
+        await this.queryEditor.queryTabs.selectTab(QueryTabs.Saved);
+        await this.savedQueriesTable.isVisible();
+        await this.savedQueriesTable.selectQuery(queryName);
+    }
+
+    async isUnsavedChangesModalVisible(): Promise<boolean> {
+        try {
+            return await this.unsavedChangesModal.isVisible();
+        } catch {
+            return false;
+        }
+    }
+
+    async isUnsavedChangesModalHidden(): Promise<boolean> {
+        try {
+            return await this.unsavedChangesModal.isHidden();
+        } catch {
+            return false;
+        }
+    }
 }

tests/suites/tenant/queryEditor/models/QueryEditor.ts

@@ -20,9 +20,14 @@ export enum ButtonNames {
     Explain = 'Explain',
     Cancel = 'Cancel',
     Save = 'Save',
+    Edit = 'Edit',
     Stop = 'Stop',
 }
 
+export enum EditSavedSubMenuNames {
+    SaveAsNew = 'Save as new',
+}
+
 export enum ResultTabNames {
     Result = 'Result',
     Stats = 'Stats',
@@ -52,6 +57,8 @@ export class QueryEditor {
     private stopButton: Locator;
     private stopBanner: Locator;
     private saveButton: Locator;
+    private editButton: Locator;
+    private dropdownMenu: Locator;
     private gearButton: Locator;
     private banner: Locator;
     private executionStatus: Locator;
@@ -68,6 +75,8 @@ export class QueryEditor {
         this.stopBanner = this.selector.locator('.ydb-query-stopped-banner');
         this.explainButton = this.selector.getByRole('button', {name: ButtonNames.Explain});
         this.saveButton = this.selector.getByRole('button', {name: ButtonNames.Save});
+        this.editButton = this.selector.getByRole('button', {name: ButtonNames.Edit});
+        this.dropdownMenu = page.locator('.g-dropdown-menu__menu');
         this.gearButton = this.selector.locator('.ydb-query-editor-button__gear-button');
         this.executionStatus = this.selector.locator('.kv-query-execution-status .g-text');
         this.resultsControls = this.selector.locator('.ydb-query-result__controls');
@@ -124,6 +133,20 @@ export class QueryEditor {
         await this.saveButton.click();
     }
 
+    async clickEditButton() {
+        await this.editButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await this.editButton.click();
+    }
+
+    async clickSaveAsNewEditButton() {
+        const menuItem = this.dropdownMenu
+            .getByRole('menuitem')
+            .filter({hasText: EditSavedSubMenuNames.SaveAsNew});
+
+        await menuItem.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await menuItem.click();
+    }
+
     async getExplainResult(type: ExplainResultType) {
         await this.selectResultTypeRadio(type);
         const resultArea = this.selector.locator('.ydb-query-result__result');
@@ -203,9 +226,22 @@ export class QueryEditor {
         await this.gearButton.hover();
     }
 
-    async setQuery(query: string) {
-        await this.editorTextArea.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
-        await this.editorTextArea.clear();
+    async setQuery(query: string, timeout = VISIBILITY_TIMEOUT) {
+        await this.editorTextArea.waitFor({state: 'visible', timeout});
+
+        await this.editorTextArea.evaluate(() => {
+            const editor = window.ydbEditor;
+            if (editor) {
+                editor.setValue('');
+            }
+            return false;
+        });
+
+        const currentValue = await this.editorTextArea.inputValue();
+        if (currentValue !== '') {
+            throw new Error('Failed to clear editor text area');
+        }
+
         await this.editorTextArea.fill(query);
     }