[#5074] Transform the data for the JSON dump in the variables tab

Author: vaszig

src/openforms/js/components/admin/form_design/registrations/json_dump/JSONDumpOptionsForm.js

@@ -58,6 +58,7 @@ const JSONDumpOptionsForm = ({name, label, schema, formData, onChange}) => {
         variables: [],
         fixedMetadataVariables: fixedMetadataVariables || [],
         additionalMetadataVariables: [],
+        transformToList: {},
         ...formData,
       }}
       onSubmit={values => onChange({formData: values})}

src/openforms/js/components/admin/form_design/registrations/json_dump/JSONDumpVariableConfigurationEditor.js

@@ -1,22 +1,32 @@
 import {useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {FormContext} from 'components/admin/form_design/Context';
 import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
 import {getVariableSource} from 'components/admin/form_design/variables/utils';
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox} from 'components/admin/forms/Inputs';
 
+import {CUSTOM_COMPONENTS_SCHEMA} from '../utils';
+
 const JSONDumpVariableConfigurationEditor = ({variable}) => {
   const {
-    values: {variables = [], additionalMetadataVariables = [], fixedMetadataVariables = []},
+    values: {
+      variables = [],
+      additionalMetadataVariables = [],
+      fixedMetadataVariables = [],
+      transformToList = {},
+    },
     setFieldValue,
   } = useFormikContext();
+  const {components} = useContext(FormContext);
   const isIncluded = variables.includes(variable.key);
   const isRequiredInMetadata = fixedMetadataVariables.includes(variable.key);
   const isInAdditionalMetadata = additionalMetadataVariables.includes(variable.key);
+  const componentType = components[variable?.key]?.type;
 
   return (
     <>
@@ -78,6 +88,30 @@ const JSONDumpVariableConfigurationEditor = ({variable}) => {
           />
         </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={transformToList?.[variable.key] || false}
+              onChange={e => setFieldValue(`transformToList.${variable.key}`, e.target.checked)}
+            />
+          </Field>
+        </FormRow>
+      )}
     </>
   );
 };

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

@@ -12,8 +12,9 @@ import {Checkbox} from 'components/admin/forms/Inputs';
 import {TargetPathSelect} from 'components/admin/forms/objects_api';
 import ErrorMessage from 'components/errors/ErrorMessage';
 
+import {CUSTOM_COMPONENTS_SCHEMA} from '../utils';
 import {asJsonSchema} from './utils';
-import {CUSTOM_COMPONENTS_SCHEMA, fetchTargetPaths} from './utils';
+import {fetchTargetPaths} from './utils';
 
 /**
  * Hack-ish way to manage the variablesMapping state for one particular entry.

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

@@ -16,8 +16,6 @@ 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
@@ -83,4 +81,4 @@ const fetchTargetPaths = async (
   return response.data;
 };
 
-export {asJsonSchema, fetchTargetPaths, CUSTOM_COMPONENTS_SCHEMA};
+export {asJsonSchema, fetchTargetPaths};

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

@@ -0,0 +1,3 @@
+const CUSTOM_COMPONENTS_SCHEMA = {selectboxes: [{type: 'array'}]};
+
+export {CUSTOM_COMPONENTS_SCHEMA};

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

@@ -1,4 +1,4 @@
-from typing import TypedDict
+from typing import TypedDict, NotRequired
 
 from django.core.exceptions import ValidationError
 from django.utils.translation import gettext_lazy as _
@@ -10,6 +10,8 @@
 from openforms.api.fields import PrimaryKeyRelatedAsChoicesField
 from openforms.formio.api.fields import FormioVariableKeyField
 from openforms.utils.mixins import JsonSchemaSerializerMixin
+from openforms.api.fields import JSONFieldWithSchema
+from openforms.typing import JSONObject
 
 
 def validate_path(v: str) -> None:
@@ -70,6 +72,15 @@ class JSONDumpOptionsSerializer(JsonSchemaSerializerMixin, serializers.Serialize
         required=False,
         default=list,
     )
+    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 a list."
+        ),
+    )
 
 
 class JSONDumpOptions(TypedDict):
@@ -85,3 +96,4 @@ class JSONDumpOptions(TypedDict):
     variables: list[str]
     fixed_metadata_variables: list[str]
     additional_metadata_variables: list[str]
+    transform_to_list: NotRequired[JSONObject]

src/openforms/registrations/contrib/json_dump/plugin.py

@@ -33,6 +33,7 @@
 from ...registry import register  # openforms.registrations.registry
 from .config import JSONDumpOptions, JSONDumpOptionsSerializer
 from .registration_variables import register as variables_registry
+from openforms.api.utils import camel_to_underscore
 
 
 @register("json_dump")
@@ -65,7 +66,8 @@ def register_submission(
             if key in options["variables"]
         }
         values_schema = generate_json_schema(submission.form, options["variables"])
-        post_process(values, values_schema, submission)
+        transform_to_list = options.get("transform_to_list")
+        post_process(values, values_schema, submission, transform_to_list)
 
         # Metadata
         # Note: as the metadata contains only static variables no post-processing is
@@ -114,7 +116,10 @@ def get_variables(self) -> list[FormVariable]:  # pragma: no cover
 
 
 def post_process(
-    values: JSONObject, schema: JSONObject, submission: Submission
+    values: JSONObject,
+    schema: JSONObject,
+    submission: Submission,
+    transform_to_list: JSONObject | None = None,
 ) -> None:
     """Post-process the values and schema.
 
@@ -170,7 +175,12 @@ def post_process(
         assert component is not None
 
         process_component(
-            component, values, schema, attachments_dict, configuration_wrapper
+            component,
+            values,
+            schema,
+            attachments_dict,
+            configuration_wrapper,
+            transform_to_list=transform_to_list,
         )
 
 
@@ -181,6 +191,7 @@ def process_component(
     attachments: dict[str, list[SubmissionFileAttachment]],
     configuration_wrapper,
     key_prefix: str = "",
+    transform_to_list: JSONObject | None = None,
 ) -> None:
     """Process a component.
 
@@ -264,6 +275,18 @@ def process_component(
             if not values[key]:
                 schema["properties"][key]["required"] = []  # type: ignore
 
+            if (
+                transform_to_list
+                and (key_to_transform := camel_to_underscore(key)) in transform_to_list
+                and transform_to_list[key_to_transform]
+                and values[key]
+            ):
+                schema["properties"][key]["type"] = "array"  # type: ignore
+
+                values[key] = [
+                    option for option, is_selected in values[key].items() if is_selected
+                ]
+
         case {"type": "editgrid"}:
             # Note: the schema actually only needs to be processed once for each child
             # component, but will be processed for each submitted repeating group entry