fix: proper error handling

Author: astandrik

src/containers/Tenant/Query/QueryResult/components/PlanToSvgButton/PlanToSvgButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ArrowDownToLine, ArrowUpRightFromSquare, ChevronDown} from '@gravity-ui/icons';
 import type {ButtonProps} from '@gravity-ui/uikit';
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import {Button, DropdownMenu, Tooltip} from '@gravity-ui/uikit';
 
 import {planToSvgApi} from '../../../../../../store/reducers/planToSvg';
 import type {QueryPlan, ScriptPlan} from '../../../../../../types/api/query';
@@ -40,26 +40,33 @@ export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
                 return url;
             })
             .catch((err) => {
-                setError(JSON.stringify(err));
-                throw err;
+                const errorMessage = err.data?.message || err.message || JSON.stringify(err);
+                setError(errorMessage);
+                return null;
             });
     }, [database, getPlanToSvg, plan, blobUrl]);
 
     const handleOpenInNewTab = React.useCallback(() => {
         handleGetSvg().then((url) => {
-            window.open(url, '_blank');
+            if (url) {
+                window.open(url, '_blank');
+            }
         });
+        return;
     }, [handleGetSvg]);
 
     const handleDownload = React.useCallback(() => {
         handleGetSvg().then((url) => {
             const link = document.createElement('a');
-            link.href = url;
-            link.download = 'query-plan.svg';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+            if (url) {
+                link.href = url;
+                link.download = 'query-plan.svg';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
         });
+        return;
     }, [handleGetSvg]);
 
     React.useEffect(() => {
@@ -85,19 +92,21 @@ export function PlanToSvgButton({plan, database}: PlanToSvgButtonProps) {
 
     const renderSwitcher = (props: ButtonProps) => {
         return (
-            <Button
-                view={getButtonView(error, isLoading)}
-                loading={isLoading}
-                disabled={isLoading}
-                {...props}
-            >
-                {i18n('text_plan-svg')}
-                <Button.Icon>
-                    <ChevronDown />
-                </Button.Icon>
-            </Button>
+            <Tooltip content={error ? i18n('text_error-plan-svg', {error}) : i18n('text_plan-svg')}>
+                <Button
+                    view={getButtonView(error, isLoading)}
+                    loading={isLoading}
+                    disabled={isLoading}
+                    {...props}
+                >
+                    {i18n('text_plan-svg')}
+                    <Button.Icon>
+                        <ChevronDown />
+                    </Button.Icon>
+                </Button>
+            </Tooltip>
         );
     };
 
-    return <DropdownMenu renderSwitcher={renderSwitcher} items={items} />;
+    return <DropdownMenu renderSwitcher={renderSwitcher} items={items} disabled={Boolean(error)} />;
 }

tests/suites/tenant/queryEditor/planToSvg.test.ts

@@ -89,6 +89,59 @@ test.describe('Test Plan to SVG functionality', async () => {
         expect(download.suggestedFilename()).toBe('query-plan.svg');
     });
 
+    test('Plan to SVG handles API errors correctly', async ({page}) => {
+        const queryEditor = new QueryEditor(page);
+
+        // 1. Turn on Plan to SVG experiment
+        await toggleExperiment(page, 'on', 'Execution plan');
+
+        // 2. Set query and run it
+        await queryEditor.setQuery(testQuery);
+        await queryEditor.clickRunButton();
+
+        // 3. Wait for query execution to complete
+        await expect(async () => {
+            const status = await queryEditor.getExecutionStatus();
+            expect(status).toBe('Completed');
+        }).toPass();
+
+        // 4. Mock the plan2svg API to return an error
+        await page.route('**/plan2svg**', (route) => {
+            route.fulfill({
+                status: 500,
+                contentType: 'application/json',
+                body: JSON.stringify({message: 'Failed to generate SVG'}),
+            });
+        });
+
+        // 5. Click execution plan button to open dropdown
+        const executionPlanButton = page.locator('button:has-text("Execution plan")');
+        await executionPlanButton.click();
+
+        // 6. Click "Open in new tab" option and wait for error state
+        const openInNewTabOption = page.locator('text="Open in new tab"');
+        await openInNewTabOption.click();
+        await page.waitForTimeout(1000); // Wait for error to be processed
+
+        // 7. Close the dropdown
+        await page.keyboard.press('Escape');
+
+        // 8. Verify error state
+        await expect(executionPlanButton).toHaveClass(/flat-danger/);
+
+        // 9. Verify error tooltip
+        await executionPlanButton.hover();
+        await page.waitForTimeout(500); // Wait for tooltip animation
+        const tooltipText = await page.textContent('.g-tooltip');
+        expect(tooltipText).toContain('Error');
+        expect(tooltipText).toContain('Failed to generate SVG');
+
+        // 10. Verify dropdown is disabled after error
+        await executionPlanButton.click();
+        await expect(openInNewTabOption).not.toBeVisible();
+        await expect(page.locator('text="Download"')).not.toBeVisible();
+    });
+
     test('Statistics setting becomes disabled when execution plan experiment is enabled', async ({
         page,
     }) => {