feat(nimbus): use fml linter in branches form (#13826)

Becuase

* In the old nimbus-ui, we called out to an API to do FML validation for
non desktop feature values
* This was lost when we setup the new nimbus-ui

This commit

* Adds a linter to the new feature values form that calls the FML
linting API

fixes #12968

Author: jaredlockhart

experimenter/experimenter/nimbus_ui/forms.py

@@ -445,6 +445,22 @@ def __init__(self, *args, **kwargs):
         ):
             self.fields["value"].initial = ""
 
+        if (
+            self.instance is not None
+            and self.instance.branch_id is not None
+            and self.instance.branch.experiment
+            and self.instance.branch.experiment.application
+            != NimbusExperiment.Application.DESKTOP
+        ):
+            self.fields["value"].widget.attrs["data-experiment-slug"] = (
+                self.instance.branch.experiment.slug
+            )
+
+            if self.instance.feature_config:
+                self.fields["value"].widget.attrs["data-feature-slug"] = (
+                    self.instance.feature_config.slug
+                )
+
         if (
             self.instance.id is not None
             and self.instance.feature_config

experimenter/experimenter/nimbus_ui/static/js/edit_branches.js

@@ -24,7 +24,7 @@ import {
 } from "@codemirror/search";
 import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
 import { tags } from "@lezer/highlight";
-import { schemaAutocomplete, schemaLinter } from "./validator.js";
+import { schemaAutocomplete, schemaLinter, fmlLinter } from "./validator.js";
 import $ from "jquery";
 
 const setupCodemirror = (selector, textarea, extraExtensions) => {
@@ -85,7 +85,27 @@ const setupCodemirrorFeatures = () => {
   textareas.forEach((textarea) => {
     const extensions = [];
 
-    if (textarea.dataset.schema) {
+    const hasFmlValidation =
+      textarea.dataset.experimentSlug && textarea.dataset.featureSlug;
+    const hasJsonSchema = textarea.dataset.schema;
+
+    if (hasFmlValidation) {
+      extensions.push(
+        linter(
+          fmlLinter(
+            textarea.dataset.experimentSlug,
+            textarea.dataset.featureSlug,
+          ),
+        ),
+      );
+
+      if (hasJsonSchema) {
+        const jsonSchema = JSON.parse(textarea.dataset.schema);
+        extensions.push(
+          autocompletion({ override: [schemaAutocomplete(jsonSchema)] }),
+        );
+      }
+    } else if (hasJsonSchema) {
       const jsonSchema = JSON.parse(textarea.dataset.schema);
 
       extensions.push(

experimenter/experimenter/nimbus_ui/static/js/validator.js

@@ -277,3 +277,81 @@ export function schemaAutocomplete(schema) {
     };
   };
 }
+
+/**
+ * FML remote feature validation
+ * Linter that calls out to the server to validate feature values against
+ * FML rules.
+ */
+export const fmlLinter = (experimentSlug, featureSlug) => {
+  let timeout = null;
+
+  return async (view) => {
+    const doc = view.state.doc.toString();
+
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    if (!doc.trim()) {
+      return [];
+    }
+
+    try {
+      JSON.parse(doc);
+    } catch (e) {
+      return [];
+    }
+
+    return new Promise((resolve) => {
+      timeout = setTimeout(async () => {
+        try {
+          const response = await fetch(
+            `/api/v5/fml-errors/${experimentSlug}/`,
+            {
+              method: "PATCH",
+              headers: {
+                "Content-Type": "application/json",
+                "X-CSRFToken": document.querySelector(
+                  "[name=csrfmiddlewaretoken]",
+                ).value,
+              },
+              body: JSON.stringify({
+                featureSlug: featureSlug,
+                featureValue: doc,
+              }),
+            },
+          );
+
+          if (!response.ok) {
+            resolve([]);
+            return;
+          }
+
+          const errors = await response.json();
+
+          const diagnostics = errors.map((error) => {
+            const line = Math.max(0, error.line - 1);
+            const col = Math.max(0, error.col - 1);
+
+            const lineObj = view.state.doc.line(line + 1);
+            const from = lineObj.from + col;
+            const to = from + (error.highlight?.length || 1);
+
+            return {
+              from,
+              to,
+              severity: "error",
+              message: error.message,
+            };
+          });
+
+          resolve(diagnostics);
+        } catch (error) {
+          console.error("FML validation error:", error);
+          resolve([]);
+        }
+      }, 500);
+    });
+  };
+};