fix: review fixes

Author: astandrik

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

@@ -3,9 +3,9 @@ import React from 'react';
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import {Button, Tooltip} from '@gravity-ui/uikit';
 
+import {planToSvgApi} from '../../../../store/reducers/planToSvg';
 import type {QueryPlan, ScriptPlan} from '../../../../types/api/query';
 
-import {usePlanToSvg} from './hooks';
 import i18n from './i18n';
 
 function getButtonView(error: string | null, isLoading: boolean) {
@@ -21,17 +21,36 @@ interface PlanToSvgButtonProps {
 }
 
 export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
-    const {error, blobUrl, isLoading, isUninitialized} = usePlanToSvg(database, plan);
+    const [error, setError] = React.useState<string | null>(null);
+    const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
+    const [getPlanToSvg, {isLoading}] = planToSvgApi.usePlanToSvgQueryMutation();
 
     const handleClick = React.useCallback(() => {
-        if (blobUrl) {
-            window.open(blobUrl, '_blank');
-        }
-    }, [blobUrl]);
+        getPlanToSvg({plan, database})
+            .unwrap()
+            .then((result) => {
+                if (blobUrl) {
+                    URL.revokeObjectURL(blobUrl);
+                }
 
-    if (isUninitialized) {
-        return null;
-    }
+                const blob = new Blob([result], {type: 'image/svg+xml'});
+                const url = URL.createObjectURL(blob);
+                setBlobUrl(url);
+                setError(null);
+                window.open(url, '_blank');
+            })
+            .catch((err) => {
+                setError(JSON.stringify(err));
+            });
+    }, [blobUrl, database, getPlanToSvg, plan]);
+
+    React.useEffect(() => {
+        return () => {
+            if (blobUrl) {
+                URL.revokeObjectURL(blobUrl);
+            }
+        };
+    }, [blobUrl]);
 
     return (
         <Tooltip
@@ -41,7 +60,7 @@ export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
                 view={getButtonView(error, isLoading)}
                 loading={isLoading}
                 onClick={handleClick}
-                disabled={isLoading || !blobUrl}
+                disabled={isLoading}
             >
                 {i18n('text_plan-svg')}
                 <Button.Icon>

src/containers/Tenant/Query/ExecuteResult/hooks.ts

@@ -8,7 +8,7 @@
   "trace": "Trace",
   "title.truncated": "Truncated",
   "title.result": "Result",
-  "text_plan-svg": "Plan SVG",
+  "text_plan-svg": "Execution plan",
   "text_open-plan-svg": "Open execution plan in new window",
   "text_error-plan-svg": "Error: {{error}}"
 }

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

@@ -33,7 +33,7 @@
   "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.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.showDomainDatabase.title": "Show domain database",

src/containers/UserSettings/i18n/en.json

@@ -4,7 +4,7 @@ import type {AxiosRequestConfig} from 'axios';
 import axiosRetry from 'axios-retry';
 
 import {backend as BACKEND, metaBackend as META_BACKEND} from '../store';
-import type {PlanToSvgQueryParams} from '../store/reducers/planToSvgQuery';
+import type {PlanToSvgQueryParams} from '../store/reducers/planToSvg';
 import type {TMetaInfo} from '../types/api/acl';
 import type {TQueryAutocomplete} from '../types/api/autocomplete';
 import type {CapabilitiesResponse} from '../types/api/capabilities';

src/services/api.ts

@@ -7,7 +7,7 @@ export interface PlanToSvgQueryParams {
     database: string;
 }
 
-export const planToSvgQueryApi = api.injectEndpoints({
+export const planToSvgApi = api.injectEndpoints({
     endpoints: (build) => ({
         planToSvgQuery: build.mutation<string, PlanToSvgQueryParams>({
             queryFn: async ({plan, database}, {signal}) => {