fix: some fixes

Author: Anton Standrik

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

@@ -1,45 +1,72 @@
 import React from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
-import {Button} from '@gravity-ui/uikit';
+import {Button, Tooltip} from '@gravity-ui/uikit';
 
 import {planToSvgQueryApi} from '../../../../store/reducers/planToSvgQuery';
 import type {QueryPlan, ScriptPlan} from '../../../../types/api/query';
 
 import i18n from './i18n';
 
+function getButtonView(error: string | null, isLoading: boolean) {
+    if (error) {
+        return 'flat-danger';
+    }
+    return isLoading ? 'flat-secondary' : 'flat-info';
+}
+
 interface PlanToSvgButtonProps {
     plan?: QueryPlan | ScriptPlan;
     database: string;
 }
 
 export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
+    const [svgData, setSvgData] = React.useState<string | null>(null);
+    const [error, setError] = React.useState<string | null>(null);
     const [checkPlanToSvg, {isLoading, isUninitialized}] =
         planToSvgQueryApi.usePlanToSvgQueryMutation();
 
     React.useEffect(() => {
-        let checkPlanToSvgMutation: {abort: () => void} | null;
-        if (plan) {
-            checkPlanToSvgMutation = checkPlanToSvg({plan, database});
+        if (!plan) {
+            return;
         }
 
-        return () => checkPlanToSvgMutation?.abort();
+        checkPlanToSvg({plan, database})
+            .unwrap()
+            .then((result) => {
+                setSvgData(result);
+                setError(null);
+            })
+            .catch((err) => {
+                setError(JSON.stringify(err));
+            });
     }, [checkPlanToSvg, database, plan]);
 
+    const handleClick = React.useCallback(() => {
+        if (svgData) {
+            const blob = new Blob([svgData], {type: 'image/svg+xml'});
+            const url = URL.createObjectURL(blob);
+            window.open(url, '_blank');
+        }
+    }, [svgData]);
+
     if (isUninitialized) {
         return null;
     }
 
     return (
-        <Button
-            view={isLoading ? 'flat-secondary' : 'flat-info'}
-            loading={isLoading}
-            target="_blank"
-        >
-            {i18n('text_plan-svg')}
-            <Button.Icon>
-                <ArrowUpRightFromSquare />
-            </Button.Icon>
-        </Button>
+        <Tooltip content={i18n('text_error-plan-svg', {error}) || i18n('text_plan-svg')}>
+            <Button
+                view={getButtonView(error, isLoading)}
+                loading={isLoading}
+                onClick={handleClick}
+                disabled={isLoading || !svgData}
+            >
+                {i18n('text_plan-svg')}
+                <Button.Icon>
+                    <ArrowUpRightFromSquare />
+                </Button.Icon>
+            </Button>
+        </Tooltip>
     );
 }

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

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

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

@@ -580,12 +580,18 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     planToSvg({database, plan}: PlanToSvgQueryParams, {signal}: {signal?: AbortSignal} = {}) {
-        return this.post<{test: string}>(
+        return this.post<string>(
             this.getPath('/viewer/plan2svg'),
             plan,
             {database},
             {
-                requestConfig: {signal},
+                requestConfig: {
+                    signal,
+                    responseType: 'text',
+                    headers: {
+                        Accept: 'image/svg+xml',
+                    },
+                },
             },
         );
     }

src/services/api.ts

@@ -1,5 +1,4 @@
 import type {QueryPlan, ScriptPlan} from '../../types/api/query';
-import type {IQueryResult} from '../../types/store/query';
 
 import {api} from './api';
 
@@ -10,7 +9,8 @@ export interface PlanToSvgQueryParams {
 
 export const planToSvgQueryApi = api.injectEndpoints({
     endpoints: (build) => ({
-        planToSvgQuery: build.mutation<IQueryResult, PlanToSvgQueryParams>({
+        planToSvgQuery: build.mutation<string, PlanToSvgQueryParams>({
+            // Changed return type to string
             queryFn: async ({plan, database}, {signal}) => {
                 try {
                     const response = await window.api.planToSvg(
@@ -21,8 +21,6 @@ export const planToSvgQueryApi = api.injectEndpoints({
                         {signal},
                     );
 
-                    console.log(response);
-
                     return {data: response};
                 } catch (error) {
                     return {error};