👌 [#5012] Process PR feedback

* Improve UX by introducing a (collapsed) fieldset which contains a table of fixed variables, and a variable selection box to add additional variables.
* Fix imports
* Add TODO: currently, this is tricky because the form registration options are saved before the (user defined) form variables are persisted. If this field is limited to static/registration variables, however, it will be possible as they are defined in the code. At this point in time, though, not sure how strict we should make this.
* Fix help texts of JSON dump option fields. They are sentences that should end with a period

src/openforms/forms/json_schema.py

@@ -1,10 +1,10 @@
 from typing import Iterator, Sequence
 
+from openforms.plugins.registry import BaseRegistry
 from openforms.typing import JSONObject
+from openforms.variables.base import BaseStaticVariable
 from openforms.variables.service import get_static_variables
 
-from ..plugins.registry import BaseRegistry
-from ..variables.base import BaseStaticVariable
 from .models import Form, FormVariable
 
 

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -574,6 +574,60 @@ export default {
           },
         ],
       },
+      {
+        pluginIdentifier: 'json_dump',
+        pluginVerboseName: 'JSON Dump',
+        pluginVariables: [
+          {
+            form: null,
+            formDefinition: null,
+            name: 'Public reference',
+            key: 'public_reference',
+            source: '',
+            serviceFetchConfiguration: null,
+            prefillPlugin: '',
+            prefillAttribute: '',
+            prefillIdentifierRole: 'main',
+            prefillOptions: {},
+            dataType: 'string',
+            dataFormat: '',
+            isSensitiveData: false,
+            initialValue: null,
+          },
+          {
+            form: null,
+            formDefinition: null,
+            name: 'Form version',
+            key: 'form_version',
+            source: '',
+            serviceFetchConfiguration: null,
+            prefillPlugin: '',
+            prefillAttribute: '',
+            prefillIdentifierRole: 'main',
+            prefillOptions: {},
+            dataType: 'string',
+            dataFormat: '',
+            isSensitiveData: false,
+            initialValue: null,
+          },
+          {
+            form: null,
+            formDefinition: null,
+            name: 'Registration timestamp',
+            key: 'registration_timestamp',
+            source: '',
+            serviceFetchConfiguration: null,
+            prefillPlugin: '',
+            prefillAttribute: '',
+            prefillIdentifierRole: 'main',
+            prefillOptions: {},
+            dataType: 'datetime',
+            dataFormat: '',
+            isSensitiveData: false,
+            initialValue: null,
+          },
+        ],
+      },
     ],
   },
   parameters: {
@@ -1032,7 +1086,7 @@ export const JSONDump = {
           service: 1,
           path: 'example/endpoint',
           variables: [],
-          fixedMetadataVariables: ['form_name'],
+          fixedMetadataVariables: ['form_name', 'form_version', 'public_reference'],
           additionalMetadataVariables: ['auth_bsn'],
         },
       },

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

@@ -11,7 +11,13 @@ import {
 } from 'components/admin/forms/ValidationErrors';
 import {getChoicesFromSchema} from 'utils/json-schema';
 
