From 5d584ae766f86d1e515e2400e12731eb3745b099 Mon Sep 17 00:00:00 2001 From: YanJin Date: Tue, 22 Dec 2020 17:19:40 +0100 Subject: [PATCH] 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 | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js index b629122222..01c0c1eb3a 100644 --- a/ui/src/containers/CreateVolume.js +++ b/ui/src/containers/CreateVolume.js @@ -421,6 +421,21 @@ 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?.volumes?.[i]?.name) { + setFieldValue(`volumes[${i}]name`, ''); + } + if (!touched?.volumes?.[i]?.path) { + setFieldValue(`volumes[${i}]path`, ''); + } + } + }; + const addLabel = () => { const labels = values.labels; labels[labelName] = labelValue; @@ -667,7 +682,7 @@ const CreateVolume = (props) => { label={intl.translate('create_multiple_volumes')} checked={values.multiVolumeCreation} value={values.multiVolumeCreation} - onChange={handleChange('multiVolumeCreation')} + onChange={handleCheckboxChange('multiVolumeCreation')} onBlur={handleOnBlur} />