feat: show lint errors in code editor

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -1,7 +1,11 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { AppState } from "reducers";
-import CodeMirror, { EditorConfiguration } from "codemirror";
+import CodeMirror, {
+  Annotation,
+  EditorConfiguration,
+  UpdateLintingCallback,
+} from "codemirror";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/duotone-dark.css";
 import "codemirror/theme/duotone-light.css";
@@ -12,6 +16,9 @@ import "codemirror/addon/edit/closebrackets";
 import "codemirror/addon/display/autorefresh";
 import "codemirror/addon/mode/multiplex";
 import "codemirror/addon/tern/tern.css";
+import "codemirror/addon/lint/lint";
+import "codemirror/addon/lint/lint.css";
+
 import { getDataTreeForAutocomplete } from "selectors/dataTreeSelectors";
 import EvaluatedValuePopup from "components/editorComponents/CodeEditor/EvaluatedValuePopup";
 import { WrappedFieldInputProps } from "redux-form";
@@ -70,6 +77,8 @@ import { getPluginIdToImageLocation } from "sagas/selectors";
 import { ExpectedValueExample } from "utils/validation/common";
 import { getRecentEntityIds } from "selectors/globalSearchSelectors";
 import { AutocompleteDataType } from "utils/autocomplete/TernServer";