-import {MetadataVariables, Path, ServiceSelect, Variables} from './fields';
+import {
+  AdditionalMetadataVariables,
+  FixedMetadataVariables,
+  Path,
+  ServiceSelect,
+  Variables,
+} from './fields';
 
 const JSONDumpOptionsForm = ({name, label, schema, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
@@ -50,7 +56,20 @@ const JSONDumpOptionsForm = ({name, label, schema, formData, onChange}) => {
           <ServiceSelect options={serviceOptions} />
           <Path />
           <Variables />
-          <MetadataVariables />
+        </Fieldset>
+
+        <Fieldset
+          title={
+            <FormattedMessage
+              description="Metadata variables fieldset title"
+              defaultMessage="Metadata variables"
+            />
+          }
+          collapsible
+          initialCollapsed
+        >
+          <FixedMetadataVariables />
+          <AdditionalMetadataVariables />
         </Fieldset>
       </ValidationErrorsProvider>
     </ModalOptionsConfiguration>

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

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'json_dump';

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/MetadataVariables.js

@@ -1,14 +1,86 @@
 import {useField} from 'formik';
-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 VariableSelection from 'components/admin/forms/VariableSelection';
+import {ChangelistColumn, ChangelistTable} from 'components/admin/tables';
 
-const MetadataVariables = () => {
+import {PLUGIN_ID} from '../constants';
+
+const FixedMetadataVariables = () => {
+  const [, {value}] = useField('fixedMetadataVariables');
+  const {staticVariables, registrationPluginsVariables} = useContext(FormContext);
+
+  // Create table data
+  const jsonDumpVariables = registrationPluginsVariables.find(
+    v => v.pluginIdentifier === PLUGIN_ID
+  ).pluginVariables;
+  const relevantVariables = [
+    ...staticVariables.map(v => ({
+      ...v,
+      source: (
+        <FormattedMessage
+          defaultMessage="Static"
+          description="'Static' source label for fixed metadata variables table"
+        />
+      ),
+    })),
+    ...jsonDumpVariables.map(v => ({
+      ...v,
+      source: (
+        <FormattedMessage
+          defaultMessage="Registration"
+          description="'Registration' source label for fixed metadata variables table"
+        />
+      ),
+    })),
+  ].filter(v => value.includes(v.key));
+
+  return (
+    <FormRow>
+      <Field
+        name="fixedMetadataVariables"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'fixedMetadataVariables' label"
+            defaultMessage="Fixed"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="JSON registration options 'fixedMetadataVariables' helpText"
+            defaultMessage="Variables that are already included."
+          />
+        }
+      >
+        <ChangelistTable data={relevantVariables} linkColumn={null}>
+          <ChangelistColumn objProp="name">
+            <FormattedMessage defaultMessage="Name" description="Fixed metadata table name title" />
+          </ChangelistColumn>
+          <ChangelistColumn objProp="key">
+            <FormattedMessage
+              defaultMessage="Key"
+              description="Fixed metadata table name key title"
+            />
+          </ChangelistColumn>
+          <ChangelistColumn objProp="source">
+            <FormattedMessage
+              defaultMessage="Source"
+              description="Fixed metadata table source title"
+            />
+          </ChangelistColumn>
+        </ChangelistTable>
+      </Field>
+    </FormRow>
+  );
+};
+
+const AdditionalMetadataVariables = () => {
   const [fieldProps] = useField('additionalMetadataVariables');
   const [, {value}] = useField('fixedMetadataVariables');
 
@@ -19,14 +91,13 @@ const MetadataVariables = () => {
         label={
           <FormattedMessage
             description="JSON registration options 'additionalMetadataVariables' label"
-            defaultMessage="Additional metadata variables"
+            defaultMessage="Additional"
           />
         }
         helpText={
           <FormattedMessage
             description="JSON registration options 'additionalMetadataVariables' helpText"
-            defaultMessage="Which additional variables to include in the metadata (the following are already included by default: {alreadyIncluded})"
-            values={{alreadyIncluded: value.join(', ')}}
+            defaultMessage="Additional variables to include."
           />
         }
         noManageChildProps
@@ -45,4 +116,4 @@ const MetadataVariables = () => {
   );
 };
 
-export default MetadataVariables;
+export {AdditionalMetadataVariables, FixedMetadataVariables};

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Path.js

@@ -21,7 +21,7 @@ const Path = () => {
         helpText={
           <FormattedMessage
             description="JSON registration options 'path' helpText"
-            defaultMessage="Path relative to the Service API root"
+            defaultMessage="Path relative to the Service API root."
           />
         }
       >

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/ServiceSelect.js

@@ -20,7 +20,7 @@ const ServiceSelect = ({options}) => {
         helpText={
           <FormattedMessage
             description="JSON registration options 'serviceSelect' helpText"
-            defaultMessage="Which service to send the data to"
+            defaultMessage="The service to send the data to."
           />
         }
         required

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js

@@ -22,7 +22,7 @@ const Variables = () => {
         helpText={
           <FormattedMessage
             description="JSON registration options 'variables' helpText"
-            defaultMessage="Which variables to include in the data to be sent"
+            defaultMessage="Variables to include in the data to be sent."
           />
         }
         required

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/index.js

@@ -1,6 +1,6 @@
-import MetadataVariables from './MetadataVariables';
+import {AdditionalMetadataVariables, FixedMetadataVariables} from './MetadataVariables';
 import Path from './Path';
 import ServiceSelect from './ServiceSelect';
 import Variables from './Variables';
 
-export {MetadataVariables, Path, ServiceSelect, Variables};
+export {AdditionalMetadataVariables, FixedMetadataVariables, Path, ServiceSelect, Variables};

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

@@ -47,6 +47,10 @@ class JSONDumpOptionsSerializer(JsonSchemaSerializerMixin, serializers.Serialize
         required=True,
         min_length=1,
     )
+    # Note: this field cannot be updated in the frontend, and is used as read-only.
+    #  Adding a read_only=True argument to it, though, will make it not available in the
+    #  backend options of the plugin, as they are not added to the validated_data
+    #  property of the serializer.
     fixed_metadata_variables = serializers.ListField(
         child=FormioVariableKeyField(),
         default=[
@@ -60,14 +64,16 @@ class JSONDumpOptionsSerializer(JsonSchemaSerializerMixin, serializers.Serialize
         label=_("Fixed metadata variable key list"),
         help_text=_(
             "A list of required variables to use in the metadata. These include "
-            "the registration variables of the JSON dump plugin"
+            "the registration variables of the JSON dump plugin."
         ),
         required=False,
     )
+    # TODO: this list should be validated against the available FormVariable records
+    #  that exist for the form.
     additional_metadata_variables = serializers.ListField(
         child=FormioVariableKeyField(),
         label=_("Additional metadata variable key list"),
-        help_text=_("A list of additional variables to use in the metadata"),
+        help_text=_("A list of additional variables to use in the metadata."),
         required=False,
         default=list,
     )