🐛 [#4727] Transform initialValue on user variable dataType change

Backport-of: #4797

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

@@ -3427,6 +3427,12 @@
       "value": "Login required?"
     }
   ],
+  "af22yB": [
+    {
+      "type": 0,
+      "value": "Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?"
+    }
+  ],
   "aqYeqv": [
     {
       "type": 0,

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

@@ -3445,6 +3445,12 @@
       "value": "Vereist authenticatie"
     }
   ],
+  "af22yB": [
+    {
+      "type": 0,
+      "value": "Het veranderen van het datatype vereist een verandering aan de beginwaarde. Dit zal de beginwaarde terugbrengen naar de standaardwaarde. Weet je zeker dat je dit wilt doen?"
+    }
+  ],
   "aqYeqv": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/form-creation-form.js

@@ -70,6 +70,7 @@ import {
   getUniqueKey,
   parseValidationErrors,
   slugify,
+  transformInitialValue,
   updateKeyReferencesInLogic,
   updateRemovedKeyInLogic,
 } from './utils';
@@ -776,6 +777,14 @@ function reducer(draft, action) {
 
       draft.formVariables[index][propertyName] = propertyValue;
 
+      // When dataType changes, a data transformation is needed
+      if (propertyName === 'dataType') {
+        draft.formVariables[index]['initialValue'] = transformInitialValue(
+          propertyValue,
+          originalVariable.initialValue
+        );
+      }
+
       // Check if there are errors that need to be reset
       if (draft.formVariables[index].errors) {
         delete draft.formVariables[index].errors[propertyName];
@@ -1218,6 +1227,42 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
       payload: pluginId,
     });
   };
+  const onUserDefinedVariableChange = async (key, propertyName, propertyValue) => {
+    const originalVariable = state.formVariables.find(variable => variable.key === key);
+    // Just dispatch if anything other than dataType changes
+    // or if the initialValue is null/undefined
+    if (
+      propertyName !== 'dataType' ||
+      originalVariable?.initialValue == null ||
+      originalVariable?.initialValue === ''
+    ) {
+      dispatch({
+        type: 'CHANGE_USER_DEFINED_VARIABLE',
+        payload: {key, propertyName, propertyValue},
+      });
+      return;
+    }
+
+    // Check if the dataType change is intentional.
+    if (
+      propertyName === 'dataType' &&
+      !window.confirm(
+        intl.formatMessage({
+          description:
+            'Changing user variable data type and transforming initial value confirmation message',
+          defaultMessage:
+            'Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?',
+        })
+      )
+    ) {
+      return;
+    }
+
+    dispatch({
+      type: 'CHANGE_USER_DEFINED_VARIABLE',
+      payload: {key, propertyName, propertyValue},
+    });
+  };
 
   if (loading || state.submitting) {
     return <Loader />;
@@ -1483,12 +1528,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
                 variables={state.formVariables}
                 onAdd={() => dispatch({type: 'ADD_USER_DEFINED_VARIABLE'})}
                 onDelete={key => dispatch({type: 'DELETE_USER_DEFINED_VARIABLE', payload: key})}
-                onChange={(key, propertyName, propertyValue) =>
-                  dispatch({
-                    type: 'CHANGE_USER_DEFINED_VARIABLE',
-                    payload: {key, propertyName, propertyValue},
-                  })
-                }
+                onChange={onUserDefinedVariableChange}
                 onFieldChange={onFieldChange}
               />
             </TabPanel>

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

@@ -57,6 +57,30 @@ const checkKeyChange = (mutationType, newComponent, oldComponent) => {
   return newComponent.key !== oldComponent.key;
 };
 
+const transformInitialValue = (newType, originalValue) => {
+  switch (newType) {
+    case 'array':
+      return [];
+
+    case 'boolean':
+    case 'int':
+    case 'float':
+      return undefined;
+
+    case 'object':
+      return {};
+
+    case 'string':
+    case 'datetime':
+    case 'date':
+    case 'time':
+      return '';
+
+    default:
+      return originalValue;
+  }
+};
+
 const updateKeyReferencesInLogic = (existingLogicRules, originalKey, newKey) => {
   for (const rule of existingLogicRules) {
     if (!JSON.stringify(rule).includes(originalKey)) continue;
@@ -219,6 +243,7 @@ export {
   getFormComponents,
   findComponent,
   checkKeyChange,
+  transformInitialValue,
   updateKeyReferencesInLogic,
   updateRemovedKeyInLogic,
   getUniqueKey,

src/openforms/js/lang/en.json

@@ -1579,6 +1579,11 @@
     "description": "Form step login required label",
     "originalDefault": "Login required?"
   },
+  "af22yB": {
+    "defaultMessage": "Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?",
+    "description": "Changing user variable data type and transforming initial value confirmation message",
+    "originalDefault": "Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?"
+  },
   "auZOcD": {
     "defaultMessage": "Mapping expression",
     "description": "Service fetch configuration modal form mapping expression field label",

src/openforms/js/lang/nl.json

@@ -1591,6 +1591,11 @@
     "description": "Form step login required label",
     "originalDefault": "Login required?"
   },
+  "af22yB": {
+    "defaultMessage": "Het veranderen van het datatype vereist een verandering aan de beginwaarde. Dit zal de beginwaarde terugbrengen naar de standaardwaarde. Weet je zeker dat je dit wilt doen?",
+    "description": "Changing user variable data type and transforming initial value confirmation message",
+    "originalDefault": "Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?"
+  },
   "auZOcD": {
     "defaultMessage": "Mappingexpressie",
     "description": "Service fetch configuration modal form mapping expression field label",