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>