[#5074] Started with transforming the data for the Objects API in the variables tab

Author: vaszig

src/openforms/api/utils.py

@@ -23,6 +23,13 @@ def underscore_to_camel(input_: str | int) -> str:
     return re.sub(camelize_re, _underscore_to_camel, input_)
 
 
+def camel_to_underscore(input: str) -> str:
+    """
+    Convert a string from camelCase to snake_case
+    """
+    return re.sub(r"(?<!^)(?=[A-Z])", "_", input).lower()
+
+
 def get_from_serializer_data_or_instance(
     field: str, data: Mapping, serializer: Serializer
 ) -> Any:

src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js

@@ -5,16 +5,15 @@ import {FormattedMessage} from 'react-intl';
 import {useAsync, useToggle} from 'react-use';
 
 import {APIContext} from 'components/admin/form_design/Context';
-import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
 import Field from 'components/admin/forms/Field';
 import Fieldset from 'components/admin/forms/Fieldset';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox} from 'components/admin/forms/Inputs';
 import {TargetPathSelect} from 'components/admin/forms/objects_api';
 import ErrorMessage from 'components/errors/ErrorMessage';
-import {post} from 'utils/fetch';
 
 import {MappedVariableTargetPathSelect} from './GenericObjectsApiVariableConfigurationEditor';
