From 522d42fe30e04c9c26d3bfa470a78e2304380641 Mon Sep 17 00:00:00 2001 From: Bishal Date: Thu, 17 Oct 2024 09:49:00 +0000 Subject: [PATCH] cover the case when the asyncapi is invalid --- src/Visualizer.ts | 76 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 63 insertions(+), 13 deletions(-) diff --git a/src/Visualizer.ts b/src/Visualizer.ts index 04a0acd..099c06d 100644 --- a/src/Visualizer.ts +++ b/src/Visualizer.ts @@ -3,6 +3,7 @@ import * as path from 'path'; import { Parser, fromFile } from '@asyncapi/parser'; import { promptForAsyncapiFile } from './PreviewWebPanel'; export const openVisualizerFiles: { [id: string]: vscode.WebviewPanel } = {}; + export function visualizeAsyncApi(context: vscode.ExtensionContext) { return async (uri: vscode.Uri) => { uri = uri || (await promptForAsyncapiFile()) as vscode.Uri; @@ -50,7 +51,19 @@ async function openVisualizer(context: vscode.ExtensionContext, uri: vscode.Uri) async function visualize(filePath: string): Promise { const parser = new Parser(); try { - const { document } = await fromFile(parser, filePath).parse(); + const { document, diagnostics } = await fromFile(parser, filePath).parse(); + const errors = diagnostics.filter(d => d.severity === 0); + console.log("errors", errors); + console.log("diagnostics", diagnostics); + if (errors.length > 0) { + return { + errors: errors.map(error => ({ + message: error.message, + path: error.path.join('.'), + range: error.range + })) + }; + } if (document) { const props = { application: { @@ -95,7 +108,7 @@ async function visualize(filePath: string): Promise { return props; } } catch (error:any) { - return `console.error("Error parsing AsyncAPI document:", ${error.message});`; + return { errors: [{ message: `Error parsing AsyncAPI document: ${error.message}` }] }; } } async function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Webview, asyncapiFile: vscode.Uri): Promise { @@ -105,7 +118,34 @@ async function getWebviewContent(context: vscode.ExtensionContext, webview: vsco const edavisualiserCss = webview.asWebviewUri( vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/@asyncapi/edavisualiser/styles/default.min.css') ); - const props = await visualize(asyncapiFile.fsPath); + const result = await visualize(asyncapiFile.fsPath); + let content; + if ('errors' in result) { + content = ` +
+
+

Validation Errors:

+
    + ${result.errors.map((error: any) => ` +
  • + ${error.path || 'Document'}: ${error.message} + ${error.range ? `
    Line: ${error.range.start.line}, Column: ${error.range.start.character}` : ''} +
    • + `).join('')} +
+
+
+ `; + } else { + content = ` +
+ + `; + } const html = ` @@ -123,11 +163,26 @@ async function getWebviewContent(context: vscode.ExtensionContext, webview: vsco width: 100%; height: 100%; } - .react-flow__renderer { - background-color: #f0f0f0; + #error-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; } - .react-flow__node { - background-color: #ffffff; + #error-card { + background-color: #FFD2D2; + color: #D8000C; + padding: 20px; + border-radius: 5px; + max-width: 80%; + max-height: 80%; + overflow-y: auto; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } @@ -135,12 +190,7 @@ async function getWebviewContent(context: vscode.ExtensionContext, webview: vsco
- + ${content} `;