From 8e1587b10cd59e5d3b99815dbc6fac70caa8c16e Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@Antons-MacBook-Air.local>
Date: Wed, 20 Nov 2024 13:15:04 +0300
Subject: [PATCH 1/2] fix: make plan to svg more comprehensive

---
 .../QuerySettingsDialog.tsx                   | 44 ++++++++++++-------
 .../QuerySettingsSelect.tsx                   |  2 +
 .../Query/QuerySettingsDialog/i18n/en.json    |  1 +
 .../Query/QuerySettingsDialog/i18n/ru.json    |  1 +
 src/containers/UserSettings/i18n/en.json      |  4 +-
 src/utils/hooks/useQueryExecutionSettings.ts  |  6 ++-
 6 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx b/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx
index a34fe13a8..0deade6db 100644
--- a/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx
+++ b/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
+import {Dialog, Link as ExternalLink, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Controller, useForm} from 'react-hook-form';
 
@@ -11,8 +11,10 @@ import {
 } from '../../../../store/reducers/queryActions/queryActions';
 import type {QuerySettings} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
+import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {
     useQueryExecutionSettings,
+    useSetting,
     useTypedDispatch,
     useTypedSelector,
 } from '../../../../utils/hooks';
@@ -77,6 +79,7 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
         resolver: zodResolver(querySettingsValidationSchema),
     });
 
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
     const enableTracingLevel = useTracingLevelOptionAvailable();
 
     return (
@@ -178,22 +181,29 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                     <label htmlFor="statisticsMode" className={b('field-title')}>
                         {QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.title}
                     </label>
-                    <div className={b('control-wrapper', {statisticsMode: true})}>
-                        <Controller
-                            name="statisticsMode"
-                            control={control}
-                            render={({field}) => (
-                                <QuerySettingsSelect
-                                    id="statisticsMode"
-                                    setting={field.value}
-                                    onUpdateSetting={field.onChange}
-                                    settingOptions={
-                                        QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.options
-                                    }
-                                />
-                            )}
-                        />
-                    </div>
+                    <Tooltip
+                        disabled={!useShowPlanToSvg}
+                        openDelay={0}
+                        content={i18n('tooltip_plan-to-svg-statistics')}
+                    >
+                        <div className={b('control-wrapper', {statisticsMode: true})}>
+                            <Controller
+                                name="statisticsMode"
+                                control={control}
+                                render={({field}) => (
+                                    <QuerySettingsSelect
+                                        id="statisticsMode"
+                                        disabled={useShowPlanToSvg}
+                                        setting={field.value}
+                                        onUpdateSetting={field.onChange}
+                                        settingOptions={
+                                            QUERY_SETTINGS_FIELD_SETTINGS.statisticsMode.options
+                                        }
+                                    />
+                                )}
+                            />
+                        </div>
+                    </Tooltip>
                 </Flex>
                 <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
                     <label htmlFor="limitRows" className={b('field-title')}>
diff --git a/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.tsx b/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.tsx
index d0430b0d5..0fc4521ec 100644
--- a/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.tsx
+++ b/src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsSelect.tsx
@@ -26,6 +26,7 @@ interface QuerySettingsSelectProps<T extends SelectType> {
     id?: string;
     setting: T;
     settingOptions: QuerySettingSelectOption<T>[];
+    disabled?: boolean;
     onUpdateSetting: (mode: T) => void;
 }
 
@@ -34,6 +35,7 @@ export function QuerySettingsSelect<T extends SelectType>(props: QuerySettingsSe
         <div className={b('selector')}>
             <Select<T>
                 id={props.id}
+                disabled={props.disabled}
                 options={props.settingOptions}
                 value={[props.setting]}
                 onUpdate={(value) => {
diff --git a/src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json b/src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json
index 55b7c2398..ef1698ab4 100644
--- a/src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json
+++ b/src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json
@@ -7,6 +7,7 @@
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Limit rows",
   "button-done": "Save",
+  "tooltip_plan-to-svg-statistics": "Statistics option is set to \"Full\" due to the enabled \"Execution plan\" experiment.\n To disable it, go to the \"Experiments\" section in the user settings.",
   "button-cancel": "Cancel",
   "form.timeout.seconds": "sec",
   "form.validation.timeout": "Must be positive",
diff --git a/src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json b/src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json
index ca93e2d75..fb2b4e8a7 100644
--- a/src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json
+++ b/src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json
@@ -6,6 +6,7 @@
   "form.statistics-mode": "Режим сбора статистики",
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Лимит строк",
+  "tooltip_plan-to-svg-statistics": "Опция статистики установлена в значение \"Full\" из-за включенного эксперимента \"Execution plan\".\n Чтобы отключить его, перейдите в раздел \"Experiments\" в настройках пользователя.",
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",
diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json
index b7631d990..86f8e52dc 100644
--- a/src/containers/UserSettings/i18n/en.json
+++ b/src/containers/UserSettings/i18n/en.json
@@ -35,8 +35,8 @@
 
   "settings.enableNetworkTable.title": "Enable network table",
 
-  "settings.useShowPlanToSvg.title": "Plan to svg",
-  "settings.useShowPlanToSvg.description": " Show \"Plan to svg\" button in query result widow (if query was executed with full stats option).",
+  "settings.useShowPlanToSvg.title": "Execution plan",
+  "settings.useShowPlanToSvg.description": " Show \"Execution plan\" button in query result widow. Opens svg with execution plan in a new window.",
 
   "settings.showDomainDatabase.title": "Show domain database",
 
diff --git a/src/utils/hooks/useQueryExecutionSettings.ts b/src/utils/hooks/useQueryExecutionSettings.ts
index 4b4dce6c2..78080a3a6 100644
--- a/src/utils/hooks/useQueryExecutionSettings.ts
+++ b/src/utils/hooks/useQueryExecutionSettings.ts
@@ -1,7 +1,7 @@
 import {useTracingLevelOptionAvailable} from '../../store/reducers/capabilities/hooks';
 import type {QuerySettings} from '../../types/store/query';
-import {QUERY_EXECUTION_SETTINGS_KEY} from '../constants';
-import {DEFAULT_QUERY_SETTINGS, querySettingsRestoreSchema} from '../query';
+import {QUERY_EXECUTION_SETTINGS_KEY, USE_SHOW_PLAN_SVG_KEY} from '../constants';
+import {DEFAULT_QUERY_SETTINGS, STATISTICS_MODES, querySettingsRestoreSchema} from '../query';
 
 import {useSetting} from './useSetting';
 
@@ -10,9 +10,11 @@ export const useQueryExecutionSettings = () => {
     const [storageSettings, setSettings] = useSetting<QuerySettings>(QUERY_EXECUTION_SETTINGS_KEY);
 
     const validatedSettings = querySettingsRestoreSchema.parse(storageSettings);
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
     const settings: QuerySettings = {
         ...validatedSettings,
+        statisticsMode: useShowPlanToSvg ? STATISTICS_MODES.full : validatedSettings.statisticsMode,
         tracingLevel: enableTracingLevel
             ? validatedSettings.tracingLevel
             : DEFAULT_QUERY_SETTINGS.tracingLevel,

From 4088438c5c7de9beec0c1875d99ccf42af104004 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@Antons-MacBook-Air.local>
Date: Wed, 20 Nov 2024 13:31:25 +0300
Subject: [PATCH 2/2] fix: dont save full plan

---
 src/utils/hooks/useQueryExecutionSettings.ts    | 16 +++++++++++++++-
 .../suites/tenant/queryEditor/planToSvg.test.ts | 17 ++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/utils/hooks/useQueryExecutionSettings.ts b/src/utils/hooks/useQueryExecutionSettings.ts
index 78080a3a6..042293dbb 100644
--- a/src/utils/hooks/useQueryExecutionSettings.ts
+++ b/src/utils/hooks/useQueryExecutionSettings.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {useTracingLevelOptionAvailable} from '../../store/reducers/capabilities/hooks';
 import type {QuerySettings} from '../../types/store/query';
 import {QUERY_EXECUTION_SETTINGS_KEY, USE_SHOW_PLAN_SVG_KEY} from '../constants';
@@ -12,6 +14,18 @@ export const useQueryExecutionSettings = () => {
     const validatedSettings = querySettingsRestoreSchema.parse(storageSettings);
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
+    const setQueryExecutionSettings = React.useCallback(
+        (settings: QuerySettings) => {
+            setSettings({
+                ...settings,
+                statisticsMode: useShowPlanToSvg
+                    ? validatedSettings.statisticsMode
+                    : settings.statisticsMode,
+            });
+        },
+        [setSettings, useShowPlanToSvg, validatedSettings.statisticsMode],
+    );
+
     const settings: QuerySettings = {
         ...validatedSettings,
         statisticsMode: useShowPlanToSvg ? STATISTICS_MODES.full : validatedSettings.statisticsMode,
@@ -20,5 +34,5 @@ export const useQueryExecutionSettings = () => {
             : DEFAULT_QUERY_SETTINGS.tracingLevel,
     };
 
-    return [settings, setSettings] as const;
+    return [settings, setQueryExecutionSettings] as const;
 };
diff --git a/tests/suites/tenant/queryEditor/planToSvg.test.ts b/tests/suites/tenant/queryEditor/planToSvg.test.ts
index 32fa5b05e..94cba5b13 100644
--- a/tests/suites/tenant/queryEditor/planToSvg.test.ts
+++ b/tests/suites/tenant/queryEditor/planToSvg.test.ts
@@ -4,7 +4,7 @@ import {tenantName} from '../../../utils/constants';
 import {toggleExperiment} from '../../../utils/toggleExperiment';
 import {TenantPage} from '../TenantPage';
 
-import {ButtonNames, QueryEditor} from './models/QueryEditor';
+import {QueryEditor} from './models/QueryEditor';
 
 test.describe('Test Plan to SVG functionality', async () => {
     const testQuery = 'SELECT 1;'; // Simple query that will generate a plan
@@ -24,30 +24,25 @@ test.describe('Test Plan to SVG functionality', async () => {
         const queryEditor = new QueryEditor(page);
 
         // 1. Turn on Plan to SVG experiment
-        await toggleExperiment(page, 'on', 'Plan to SVG');
+        await toggleExperiment(page, 'on', 'Execution plan');
 
-        // 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
+        // 2. Set query and run it
         await queryEditor.setQuery(testQuery);
         await queryEditor.clickRunButton();
 
-        // 4. Wait for query execution to complete
+        // 3. 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
+        // 4. 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
+        // 5. Verify we're taken to a new tab with SVG content
         const svgElement = page.locator('svg').first();
         await expect(svgElement).toBeVisible();
     });