+import {fetchTargetPaths} from './utils';
 
 const ADDRESSNL_NESTED_PROPERTIES = {
   postcode: {type: 'string'},
@@ -25,27 +24,6 @@ const ADDRESSNL_NESTED_PROPERTIES = {
   streetName: {type: 'string'},
 };
 
-const fetchTargetPaths = async (
-  csrftoken,
-  objectsApiGroup,
-  objecttype,
-  objecttypeVersion,
-  schemaType
-) => {
-  const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
-    objectsApiGroup,
-    objecttype,
-    objecttypeVersion,
-    variableJsonSchema: schemaType,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Error when loading target paths for type: ${schemaType}`);
-  }
-
-  return response.data;
-};
-
 export const AddressNlEditor = ({
   variable,
   components,

src/openforms/js/components/admin/form_design/registrations/objectsapi/GenericObjectsApiVariableConfigurationEditor.js

@@ -6,15 +6,14 @@ import {FormattedMessage} from 'react-intl';
 import {useAsync, useToggle} from 'react-use';
 
 import {APIContext} from 'components/admin/form_design/Context';
-import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox} from 'components/admin/forms/Inputs';
 import {TargetPathSelect} from 'components/admin/forms/objects_api';
 import ErrorMessage from 'components/errors/ErrorMessage';
-import {post} from 'utils/fetch';
 
 import {asJsonSchema} from './utils';
+import {CUSTOM_COMPONENTS_SCHEMA, fetchTargetPaths} from './utils';
 
 /**
  * Hack-ish way to manage the variablesMapping state for one particular entry.
@@ -83,6 +82,7 @@ export const GenericEditor = ({
   components,
   namePrefix,
   isGeometry,
+  transformToList,
   index,
   mappedVariable,
   objecttype,
@@ -91,29 +91,34 @@ export const GenericEditor = ({
 }) => {
   const {csrftoken} = useContext(APIContext);
   const [jsonSchemaVisible, toggleJsonSchemaVisible] = useToggle(false);
-  const {setFieldValue} = useFormikContext();
+  const {values, setFieldValue} = useFormikContext();
 
+  const componentType = components[variable?.key]?.type;
+
+  // Load all the possible target paths in parallel depending on if the data should be
+  // transformed or not
   const {
     loading,
     value: targetPaths,
     error,
-  } = useAsync(
-    async () => {
-      const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
-        objectsApiGroup,
-        objecttype,
-        objecttypeVersion,
-        variableJsonSchema: asJsonSchema(variable, components),
-      });
-      if (!response.ok) {
-        throw new Error('Error when loading target paths');
-      }
+  } = useAsync(async () => {
+    const promises = transformToList?.[variable.key]
+      ? CUSTOM_COMPONENTS_SCHEMA[componentType].map(type =>
+          fetchTargetPaths(csrftoken, objectsApiGroup, objecttype, objecttypeVersion, type)
+        )
+      : [
+          fetchTargetPaths(
+            csrftoken,
+            objectsApiGroup,
+            objecttype,
+            objecttypeVersion,
+            asJsonSchema(variable, components)
+          ),
+        ];
 
-      return response.data;
-    },
-    // Load only once:
-    []
-  );
+    const results = await Promise.all(promises);
+    return results.flat(1);
+  }, [transformToList?.[variable.key]]);
 
   const getTargetPath = pathSegment => targetPaths.find(t => isEqual(t.targetPath, pathSegment));
 
@@ -153,6 +158,29 @@ export const GenericEditor = ({
           />
         </Field>
       </FormRow>
+      {componentType in CUSTOM_COMPONENTS_SCHEMA && (
+        <FormRow>
+          <Field name={`transformToList.${variable.key}`}>
+            <Checkbox
+              name="transformToListCheckbox"
+              label={
+                <FormattedMessage
+                  defaultMessage="Transform to list"
+                  description="'Transform to list' checkbox label"
+                />
+              }
+              helpText={
+                <FormattedMessage
+                  description="'Transform to list' checkbox help text"
+                  defaultMessage="Whether to transform the data of the component to a list or not (depends on the component type)"
+                />
+              }
+              checked={values.transformToList?.[variable.key] || false}
+              onChange={e => setFieldValue(`transformToList.${variable.key}`, e.target.checked)}
+            />
+          </Field>
+        </FormRow>
+      )}
       <FormRow>
         <Field
           name={`${namePrefix}.targetPath`}

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiVariableConfigurationEditor.js

@@ -45,6 +45,7 @@ const ObjectsApiVariableConfigurationEditor = ({variable}) => {
     objecttype,
     objecttypeVersion,
     geometryVariableKey,
+    transformToList,
     variablesMapping,
     version,
   } = backendOptions;
@@ -99,6 +100,7 @@ const ObjectsApiVariableConfigurationEditor = ({variable}) => {
           components={components}
           namePrefix={namePrefix}
           isGeometry={isGeometry}
+          transformToList={transformToList}
           index={index}
           mappedVariable={mappedVariable}
           objecttype={objecttype}

src/openforms/js/components/admin/form_design/registrations/objectsapi/utils.js

@@ -1,3 +1,6 @@
+import {REGISTRATION_OBJECTS_TARGET_PATHS} from 'components/admin/form_design/constants';
+import {post} from 'utils/fetch';
+
 const VARIABLE_TYPE_MAP = {
   boolean: 'boolean',
   int: 'integer',
@@ -13,6 +16,8 @@ const FORMAT_TYPE_MAP = {
   date: 'date',
 };
 
+const CUSTOM_COMPONENTS_SCHEMA = {selectboxes: [{type: 'array'}]};
+
 /**
  * Return a JSON Schema definition matching the provided variable.
  * @param {Object} variable - The current variable
@@ -57,4 +62,25 @@ const asJsonSchema = (variable, components) => {
   };
 };
 
-export {asJsonSchema};
+const fetchTargetPaths = async (
+  csrftoken,
+  objectsApiGroup,
+  objecttype,
+  objecttypeVersion,
+  schemaType
+) => {
+  const response = await post(REGISTRATION_OBJECTS_TARGET_PATHS, csrftoken, {
+    objectsApiGroup,
+    objecttype,
+    objecttypeVersion,
+    variableJsonSchema: schemaType,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error when loading target paths for type: ${schemaType}`);
+  }
+
+  return response.data;
+};
+
+export {asJsonSchema, fetchTargetPaths, CUSTOM_COMPONENTS_SCHEMA};

src/openforms/registrations/contrib/objects_api/config.py