+import { getLintAnnotations } from "./lintHelpers";
+import getFeatureFlags from "utils/featureFlags";
 
 const AUTOCOMPLETE_CLOSE_KEY_CODES = [
   "Enter",
@@ -147,8 +156,9 @@ class CodeEditor extends Component<Props, State> {
   codeEditorTarget = React.createRef<HTMLDivElement>();
   editor!: CodeMirror.Editor;
   hinters: Hinter[] = [];
+  annotations: Annotation[] = [];
+  updateLintingCallback: UpdateLintingCallback | undefined;
   private editorWrapperRef = React.createRef<HTMLDivElement>();
-
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -176,6 +186,13 @@ class CodeEditor extends Component<Props, State> {
         scrollbarStyle:
           this.props.size !== EditorSize.COMPACT ? "native" : "null",
         placeholder: this.props.placeholder,
+        lint: {
+          getAnnotations: (_: string, callback: UpdateLintingCallback) => {
+            this.updateLintingCallback = callback;
+          },
+          async: true,
+          lintOnChange: false,
+        },
       };
 
       if (!this.props.input.onChange || this.props.disabled) {
@@ -434,6 +451,28 @@ class CodeEditor extends Component<Props, State> {
     }
   };
 
+  lintCode() {
+    const { dataTreePath, dynamicData } = this.props;
+
+    if (!dataTreePath || !this.updateLintingCallback) {
+      return;
+    }
+
+    const errors = _.get(
+      dynamicData,
+      getEvalErrorPath(dataTreePath),
+      [],
+    ) as EvaluationError[];
+
+    let annotations: Annotation[] = [];
+
+    if (this.editor) {
+      annotations = getLintAnnotations(this.editor.getValue(), errors);
+    }
+
+    this.updateLintingCallback(this.editor, annotations);
+  }
+
   static updateMarkings = (
     editor: CodeMirror.Editor,
     marking: Array<MarkHelper>,
@@ -481,9 +520,11 @@ class CodeEditor extends Component<Props, State> {
       getEvalErrorPath(dataTreePath),
       [],
     ) as EvaluationError[];
+
     const filteredLintErrors = errors.filter(
       (error) => error.errorType !== PropertyEvaluationErrorType.LINT,
     );
+
     const pathEvaluatedValue = _.get(dataTree, getEvalValuePath(dataTreePath));
 
     return {
@@ -524,6 +565,10 @@ class CodeEditor extends Component<Props, State> {
       evaluated = pathEvaluatedValue;
     }
 
+    if (getFeatureFlags().LINTING) {
+      this.lintCode();
+    }
+
     const showEvaluatedValue =
       this.state.isFocused &&
       ("evaluatedValue" in this.props ||

app/client/src/components/editorComponents/CodeEditor/lintHelpers.test.ts

@@ -0,0 +1,161 @@
+import { Severity } from "entities/AppsmithConsole";
+import {
+  EvaluationError,
+  PropertyEvaluationErrorType,
+} from "utils/DynamicBindingUtils";
+import {
+  getKeyPositionInString,
+  getLintAnnotations,
+  getAllWordOccurrences,
+} from "./lintHelpers";
+
+describe("getAllWordOccurences()", function() {
+  it("should get all the indexes", () => {
+    const res = getAllWordOccurrences("this is a `this` string", "this");
+    expect(res).toEqual([0, 11]);
+  });
+
+  it("should return empty array", () => {
+    expect(getAllWordOccurrences("this is a string", "number")).toEqual([]);
+  });
+});
+
+describe("getKeyPositionsInString()", () => {
+  it("should return results for single line string", () => {
+    const res = getKeyPositionInString("this is a `this` string", "this");
+    expect(res).toEqual([
+      { line: 0, ch: 0 },
+      { line: 0, ch: 11 },
+    ]);
+  });
+
+  it("should return results for multiline string", () => {
+    const res = getKeyPositionInString("this is a \n`this` string", "this");
+    expect(res).toEqual([
+      { line: 0, ch: 0 },
+      { line: 1, ch: 1 },
+    ]);
+  });
+});
+
+describe("getLintAnnotations()", () => {
+  const { LINT, PARSE } = PropertyEvaluationErrorType;
+  const { ERROR, WARNING } = Severity;
+  it("should return proper annotations", () => {
+    const value = `Hello {{ world == test }}\n  {{text}}`;
+    const errors: EvaluationError[] = [
+      {
+        errorMessage: "Expected '===' and instead saw '=='.",
+        severity: WARNING,
+        raw:
+          "\n  function closedFunction () {\n    const result = world == test \n    return result;\n  }\n  closedFunction()\n  ",
+        errorType: LINT,
+        originalBinding: "world == test ",
+        errorSegment: "    const result = world == test ",
+        variables: ["===", "==", null, null],
+        code: "W116",
+      },
+      {
+        errorType: LINT,
+        raw:
+          "\n  function closedFunction () {\n    const result = world == test \n    return result;\n  }\n  closedFunction()\n  ",
+        severity: WARNING,
+        errorMessage: "'world' is not defined.",
+        errorSegment: "    const result = world == test ",
+        originalBinding: "world == test ",
+        variables: ["world", null, null, null],
+        code: "W117",
+      },
+      {
+        errorType: LINT,
+        raw:
+          "\n  function closedFunction () {\n    const result = world == test \n    return result;\n  }\n  closedFunction()\n  ",
+        severity: WARNING,
+        errorMessage: "'test' is not defined.",
+        errorSegment: "    const result = world == test ",
+        originalBinding: "world == test ",
+        variables: ["test", null, null, null],
+        code: "W117",
+      },
+      {
+        errorType: PARSE,
+        raw:
+          "\n  function closedFunction () {\n    const result = world == test \n    return result;\n  }\n  closedFunction()\n  ",
+        severity: ERROR,
+        errorMessage: "ReferenceError: world is not defined",
+        originalBinding: " world == test ",
+      },
+      {
+        errorMessage: "'text' is not defined.",
+        severity: WARNING,
+        raw:
+          "\n  function closedFunction () {\n    const result = text\n    return result;\n  }\n  closedFunction()\n  ",
+        errorType: LINT,
+        originalBinding: "text",
+        errorSegment: "    const result = text",
+        variables: ["text", null, null, null],
+        code: "W117",
+      },
+      {
+        errorMessage: "ReferenceError: text is not defined",
+        severity: WARNING,
+        raw:
+          "\n  function closedFunction () {\n    const result = text\n    return result;\n  }\n  closedFunction()\n  ",
+        errorType: PARSE,
+        originalBinding: "text",
+      },
+    ];
+
+    const res = getLintAnnotations(value, errors);
+    expect(res).toEqual([
+      {
+        from: {
+          line: 0,
+          ch: 15,
+        },
+        to: {
+          line: 0,
+          ch: 17,
+        },
+        message: "Expected '===' and instead saw '=='.",
+        severity: "warning",
+      },
+      {
+        from: {
+          line: 0,
+          ch: 9,
+        },
+        to: {
+          line: 0,
+          ch: 14,
+        },
+        message: "'world' is not defined.",
+        severity: "warning",
+      },
+      {
+        from: {
+          line: 0,
+          ch: 18,
+        },
+        to: {
+          line: 0,
+          ch: 22,
+        },
+        message: "'test' is not defined.",
+        severity: "warning",
+      },
+      {
+        from: {
+          line: 1,
+          ch: 4,
+        },
+        to: {
+          line: 1,
+          ch: 8,
+        },
+        message: "'text' is not defined.",
+        severity: "warning",
+      },
+    ]);
+  });
+});