rpcn: pretty print linter errors

redpanda-data · Oct 30, 2024 · 42e262d · 42e262d
1 parent 20bf2ec
commit 42e262d
Showing 1 changed file with 30 additions and 2 deletions.
diff --git a/frontend/src/components/pages/rp-connect/Pipelines.Create.tsx b/frontend/src/components/pages/rp-connect/Pipelines.Create.tsx
@@ -15,14 +15,16 @@ import { observer } from 'mobx-react';
 import { appGlobal } from '../../../state/appGlobal';
 import PageContent from '../../misc/PageContent';
 import { PageComponent, PageInitHelper } from '../Page';
-import { Box, Button, createStandaloneToast, Flex, FormField, Input } from '@redpanda-data/ui';
+import { Box, Button, createStandaloneToast, Flex, FormField, Input, Text } from '@redpanda-data/ui';
 import PipelinesYamlEditor from '../../misc/PipelinesYamlEditor';
 import { pipelinesApi } from '../../../state/backendApi';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
 import { Link } from 'react-router-dom';
 import { Link as ChLink } from '@redpanda-data/ui';
 import Tabs from '../../misc/tabs/Tabs';
 import { PipelineCreate } from '../../../protogen/redpanda/api/dataplane/v1alpha2/pipeline_pb';
+import { ConnectError } from '@connectrpc/connect';
+import { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
 const { ToastContainer, toast } = createStandaloneToast();
 
 const exampleContent = `
@@ -137,10 +139,32 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
                 appGlobal.history.push('/connect-clusters');
             })
             .catch(err => {
+                const details = [];
+                let genDesc = String(err);
+                if (err instanceof ConnectError) {
+                    genDesc = err.message;
+                    for (const detail of err.details) {
+                        if (isLintHint(detail)) {
+                            const hint = LintHint.fromJsonString(JSON.stringify(detail.debug));
+                            details.push(`Line ${hint.line}, Col ${hint.column}: ${hint.hint}`)
+                        }
+                    }
+                }
+                let desc = <Text as="span">{genDesc}</Text>
+                if (details.length > 0) {
+                    desc = <>
+                        <Text as="span">{genDesc}</Text>
+                        <ul>
+                            {details.map((d, idx) => (
+                                <li style={{ listStylePosition: 'inside' }} key={idx}>{d}</li>
+                            ))}
+                        </ul>
+                    </>
+                }
                 toast({
                     status: 'error', duration: null, isClosable: true,
                     title: 'Failed to create pipeline',
-                    description: String(err),
+                    description: desc,
                 })
             })
             .finally(() => {
@@ -183,3 +207,7 @@ export const PipelineEditor = observer((p: {
         },
     ]} />
 });
+
+function isLintHint(obj: any): obj is { type: string, debug: any } {
+    return obj && obj.type === LintHint.typeName;
+}