Merge pull request #3917 from open-formulieren/feature/3688-objects-a…

…pi-conf-editor [#3688] Add implementation of the Objects API mapping editor
open-formulieren · Mar 8, 2024 · 0ab225a · 0ab225a
2 parents f4d3748 + 11e486e
commit 0ab225a
Show file tree

Hide file tree

Showing 26 changed files with 807 additions and 184 deletions.
diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json
@@ -391,6 +391,12 @@
       "value": "CSS class"
     }
   ],
+  "3z1hhJ": [
+    {
+      "type": 0,
+      "value": "Toggle JSON Schema"
+    }
+  ],
   "4/cCvG": [
     {
       "type": 0,
@@ -723,6 +729,12 @@
       "value": "Maximum date"
     }
   ],
+  "7Vx5It": [
+    {
+      "type": 0,
+      "value": "No compatible registration backend configured."
+    }
+  ],
   "7X6yT4": [
     {
       "type": 0,
@@ -1331,6 +1343,18 @@
       "value": "The values that can be picked for this field. Values are the text that is submitted with the form data. Labels are the text next to radio buttons, checkboxes and options in dropdowns."
     }
   ],
+  "DRidde": [
+    {
+      "type": 0,
+      "value": "Could not retrieve the decision definitions IDs/versions. Is the selected DMN plugin running and properly configured?"
+    }
+  ],
+  "DaxIUG": [
+    {
+      "type": 0,
+      "value": "Variable key"
+    }
+  ],
   "DcI1VF": [
     {
       "type": 0,
@@ -1847,16 +1871,16 @@
       "value": "The data entered in this component will be removed in accordance with the privacy settings."
     }
   ],
