VolumeDialog: share numeric value between Fixed and Range (#1412)

## Problem

#1277 - "Size entry gets reset when switching from Range to Fixed"

## Solution

In Add/Edit file system dialog (VolumeDialog), keep the numeric value
when switching between Fixed and Range sizing.

Do it by removing `size` and `sizeUnit` from `formData` and using
`minSize`, `minSizeUnit` for both roles.

## Testing

- [x] *Tested manually*

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jun 28 13:49:54 UTC 2024 - Martin Vidner <mvidner@suse.com>
+
+- In Add/Edit file system dialog (VolumeDialog), keep the numeric value
+  when switching between Fixed and Range sizing (gh#openSUSE/agama#1277)
+
 -------------------------------------------------------------------
 Fri Jun 28 06:56:02 UTC 2024 - Martin Vidner <mvidner@suse.com>
 

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,

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>