Merge pull request #3715 from open-formulieren/feature/3712-upgrade-f…

…ormio-builder

Upgrade formio builder

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@open-formulieren/design-tokens": "^0.51.0",
-    "@open-formulieren/formio-builder": "^0.9.0",
+    "@open-formulieren/formio-builder": "^0.11.1",
     "@open-formulieren/leaflet-tools": "^1.0.0",
     "@rjsf/core": "^4.2.1",
     "@tinymce/tinymce-react": "^4.3.2",
@@ -96,6 +96,7 @@
     "babel-plugin-formatjs": "^10.5.1",
     "browserslist": "^4.21.5",
     "copy-webpack-plugin": "^6.4.1",
+    "css-has-pseudo": "^6.0.1",
     "css-loader": "^5.0.2",
     "cssnano": "^5.0.17",
     "ejs-loader": "^0.5.0",

postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('autoprefixer'), require('cssnano')],
+  plugins: [require('autoprefixer'), require('cssnano'), require('css-has-pseudo')()],
 };

src/openforms/formio/migration_converters.py

@@ -6,6 +6,8 @@
 """
 from typing import Protocol
 
+from glom import assign, glom
+
 from .typing import Component
 
 
@@ -66,6 +68,14 @@ def alter_prefill_default_values(component: Component) -> bool:
     return altered
 
 
+def set_openforms_datasrc(component: Component) -> bool:
+    # if a dataSrc is specified, there is nothing to do
+    if glom(component, "openForms.dataSrc", default=None):
+        return False
+    assign(component, "openForms.dataSrc", val="manual", missing=dict)
+    return True
+
+
 CONVERTERS: dict[str, dict[str, ComponentConverter]] = {
     # Input components
     "textfield": {
@@ -80,6 +90,9 @@ def alter_prefill_default_values(component: Component) -> bool:
     "time": {
         "move_time_validators": move_time_validators,
     },
+    "select": {"set_openforms_datasrc": set_openforms_datasrc},
+    "selectboxes": {"set_openforms_datasrc": set_openforms_datasrc},
+    "radio": {"set_openforms_datasrc": set_openforms_datasrc},
     "postcode": {
         "alter_prefill_default_values": alter_prefill_default_values,
     },

src/openforms/forms/migrations/0100_ensure_datasrc_property.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.23 on 2023-12-27 13:01
+
+from django.db import migrations
+
+from openforms.forms.migration_operations import ConvertComponentsOperation
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("forms", "0099_form_theme"),
+    ]
+
+    operations = [
+        ConvertComponentsOperation("select", "set_openforms_datasrc"),
+        ConvertComponentsOperation("radio", "set_openforms_datasrc"),
+        ConvertComponentsOperation("selectboxes", "set_openforms_datasrc"),
+    ]

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

@@ -616,10 +616,26 @@ def setUpTestData():
                             "label": "Field 2",
                             "description": "Description 2",
                             "tooltip": "Tooltip 2",
+                            "openForms": {
+                                "dataSrc": "manual",
+                            },
                             "data": {
                                 "values": [
-                                    {"value": "option1", "label": "Option 1"},
-                                    {"value": "option2", "label": "Option 2"},
+                                    {
+                                        "value": "option1",
+                                        "label": "Option 1",
+                                        "openForms": {
+                                            "translations": {
+                                                "nl": {
+                                                    "label": "Optie 1",
+                                                }
+                                            }
+                                        },
+                                    },
+                                    {
+                                        "value": "option2",
+                                        "label": "Option 2",
+                                    },
                                 ]
                             },
                         },
@@ -689,24 +705,32 @@ def setUpTestData():
             # version of @open-formulieren/formio-builder npm package.
             with phase("Select component checks"):
                 await open_component_options_modal(page, "Field 2")
+
                 # find and click translations tab
-                await page.get_by_role("link", name="Vertalingen").click()
+                await page.get_by_role(
+                    "link", name=self._translate("Vertalingen")
+                ).click()
 
-                expected_literals = [
-                    "Field 2",
-                    "Description 2",
-                    "Tooltip 2",
-                    "Option 1",
-                    "Option 2",
-                ]
-                for index, literal in enumerate(expected_literals):
-                    with self.subTest(literal=literal, index=index):
-                        literal_loc = page.locator(
-                            f'css=[name="data[openForms.translations.nl][{index}]"]'
-                        )
-                        await expect(literal_loc).to_have_value(literal)
+                # check the values of the translation inputs
+                await self._check_translation(page, "label", "Label", "Field 2", "")
+                await self._check_translation(
+                    page, "description", "Description", "Description 2", ""
+                )
+                await self._check_translation(
+                    page, "tooltip", "Tooltip", "Tooltip 2", ""
+                )
 
-                await page.get_by_role("button", name="Annuleren").click()
+                # Check options translations are present
+                option1_translation_field = page.get_by_label(
+                    'Translation for option with value "option1"', exact=True
+                )
+                await expect(option1_translation_field).to_have_value("Optie 1")
+                option2_translation_field = page.get_by_label(
+                    'Translation for option with value "option2"', exact=True
+                )
+                await expect(option2_translation_field).to_have_value("")
+
+                await page.get_by_role("button", name="Cancel").click()
                 await expect(page.locator("css=.formio-dialog-content")).to_be_hidden()
 
             with phase("save form changes to backend"):
@@ -769,6 +793,102 @@ async def test_editing_translatable_properties_remembers_translations(self):
                 expected_translation="Vertaald label",
             )
 
+    @tag("gh-2820")
+    async def test_editing_content_translations_are_saved(self):
+        """
+        Assert that entering translations and then changing the source string keeps the translation.
+        """
+        await create_superuser()
+        admin_url = str(furl(self.live_server_url) / reverse("admin:forms_form_add"))
+
+        async with browser_page() as page:
+            await self._admin_login(page)
+            await page.goto(str(admin_url))
+            await add_new_step(page)
+
+            # Open the menu for the layout components
+            await page.get_by_text("Opmaak").click()
+            await drag_and_drop_component(page, "Vrije tekst")
+
+            await expect(page.locator("css=.formio-dialog-content")).to_be_visible()
+
+            # first translation tab (NL) is the default
+            await page.get_by_role("link", name="NL", exact=True).click()
+            wysiwyg_nl = page.get_by_label("Editor editing area: main")
+            await expect(wysiwyg_nl).to_be_editable()
+
+            await wysiwyg_nl.click()
+            await wysiwyg_nl.fill("This is the default/NL translation.")
+
+            await page.get_by_role("link", name="EN", exact=True).click()
+            wysiwyg_en = page.get_by_label("Editor editing area: main")
+            await expect(wysiwyg_en).to_be_editable()
+            await wysiwyg_en.click()
+            await wysiwyg_en.fill("This is the English translation.")
+
+            # Save the component
+            modal = page.locator("css=.formio-dialog-content")
+            await modal.get_by_role("button", name="Save", exact=True).click()
+
+            await open_component_options_modal(
+                page, "This is the default/NL translation."
+            )
+
+            await page.get_by_role("link", name="NL", exact=True).click()
+            wysiwyg_nl_2 = page.get_by_label("Editor editing area: main")
+            await expect(wysiwyg_nl_2).to_contain_text(
+                "This is the default/NL translation."
+            )
+
+            await page.get_by_role("link", name="EN", exact=True).click()
+            wysiwyg_en_2 = page.get_by_label("Editor editing area: main")
+            await expect(wysiwyg_en_2).to_contain_text(
+                "This is the English translation."
+            )
+
+    @tag("gh-2800")
+    async def test_key_automatically_generated_for_select_options(self):
+        @sync_to_async
+        def setUpTestData():
+            # set up a form
+            form = FormFactory.create(
+                name="Playwright test",
+                name_nl="Playwright test",
+                generate_minimal_setup=True,
+                formstep__form_definition__name_nl="Playwright test",
+                formstep__form_definition__configuration={
+                    "components": [],
+                },
+            )
+            return form
+
+        await create_superuser()
+        form = await setUpTestData()
+        admin_url = str(
+            furl(self.live_server_url)
+            / reverse("admin:forms_form_change", args=(form.pk,))
+        )
+
+        async with browser_page() as page:
+            await self._admin_login(page)
+            await page.goto(str(admin_url))
+            await page.get_by_role("tab", name="Steps and fields").click()
+
+            # Drag and drop a component
+            await drag_and_drop_component(page, "Keuzelijst")
+
+            # Check that the modal is open
+            await expect(page.locator("css=.formio-dialog-content")).to_be_visible()
+
+            # Update the label
+            value_label_input = page.get_by_label("Option label")
+            await value_label_input.click()
+            await value_label_input.fill("Test")
+
+            # Check that the key has been updated
+            value_key_input = page.get_by_label("Option value")
+            await expect(value_key_input).to_have_value("test")
+
 
 class FormDesignerRegressionTests(E2ETestCase):
     async def test_user_defined_variable_boolean_initial_value_false(self):