diff --git a/src/openforms/forms/tests/e2e_tests/test_registration_backend_conf.py b/src/openforms/forms/tests/e2e_tests/test_registration_backend_conf.py index 81a47e2339..45dc808aa5 100644 --- a/src/openforms/forms/tests/e2e_tests/test_registration_backend_conf.py +++ b/src/openforms/forms/tests/e2e_tests/test_registration_backend_conf.py @@ -121,7 +121,14 @@ def collect_requests(request): await page.get_by_role( "combobox", name="Select registration backend" ).select_option(label="ZGW API's") - await page.get_by_label("ZGW API group").select_option(label="Group 1") + await page.get_by_role("button", name="Configure options").click() + + config_modal = page.get_by_role("dialog") + await rs_select_option( + config_modal.get_by_role("combobox", name="API group"), + option_label="Group 1", + ) + await config_modal.get_by_role("button", name="Save").click() with phase("Configure upload component"): await page.get_by_role("tab", name="Steps and fields").click() @@ -132,10 +139,14 @@ def collect_requests(request): with phase("Update the ZGW API group configured"): await page.get_by_role("tab", name="Registration").click() - await page.get_by_role( - "combobox", name="Select registration backend" - ).select_option(label="ZGW API's") - await page.get_by_label("ZGW API group").select_option(label="Group 2") + await page.get_by_role("button", name="Configure options").click() + + config_modal = page.get_by_role("dialog") + await rs_select_option( + config_modal.get_by_role("combobox", name="API group"), + option_label="Group 2", + ) + await config_modal.get_by_role("button", name="Save").click() with phase("Reopen the upload component"): await page.get_by_role("tab", name="Steps and fields").click() diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json index b9687bb888..0f24c96d55 100644 --- a/src/openforms/js/compiled-lang/en.json +++ b/src/openforms/js/compiled-lang/en.json @@ -29,6 +29,12 @@ "value": "Path" } ], + "+Te82K": [ + { + "type": 0, + "value": "Optional ZGW configuration" + } + ], "+XwAuT": [ { "type": 0, @@ -265,6 +271,12 @@ "value": " contains the original filename." } ], + "1y4N2r": [ + { + "type": 0, + "value": "RSIN of the organization, which creates and owns the case and documents." + } + ], "2/2h2C": [ { "type": 0, @@ -421,12 +433,6 @@ "value": "Location" } ], - "41hfj4": [ - { - "type": 0, - "value": "Which ZGW API group to use." - } - ], "45IQhq": [ { "type": 0, @@ -475,12 +481,6 @@ "value": " files to upload." } ], - "4XnRWO": [ - { - "type": 0, - "value": "Map variables to case properties" - } - ], "4iGsG1": [ { "type": 0, @@ -563,12 +563,6 @@ "value": "Add another value" } ], - "5QVVXM": [ - { - "type": 0, - "value": "Objects API - objecttype version" - } - ], "5XOrxo": [ { "type": 0, @@ -859,12 +853,6 @@ "value": "Is reusable?" } ], - "8BjiJI": [ - { - "type": 0, - "value": "Map variables to case properties" - } - ], "8LLxRg": [ { "type": 0, @@ -1093,6 +1081,12 @@ "value": "The text that will be displayed in the overview page to change a certain step. Leave blank to get value from global configuration." } ], + "AWyevn": [ + { + "type": 0, + "value": "Confidentiality" + } + ], "AtBVAV": [ { "type": 0, @@ -1469,6 +1463,12 @@ "value": "Variable key" } ], + "DbajPO": [ + { + "type": 0, + "value": "Indication of the level to which extent the case is meant to be public. The value selected here will override the default configured on the case type." + } + ], "DcI1VF": [ { "type": 0, @@ -1595,6 +1595,12 @@ "value": "There are multiple co-sign components specified in this form. At most one should be present." } ], + "EQho4S": [ + { + "type": 0, + "value": "API group" + } + ], "EacF3m": [ { "type": 0, @@ -1627,12 +1633,6 @@ "value": "Save as new" } ], - "EoyaLh": [ - { - "type": 0, - "value": "RSIN of organization, which creates the ZAAK." - } - ], "ErwGIQ": [ { "type": 0, @@ -1693,12 +1693,6 @@ "value": "Simple" } ], - "FbvIpr": [ - { - "type": 0, - "value": "URL of the ZAAKTYPE in the Catalogi API." - } - ], "Fc/emc": [ { "type": 0, @@ -1833,6 +1827,12 @@ "value": "Single column" } ], + "GwOWGv": [ + { + "type": 0, + "value": "Plugin configuration: ZGW APIs" + } + ], "H3dRU6": [ { "type": 0, @@ -2015,6 +2015,12 @@ "value": "The data entered in this component will be removed in accordance with the privacy settings." } ], + "JKq3TC": [ + { + "type": 0, + "value": "Medewerker roltype" + } + ], "JRGs/Q": [ { "type": 0, @@ -2173,6 +2179,12 @@ "value": "Payment provider" } ], + "L4EVfI": [ + { + "type": 0, + "value": "Changing the api group will clear the existing configuration. Are you sure you want to continue?" + } + ], "L97GKs": [ { "type": 0, @@ -2345,6 +2357,12 @@ "value": ")" } ], + "Nfn2qu": [ + { + "type": 0, + "value": "Case type API resource URL in the Catalogi API." + } + ], "Nsifca": [ { "type": 0, @@ -2363,6 +2381,12 @@ "value": "Component where locations for an appointment will be shown" } ], + "NyyJMK": [ + { + "type": 0, + "value": "The API group specifies which ZGW services to use." + } + ], "O/wKJh": [ { "type": 0, @@ -2613,12 +2637,6 @@ "value": "You need to configure both longitude and latitude." } ], - "R78GMf": [ - { - "type": 0, - "value": "Confidentiality" - } - ], "R7XVbR": [ { "type": 0, @@ -2799,6 +2817,12 @@ "value": "change a property of a component." } ], + "ScbJK7": [ + { + "type": 0, + "value": "Organisation RSIN" + } + ], "SjbNyf": [ { "type": 0, @@ -2811,6 +2835,12 @@ "value": "Which authentication method the co-signer must use. Note that this must be an authentication method available on the form." } ], + "Sw6TLH": [ + { + "type": 0, + "value": "Document type" + } + ], "T0OLUV": [ { "type": 0, @@ -2865,16 +2895,16 @@ "value": "the path should not have a leading slash" } ], - "TIraO3": [ + "TR5xSY": [ { "type": 0, - "value": "Objects API - objecttype" + "value": "Are you sure you want to delete this rule?" } ], - "TR5xSY": [ + "TRjRww": [ { "type": 0, - "value": "Are you sure you want to delete this rule?" + "value": "Base" } ], "TXwGu1": [ @@ -2937,12 +2967,6 @@ "value": "Select the plugin(s) to use for the validation functionality." } ], - "UHlGZJ": [ - { - "type": 0, - "value": "Indication of the level to which extend the dossier of the ZAAK is meant to be public." - } - ], "UJTIZU": [ { "type": 0, @@ -3307,30 +3331,12 @@ "value": "Remove" } ], - "XqTjf+": [ - { - "type": 0, - "value": "JSON template for the content of the request sent to the Objects API." - } - ], - "Y2d0q4": [ - { - "type": 0, - "value": "URL of the INFORMATIEOBJECTTYPE in the Catalogi API." - } - ], "Y4oNhH": [ { "type": 0, "value": "Maximum width" } ], - "Y7s6RB": [ - { - "type": 0, - "value": "Version of the object type in the Object Types API." - } - ], "Y8cmP1": [ { "type": 0, @@ -3529,6 +3535,12 @@ "value": "Set the registration backend to use for the submission" } ], + "ZiARkY": [ + { + "type": 0, + "value": "Any configuration option specified here overrides the matching option of the selected API group." + } + ], "ZzjFxE": [ { "type": 0, @@ -3899,6 +3911,12 @@ "value": "The name under which the INFORMATIEOBJECT is formally known." } ], + "cuivC6": [ + { + "type": 0, + "value": "Version" + } + ], "czUDSQ": [ { "type": 0, @@ -4085,12 +4103,6 @@ "value": "Advanced options" } ], - "eU7+uS": [ - { - "type": 0, - "value": "Confirm" - } - ], "eUowhH": [ { "type": 0, @@ -4393,6 +4405,12 @@ "value": "Mobile" } ], + "hxssl8": [ + { + "type": 0, + "value": "Objects API integration" + } + ], "hzx+WF": [ { "type": 0, @@ -4459,6 +4477,12 @@ "value": "is less than" } ], + "ieF+xK": [ + { + "type": 0, + "value": "Case type" + } + ], "ifG3sd": [ { "type": 0, @@ -4731,6 +4755,12 @@ "value": "Add item" } ], + "ln72CJ": [ + { + "type": 0, + "value": "URL to the object type in the objecttypes API. If provided, an object will be created and a case object relation will be added to the case." + } + ], "loKqis": [ { "type": 0, @@ -4839,12 +4869,6 @@ "value": "Whether to add children information to the component." } ], - "nDPXSj": [ - { - "type": 0, - "value": "Zaaktype" - } - ], "nFXYHB": [ { "type": 0, @@ -4893,12 +4917,6 @@ "value": "Tooltip" } ], - "o+PhWW": [ - { - "type": 0, - "value": "Organisatie rsin" - } - ], "o5Mfn3": [ { "type": 0, @@ -4977,6 +4995,12 @@ "value": "Complex process variables" } ], + "p5Iv+R": [ + { + "type": 0, + "value": "Document type API resource URL in the Catalogi API." + } + ], "p7g2h+": [ { "type": 0, @@ -5083,12 +5107,6 @@ "value": "Select registration backend" } ], - "plld71": [ - { - "type": 0, - "value": "Objects API - JSON content field" - } - ], "poZZD9": [ { "type": 0, @@ -5155,12 +5173,6 @@ "value": "Export" } ], - "qpFDF5": [ - { - "type": 0, - "value": "Medewerker roltype" - } - ], "qzISfx": [ { "type": 0, @@ -5245,12 +5257,6 @@ "value": "(not configured yet)" } ], - "s4xyn5": [ - { - "type": 0, - "value": "Informatieobjecttype" - } - ], "sCkGL9": [ { "type": 0, @@ -5275,44 +5281,6 @@ "value": "Manually fill in" } ], - "sbtZya": [ - { - "offset": 0, - "options": { - "=0": { - "value": [ - ] - }, - "one": { - "value": [ - { - "type": 0, - "value": "(1 variable mapped)" - } - ] - }, - "other": { - "value": [ - { - "type": 0, - "value": "(" - }, - { - "type": 1, - "value": "varCount" - }, - { - "type": 0, - "value": " variables mapped)" - } - ] - } - }, - "pluralType": "cardinal", - "type": 6, - "value": "varCount" - } - ], "sgmcmf": [ { "type": 0, @@ -5365,6 +5333,20 @@ "value": "Change form" } ], + "tOueRC": [ + { + "type": 0, + "value": "Case properties (" + }, + { + "type": 1, + "value": "count" + }, + { + "type": 0, + "value": ")" + } + ], "tRCXsR": [ { "type": 0, @@ -5407,6 +5389,12 @@ "value": "Name" } ], + "tzwS3S": [ + { + "type": 0, + "value": "Description (omschrijving) of the ROLTYPE to use for employees filling in a form for a citizen/company." + } + ], "u3P/1E": [ { "type": 0, @@ -5671,18 +5659,6 @@ "value": "Create definition" } ], - "xrmpmN": [ - { - "type": 0, - "value": "Medewerker roltype" - } - ], - "xwBVzh": [ - { - "type": 0, - "value": "ZGW API group" - } - ], "xxVNeU": [ { "type": 0, @@ -5695,12 +5671,6 @@ "value": "Plugin configuration: Objects API" } ], - "y2I3Eu": [ - { - "type": 0, - "value": "Objects API - objecttype" - } - ], "y4U0aW": [ { "options": { @@ -5777,6 +5747,12 @@ "value": "How to specify the available options." } ], + "yTfQNG": [ + { + "type": 0, + "value": "Objecttype" + } + ], "yTpHh0": [ { "type": 0, diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json index 0209a3c7ab..53ad3a74b3 100644 --- a/src/openforms/js/compiled-lang/nl.json +++ b/src/openforms/js/compiled-lang/nl.json @@ -29,6 +29,12 @@ "value": "Pad" } ], + "+Te82K": [ + { + "type": 0, + "value": "Optional ZGW configuration" + } + ], "+XwAuT": [ { "type": 0, @@ -265,6 +271,12 @@ "value": " bevat de oorspronkelijke bestandsnaam." } ], + "1y4N2r": [ + { + "type": 0, + "value": "RSIN van de organisatie die eigenaar is van de zaak en documenten en deze aanmaakt." + } + ], "2/2h2C": [ { "type": 0, @@ -421,12 +433,6 @@ "value": "Locatie" } ], - "41hfj4": [ - { - "type": 0, - "value": "Welke ZGW APIs-groep gebruikt moet worden." - } - ], "45IQhq": [ { "type": 0, @@ -475,12 +481,6 @@ "value": " bestanden om te uploaden." } ], - "4XnRWO": [ - { - "type": 0, - "value": "Koppel variabelen aan zaakeigenschappen" - } - ], "4iGsG1": [ { "type": 0, @@ -563,12 +563,6 @@ "value": "Nog een waarde toevoegen" } ], - "5QVVXM": [ - { - "type": 0, - "value": "Objecten API - objecttypeversie" - } - ], "5XOrxo": [ { "type": 0, @@ -863,12 +857,6 @@ "value": "Is herbruikbaar?" } ], - "8BjiJI": [ - { - "type": 0, - "value": "Koppel variabelen aan zaakeigenschappen" - } - ], "8LLxRg": [ { "type": 0, @@ -1097,6 +1085,12 @@ "value": "De tekst op de overzichtspagina om de gegevens van een bepaalde formulierstap te wijzigen. Laat dit veld leeg om de standaardinstelling te gebruiken." } ], + "AWyevn": [ + { + "type": 0, + "value": "Vertrouwelijkheidaanduiding" + } + ], "AtBVAV": [ { "type": 0, @@ -1490,6 +1484,12 @@ "value": "Sleutel variabele" } ], + "DbajPO": [ + { + "type": 0, + "value": "Aanduiding van de mate waarin het zaakdossier van de ZAAK voor de openbaarheid bestemd is. Als je hier een waarde selecteert, dan overschrijft die de vertrouwelijkheidaanduiding van het geselecteerde zaaktype." + } + ], "DcI1VF": [ { "type": 0, @@ -1616,6 +1616,12 @@ "value": "Het formulier heeft meerdere mede-ondertekencomponenten. Zorg ervoor dat dit er maximaal één is." } ], + "EQho4S": [ + { + "type": 0, + "value": "API-groep" + } + ], "EacF3m": [ { "type": 0, @@ -1648,12 +1654,6 @@ "value": "Opslaan als nieuw" } ], - "EoyaLh": [ - { - "type": 0, - "value": "RSIN van de organisatie die de ZAAK aanmaakt." - } - ], "ErwGIQ": [ { "type": 0, @@ -1714,12 +1714,6 @@ "value": "Eenvoudig" } ], - "FbvIpr": [ - { - "type": 0, - "value": "URL van het ZAAKTYPE in de Catalogi API." - } - ], "Fc/emc": [ { "type": 0, @@ -1854,6 +1848,12 @@ "value": "Eén kolom" } ], + "GwOWGv": [ + { + "type": 0, + "value": "Plugin configuration: ZGW APIs" + } + ], "H3dRU6": [ { "type": 0, @@ -2036,6 +2036,12 @@ "value": "Gegevens opgevoerd in dit component worden geschoond volgens de privacy-instellingen." } ], + "JKq3TC": [ + { + "type": 0, + "value": "Medewerkerroltype" + } + ], "JRGs/Q": [ { "type": 0, @@ -2194,6 +2200,12 @@ "value": "Betaalprovider" } ], + "L4EVfI": [ + { + "type": 0, + "value": "Changing the api group will clear the existing configuration. Are you sure you want to continue?" + } + ], "L97GKs": [ { "type": 0, @@ -2366,6 +2378,12 @@ "value": ")" } ], + "Nfn2qu": [ + { + "type": 0, + "value": "Case type API resource URL in the Catalogi API." + } + ], "Nsifca": [ { "type": 0, @@ -2384,6 +2402,12 @@ "value": "Veld waar beschikbare locaties voor een afspraak komen te staan" } ], + "NyyJMK": [ + { + "type": 0, + "value": "The API group specifies which ZGW services to use." + } + ], "O/wKJh": [ { "type": 0, @@ -2630,12 +2654,6 @@ "value": "Je moet latitude en longitude allebei instellen." } ], - "R78GMf": [ - { - "type": 0, - "value": "Vertrouwelijkheidaanduiding" - } - ], "R7XVbR": [ { "type": 0, @@ -2816,6 +2834,12 @@ "value": "wijzig een attribuut van een veld/component." } ], + "ScbJK7": [ + { + "type": 0, + "value": "RSIN Organisatie" + } + ], "SjbNyf": [ { "type": 0, @@ -2828,6 +2852,12 @@ "value": "Welke authenticatiemethode de mede-ondertekener moet gebruiken. Let op: Dit moet dezelfde authenticatiemethode zijn als is gebruikt op het formulier." } ], + "Sw6TLH": [ + { + "type": 0, + "value": "Documenttype" + } + ], "T0OLUV": [ { "type": 0, @@ -2882,16 +2912,16 @@ "value": "Zorg ervoor dat het pad niet met een schuine streep ('/') begint." } ], - "TIraO3": [ + "TR5xSY": [ { "type": 0, - "value": "Objecten API - objecttype" + "value": "Weet u zeker dat u deze regel wil verwijderen?" } ], - "TR5xSY": [ + "TRjRww": [ { "type": 0, - "value": "Weet u zeker dat u deze regel wil verwijderen?" + "value": "Basis" } ], "TXwGu1": [ @@ -2954,12 +2984,6 @@ "value": "Selecteer de plugin(s) om te gebruiken voor validatie." } ], - "UHlGZJ": [ - { - "type": 0, - "value": "Aanduiding van de mate waarin het zaakdossier van de ZAAK voor de openbaarheid bestemd is. Dit wordt toegepast op de zaakdocumenten die aangemaakt worden." - } - ], "UJTIZU": [ { "type": 0, @@ -3324,30 +3348,12 @@ "value": "Verwijderen" } ], - "XqTjf+": [ - { - "type": 0, - "value": "JSON-sjabloon voor de inhoud van het verzoek wat naar de Objecten API gestuurd wordt." - } - ], - "Y2d0q4": [ - { - "type": 0, - "value": "URL van het INFORMATIEOBJECTTYPE in de Catalogi API." - } - ], "Y4oNhH": [ { "type": 0, "value": "Maximale breedte" } ], - "Y7s6RB": [ - { - "type": 0, - "value": "Versie van het objecttype in de Objecttypen API." - } - ], "Y8cmP1": [ { "type": 0, @@ -3547,6 +3553,12 @@ "value": "Zet registratieplugin voor de inzending" } ], + "ZiARkY": [ + { + "type": 0, + "value": "Any configuration option specified here overrides the matching option of the selected API group." + } + ], "ZzjFxE": [ { "type": 0, @@ -3921,6 +3933,12 @@ "value": "Titel voor het document in de Documenten API." } ], + "cuivC6": [ + { + "type": 0, + "value": "Version" + } + ], "czUDSQ": [ { "type": 0, @@ -4107,12 +4125,6 @@ "value": "Geavanceerde opties" } ], - "eU7+uS": [ - { - "type": 0, - "value": "Bevestigen" - } - ], "eUowhH": [ { "type": 0, @@ -4415,6 +4427,12 @@ "value": "Mobiel" } ], + "hxssl8": [ + { + "type": 0, + "value": "Objects API integration" + } + ], "hzx+WF": [ { "type": 0, @@ -4481,6 +4499,12 @@ "value": "is kleiner dan" } ], + "ieF+xK": [ + { + "type": 0, + "value": "Zaaktype" + } + ], "ifG3sd": [ { "type": 0, @@ -4753,6 +4777,12 @@ "value": "Item toevoegen" } ], + "ln72CJ": [ + { + "type": 0, + "value": "URL to the object type in the objecttypes API. If provided, an object will be created and a case object relation will be added to the case." + } + ], "loKqis": [ { "type": 0, @@ -4861,12 +4891,6 @@ "value": "Indien aangevinkt, dan worden gegevens van kinderen opgehaald en ingesloten." } ], - "nDPXSj": [ - { - "type": 0, - "value": "Zaaktype" - } - ], "nFXYHB": [ { "type": 0, @@ -4915,12 +4939,6 @@ "value": "Tooltip" } ], - "o+PhWW": [ - { - "type": 0, - "value": "Organisatie-RSIN" - } - ], "o5Mfn3": [ { "type": 0, @@ -4999,6 +5017,12 @@ "value": "Complexe procesvariabelen" } ], + "p5Iv+R": [ + { + "type": 0, + "value": "Document type API resource URL in the Catalogi API." + } + ], "p7g2h+": [ { "type": 0, @@ -5105,12 +5129,6 @@ "value": "Registratiemethode" } ], - "plld71": [ - { - "type": 0, - "value": "Objecten API - JSON-inhoud sjabloon" - } - ], "poZZD9": [ { "type": 0, @@ -5177,12 +5195,6 @@ "value": "Exporteren" } ], - "qpFDF5": [ - { - "type": 0, - "value": "Medewerkerroltype" - } - ], "qzISfx": [ { "type": 0, @@ -5267,12 +5279,6 @@ "value": "(nog niet ingesteld)" } ], - "s4xyn5": [ - { - "type": 0, - "value": "Informatieobjecttype" - } - ], "sCkGL9": [ { "type": 0, @@ -5297,44 +5303,6 @@ "value": "Handmatig opvoeren" } ], - "sbtZya": [ - { - "offset": 0, - "options": { - "=0": { - "value": [ - ] - }, - "one": { - "value": [ - { - "type": 0, - "value": "(1 variabele gekoppeld)" - } - ] - }, - "other": { - "value": [ - { - "type": 0, - "value": "(" - }, - { - "type": 1, - "value": "varCount" - }, - { - "type": 0, - "value": " variabelen gekoppeld)" - } - ] - } - }, - "pluralType": "cardinal", - "type": 6, - "value": "varCount" - } - ], "sgmcmf": [ { "type": 0, @@ -5387,6 +5355,20 @@ "value": "Formulier configureren" } ], + "tOueRC": [ + { + "type": 0, + "value": "Zaakeigenschappen (" + }, + { + "type": 1, + "value": "count" + }, + { + "type": 0, + "value": ")" + } + ], "tRCXsR": [ { "type": 0, @@ -5429,6 +5411,12 @@ "value": "Naam" } ], + "tzwS3S": [ + { + "type": 0, + "value": "Description (omschrijving) of the ROLTYPE to use for employees filling in a form for a citizen/company." + } + ], "u3P/1E": [ { "type": 0, @@ -5693,18 +5681,6 @@ "value": "Formulierdefinitie aanmaken" } ], - "xrmpmN": [ - { - "type": 0, - "value": "Medewerkerroltype" - } - ], - "xwBVzh": [ - { - "type": 0, - "value": "ZGW API-groep" - } - ], "xxVNeU": [ { "type": 0, @@ -5717,12 +5693,6 @@ "value": "Plugin-instellingen: Objecten API" } ], - "y2I3Eu": [ - { - "type": 0, - "value": "Objecten API - objecttype" - } - ], "y4U0aW": [ { "options": { @@ -5799,6 +5769,12 @@ "value": "Selecteer een databron voor de keuzeopties." } ], + "yTfQNG": [ + { + "type": 0, + "value": "Objecttype" + } + ], "yTpHh0": [ { "type": 0, diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js index ffab57a129..da057488af 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js @@ -7,13 +7,16 @@ import { mockObjecttypeVersionsGet, mockObjecttypesGet, } from 'components/admin/form_design/registrations/objectsapi/mocks'; -import {ValidationErrorsDecorator} from 'components/admin/form_design/story-decorators'; +import { + FormDecorator, + ValidationErrorsDecorator, +} from 'components/admin/form_design/story-decorators'; import RegistrationFields from './RegistrationFields'; export default { title: 'Form design / Registration / RegistrationFields', - decorators: [ValidationErrorsDecorator], + decorators: [ValidationErrorsDecorator, FormDecorator], component: RegistrationFields, args: { availableBackends: [ @@ -43,8 +46,8 @@ export default { enumNames: ['ZGW API group 1'], }, zaakVertrouwelijkheidaanduiding: { - enum: ['openbaar'], - enumNames: ['Openbaar'], + enum: ['openbaar', 'geheim'], + enumNames: ['Openbaar', 'Geheim'], }, }, }, @@ -171,6 +174,14 @@ export default { onChange: fn(), addBackend: fn(), onDelete: fn(), + availableComponents: { + textField1: { + label: 'textfield1', + }, + textField2: { + label: 'textfield2', + }, + }, }, parameters: { msw: { @@ -270,6 +281,7 @@ export const ConfiguredBackends = { }, ], validationErrors: [ + ['form.registrationBackends.1.options.zgwApiGroup', 'You sure about this?'], ['form.registrationBackends.3.options.objectsApiGroup', 'You shall not pass.'], ], }, @@ -411,4 +423,10 @@ export const ZGW = { }, ], }, + + play: async ({canvasElement}) => { + const canvas = within(canvasElement); + + await userEvent.click(canvas.getByRole('button', {name: 'Opties instellen'})); + }, }; diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js index dd2df5de4d..54dce6fbfc 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js @@ -132,7 +132,7 @@ JSONTemplateField.propTypes = { helpText: PropTypes.node, }; -const ContentJSON = () => ( +export const ContentJSON = () => ( @@ -76,10 +77,7 @@ const ObjectsApiOptionsForm = ({index, name, label, schema, formData, onChange}) initialValues={{ ...formData, // Ensure that if there's only one option, it is automatically selected. - objectsApiGroup: - formData.objectsApiGroup ?? apiGroupChoices.length === 1 - ? apiGroupChoices[0][0] - : undefined, + objectsApiGroup: formData.objectsApiGroup ?? defaultGroup, }} onSubmit={(values, actions) => { onChange({formData: values}); diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js index 66b3f257c8..b595bc5d70 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js @@ -2,8 +2,10 @@ import {expect, fn, userEvent, waitFor, within} from '@storybook/test'; import {Form, Formik} from 'formik'; import selectEvent from 'react-select-event'; -import {ValidationErrorsDecorator} from 'components/admin/form_design/story-decorators'; -import {FeatureFlagsDecorator} from 'components/admin/form_design/story-decorators'; +import { + FeatureFlagsDecorator, + ValidationErrorsDecorator, +} from 'components/admin/form_design/story-decorators'; import ObjectsApiOptionsFormFields from './ObjectsApiOptionsFormFields'; import { diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js index bc17525b5a..7d579edbab 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js @@ -6,7 +6,6 @@ import Fieldset from 'components/admin/forms/Fieldset'; import ErrorBoundary from 'components/errors/ErrorBoundary'; import { - CatalogueSelect, DocumentTypesFieldet, LegacyDocumentTypesFieldet, ObjectTypeSelect, diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/ObjectsAPIGroup.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/ObjectsAPIGroup.js index 030ec4dfab..3c80ab27b7 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/ObjectsAPIGroup.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/ObjectsAPIGroup.js @@ -9,19 +9,18 @@ import ReactSelect from 'components/admin/forms/ReactSelect'; const ObjectsAPIGroup = ({apiGroupChoices, onChangeCheck}) => { const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField('objectsApiGroup'); - const {values, setValues} = useFormikContext(); + const {setValues} = useFormikContext(); const {value} = fieldProps; // reset the objecttype specific-configuration whenever the API group changes useUpdateEffect(() => { - const newValues = { - ...values, + setValues(prevValues => ({ + ...prevValues, objecttype: '', objecttypeVersion: undefined, variablesMapping: [], - }; - setValues(newValues); - }, [setValues, value]); // deliberately excluding values! + })); + }, [setValues, value]); const options = apiGroupChoices.map(([value, label]) => ({value, label})); return ( diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ManageVariableToPropertyMappings.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ManageVariableToPropertyMappings.js new file mode 100644 index 0000000000..876781a018 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ManageVariableToPropertyMappings.js @@ -0,0 +1,169 @@ +import classNames from 'classnames'; +import {FieldArray, useField, useFormikContext} from 'formik'; +import PropTypes from 'prop-types'; +import React, {useContext} from 'react'; +import {FormattedMessage, useIntl} from 'react-intl'; + +import {FormContext} from 'components/admin/form_design/Context'; +import {getComponentDatatype} from 'components/admin/form_design/variables/utils'; +import ButtonContainer from 'components/admin/forms/ButtonContainer'; +import ComponentSelection from 'components/admin/forms/ComponentSelection'; +import Field from 'components/admin/forms/Field'; +import {TextInput} from 'components/admin/forms/Inputs'; +import {ValidationErrorContext} from 'components/admin/forms/ValidationErrors'; +import {DeleteIcon} from 'components/admin/icons'; +import {ChangelistTableWrapper, HeadColumn, TableRow} from 'components/admin/tables'; + +import {filterErrors} from './utils'; + +const HeadColumns = () => { + const intl = useIntl(); + + const componentText = intl.formatMessage({ + description: 'Column title for variable to map to property', + defaultMessage: 'Variable', + }); + const componentHelp = intl.formatMessage({ + description: 'Column help text for variable to map to property', + defaultMessage: 'The value of the selected field will be the process variable value.', + }); + + const eigenschapText = intl.formatMessage({ + description: 'Column title for case property that a variable is mapped to', + defaultMessage: 'Property', + }); + + const eigenschapHelp = intl.formatMessage({ + description: 'Column help text for case property that a variable is mapped to', + defaultMessage: 'Specify a ZGW property name.', + }); + + return ( + <> + + + + + ); +}; + +const VariableProperty = ({index, componentKey, componentFilterFunc, onDelete}) => { + const intl = useIntl(); + const errors = useContext(ValidationErrorContext); + const relevantErrors = filterErrors(`propertyMappings.${index}`, errors); + + const variableName = `propertyMappings.${index}.componentKey`; + const [variableProps] = useField(variableName); + const variableErrors = relevantErrors.filter(([key]) => key === 'componentKey'); + + const eigenschapName = `propertyMappings.${index}.eigenschap`; + const [eigenschapProps] = useField(eigenschapName); + const eigenschapErrors = relevantErrors.filter(([key]) => key === 'eigenschap'); + + const confirmDeleteMessage = intl.formatMessage({ + description: 'Delete confirmation message for variable mapped to case property', + defaultMessage: 'Are you sure you want to remove this mapping?', + }); + + return ( + 0})}> +
+ +
+ + + + + + + {/* TODO - lookup available properties from the selected zaaktype */} + + + + ); +}; + +VariableProperty.propTypes = { + index: PropTypes.number.isRequired, + componentKey: PropTypes.string, + componentFilterFunc: PropTypes.func.isRequired, + onDelete: PropTypes.func.isRequired, +}; + +const getSimpleComponentsLength = allComponents => { + const filteredComponents = Object.keys(allComponents).filter(comp => { + const componentDataType = getComponentDatatype(allComponents[comp]); + return !['array', 'object'].includes(componentDataType) && comp !== 'columns'; + }); + + return filteredComponents.length; +}; + +/** + * @todo - check how validation errors are displayed now + */ +const ManageVariableToPropertyMappings = () => { + const { + values: {propertyMappings = []}, + } = useFormikContext(); + const {components: allComponents} = useContext(FormContext); + + const usedComponents = propertyMappings + .filter(mapping => mapping.componentKey !== '') + .map(mapping => mapping.componentKey); + + const filterFunc = (componentKey, component) => { + const isSimpleType = + !['array', 'object'].includes(getComponentDatatype(component)) && component.key !== 'columns'; + const componentNotUsed = + componentKey === component.key || !usedComponents.includes(component.key); + + return isSimpleType && componentNotUsed; + }; + + const numSimpleComponents = getSimpleComponentsLength(allComponents); + return ( + + {arrayHelpers => ( + <> + }> + {propertyMappings.map(({componentKey}, index) => ( + arrayHelpers.remove(index)} + /> + ))} + + + {usedComponents.length < numSimpleComponents ? ( + + arrayHelpers.insert(propertyMappings.length, { + componentKey: '', + eigenschap: '', + }) + } + > + + + ) : ( + + )} + + )} + + ); +}; + +ManageVariableToPropertyMappings.propTypes = {}; + +export default ManageVariableToPropertyMappings; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js index 0f353caff6..51f8301c04 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js @@ -1,20 +1,116 @@ +import {Formik} from 'formik'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useContext, useState} from 'react'; +import {FormattedMessage, useIntl} from 'react-intl'; +import {SubmitAction} from 'components/admin/forms/ActionButton'; import Field from 'components/admin/forms/Field'; +import SubmitRow from 'components/admin/forms/SubmitRow'; +import {ValidationErrorContext} from 'components/admin/forms/ValidationErrors'; +import {ErrorIcon} from 'components/admin/icons'; +import {FormModal} from 'components/admin/modals'; import ZGWFormFields from './ZGWOptionsFormFields'; +import {filterErrors, getChoicesFromSchema} from './utils'; const ZGWOptionsForm = ({index, name, label, schema, formData, onChange}) => { + const intl = useIntl(); + const [modalOpen, setModalOpen] = useState(false); + const validationErrors = useContext(ValidationErrorContext); + + const {zgwApiGroup, zaakVertrouwelijkheidaanduiding} = schema.properties; + const apiGroupChoices = getChoicesFromSchema(zgwApiGroup.enum, zgwApiGroup.enumNames); + const confidentialityLevelChoices = getChoicesFromSchema( + zaakVertrouwelijkheidaanduiding.enum, + zaakVertrouwelijkheidaanduiding.enumNames + ); + + const numErrors = filterErrors(name, validationErrors).length; + const defaultGroup = apiGroupChoices.length === 1 ? apiGroupChoices[0][0] : undefined; return ( - onChange({formData})} - /> + <> + + + + {numErrors > 0 && ( + + )} + + + + } + closeModal={() => setModalOpen(false)} + extraModifiers={['large']} + > + { + onChange({formData: values}); + actions.setSubmitting(false); + setModalOpen(false); + }} + > + {({handleSubmit}) => ( + <> + + + + { + event.preventDefault(); + handleSubmit(event); + }} + /> + + + )} + + + ); }; @@ -24,38 +120,33 @@ ZGWOptionsForm.propTypes = { name: PropTypes.string, label: PropTypes.node, schema: PropTypes.shape({ - contentJson: PropTypes.string, + properties: PropTypes.shape({ + zgwApiGroup: PropTypes.shape({ + enum: PropTypes.arrayOf(PropTypes.number).isRequired, + enumNames: PropTypes.arrayOf(PropTypes.string).isRequired, + }).isRequired, + zaakVertrouwelijkheidaanduiding: PropTypes.shape({ + enum: PropTypes.arrayOf(PropTypes.string).isRequired, + enumNames: PropTypes.arrayOf(PropTypes.string).isRequired, + }).isRequired, + }).isRequired, + }).isRequired, + formData: PropTypes.shape({ + zgwApiGroup: PropTypes.number, + zaaktype: PropTypes.string, informatieobjecttype: PropTypes.string, - medewerkerRoltype: PropTypes.string, - objecttype: PropTypes.string, - objecttypeVersion: PropTypes.number, organisatieRsin: PropTypes.string, - propertyMappings: PropTypes.arrayOf( - PropTypes.shape({ - componentKey: PropTypes.string, - eigenschap: PropTypes.string, - }) - ), zaakVertrouwelijkheidaanduiding: PropTypes.string, - zaaktype: PropTypes.string, - zgwApiGroup: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }), - formData: PropTypes.shape({ - contentJson: PropTypes.string, - informatieobjecttype: PropTypes.string, medewerkerRoltype: PropTypes.string, - objecttype: PropTypes.string, - objecttypeVersion: PropTypes.string, - organisatieRsin: PropTypes.string, propertyMappings: PropTypes.arrayOf( PropTypes.shape({ componentKey: PropTypes.string, eigenschap: PropTypes.string, }) ).isRequired, - zaakVertrouwelijkheidaanduiding: PropTypes.string, - zaaktype: PropTypes.string, - zgwApiGroup: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + objecttype: PropTypes.string, + objecttypeVersion: PropTypes.string, + contentJson: PropTypes.string, }), onChange: PropTypes.func.isRequired, }; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js index 0594a2bb51..a74eeaab6f 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js @@ -1,310 +1,161 @@ -import {produce} from 'immer'; +import {useFormikContext} from 'formik'; import PropTypes from 'prop-types'; import React, {useContext} from 'react'; -import {useIntl} from 'react-intl'; - -import {CustomFieldTemplate} from 'components/admin/RJSFWrapper'; -import {TextArea, TextInput} from 'components/admin/forms/Inputs'; -import Select from 'components/admin/forms/Select'; -import {ValidationErrorContext} from 'components/admin/forms/ValidationErrors'; - -import {VariablePropertyModal} from './ZGWOptionsVariablesProperties'; -import {getChoicesFromSchema, getErrorMarkup, getFieldErrors} from './utils'; - -const Wrapper = ({children}) => ( -
- -
{children}
- -
-); - -const ZGWFormFields = ({index, name, schema, formData, onChange}) => { +import {FormattedMessage, useIntl} from 'react-intl'; +import {TabList, TabPanel, Tabs} from 'react-tabs'; + +import Tab from 'components/admin/form_design/Tab'; +import {ContentJSON} from 'components/admin/form_design/registrations/objectsapi/LegacyConfigFields'; +import Fieldset from 'components/admin/forms/Fieldset'; +import { + ValidationErrorContext, + ValidationErrorsProvider, +} from 'components/admin/forms/ValidationErrors'; + +import ManageVariableToPropertyMappings from './ManageVariableToPropertyMappings'; +import { + CaseType, + ConfidentialityLevel, + DocumentType, + MedewerkerRoltype, + ObjectType, + ObjectTypeVersion, + OrganisationRSIN, + ZGWAPIGroup, +} from './fields'; +import {filterErrors} from './utils'; + +const ZGWFormFields = ({name, apiGroupChoices, confidentialityLevelChoices}) => { const intl = useIntl(); - const validationErrors = useContext(ValidationErrorContext); - const { - zgwApiGroup = '', - zaakVertrouwelijkheidaanduiding = '', - zaaktype = '', - informatieobjecttype = '', - organisatieRsin = '', - medewerkerRoltype = '', - objecttype = '', - objecttypeVersion = '', - contentJson = '', - } = formData; + values: { + zaaktype, + informatieobjecttype, + medewerkerRoltype, + propertyMappings = [], + objecttype, + objecttypeVersion, + contentJson, + }, + } = useFormikContext(); + const validationErrors = useContext(ValidationErrorContext); + const relevantErrors = filterErrors(name, validationErrors); - const onFieldChange = event => { - const {name, value} = event.target; - const updatedFormData = produce(formData, draft => { - draft[name] = value; - }); - onChange(updatedFormData); - }; + const hasAnyFieldConfigured = + [ + zaaktype, + informatieobjecttype, + medewerkerRoltype, + objecttype, + objecttypeVersion, + contentJson, + ].some(v => !!v) || propertyMappings.length > 0; - const buildErrorsComponent = field => { - const rawErrors = getFieldErrors(name, index, validationErrors, field); - return rawErrors ? getErrorMarkup(rawErrors) : null; - }; + const numCasePropertyErrors = filterErrors(`${name}.propertyMappings`, validationErrors).length; + const numBaseErrors = relevantErrors.length - numCasePropertyErrors; return ( - - - - - - - - - - - - - - - - - - -