@@ -256,6 +256,15 @@ class ObjectsAPIOptionsSerializer(JsonSchemaSerializerMixin, serializers.Seriali
         required=False,
         allow_blank=True,
     )
+    transform_to_list = JSONFieldWithSchema(
+        label=_("transform to list"),
+        default=dict,
+        required=False,
+        help_text=_(
+            "The components which need special handling concerning the shape of the data "
+            "and need to be transformed to list."
+        ),
+    )
 
     def validate(self, attrs: RegistrationOptions) -> RegistrationOptions:
         v1_only_fields = {

src/openforms/registrations/contrib/objects_api/handlers/v2.py

@@ -9,7 +9,7 @@
 
 from glom import Assign, Path, glom
 
-from openforms.api.utils import underscore_to_camel
+from openforms.api.utils import camel_to_underscore, underscore_to_camel
 from openforms.formio.service import FormioData
 from openforms.formio.typing import Component, EditGridComponent
 from openforms.formio.typing.vanilla import FileComponent
@@ -58,6 +58,7 @@ def process_mapped_variable(
     value: (
         JSONValue | date | datetime
     ),  # can't narrow it down yet, as the type depends on the component type
+    transform_to_list: JSONObject | None = None,
     component: Component | None = None,
     attachment_urls: dict[str, list[str]] | None = None,
 ) -> AssignmentSpec | Sequence[AssignmentSpec]:
@@ -73,6 +74,8 @@ def process_mapped_variable(
     :arg value: The raw value of the form variable for the submission being processed.
       The type/shape of the value depends on the variable/component data type being
       processed and even the component configuration (such as multiple True/False).
+    :arg transform_to_list: The component's transforma data options. Some of the components
+      need special handling concerning the shape of the data.
     :arg component: If the variable corresponds to a Formio component, the component
       definition is provided, otherwise ``None``.
     :arg attachment_urls: The registration plugin uploads attachments to a Documents API
@@ -139,6 +142,16 @@ def process_mapped_variable(
                 attachment_urls=attachment_urls,
                 key_prefix=variable_key,
             )
+        case {"type": "selectboxes"}:
+            assert isinstance(value, dict)
+            if (
+                transform_to_list
+                and (key := camel_to_underscore(variable_key)) in transform_to_list
+                and transform_to_list[key]
+            ):
+
+                value = [option for option, is_selected in value.items() if is_selected]
+
         # not a component or standard behaviour where no transformation is necessary
         case None | _:
             pass

src/openforms/registrations/contrib/objects_api/submission_registration.py

@@ -521,6 +521,7 @@ def get_record_data(
         urls_map = self.get_attachment_urls_by_key(submission)
 
         variables_mapping = options["variables_mapping"]
+        transform_to_list = options.get("transform_to_list")
 
         # collect all the assignments to be done to the object
         assignment_specs: list[AssignmentSpec] = []
@@ -571,6 +572,7 @@ def get_record_data(
                 value=value,
                 component=component,
                 attachment_urls=urls_map,
+                transform_to_list=transform_to_list,
             )
             if isinstance(assignment_spec, AssignmentSpec):
                 assignment_specs.append(assignment_spec)

src/openforms/registrations/contrib/objects_api/typing.py

@@ -3,6 +3,8 @@
 from typing import TYPE_CHECKING, Literal, NotRequired, Required, TypedDict
 from uuid import UUID
 
+from openforms.typing import JSONObject
+
 if TYPE_CHECKING:
     from .models import ObjectsAPIGroupConfig
 
@@ -70,6 +72,7 @@ class RegistrationOptionsV2(_BaseRegistrationOptions, total=False):
     version: Required[Literal[2]]
     variables_mapping: Required[list[ObjecttypeVariableMapping]]
     geometry_variable_key: str
+    transform_to_list: NotRequired[JSONObject]
 
 
 type RegistrationOptions = RegistrationOptionsV1 | RegistrationOptionsV2