✨ [#326] -- persist mapped process variables to backend

src/openforms/js/compiled-lang/en.json

@@ -735,6 +735,12 @@
       "value": "All Submissions Removal Limit"
     }
   ],
+  "V21YkS": [
+    {
+      "type": 0,
+      "value": "Confirm"
+    }
+  ],
   "VMMOA0": [
     {
       "type": 0,

src/openforms/js/compiled-lang/nl.json

@@ -739,6 +739,12 @@
       "value": "Bewaartermijn van inzendingen"
     }
   ],
+  "V21YkS": [
+    {
+      "type": 0,
+      "value": "Confirm"
+    }
+  ],
   "VMMOA0": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/registrations/camunda/CamundaOptionsForm.js

@@ -57,6 +57,11 @@ CamundaOptionsForm.propTypes = {
     formData: PropTypes.shape({ // matches the backend serializer!
         processDefinition: PropTypes.string,
         processDefinitionVersion: PropTypes.number,
+        processVariables: PropTypes.arrayOf(PropTypes.shape({
+            enabled: PropTypes.bool.isRequired,
+            componentKey: PropTypes.string.isRequired,
+            alias: PropTypes.string.isRequired,
+        })),
     }),
     onChange: PropTypes.func.isRequired,
 };

src/openforms/js/components/admin/form_design/registrations/camunda/FormFields.js

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {FormattedMessage, useIntl} from 'react-intl';
-import {useImmerReducer} from 'use-immer';
+import produce from 'immer';
 
-import ActionButton from '../../../forms/ActionButton';
+import ActionButton, {SubmitAction} from '../../../forms/ActionButton';
 import Select from '../../../forms/Select';
+import SubmitRow from '../../../forms/SubmitRow';
 import FormModal from '../../../FormModal';
 import {CustomFieldTemplate} from '../../../RJSFWrapper';
 import SelectProcessVariables from './SelectProcessVariables';
@@ -21,46 +22,12 @@ const Wrapper = ({children}) => (
     </form>
 );
 