-  "JN1BvY": [
+  "JRGs/Q": [
     {
       "type": 0,
-      "value": "Add another"
+      "value": "Expand/collapse JsonLogic"
     }
   ],
-  "JRGs/Q": [
+  "JXcHQ2": [
     {
       "type": 0,
-      "value": "Expand/collapse JsonLogic"
+      "value": "Not yet configured"
     }
   ],
   "JZRX+C": [
@@ -3329,6 +3353,12 @@
       "value": "Authorised person"
     }
   ],
+  "cK2O6E": [
+    {
+      "type": 0,
+      "value": "Something went wrong when fetching the available target paths"
+    }
+  ],
   "cQvPLh": [
     {
       "type": 0,
@@ -3955,6 +3985,12 @@
       "value": "Values"
     }
   ],
+  "j5KpZP": [
+    {
+      "type": 0,
+      "value": "loading..."
+    }
+  ],
   "j7rEgn": [
     {
       "type": 0,
@@ -4669,6 +4705,12 @@
       "value": "'Add another' text"
     }
   ],
+  "rkzjK3": [
+    {
+      "type": 0,
+      "value": "JSON Schema target"
+    }
+  ],
   "rzGuvz": [
     {
       "type": 0,
@@ -5095,6 +5137,34 @@
       "value": "Objects API - objecttype"
     }
   ],
+  "y4U0aW": [
+    {
+      "options": {
+        "other": {
+          "value": [
+            {
+              "type": 1,
+              "value": "path"
+            }
+          ]
+        },
+        "true": {
+          "value": [
+            {
+              "type": 1,
+              "value": "path"
+            },
+            {
+              "type": 0,
+              "value": " (required)"
+            }
+          ]
+        }
+      },
+      "type": 5,
+      "value": "required"
+    }
+  ],
   "yCogwi": [
     {
       "type": 0,

diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json
@@ -391,6 +391,12 @@
       "value": "Weergavestijl"
     }
   ],
+  "3z1hhJ": [
+    {
+      "type": 0,
+      "value": "Toggle JSON Schema"
+    }
+  ],
   "4/cCvG": [
     {
       "type": 0,
@@ -723,6 +729,12 @@
       "value": "Maximale datum"
     }
   ],
+  "7Vx5It": [
+    {
+      "type": 0,
+      "value": "No compatible registration backend configured."
+    }
+  ],
   "7X6yT4": [
     {
       "type": 0,
@@ -1335,6 +1347,18 @@
       "value": "De mogelijke keuzeopties voor dit veld. De waarden worden in de formuliergegevens opgeslagen. De labels zijn de teksten die aan de gebruiker getoond worden."
     }
   ],
+  "DRidde": [
+    {
+      "type": 0,
+      "value": "Could not retrieve the decision definitions IDs/versions. Is the selected DMN plugin running and properly configured?"
+    }
+  ],
+  "DaxIUG": [
+    {
+      "type": 0,
+      "value": "Variable key"
+    }
+  ],
   "DcI1VF": [
     {
       "type": 0,
@@ -1851,16 +1875,16 @@
       "value": "Gegevens opgevoerd in dit component worden geschoond volgens de privacy-instellingen."
     }
   ],
-  "JN1BvY": [
+  "JRGs/Q": [
     {
       "type": 0,
-      "value": "Nog één toevoegen"
+      "value": "Klap JsonLogic-expressie in/uit"
     }
   ],
-  "JRGs/Q": [
+  "JXcHQ2": [
     {
       "type": 0,
-      "value": "Klap JsonLogic-expressie in/uit"
+      "value": "Not yet configured"
     }
   ],
   "JZRX+C": [
@@ -3330,6 +3354,12 @@
       "value": "Gemachtigde"
     }
   ],
+  "cK2O6E": [
+    {
+      "type": 0,
+      "value": "Something went wrong when fetching the available target paths"
+    }
+  ],
   "cQvPLh": [
     {
       "type": 0,
@@ -3931,7 +3961,7 @@
   "iq0ppL": [
     {
       "type": 0,
-      "value": "[EXPERIMENTEEL] Gebruik de nieuwe afspraakformulierenimplementatie."
+      "value": "Bij het inschakelen van de afsprakenmodus doorloopt de gebruiker een vaste flow."
     }
   ],
   "iqAbXt": [
@@ -3956,6 +3986,12 @@
       "value": "Waarden"
     }
   ],
+  "j5KpZP": [
+    {
+      "type": 0,
+      "value": "loading..."
+    }
+  ],
   "j7rEgn": [
     {
       "type": 0,
@@ -4671,6 +4707,12 @@
       "value": "'Groep toevoegen'-tekst"
     }
   ],
+  "rkzjK3": [
+    {
+      "type": 0,
+      "value": "JSON Schema target"
+    }
+  ],
   "rzGuvz": [
     {
       "type": 0,
@@ -5097,6 +5139,34 @@
       "value": "Objecten API - objecttype"
     }
   ],
+  "y4U0aW": [
+    {
+      "options": {
+        "other": {
+          "value": [
+            {
+              "type": 1,
+              "value": "path"
+            }
+          ]
+        },
+        "true": {
+          "value": [
+            {
+              "type": 1,
+              "value": "path"
+            },
+            {
+              "type": 0,
+              "value": " (required)"
+            }
+          ]
+        }
+      },
+      "type": 5,
+      "value": "required"
+    }
+  ],
   "yCogwi": [
     {
       "type": 0,

diff --git a/src/openforms/js/components/admin/form_design/Context.js b/src/openforms/js/components/admin/form_design/Context.js
@@ -7,7 +7,7 @@ const FeatureFlagsContext = React.createContext({});
 FeatureFlagsContext.displayName = 'FeatureFlagsContext';
 
 const FormContext = React.createContext({
-  form: {url: ''},
+  form: {url: '', uuid: ''},
   components: {},
   formSteps: [],
   formDefinitions: [],

diff --git a/src/openforms/js/components/admin/form_design/constants.js b/src/openforms/js/components/admin/form_design/constants.js
@@ -3,6 +3,8 @@ export const FORM_DEFINITIONS_ENDPOINT = '/api/v2/form-definitions';
 export const REGISTRATION_BACKENDS_ENDPOINT = '/api/v2/registration/plugins';
 export const REGISTRATION_OBJECTTYPES_ENDPOINT =
   '/api/v2/registration/plugins/objects-api/object-types';
+export const REGISTRATION_OBJECTS_TARGET_PATHS =
+  '/api/v2/registration/plugins/objects-api/target-paths';
 export const AUTH_PLUGINS_ENDPOINT = '/api/v2/authentication/plugins';
 export const PREFILL_PLUGINS_ENDPOINT = '/api/v2/prefill/plugins';
 export const DMN_PLUGINS_ENDPOINT = '/api/v2/dmn/plugins';

diff --git a/src/openforms/js/components/admin/form_design/form-creation-form.js b/src/openforms/js/components/admin/form_design/form-creation-form.js
@@ -1214,7 +1214,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
 
       <FormContext.Provider
         value={{
-          form: {url: state.form.url},
+          form: {url: state.form.url, uuid: state.form.uuid},
           components: availableComponents,
           formSteps: state.formSteps,
           formDefinitions: state.formDefinitions,
@@ -1435,6 +1435,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
                     payload: {key, propertyName, propertyValue},
                   })
                 }
+                onFieldChange={onFieldChange}
               />
             </TabPanel>
           )}

diff --git a/src/openforms/js/components/admin/form_design/registrations/index.js b/src/openforms/js/components/admin/form_design/registrations/index.js
@@ -4,15 +4,16 @@ import CamundaOptionsForm from './camunda';
 import {onCamundaStepEdit, onZGWStepEdit} from './handlers';
 import ObjectsApiOptionsForm from './objectsapi/ObjectsApiOptionsForm';
 import ObjectsApiSummaryHandler from './objectsapi/ObjectsApiSummaryHandler';
+import ObjectsApiVariableConfigurationEditor from './objectsapi/ObjectsApiVariableConfigurationEditor';
 import ZGWOptionsForm from './zgw';
 
 /**
  * @typedef {{
  *   form?: React.FC,
  *   uiSchema?: Object,
  *   configurableFromVariables?: boolean | (options: Object) => boolean,
- *   formVariableConfigured: (variableKey: string, options: Object) => boolean,
  *   summaryHandler?: React.FC
+ *   variableConfigurationEditor?: React.FC
  * }} BackendInfo
  * A map of backend ID to components for the (advanced) option forms.
  * @type {{[key: string]: BackendInfo}}
@@ -26,9 +27,8 @@ export const BACKEND_OPTIONS_FORMS = {
     form: ObjectsApiOptionsForm,
     onStepEdit: null,
     configurableFromVariables: options => options.version === 2,
-    formVariableConfigured: (variableKey, options) =>
-      options.variablesMapping.some(mapping => mapping.variableKey === variableKey),
     summaryHandler: ObjectsApiSummaryHandler,
+    variableConfigurationEditor: ObjectsApiVariableConfigurationEditor,
   },
   email: {
     uiSchema: {

diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectTypeSelect.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectTypeSelect.js
@@ -1,10 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 
-import Select from 'components/admin/forms/Select';
-
-// TODO: properly translate this
-const LOADING_OPTION = [['...', 'loading...']];
+import Select, {LOADING_OPTION} from 'components/admin/forms/Select';
 
 const ObjectTypeSelect = ({availableObjectTypesState, objecttype, onChange}) => {
   const {loading, availableObjecttypes, error} = availableObjectTypesState;

diff --git a/...forms/js/components/admin/form_design/registrations/objectsapi/ObjectTypeVersionSelect.js b/...forms/js/components/admin/form_design/registrations/objectsapi/ObjectTypeVersionSelect.js
@@ -2,12 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import useAsync from 'react-use/esm/useAsync';
 
-import Select from 'components/admin/forms/Select';
+import Select, {LOADING_OPTION} from 'components/admin/forms/Select';
 import {get} from 'utils/fetch';
 
-// TODO: properly translate this
-const LOADING_OPTION = [['...', 'loading...']];
-
 const getObjecttypeVersionsEndpoint = objecttype => {
   const bits = [
     '/api/v2/registration/plugins/objects-api/object-types',