fix: move to experiments

Author: astandrik

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

@@ -18,8 +18,9 @@ import type {ValueOf} from '../../../../types/common';
 import type {ExecuteQueryResult} from '../../../../types/store/executeQuery';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
+import {USE_SHOW_PLAN_SVG_KEY} from '../../../../utils/constants';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
-import {useQueryExecutionSettings, useTypedDispatch} from '../../../../utils/hooks';
+import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
@@ -68,7 +69,7 @@ export function ExecuteResult({
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState<SectionID>(resultOptionsIds.result);
     const dispatch = useTypedDispatch();
-    const [{showPlanToSvg}] = useQueryExecutionSettings();
+    const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
     const {error, isLoading, queryId, data} = result;
 
@@ -275,7 +276,7 @@ export function ExecuteResult({
                     {data?.traceId ? (
                         <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
                     ) : null}
-                    {data?.plan && showPlanToSvg ? (
+                    {data?.plan && useShowPlanToSvg ? (
                         <PlanToSvgButton plan={data?.plan} database={tenantName} />
                     ) : null}
                 </div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Checkbox, Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
+import {Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Controller, useForm} from 'react-hook-form';
 
@@ -219,25 +219,6 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
                         />
                     </div>
                 </Flex>
-                <Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
-                    <label htmlFor="showPlanToSvg" className={b('field-title')}>
-                        {QUERY_SETTINGS_FIELD_SETTINGS.showPlanToSvg.title}
-                    </label>
-                    <div className={b('control-wrapper')}>
-                        <Controller
-                            name="showPlanToSvg"
-                            control={control}
-                            render={({field: {value, onChange, ...field}}) => (
-                                <Checkbox
-                                    id="showPlanToSvg"
-                                    checked={Boolean(value)}
-                                    onUpdate={onChange}
-                                    {...field}
-                                />
-                            )}
-                        />
-                    </div>
-                </Flex>
             </Dialog.Body>
             <Dialog.Footer
                 textButtonApply={i18n('button-done')}

src/containers/Tenant/Query/QuerySettingsDialog/QuerySettingsDialog.tsx

@@ -151,7 +151,4 @@ export const QUERY_SETTINGS_FIELD_SETTINGS = {
     limitRows: {
         title: formI18n('form.limit-rows'),
     },
-    showPlanToSvg: {
-        title: formI18n('form.show-plan-to-svg'),
-    },
 } as const;

src/containers/Tenant/Query/QuerySettingsDialog/constants.ts

@@ -6,7 +6,6 @@
   "form.statistics-mode": "Statistics collection mode",
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Limit rows",
-  "form.show-plan-to-svg": "Plan to svg",
   "button-done": "Save",
   "button-cancel": "Cancel",
   "form.timeout.seconds": "sec",

src/containers/Tenant/Query/QuerySettingsDialog/i18n/en.json

@@ -6,7 +6,6 @@
   "form.statistics-mode": "Режим сбора статистики",
   "form.tracing-level": "Tracing level",
   "form.limit-rows": "Лимит строк",
-  "form.show-plan-to-svg": "План в svg",
   "button-done": "Готово",
   "button-cancel": "Отменить",
   "form.timeout.seconds": "сек",

src/containers/Tenant/Query/QuerySettingsDialog/i18n/ru.json

@@ -33,6 +33,9 @@
   "settings.usePaginatedTables.title": "Use paginated tables",
   "settings.usePaginatedTables.description": " Use table with data load on scroll for Nodes and Storage tabs. It will increase performance, but could work unstable",
 
+  "settings.useShowPlanToSvg.title": "Use show plan to svg",
+  "settings.useShowPlanToSvg.description": " Show \"Plan to svg\" button in query result widow (if query was executed with full stats option).",
+
   "settings.showDomainDatabase.title": "Show domain database",
 
   "settings.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",

src/containers/UserSettings/i18n/en.json

@@ -12,6 +12,7 @@ import {
     THEME_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_PAGINATED_TABLES_KEY,
+    USE_SHOW_PLAN_SVG_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -96,6 +97,12 @@ export const usePaginatedTables: SettingProps = {
     description: i18n('settings.usePaginatedTables.description'),
 };
 
+export const useShowPlanToSvgTables: SettingProps = {
+    settingKey: USE_SHOW_PLAN_SVG_KEY,
+    title: i18n('settings.useShowPlanToSvg.title'),
+    description: i18n('settings.useShowPlanToSvg.description'),
+};
+
 export const showDomainDatabase: SettingProps = {
     settingKey: SHOW_DOMAIN_DATABASE_KEY,
     title: i18n('settings.showDomainDatabase.title'),
@@ -138,7 +145,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [usePaginatedTables],
+    settings: [usePaginatedTables, useShowPlanToSvgTables],
 };
 export const devSettingsSection: SettingsSection = {
     id: 'devSettingsSection',

src/containers/UserSettings/settings.tsx

@@ -19,6 +19,7 @@ import {
     THEME_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_PAGINATED_TABLES_KEY,
+    USE_SHOW_PLAN_SVG_KEY,
 } from '../utils/constants';
 import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../utils/query';
 import {parseJson} from '../utils/utils';
@@ -37,6 +38,7 @@ export const DEFAULT_USER_SETTINGS = {
     [ASIDE_HEADER_COMPACT_KEY]: true,
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [USE_PAGINATED_TABLES_KEY]: true,
+    [USE_SHOW_PLAN_SVG_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: true,
     [AUTOCOMPLETE_ON_ENTER]: true,

src/services/settings.ts

@@ -134,6 +134,8 @@ export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';
 // Old key value for backward compatibility
 export const USE_PAGINATED_TABLES_KEY = 'useBackendParamsForTables';
 
+export const USE_SHOW_PLAN_SVG_KEY = 'useShowPlanToSvg';
+
 // Setting to hide domain in database list
 export const SHOW_DOMAIN_DATABASE_KEY = 'showDomainDatabase';