fix(web): VolumeDialog: share numeric value between Fixed and Range

In Add/Edit file system dialog (VolumeDialog), keep the numeric value when switching between Fixed and Range sizing (gh##1277) Do it by removing size and sizeUnit from formData and using minSize, minSizeUnit for both roles.
agama-project · Jun 28, 2024 · 83c2e78 · 83c2e78
1 parent 5ca4494
commit 83c2e78
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/web/src/components/storage/VolumeDialog.jsx b/web/src/components/storage/VolumeDialog.jsx
@@ -43,8 +43,6 @@ import {
  * @property {VolumeFormErrors} errors
  *
  * @typedef {object} VolumeFormData
- * @property {number|string} [size]
- * @property {string} [sizeUnit]
  * @property {number|string} [minSize]
  * @property {string} [minSizeUnit]
  * @property {number|string} [maxSize]
@@ -490,7 +488,6 @@ const sanitizeMountPath = (mountPath) => {
  */
 const createUpdatedVolume = (volume, formData) => {
   let sizeAttrs = {};
-  const size = parseToBytes(`${formData.size} ${formData.sizeUnit}`);
   const minSize = parseToBytes(`${formData.minSize} ${formData.minSizeUnit}`);
   const maxSize = parseToBytes(`${formData.maxSize} ${formData.maxSizeUnit}`);
 
@@ -499,7 +496,7 @@ const createUpdatedVolume = (volume, formData) => {
       sizeAttrs = { minSize: undefined, maxSize: undefined, autoSize: true };
       break;
     case SIZE_METHODS.MANUAL:
-      sizeAttrs = { minSize: size, maxSize: size, autoSize: false };
+      sizeAttrs = { minSize, maxSize: minSize, autoSize: false };
       break;
     case SIZE_METHODS.RANGE:
       sizeAttrs = { minSize, maxSize: formData.maxSize ? maxSize : undefined, autoSize: false };
@@ -543,8 +540,6 @@ const prepareFormData = (volume) => {
   const { size: maxSize = "", unit: maxSizeUnit = minSizeUnit || DEFAULT_SIZE_UNIT } = splitSize(volume.maxSize);
 
   return {
-    size: minSize,
-    sizeUnit: minSizeUnit,
     minSize,
     minSizeUnit,
     maxSize,

diff --git a/web/src/components/storage/VolumeFields.jsx b/web/src/components/storage/VolumeFields.jsx
@@ -321,9 +321,9 @@ const SizeManual = ({ errors, formData, isDisabled, onChange }) => {
               //   (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
               // or use the "globalize" JS library which can also parse the localized string back
               //   (https://github.com/globalizejs/globalize#number-module)
-              value={formData.size}
-              onChange={(size) => onChange({ size })}
-              validated={errors.size && 'error'}
+              value={formData.minSize}
+              onChange={(minSize) => onChange({ minSize })}
+              validated={errors.minSize && 'error'}
               isDisabled={isDisabled}
             />
           </InputGroupItem>
@@ -334,8 +334,8 @@ const SizeManual = ({ errors, formData, isDisabled, onChange }) => {
               // TRANSLATORS: units selector (like KiB, MiB, GiB...)
               aria-label={_("Size unit")}
               units={Object.values(SIZE_UNITS)}
-              value={formData.sizeUnit}
-              onChange={(_, sizeUnit) => onChange({ sizeUnit })}
+              value={formData.minSizeUnit}
+              onChange={(_, minSizeUnit) => onChange({ minSizeUnit })}
               isDisabled={isDisabled}
             />
           </InputGroupItem>