.

Author: Anton Standrik

src/containers/Tenant/Query/ExecuteResult/PlanToSvgButton.tsx

@@ -23,7 +23,7 @@ interface PlanToSvgButtonProps {
 export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
     const [error, setError] = React.useState<string | null>(null);
     const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
-    const [getPlanToSvg, {isLoading}] = planToSvgApi.usePlanToSvgQueryMutation();
+    const [getPlanToSvg, {isLoading}] = planToSvgApi.useLazyPlanToSvgQueryQuery();
 
     const handleClick = React.useCallback(() => {
         getPlanToSvg({plan, database})

src/containers/Tenant/Query/ExecuteResult/TraceButton.tsx

@@ -20,7 +20,7 @@ export function TraceButton({traceId, isTraceReady}: TraceUrlButtonProps) {
     const checkTraceUrl = traceCheck?.url ? replaceParams(traceCheck.url, {traceId}) : '';
     const traceUrl = traceView?.url ? replaceParams(traceView.url, {traceId}) : '';
 
-    const [checkTrace, {isLoading, isUninitialized}] = traceApi.useCheckTraceMutation();
+    const [checkTrace, {isLoading, isUninitialized}] = traceApi.useLazyCheckTraceQuery();
 
     React.useEffect(() => {
         let checkTraceMutation: {abort: () => void} | null;

src/store/reducers/planToSvg.ts

@@ -9,7 +9,7 @@ export interface PlanToSvgQueryParams {
 
 export const planToSvgApi = api.injectEndpoints({
     endpoints: (build) => ({
-        planToSvgQuery: build.mutation<string, PlanToSvgQueryParams>({
+        planToSvgQuery: build.query<string, PlanToSvgQueryParams>({
             queryFn: async ({plan, database}, {signal}) => {
                 try {
                     const response = await window.api.planToSvg(

src/store/reducers/trace.ts

@@ -7,7 +7,7 @@ interface CheckTraceParams {
 
 export const traceApi = api.injectEndpoints({
     endpoints: (build) => ({
-        checkTrace: build.mutation({
+        checkTrace: build.query({
             queryFn: async ({url}: CheckTraceParams, {signal, dispatch}) => {
                 try {
                     const response = await window.api.checkTrace({url}, {signal});

tests/suites/nodes/nodes.test.ts

@@ -1,5 +1,6 @@
 import {expect, test} from '@playwright/test';
 
+import {toggleExperiment} from '../../utils/toggleExperiment';
 import {NodesPage} from '../nodes/NodesPage';
 import {PaginatedTable} from '../paginatedTable/paginatedTable';
 
@@ -28,12 +29,7 @@ test.describe('Test Nodes Paginated Table', async () => {
         expect(response?.ok()).toBe(true);
 
         // Wil be removed since it's an experiment
-        await page.evaluate(() => {
-            localStorage.setItem('useBackendParamsForTables', 'true');
-            location.reload();
-        });
-
-        await page.waitForLoadState('networkidle');
+        await toggleExperiment(page, 'on', 'Use paginated tables');
     });
 
     test('Table loads and displays data', async ({page}) => {

tests/suites/sidebar/sidebar.test.ts

@@ -1,6 +1,7 @@
 import {expect, test} from '@playwright/test';
 
 import {PageModel} from '../../models/PageModel';
+import {toggleExperiment} from '../../utils/toggleExperiment';
 
 import {Sidebar} from './Sidebar';
 
@@ -92,32 +93,13 @@ test.describe('Test Sidebar', async () => {
 
     test('Can toggle experiments in settings', async ({page}) => {
         const sidebar = new Sidebar(page);
-        await sidebar.waitForSidebarToLoad();
-
-        // Open settings
-        await sidebar.clickSettings();
-        await page.waitForTimeout(500); // Wait for animation
-
-        // Click experiments section
-        await sidebar.clickExperimentsSection();
-        await page.waitForTimeout(500); // Wait for animation
-
-        // Toggle "Use paginated tables" experiment
-        const experimentTitle = 'Use paginated tables';
-        const initialState = await sidebar.isExperimentEnabled(experimentTitle);
-        await sidebar.toggleExperimentByTitle(experimentTitle);
-        await page.waitForTimeout(500); // Wait for animation
-
-        // Verify the state has changed
+        const experimentTitle = 'Plan to SVG';
+        await toggleExperiment(page, 'on', experimentTitle);
         const newState = await sidebar.isExperimentEnabled(experimentTitle);
-        expect(newState).not.toBe(initialState);
-
-        // Toggle back
-        await sidebar.toggleExperimentByTitle(experimentTitle);
-        await page.waitForTimeout(500); // Wait for animation
+        expect(newState).toBe(true);
 
-        // Verify it's back to initial state
+        await toggleExperiment(page, 'off', experimentTitle);
         const finalState = await sidebar.isExperimentEnabled(experimentTitle);
-        expect(finalState).toBe(initialState);
+        expect(finalState).toBe(false);
     });
 });

tests/suites/tenant/planToSvg/planToSvg.test.ts

@@ -0,0 +1,53 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../utils/constants';
+import {toggleExperiment} from '../../../utils/toggleExperiment';
+import {TenantPage} from '../TenantPage';
+import {ButtonNames, QueryEditor} from '../queryEditor/QueryEditor';
+
+test.describe('Test Plan to SVG functionality', async () => {
+    const testQuery = 'SELECT 1;'; // Simple query that will generate a plan
+
+    test.beforeEach(async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            general: 'query',
+        };
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+    });
+
+    test('Plan to SVG experiment shows execution plan in new tab', async ({page}) => {
+        const queryEditor = new QueryEditor(page);
+
+        // 1. Turn on Plan to SVG experiment
+        await toggleExperiment(page, 'on', 'Plan to SVG');
+
+        // 2. Set stats level to Full
+        await queryEditor.clickGearButton();
+        await queryEditor.settingsDialog.changeStatsLevel('Full');
+        await queryEditor.settingsDialog.clickButton(ButtonNames.Save);
+
+        // 3. Set query and run it
+        await queryEditor.setQuery(testQuery);
+        await queryEditor.clickRunButton();
+
+        // 4. Wait for query execution to complete
+        await expect(async () => {
+            const status = await queryEditor.getExecutionStatus();
+            expect(status).toBe('Completed');
+        }).toPass();
+
+        // 5. Check if Execution Plan button appears and click it
+        const executionPlanButton = page.locator('button:has-text("Execution plan")');
+        await expect(executionPlanButton).toBeVisible();
+        await executionPlanButton.click();
+        await page.waitForTimeout(1000); // Wait for new tab to open
+
+        // 6. Verify we're taken to a new tab with SVG content
+        const svgElement = page.locator('svg').first();
+        await expect(svgElement).toBeVisible();
+    });
+});

tests/utils/toggleExperiment.ts

@@ -0,0 +1,26 @@
+import type {Page} from '@playwright/test';
+
+import {Sidebar} from '../suites/sidebar/Sidebar';
+
+export const toggleExperiment = async (page: Page, state: 'on' | 'off', title: string) => {
+    const sidebar = new Sidebar(page);
+    await sidebar.waitForSidebarToLoad();
+    if (!(await sidebar.isDrawerVisible())) {
+        await sidebar.clickSettings();
+        await page.waitForTimeout(500); // Wait for animation
+    }
+    await sidebar.clickExperimentsSection();
+    await page.waitForTimeout(500); // Wait for animation
+    const currentState = await sidebar.isExperimentEnabled(title);
+    const desiredState = state === 'on';
+
+    if (currentState !== desiredState) {
+        await sidebar.toggleExperimentByTitle(title);
+        await page.waitForTimeout(500); // Wait for animation
+    }
+
+    if (await sidebar.isDrawerVisible()) {
+        await sidebar.clickSettings();
+        await page.waitForTimeout(500); // Wait for animation
+    }
+};