Merge pull request #4407 from open-formulieren/feature/4051-monaco

 [#4051] Use new JSON editor

package.json

@@ -30,8 +30,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@open-formulieren/design-tokens": "^0.51.0",
-    "@open-formulieren/formio-builder": "^0.23.2",
+    "@open-formulieren/formio-builder": "^0.24.0",
     "@open-formulieren/leaflet-tools": "^1.0.0",
+    "@open-formulieren/monaco-json-editor": "^0.2.0",
     "@rjsf/core": "^4.2.1",
     "@tinymce/tinymce-react": "^4.3.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

src/openforms/forms/tests/e2e_tests/helpers.py

@@ -1,6 +1,11 @@
+import json
 from contextlib import contextmanager
+from unittest import skipIf
 
-from playwright.async_api import Page, expect
+from playwright.async_api import Locator, Page, expect
+
+from openforms.tests.e2e.base import BROWSER
+from openforms.typing import JSONValue
 
 
 @contextmanager
@@ -30,3 +35,60 @@ async def click_modal_button(page: Page, button_text: str, **kwargs):
 async def close_modal(page: Page, button_text: str, **kwargs):
     modal = await click_modal_button(page, button_text, **kwargs)
     await expect(modal).to_be_hidden()
+
+
+skip_on_webtest = skipIf(
+    BROWSER == "webkit", "Skip test on Webkit browser (because it is known to not work)"
+)
+
+
+def _raise_for_webkit():
+    if BROWSER == "webkit":
+        raise Exception(
+            "This functionality does not work on Webkit with Playwright. Best is to "
+            "conditionally skip the test with @skip_on_webtest."
+        )
+
+
+async def enter_json_in_editor(
+    page: Page, editor: Locator, expression: JSONValue
+) -> None:
+    """
+    Put some JSON into a monaca-json-editor instance.
+
+    :arg locator: The locator (`page.locator(".monaco-editor")`) pointing to the
+      editor instance.
+    :arg expression: The JSON expression. Will be serialized to JSON before putting it
+      in the input.
+    """
+    # copy-and-paste does work on Webkit, but I can't get selecting all editor content
+    # and replacing it with the pasted content to work :(
+    _raise_for_webkit()
+
+    await expect(editor).to_be_visible()
+    code = json.dumps(expression)
+    # put the code in the clipboard and do a paste event
+    await page.evaluate("text => navigator.clipboard.writeText(text)", code)
+    # click the editor to focus it
+    await editor.click()
+    # select all
+    await page.keyboard.press("ControlOrMeta+KeyA")
+    # and replace with paste
+    await page.keyboard.press("ControlOrMeta+KeyV")
+
+
+async def check_json_in_editor(editor: Locator, expected_value: JSONValue):
+    # copy-and-paste does work on Webkit, but I can't get selecting all editor content
+    # and replacing it with the pasted content to work :(
+    _raise_for_webkit()
+
+    await expect(editor).to_be_visible()
+    code_content = editor.locator(".lines-content")
+    code_in_editor = await code_content.text_content() or ""
+    # monaco uses   (= "\xa0") for indentation, which we need to strip out
+    code = code_in_editor.replace("\xa0", "")
+    try:
+        _json = json.loads(code)
+    except json.JSONDecodeError as exc:
+        raise AssertionError("code is not valid JSON") from exc
+    assert _json == expected_value, "Code in editor is not equivalent"

src/openforms/forms/tests/e2e_tests/test_form_designer.py

@@ -22,8 +22,10 @@
 from .helpers import (
     click_modal_button,
     close_modal,
+    enter_json_in_editor,
     open_component_options_modal,
     phase,
+    skip_on_webtest,
 )
 
 
@@ -659,6 +661,7 @@ def assertState():
 
         await assertState()
 
+    @skip_on_webtest
     async def test_logic_rule_trigger_from_step_show_saved_value_in_select(self):
         """
         Regression test for https://github.com/open-formulieren/open-forms/issues/2636
@@ -701,7 +704,8 @@ def get_formstep_uuid():
                 await page.locator("[name='triggerFromStep']").select_option(
                     label="Playwright test"
                 )
-                await page.locator("[name='jsonLogicTrigger']").fill('{"==": [1, 1]}')
+                editor = page.locator(".monaco-editor")
+                await enter_json_in_editor(page, editor, {"==": [1, 1]})
 
             with phase("Save logic rule and check state"):
                 await page.get_by_text("Save and continue editing").click()

src/openforms/forms/tests/e2e_tests/test_logic_tab.py

@@ -8,9 +8,11 @@
 
 from ...models import FormLogic
 from ..factories import FormFactory
+from .helpers import enter_json_in_editor, skip_on_webtest
 
 
 class LogicTabTests(E2ETestCase):
+    @skip_on_webtest
     async def test_make_component_not_required_with_logic(self):
         @sync_to_async
         def setUpTestData():
@@ -47,9 +49,8 @@ def setUpTestData():
             await page.get_by_text("Add rule").click()
             await page.get_by_role("button", name="Advanced").click()
 
-            textarea = page.locator("[name='jsonLogicTrigger']")
+            await enter_json_in_editor(page, page.locator(".monaco-editor"), True)
 
-            await textarea.fill("true")
             await page.get_by_text("Add Action").click()
             await page.locator('select[name="action.type"]').select_option(
                 label="change a property of a component."