ui/volumes: When re-check the box only update the untouched fields

In order to keep the user customization, edit the global value
(name/path) should not affect the defaults pre-fill of the touched
field.

Unless the users uncheck the box of multi-volume creation and re-check
again, we only update the untouched field with the new global value.

Refs: #2964

ui/src/containers/CreateVolume.js

@@ -421,6 +421,33 @@ const CreateVolume = (props) => {
                 return items.find((item) => item.value === selectedValue);
               };
 
+              //if re-check the box again, we should only update/pre-fill the defaults for unchanged field.
+              // to make sure to keep the user customization.
+              const handleCheckboxChange = (field) => (selectedObj) => {
+                setFieldValue(field, selectedObj.target.checked);
+                // Clear the untouched field to get the update from the global value
+                for (let i = 0; i < values.numberOfVolumes; i++) {
+                  if (
+                    touched &&
+                    touched.volumes &&
+                    touched?.volumes[i]?.name === true
+                  ) {
+                    continue;
+                  } else {
+                    setFieldValue(`volumes[${i}]name`, '');
+                  }
+                  if (
+                    touched &&
+                    touched.volumes &&
+                    touched?.volumes[i]?.path === true
+                  ) {
+                    continue;
+                  } else {
+                    setFieldValue(`volumes[${i}]path`, '');
+                  }
+                }
+              };
+
               const addLabel = () => {
                 const labels = values.labels;
                 labels[labelName] = labelValue;
@@ -667,7 +694,7 @@ const CreateVolume = (props) => {
                         label={intl.translate('create_multiple_volumes')}
                         checked={values.multiVolumeCreation}
                         value={values.multiVolumeCreation}
-                        onChange={handleChange('multiVolumeCreation')}
+                        onChange={handleCheckboxChange('multiVolumeCreation')}
                         onBlur={handleOnBlur}
                       />
                     </CheckboxContainer>