feat: show the error in the right box (casbin#150)

* feat: add casbin linter to editor component

* feat: add missing sections check in casbinLinter

* feat: add model-specific linter for RBAC and priority models

* fix: handle and display errors in useRunTest hook and casbinLinter

* fix: improve error handling in casbinLinter

app/components/editor/hooks/useRunTest.tsx

@@ -15,6 +15,7 @@
 import React from 'react';
 import { DefaultRoleManager, newEnforcer, newModel, StringAdapter, Util } from 'casbin';
 import { newEnforceContext } from '@/app/components/editor/hooks/useSetupEnforceContext';
+import { setError } from '@/app/utils/errorManager';
 
 interface RunTestProps {
   model: string;
@@ -178,11 +179,15 @@ async function enforcer(props: RunTestProps) {
 
     const stopTime = performance.now();
 
+    setError(null);
+
     props.onResponse(<div>{'Done in ' + (stopTime - startTime).toFixed(2) + 'ms'}</div>);
     props.onResponse(result);
   } catch (e) {
-    props.onResponse(<div>{(e as any).message}</div>);
+    const errorMessage = (e as any).message;
+    props.onResponse(<div>{errorMessage}</div>);
     props.onResponse([]);
+    setError(errorMessage);
   }
 }
 

app/components/editor/index.tsx

@@ -23,6 +23,8 @@ import { extractPageContent } from '../../utils/contentExtractor';
 import { buttonPlugin } from './ButtonPlugin';
 import { useLang } from '@/app/context/LangContext';
 import LanguageMenu from '@/app/components/LanguageMenu';
+import { linter } from '@codemirror/lint';
+import { casbinLinter } from '@/app/utils/casbinLinter';
 
 export const EditorScreen = () => {
   const {
@@ -238,6 +240,7 @@ export const EditorScreen = () => {
                     indentUnit.of('    '),
                     EditorView.lineWrapping,
                     buttonPlugin(openDrawerWithMessage, extractContent, 'model'),
+                    linter(casbinLinter),
                   ]}
                   className={'function flex-grow h-[300px]'}
                   value={modelText}

app/utils/casbinLinter.ts

@@ -0,0 +1,31 @@
+import { Diagnostic } from '@codemirror/lint';
+import { EditorView } from '@codemirror/view';
+import { getError } from './errorManager';
+
+export const casbinLinter = (view: EditorView): Diagnostic[] => {
+  const diagnostics: Diagnostic[] = [];
+
+  const runTestError = getError();
+  if (runTestError) {
+    const lineMatch = runTestError.match(/line (\d+)/);
+    if (lineMatch) {
+      const errorLine = parseInt(lineMatch[1], 10);
+      const line = view.state.doc.line(errorLine);
+      diagnostics.push({
+        from: line.from,
+        to: line.to,
+        severity: 'error',
+        message: runTestError,
+      });
+    } else {
+      diagnostics.push({
+        from: 0,
+        to: view.state.doc.length,
+        severity: 'error',
+        message: runTestError,
+      });
+    }
+  }
+
+  return diagnostics;
+};

app/utils/errorManager.ts

@@ -0,0 +1,7 @@
+let currentError: string | null = null;
+
+export const setError = (error: string | null) => {
+  currentError = error;
+};
+
+export const getError = () => {return currentError};

package.json

@@ -79,6 +79,7 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/language": "^6.10.1",
     "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/lint": "^6.8.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.24.1",
     "@lezer/highlight": "^1.2.0",

yarn.lock

@@ -80,6 +80,15 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
+"@codemirror/lint@^6.8.1":
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.1.tgz#6427848815baaf68c08e98c7673b804d3d8c0e7f"
+  integrity sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
 "@codemirror/search@^6.0.0":
   version "6.5.6"
   resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.6.tgz#8f858b9e678d675869112e475f082d1e8488db93"