feat: add custom validation to monaco (#1259)

* feat: add custom validation to monaco

* fix: improve regex and minor changes

* fix: tests

* fix: lint

---------

Co-authored-by: Virginia Cepeda <[email protected]>

Author: ckbedwell

src/components/CodeEditor/CodeEditor.tsx

@@ -9,6 +9,7 @@ import { CodeEditorProps, ConstrainedEditorProps } from './CodeEditor.types';
 import k6Types from './k6.types';
 
 import { initializeConstrainedInstance, updateConstrainedEditorRanges } from './CodeEditor.utils';
+import { wireCustomValidation } from './monacoValidation';
 
 const addK6Types = (monaco: typeof monacoType) => {
   Object.entries(k6Types).map(([name, type]) => {
@@ -116,6 +117,9 @@ export const CodeEditor = forwardRef(function CodeEditor(
       handleValidation(monaco, editor);
     });
 
+    // Wire custom red-squiggle markers for forbidden syntax
+    const disposeCustomValidation = wireCustomValidation(monaco, editor);
+
     if (constrainedRanges) {
       const instance = initializeConstrainedInstance(monaco, editor);
       const model = editor.getModel();
@@ -126,6 +130,13 @@ export const CodeEditor = forwardRef(function CodeEditor(
       updateConstrainedEditorRanges(instance, model, value, constrainedRanges, onDidChangeContentInEditableRange);
       setConstrainedInstance(instance);
     }
+
+    // Cleanup subscriptions on dispose
+    editor.onDidDispose(() => {
+      if (typeof disposeCustomValidation === 'function') {
+        disposeCustomValidation();
+      }
+    });
   };
 
   useEffect(() => {

src/components/CodeEditor/monacoValidation.ts

@@ -0,0 +1,56 @@
+import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
+import { findRuleViolations } from 'schemas/forms/script/rules';
+
+const OWNER = 'sm-custom-validation';
+
+export function applyCustomScriptMarkers(monaco: typeof monacoType, model: monacoType.editor.ITextModel) {
+  const script = model.getValue();
+  const violations = findRuleViolations(script);
+
+  const markers: monacoType.editor.IMarkerData[] = violations.map(({ startIndex, endIndex, message }) => {
+    const start = model.getPositionAt(startIndex);
+    const end = model.getPositionAt(endIndex);
+    return {
+      severity: monaco.MarkerSeverity.Error,
+      message,
+      startLineNumber: start.lineNumber,
+      startColumn: start.column,
+      endLineNumber: end.lineNumber,
+      endColumn: end.column,
+      source: 'Synthetic Monitoring',
+    };
+  });
+
+  monaco.editor.setModelMarkers(model, OWNER, markers);
+}
+
+export function wireCustomValidation(monaco: typeof monacoType, editor: monacoType.editor.IStandaloneCodeEditor) {
+  const model = editor.getModel();
+  if (!model) {
+    return;
+  }
+
+  // Initial run
+  applyCustomScriptMarkers(monaco, model);
+
+  // Update on content changes
+  const disposeOnChangeModelContent = editor.onDidChangeModelContent(() => {
+    const currentModel = editor.getModel();
+    if (currentModel) {
+      applyCustomScriptMarkers(monaco, currentModel);
+    }
+  });
+
+  // Update when model changes
+  const disposeOnChangeModel = editor.onDidChangeModel(() => {
+    const currentModel = editor.getModel();
+    if (currentModel) {
+      applyCustomScriptMarkers(monaco, currentModel);
+    }
+  });
+
+  return () => {
+    disposeOnChangeModelContent.dispose();
+    disposeOnChangeModel.dispose();
+  };
+}

src/page/NewCheck/__tests__/BrowserChecks/Scripted/1-script.ui.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+import { K6_PRAGMA_MESSAGE } from 'schemas/forms/script/rules';
 
 import { CheckType } from 'types';
 import { renderNewForm, submitForm } from 'page/__testHelpers__/checkForm';
@@ -147,7 +148,7 @@ ${exportCorrectOptions}`;
       await user.type(scriptTextAreaPreSubmit, scriptWithPragma);
 
       await submitForm(user);
-      const err = await screen.findByText('Script contains a k6 version pragma which is not allowed. Please remove the "use k6" directive.');
+      const err = await screen.findByText(K6_PRAGMA_MESSAGE);
       expect(err).toBeInTheDocument();
     });
 

src/page/NewCheck/__tests__/ScriptedChecks/Scripted/1-script.ui.test.tsx

@@ -1,4 +1,5 @@
 import { screen, waitFor } from '@testing-library/react';
+import { K6_PRAGMA_MESSAGE } from 'schemas/forms/script/rules';
 
 import { CheckType } from 'types';
 import { renderNewForm, submitForm } from 'page/__testHelpers__/checkForm';
@@ -51,7 +52,7 @@ export default function() {
     await fillMandatoryFields({ user, fieldsToOmit: [`probes`], checkType });
 
     await submitForm(user);
-    const err = await screen.findByText('Script contains a k6 version pragma which is not allowed. Please remove the "use k6" directive.');
+    const err = await screen.findByText(K6_PRAGMA_MESSAGE);
     expect(err).toBeInTheDocument();
   });
 

src/schemas/forms/script/rules.ts

@@ -0,0 +1,50 @@
+// Shared script validation rules for both Zod validation and Monaco markers
+
+export const K6_PRAGMA_MESSAGE =
+  'Version directives cannot be used within scripts. Please remove any "use k6" statements.';
+
+export const K6_EXTENSION_MESSAGE =
+  'Script imports k6 extensions which are not allowed. Please remove imports from k6/x/ paths.';
+
+// Match patterns like: "use k6 >= v1.0.0", "use k6 > 0.52", `use k6 >= v1.0.0`, etc.
+export const K6_PRAGMA_REGEX = /["'`]use\s+k6\s*[><=!]+\s*v?\d+/gi;
+
+// Match import statements that include k6/x/ paths
+export const K6_EXTENSION_IMPORT_REGEX = /import\s+.*from\s*[\'"`][^'"`]*k6\/x\/[^'"`]*[\'"`]/gi;
+
+export function hasK6Pragma(script: string): boolean {
+  K6_PRAGMA_REGEX.lastIndex = 0;
+  return K6_PRAGMA_REGEX.test(script);
+}
+
+export function hasK6ExtensionImports(script: string): boolean {
+  K6_EXTENSION_IMPORT_REGEX.lastIndex = 0;
+  return K6_EXTENSION_IMPORT_REGEX.test(script);
+}
+
+export type ScriptRuleMatch = {
+  startIndex: number;
+  endIndex: number;
+  message: string;
+};
+
+export function findRuleViolations(script: string): ScriptRuleMatch[] {
+  const matches: ScriptRuleMatch[] = [];
+
+  const checkRegex = (pattern: RegExp, message: string) => {
+    pattern.lastIndex = 0;
+    let m: RegExpExecArray | null;
+    while ((m = pattern.exec(script))) {
+      matches.push({ startIndex: m.index, endIndex: m.index + m[0].length, message });
+      // Prevent infinite loops on zero-length matches
+      if (pattern.lastIndex === m.index) {
+        pattern.lastIndex++;
+      }
+    }
+  };
+
+  checkRegex(K6_PRAGMA_REGEX, K6_PRAGMA_MESSAGE);
+  checkRegex(K6_EXTENSION_IMPORT_REGEX, K6_EXTENSION_MESSAGE);
+
+  return matches;
+}

src/schemas/forms/script/validation.ts

@@ -1,33 +1,22 @@
 import { RefinementCtx, ZodIssueCode } from 'zod';
 
 import { extractImportStatement, extractOptionsExport, getProperty, parseScript } from './parser';
+import { hasK6ExtensionImports, hasK6Pragma, K6_EXTENSION_MESSAGE, K6_PRAGMA_MESSAGE } from './rules';
 
 const MAX_SCRIPT_IN_KB = 128;
 
-function hasK6Pragma(script: string): boolean {
-  // Match patterns like: "use k6 >= v1.0.0", "use k6 > 0.52", etc.
-  const pragmaPattern = /["']use\s+k6\s*[><=!]+\s*v?\d+/i;
-  return pragmaPattern.test(script);
-}
-
-function hasK6ExtensionImports(script: string): boolean {
-  // Match import statements that include k6/x/ paths
-  const extensionPattern = /import\s+.*from\s*['"`][^'"`]*k6\/x\/[^'"`]*['"`]/i;
-  return extensionPattern.test(script);
-}
-
 function validateScriptPragmasAndExtensions(script: string, context: RefinementCtx): void {
   if (hasK6Pragma(script)) {
     context.addIssue({
       code: ZodIssueCode.custom,
-      message: 'Script contains a k6 version pragma which is not allowed. Please remove the "use k6" directive.',
+      message: K6_PRAGMA_MESSAGE,
     });
   }
 
   if (hasK6ExtensionImports(script)) {
     context.addIssue({
       code: ZodIssueCode.custom,
-      message: 'Script imports k6 extensions which are not allowed. Please remove imports from k6/x/ paths.',
+      message: K6_EXTENSION_MESSAGE,
     });
   }
 }