✨ [#4908] Add checkbox to include variables from the variable table

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

@@ -1,7 +1,9 @@
 import CamundaOptionsForm from './camunda';
 import DemoOptionsForm from './demo';
 import EmailOptionsForm from './email';
-import JSONOptionsForm from './json';
+import JSONOptionsForm from './json/JSONOptionsForm';
+import JSONSummaryHandler from './json/JSONSummaryHandler';
+import JSONVariableConfigurationEditor from './json/JSONVariableConfigurationEditor';
 import MSGraphOptionsForm from './ms_graph';
 import ObjectsApiOptionsForm from './objectsapi/ObjectsApiOptionsForm';
 import ObjectsApiSummaryHandler from './objectsapi/ObjectsApiSummaryHandler';
@@ -47,7 +49,12 @@ export const BACKEND_OPTIONS_FORMS = {
     form: StufZDSOptionsForm,
   },
   'microsoft-graph': {form: MSGraphOptionsForm},
-  'json': {form: JSONOptionsForm},
+  'json': {
+    form: JSONOptionsForm,
+    configurableFromVariables: true,
+    summaryHandler: JSONSummaryHandler,
+    variableConfigurationEditor: JSONVariableConfigurationEditor,
+  },
   // demo plugins
   demo: {form: DemoOptionsForm},
   'failing-demo': {form: DemoOptionsForm},

src/openforms/js/components/admin/form_design/registrations/json/JSONSummaryHandler.js

@@ -0,0 +1,32 @@
+import {FormattedMessage} from 'react-intl';
+import React from 'react';
+
+const JSONSummaryHandler = ({variable, backendOptions}) => {
+
+  const isIncluded = backendOptions.formVariables.includes(variable.key);
+
+  if (isIncluded) {
+    return (
+      <FormattedMessage
+        description="JSON registration summary message"
+        defaultMessage="Included"
+      />
+    );
+  }
+  else {
+    return (
+      <FormattedMessage
+        description="JSON registration summary message"
+        defaultMessage="Not included"
+      />
+    );
+  }
+};
+
+
+// TODO-4098: ??
+JSONSummaryHandler.propTypes = {
+
+};
+
+export default JSONSummaryHandler;

src/openforms/js/components/admin/form_design/registrations/json/JSONVariableConfigurationEditor.js

@@ -0,0 +1,69 @@
+// TODO-4908: fix imports
+import {Checkbox} from 'components/admin/forms/Inputs';
+import Field from '../../../forms/Field';
+import {FormattedMessage} from 'react-intl';
+import FormRow from '../../../forms/FormRow';
+import React from 'react';
+import {useField, useFormikContext} from 'formik';
+import PropTypes from 'prop-types';
+
+
+const JSONVariableConfigurationEditor = ({variable}) => {
+  const [fieldProps, , fieldHelpers] = useField('formVariables');
+  const {setValue} = fieldHelpers;
+
+  const formVariables = fieldProps.value
+  const isIncluded = formVariables.includes(variable.key);
+
+  return (
+    <FormRow>
+      <Field name="includeVariable">
+        <Checkbox
+          name="includeVariableCheckbox"
+          label={
+            <FormattedMessage
+              description="'Include variable' checkbox label"
+              defaultMessage="Include variable"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              description="'Include variable' checkbox help text"
+              defaultMessage="Whether to include this variable in the data to be sent."
+            />
+          }
+          checked={isIncluded}
+          onChange={event => {
+            const formVariablesNew = formVariables.slice();
+            const index = formVariablesNew.indexOf(variable.key);
+            if (event.target.checked) {
+              // TODO-4908: remove this when testing is implemented
+              if (index !== -1) {throw new Error(
+                "This form variable is already on the list of " +
+                "form variables to include. This shouldn't happen"
+              );}
+              formVariablesNew.push(variable.key);
+            } else {
+              if (index === -1) {throw new Error(
+                "This form variable is not yet on the list of " +
+                "form variables to include. This shouldn't happen."
+              );}
+              formVariablesNew.splice(index, 1);
+            }
+            setValue(formVariablesNew);
+          }}
+        />
+      </Field>
+    </FormRow>
+  )
+}
+
+// TODO-4098: ???
+JSONVariableConfigurationEditor.propTypes = {
+  variable: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+
+export default JSONVariableConfigurationEditor