fix: add setting

Author: Anton Standrik

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

@@ -19,7 +19,7 @@ import type {ExecuteQueryResult} from '../../../../types/store/executeQuery';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
-import {useTypedDispatch} from '../../../../utils/hooks';
+import {useQueryExecutionSettings, useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
@@ -68,6 +68,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 {error, isLoading, queryId, data} = result;
 
@@ -274,7 +275,7 @@ export function ExecuteResult({
                     {data?.traceId ? (
                         <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
                     ) : null}
-                    {data?.plan ? (
+                    {data?.plan && showPlanToSvg ? (
                         <PlanToSvgButton plan={data?.plan} database={tenantName} />
                     ) : null}
                 </div>

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 {Checkbox, Dialog, Link as ExternalLink, Flex, TextInput} from '@gravity-ui/uikit';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Controller, useForm} from 'react-hook-form';
 
@@ -219,6 +219,25 @@ 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/constants.ts

@@ -151,4 +151,7 @@ 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/i18n/en.json

@@ -6,6 +6,7 @@
   "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/ru.json

@@ -6,6 +6,7 @@
   "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/utils/query.ts

@@ -318,6 +318,7 @@ export const DEFAULT_QUERY_SETTINGS = {
     limitRows: 10000,
     statisticsMode: STATISTICS_MODES.none,
     tracingLevel: TRACING_LEVELS.off,
+    showPlanToSvg: false,
 };
 
 export const queryModeSchema = z.nativeEnum(QUERY_MODES);
@@ -337,6 +338,7 @@ export const querySettingsValidationSchema = z.object({
     transactionMode: transactionModeSchema,
     statisticsMode: statisticsModeSchema,
     tracingLevel: tracingLevelSchema,
+    showPlanToSvg: z.boolean().optional(),
 });
 
 export const querySettingsRestoreSchema = z
@@ -353,5 +355,6 @@ export const querySettingsRestoreSchema = z
         transactionMode: transactionModeSchema.catch(DEFAULT_QUERY_SETTINGS.transactionMode),
         statisticsMode: statisticsModeSchema.catch(DEFAULT_QUERY_SETTINGS.statisticsMode),
         tracingLevel: tracingLevelSchema.catch(DEFAULT_QUERY_SETTINGS.tracingLevel),
+        showPlanToSvg: z.boolean().optional().catch(false),
     })
     .catch(DEFAULT_QUERY_SETTINGS);