fix(QueryHistory): query history not saving (#1111)

Author: astandrik

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

@@ -150,7 +150,7 @@ function QueryEditor(props: QueryEditorProps) {
 
         const schema = useMultiSchema ? 'multi' : 'modern';
 
-        const query = text && typeof text === 'string' ? text : input;
+        const query = text ?? input;
 
         setLastUsedQueryAction(QUERY_ACTIONS.execute);
         if (!isEqual(lastQueryExecutionSettings, querySettings)) {
@@ -312,10 +312,10 @@ function QueryEditor(props: QueryEditorProps) {
     const renderControls = () => {
         return (
             <QueryEditorControls
-                onRunButtonClick={handleSendExecuteClick}
+                handleSendExecuteClick={handleSendExecuteClick}
                 onSettingsButtonClick={handleSettingsClick}
                 runIsLoading={executeQueryResult.isLoading}
-                onExplainButtonClick={handleGetExplainQueryClick}
+                handleGetExplainQueryClick={handleGetExplainQueryClick}
                 explainIsLoading={explainQueryResult.isLoading}
                 disabled={!executeQuery.input}
                 highlightedAction={lastUsedQueryAction}

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -54,20 +54,20 @@ const SettingsButton = ({onClick, runIsLoading}: SettingsButtonProps) => {
 };
 
 interface QueryEditorControlsProps {
-    onRunButtonClick: () => void;
+    handleSendExecuteClick: () => void;
     onSettingsButtonClick: () => void;
     runIsLoading: boolean;
-    onExplainButtonClick: () => void;
+    handleGetExplainQueryClick: () => void;
     explainIsLoading: boolean;
     disabled: boolean;
     highlightedAction: QueryAction;
 }
 
 export const QueryEditorControls = ({
-    onRunButtonClick,
+    handleSendExecuteClick,
     onSettingsButtonClick,
     runIsLoading,
-    onExplainButtonClick,
+    handleGetExplainQueryClick,
     explainIsLoading,
     disabled,
     highlightedAction,
@@ -76,6 +76,14 @@ export const QueryEditorControls = ({
     const explainView: ButtonView | undefined =
         highlightedAction === 'explain' ? 'action' : undefined;
 
+    const onRunButtonClick = () => {
+        handleSendExecuteClick();
+    };
+
+    const onExplainButtonClick = () => {
+        handleGetExplainQueryClick();
+    };
+
     return (
         <div className={b()}>
             <div className={b('left')}>

tests/suites/tenant/queryEditor/QueryEditor.ts

@@ -169,6 +169,10 @@ export class QueryEditor {
         }
     }
 
+    async focusEditor() {
+        await this.editorTextArea.focus();
+    }
+
     async clickGearButton() {
         await this.gearButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
         await this.gearButton.click();

tests/suites/tenant/queryHistory/queryHistory.test.ts

@@ -0,0 +1,91 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../utils/constants';
+import {TenantPage} from '../TenantPage';
+import {QueryEditor, QueryMode} from '../queryEditor/QueryEditor';
+
+import executeQueryWithKeybinding from './utils';
+
+export const VISIBILITY_TIMEOUT = 5000;
+
+test.describe('Query History', () => {
+    let tenantPage: TenantPage;
+    let queryEditor: QueryEditor;
+
+    test.beforeEach(async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            name: tenantName,
+            general: 'query',
+        };
+
+        tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+        queryEditor = new QueryEditor(page);
+    });
+
+    test('New query appears in history after execution', async ({page}) => {
+        const testQuery = 'SELECT 1 AS test_column;';
+
+        // Execute the query
+        await queryEditor.run(testQuery, QueryMode.YQLScript);
+
+        // Navigate to the history tab
+        await page.click('text=History');
+
+        // Check if the query appears in the history
+        const historyTable = page.locator('.ydb-queries-history table');
+        await expect(historyTable.locator(`text="${testQuery}"`)).toBeVisible({
+            timeout: VISIBILITY_TIMEOUT,
+        });
+    });
+
+    test('Multiple queries appear in correct order in history', async ({page}) => {
+        const queries = [
+            'SELECT 1 AS first_query;',
+            'SELECT 2 AS second_query;',
+            'SELECT 3 AS third_query;',
+        ];
+
+        // Execute multiple queries
+        for (const query of queries) {
+            await queryEditor.run(query, QueryMode.YQLScript);
+        }
+
+        // Navigate to the history tab
+        await page.click('text=History');
+
+        // Check if queries appear in reverse order (most recent first)
+        const historyTable = page.locator('.ydb-queries-history table');
+        const rows = historyTable.locator('tbody tr');
+
+        await expect(rows).toHaveCount(queries.length);
+
+        for (let i = 0; i < queries.length; i++) {
+            await expect(rows.nth(i)).toContainText(queries[queries.length - 1 - i]);
+        }
+    });
+
+    test('Query executed with keybinding is saved in history', async ({page, browserName}) => {
+        const testQuery = 'SELECT 1 AS keybinding_test;';
+
+        // Focus on the query editor
+        await queryEditor.focusEditor();
+
+        // Type the query
+        await page.keyboard.type(testQuery);
+
+        // Use the keybinding to execute the query
+        await executeQueryWithKeybinding(page, browserName);
+
+        // Wait for the query to be executed
+        await page.waitForSelector('.ydb-query-execute-result__result', {timeout: 10000});
+
+        // Navigate to the history tab
+        await page.click('text=History');
+
+        // Check if the query appears in the history
+        const historyTable = page.locator('.ydb-queries-history table');
+        await expect(historyTable.locator(`text="${testQuery}"`)).toBeVisible();
+    });
+});

tests/suites/tenant/queryHistory/utils.ts

@@ -0,0 +1,18 @@
+import type {Page} from '@playwright/test';
+
+// eslint-disable-next-line no-implicit-globals
+export default async function executeQueryWithKeybinding(page: Page, browserName: string) {
+    const isMac = process.platform === 'darwin';
+    const modifierKey = browserName === 'webkit' ? 'Meta' : 'Control';
+
+    if (browserName !== 'webkit' || isMac) {
+        await page.keyboard.down(modifierKey);
+        await page.keyboard.press('Enter');
+        await page.keyboard.up(modifierKey);
+    } else {
+        await page.keyboard.press('Meta+Enter');
+    }
+
+    // Add a small delay to ensure the event is processed
+    await page.waitForTimeout(1000);
+}