-
-const initialState = {
-    modalOpen: true,
-    processVariables: [],
-};
-
-const reducer = (draft, action) => {
-    switch(action.type) {
-        case 'TOGGLE_PROCESS_VARS_MODAL': {
-            draft.modalOpen = !draft.modalOpen;
-            break;
-        }
-        case 'CLOSE_PROCESS_VARS_MODAL': {
-            draft.modalOpen = false;
-            break;
-        }
-        case 'MODIFY_PROCESS_VAR': {
-            const {index, event: {target: {name, value}}} = action.payload;
-            draft.processVariables[index][name] = value;
-            break;
-        }
-        case 'ADD_PROCESS_VAR': {
-            draft.processVariables.push({
-                enabled: true,
-                componentKey: '',
-                alias: '',
-            });
-            break;
-        }
-        case 'REMOVE_PROCESS_VAR': {
-            const {index} = action.payload;
-            draft.processVariables.splice(index, 1);
-            break;
-        }
-        default:
-            throw new Error(`Unknown action type: ${action.type}`);
-    }
+const EMPTY_PROCESS_VARIABLE = {
+    enabled: true,
+    componentKey: '',
+    alias: '',
 };
 
-
 const getProcessSelectionChoices = (processDefinitions, processDefinition) => {
     const processDefinitionChoices = Object.entries(processDefinitions).map(([processKey, versions]) => {
         // grab the first version name - it is theoretically possible the process name has changed in
@@ -83,11 +50,11 @@ const FormFields = ({processDefinitions, formData, onChange}) => {
     const {
         processDefinition='',
         processDefinitionVersion=null,
-        // TODO: read procssVariables from formData instead of local state once backend is updated
+        processVariables=[],
     } = formData;
 
     const intl = useIntl();
-    const [{modalOpen, processVariables}, dispatch] = useImmerReducer(reducer, initialState);
+    const [modalOpen, setModalOpen] = useState(false);
     const [processDefinitionChoices, versionChoices] = getProcessSelectionChoices(processDefinitions, processDefinition);
 
     const onFieldChange = (event) => {
@@ -115,6 +82,29 @@ const FormFields = ({processDefinitions, formData, onChange}) => {
         onChange(updatedFormData);
     };
 
+    const onAddProcessVariable = () => {
+        const nextFormData = produce(formData, draft => {
+            if (!draft.processVariables) draft.processVariables = [];
+            draft.processVariables.push(EMPTY_PROCESS_VARIABLE);
+        });
+        onChange(nextFormData);
+    };
+
+    const onChangeProcessVariable = (index, event) => {
+        const {name, value} = event.target;
+        const nextFormData = produce(formData, draft => {
+            draft.processVariables[index][name] = value;
+        });
+        onChange(nextFormData);
+    };
+
+    const onDeleteProcessVariable = (index) => {
+        const nextFormData = produce(formData, draft => {
+            draft.processVariables.splice(index, 1);
+        });
+        onChange(nextFormData);
+    };
+
     return (
         <>
             <Wrapper>
@@ -170,7 +160,7 @@ const FormFields = ({processDefinitions, formData, onChange}) => {
                             defaultMessage: 'Manage process variables'
                         })}
                         type="button"
-                        onClick={() => dispatch({type: 'TOGGLE_PROCESS_VARS_MODAL'})}
+                        onClick={() => setModalOpen(!modalOpen)}
                     />
                 </CustomFieldTemplate>
 
@@ -179,14 +169,23 @@ const FormFields = ({processDefinitions, formData, onChange}) => {
             <FormModal
                 isOpen={modalOpen}
                 title={<FormattedMessage description="Camunda process var selection modal title" defaultMessage="Manage process variables" />}
-                closeModal={() => dispatch({type: 'CLOSE_PROCESS_VARS_MODAL'})}
+                closeModal={() => setModalOpen(false)}
             >
                 <SelectProcessVariables
                     processVariables={processVariables}
-                    onChange={(index, event) => dispatch({type: 'MODIFY_PROCESS_VAR', payload: {index, event}})}
-                    onAdd={() => dispatch({type: 'ADD_PROCESS_VAR'})}
-                    onDelete={(index) => dispatch({type: 'REMOVE_PROCESS_VAR', payload: {index}})}
+                    onChange={onChangeProcessVariable}
+                    onAdd={onAddProcessVariable}
+                    onDelete={onDeleteProcessVariable}
                 />
+                <SubmitRow>
+                    <SubmitAction
+                        text={intl.formatMessage({description: 'Camunda process variables confirm button', defaultMessage: 'Confirm'})}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            setModalOpen(false);
+                        }}
+                    />
+                </SubmitRow>
             </FormModal>
         </>
     );
@@ -202,6 +201,11 @@ FormFields.propTypes = {
     formData: PropTypes.shape({ // matches the backend serializer!
         processDefinition: PropTypes.string,
         processDefinitionVersion: PropTypes.number,
+        processVariables: PropTypes.arrayOf(PropTypes.shape({
+            enabled: PropTypes.bool.isRequired,
+            componentKey: PropTypes.string.isRequired,
+            alias: PropTypes.string.isRequired,
+        })),
     }),
     onChange: PropTypes.func.isRequired,
 };

src/openforms/js/lang/en.json

@@ -569,6 +569,11 @@
     "description": "All Submissions Removal Limit field label",
     "originalDefault": "All Submissions Removal Limit"
   },
+  "V21YkS": {
+    "defaultMessage": "Confirm",
+    "description": "Camunda process variables confirm button",
+    "originalDefault": "Confirm"
+  },
   "VMMOA0": {
     "defaultMessage": "Page content",
     "description": "Confirmation page content label",

src/openforms/js/lang/nl.json

@@ -569,6 +569,11 @@
     "description": "All Submissions Removal Limit field label",
     "originalDefault": "All Submissions Removal Limit"
   },
+  "V21YkS": {
+    "defaultMessage": "Confirm",
+    "description": "Camunda process variables confirm button",
+    "originalDefault": "Confirm"
+  },
   "VMMOA0": {
     "defaultMessage": "Inhoud",
     "description": "Confirmation page content label",