From c03b9ff7a7572c999b24ab821494ffa1063f1425 Mon Sep 17 00:00:00 2001
From: Marius Vollmer <marius.vollmer@gmail.com>
Date: Thu, 5 Sep 2024 08:56:34 +0300
Subject: [PATCH] general: Place dialog form labels on top of their fields

This allows for longer labels.
---
 src/components/create-vm-dialog/createVmDialog.jsx      | 2 +-
 src/components/networks/createNetworkDialog.jsx         | 2 +-
 src/components/networks/networkOverviewTab.jsx          | 2 +-
 src/components/storagePools/createStoragePoolDialog.jsx | 2 +-
 src/components/storagePools/storageVolumeCreate.jsx     | 2 +-
 src/components/vm/disks/diskAdd.jsx                     | 6 +++---
 src/components/vm/disks/diskEdit.jsx                    | 2 +-
 src/components/vm/filesystems/vmFilesystemsCard.jsx     | 2 +-
 src/components/vm/hostdevs/hostDevAdd.jsx               | 2 +-
 src/components/vm/nics/nicAdd.jsx                       | 2 +-
 src/components/vm/nics/nicEdit.jsx                      | 2 +-
 src/components/vm/overview/cpuModal.jsx                 | 2 +-
 src/components/vm/overview/firmware.jsx                 | 2 +-
 src/components/vm/overview/memoryModal.jsx              | 2 +-
 src/components/vm/overview/vmOverviewCard.jsx           | 2 +-
 src/components/vm/overview/vsock.jsx                    | 2 +-
 src/components/vm/overview/watchdog.jsx                 | 2 +-
 src/components/vm/snapshots/vmSnapshotsCreateModal.jsx  | 2 +-
 src/components/vm/vmCloneDialog.jsx                     | 3 +--
 src/components/vm/vmMigrateDialog.jsx                   | 2 +-
 src/components/vm/vmRenameDialog.jsx                    | 3 +--
 test/reference                                          | 2 +-
 22 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/create-vm-dialog/createVmDialog.jsx b/src/components/create-vm-dialog/createVmDialog.jsx
index 08e56cf9f..c387d9b7f 100644
--- a/src/components/create-vm-dialog/createVmDialog.jsx
+++ b/src/components/create-vm-dialog/createVmDialog.jsx
@@ -1410,7 +1410,7 @@ class CreateVmModal extends React.Component {
         );
 
         const dialogBody = (
-            <Form isHorizontal>
+            <Form>
                 <NameRow
                     vmName={this.state.vmName}
                     suggestedVmName={this.state.suggestedVmName}
diff --git a/src/components/networks/createNetworkDialog.jsx b/src/components/networks/createNetworkDialog.jsx
index 9494dea31..5a277ff6b 100644
--- a/src/components/networks/createNetworkDialog.jsx
+++ b/src/components/networks/createNetworkDialog.jsx
@@ -399,7 +399,7 @@ class CreateNetworkModal extends React.Component {
         const validationFailed = this.state.validate && validateParams(this.state);
 
         const body = (
-            <Form isHorizontal>
+            <Form>
                 <ConnectionRow connectionName={LIBVIRT_SYSTEM_CONNECTION} />
 
                 <NetworkNameRow dialogValues={this.state}
diff --git a/src/components/networks/networkOverviewTab.jsx b/src/components/networks/networkOverviewTab.jsx
index 962ff6cb7..77495ae4a 100644
--- a/src/components/networks/networkOverviewTab.jsx
+++ b/src/components/networks/networkOverviewTab.jsx
@@ -240,7 +240,7 @@ const NetworkAddStaticHostEntries = ({ network, parentIndex, setIsOpen }) => {
                 }>
             <Form onSubmit={e => {
                 e.preventDefault();
-            }} isHorizontal>
+            }}>
                 {error && <ModalError dialogError={_("Failed to save network settings")} dialogErrorDetail={error} />}
                 <FormGroup label={_("MAC address")} fieldId="add-new-static-entry-mac-address">
                     <TextInput id="add-new-static-entry-mac-address"
diff --git a/src/components/storagePools/createStoragePoolDialog.jsx b/src/components/storagePools/createStoragePoolDialog.jsx
index 018d1ecb4..3c5d5f399 100644
--- a/src/components/storagePools/createStoragePoolDialog.jsx
+++ b/src/components/storagePools/createStoragePoolDialog.jsx
@@ -407,7 +407,7 @@ class CreateStoragePoolModal extends React.Component {
         const Dialogs = this.context;
 
         const defaultBody = (
-            <Form isHorizontal>
+            <Form>
                 {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />}
                 <MachinesConnectionSelector id='storage-pool-dialog-connection'
                     connectionName={this.state.connectionName}
diff --git a/src/components/storagePools/storageVolumeCreate.jsx b/src/components/storagePools/storageVolumeCreate.jsx
index c812bbfec..8b06d31e7 100644
--- a/src/components/storagePools/storageVolumeCreate.jsx
+++ b/src/components/storagePools/storageVolumeCreate.jsx
@@ -118,7 +118,7 @@ class CreateStorageVolumeModal extends React.Component {
                            </Button>
                        </>
                    }>
-                <Form isHorizontal>
+                <Form>
                     {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />}
                     <VolumeCreateBody format={this.state.format}
                                       idPrefix={idPrefix}
diff --git a/src/components/vm/disks/diskAdd.jsx b/src/components/vm/disks/diskAdd.jsx
index 07ed7807e..4966be1ea 100644
--- a/src/components/vm/disks/diskAdd.jsx
+++ b/src/components/vm/disks/diskAdd.jsx
@@ -207,7 +207,7 @@ const AdditionalOptions = ({ cacheMode, device, idPrefix, onValueChanged, busTyp
     return (
         <ExpandableSection toggleText={ expanded ? _("Hide additional options") : _("Show additional options")}
                            onToggle={() => setExpanded(!expanded)} isExpanded={expanded} className="pf-v5-u-pt-lg">
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <Grid hasGutter md={6}>
                     <FormGroup fieldId='cache-mode' label={_("Cache")}>
                         <FormSelect id='cache-mode'
@@ -584,7 +584,7 @@ export const AddDiskModalBody = ({ disk, idPrefix, isMediaInsertion, vm, vms, su
         );
     } else if (isMediaInsertion) {
         defaultBody = (
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <FormGroup fieldId={`${idPrefix}-source`}
                            id={`${idPrefix}-source-group`}
                            label={_("Source")} isInline hasNoPaddingTop>
@@ -620,7 +620,7 @@ export const AddDiskModalBody = ({ disk, idPrefix, isMediaInsertion, vm, vms, su
     } else {
         defaultBody = (
             <>
-                <Form onSubmit={e => e.preventDefault()} isHorizontal>
+                <Form onSubmit={e => e.preventDefault()}>
                     <FormGroup fieldId={`${idPrefix}-source`}
                                id={`${idPrefix}-source-group`}
                                label={_("Source")} isInline hasNoPaddingTop>
diff --git a/src/components/vm/disks/diskEdit.jsx b/src/components/vm/disks/diskEdit.jsx
index 33adde676..38395249e 100644
--- a/src/components/vm/disks/diskEdit.jsx
+++ b/src/components/vm/disks/diskEdit.jsx
@@ -223,7 +223,7 @@ export class EditDiskModal extends React.Component {
         const { vm, disk, idPrefix, supportedDiskBusTypes } = this.props;
 
         const defaultBody = (
-            <Form isHorizontal>
+            <Form>
                 <NameRow idPrefix={idPrefix}
                          diskType={vm.disks[disk.target].type}
                          name={getDiskFullName(vm.disks[disk.target])} />
diff --git a/src/components/vm/filesystems/vmFilesystemsCard.jsx b/src/components/vm/filesystems/vmFilesystemsCard.jsx
index 29b884ca8..7b07355a6 100644
--- a/src/components/vm/filesystems/vmFilesystemsCard.jsx
+++ b/src/components/vm/filesystems/vmFilesystemsCard.jsx
@@ -192,7 +192,7 @@ const VmFilesystemAddModal = ({ connectionName, vmName }) => {
                        </Popover>
                    </>
                }>
-            <Form isHorizontal>
+            <Form>
                 {dialogError && <ModalError dialogError={_("Failed to add shared directory")} dialogErrorDetail={dialogError} />}
                 <FormGroup fieldId={`${idPrefix}-modal-source`}
                            id={`${idPrefix}-modal-source-group`}
diff --git a/src/components/vm/hostdevs/hostDevAdd.jsx b/src/components/vm/hostdevs/hostDevAdd.jsx
index 7be2eb9de..bb0d78379 100644
--- a/src/components/vm/hostdevs/hostDevAdd.jsx
+++ b/src/components/vm/hostdevs/hostDevAdd.jsx
@@ -216,7 +216,7 @@ const AddHostDev = ({ idPrefix, vm }) => {
     };
 
     const body = (
-        <Form isHorizontal>
+        <Form>
             <TypeRow type={type} setType={setTypeWrapper} />
             <DevRow idPrefix={idPrefix} selectableDevices={selectableDevices} setSelectableDevices={setSelectableDevices} />
         </Form>
diff --git a/src/components/vm/nics/nicAdd.jsx b/src/components/vm/nics/nicAdd.jsx
index 5748dfad4..a85ce86fc 100644
--- a/src/components/vm/nics/nicAdd.jsx
+++ b/src/components/vm/nics/nicAdd.jsx
@@ -179,7 +179,7 @@ export class AddNIC extends React.Component {
         const { idPrefix, vm } = this.props;
 
         const defaultBody = (
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <NetworkTypeAndSourceRow idPrefix={idPrefix}
                                          dialogValues={{ ...this.state, availableSources: this.props.availableSources }}
                                          onValueChanged={this.onValueChanged}
diff --git a/src/components/vm/nics/nicEdit.jsx b/src/components/vm/nics/nicEdit.jsx
index 9b58f0c7a..bae84d77f 100644
--- a/src/components/vm/nics/nicEdit.jsx
+++ b/src/components/vm/nics/nicEdit.jsx
@@ -154,7 +154,7 @@ export class EditNICModal extends React.Component {
         const { idPrefix, vm, network } = this.props;
 
         const defaultBody = (
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <NetworkTypeAndSourceRow idPrefix={idPrefix}
                                          dialogValues={{ ...this.state, availableSources: this.props.availableSources }}
                                          onValueChanged={this.onValueChanged}
diff --git a/src/components/vm/overview/cpuModal.jsx b/src/components/vm/overview/cpuModal.jsx
index 6c5e1a46c..7e7bae90b 100644
--- a/src/components/vm/overview/cpuModal.jsx
+++ b/src/components/vm/overview/cpuModal.jsx
@@ -220,7 +220,7 @@ export const CPUModal = ({ vm, maxVcpu, models }) => {
         caution = <NeedsShutdownAlert idPrefix="cpu-modal" />;
 
     const defaultBody = (
-        <Form isHorizontal className="cpu-modal">
+        <Form className="cpu-modal">
             { caution }
             { error && error.dialogError && <ModalError dialogError={error.dialogError} dialogErrorDetail={error.dialogErrorDetail} /> }
             <FormGroup fieldId="machines-vcpu-max-field" label={_("vCPU maximum")}
diff --git a/src/components/vm/overview/firmware.jsx b/src/components/vm/overview/firmware.jsx
index e99c893ab..4eb478af1 100644
--- a/src/components/vm/overview/firmware.jsx
+++ b/src/components/vm/overview/firmware.jsx
@@ -86,7 +86,7 @@ class FirmwareModal extends React.Component {
                            </Button>
                        </>
                    }>
-                <Form isHorizontal>
+                <Form>
                     {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />}
                     <FormGroup label={_("Firmware")} fieldId="firmware-dialog-select">
                         <FormSelect onChange={(_event, value) => this.setState({ firmware: value })}
diff --git a/src/components/vm/overview/memoryModal.jsx b/src/components/vm/overview/memoryModal.jsx
index e2679f7ee..8f3b6f9ea 100644
--- a/src/components/vm/overview/memoryModal.jsx
+++ b/src/components/vm/overview/memoryModal.jsx
@@ -124,7 +124,7 @@ export class MemoryModal extends React.Component {
         const vm = this.props.vm;
         const idPrefix = vmId(vm.name) + '-memory-modal';
         const defaultBody = (
-            <Form isHorizontal id='memory-config-dialog'>
+            <Form id='memory-config-dialog'>
                 <MemorySelectRow id={`${idPrefix}-memory`}
                     label={_("Current allocation")}
                     value={Math.floor(convertToUnit(this.state.memory, 'KiB', this.state.memoryUnit))}
diff --git a/src/components/vm/overview/vmOverviewCard.jsx b/src/components/vm/overview/vmOverviewCard.jsx
index 8bd8d8c43..8a2a95ab6 100644
--- a/src/components/vm/overview/vmOverviewCard.jsx
+++ b/src/components/vm/overview/vmOverviewCard.jsx
@@ -154,7 +154,7 @@ class VmOverviewCard extends React.Component {
         return (
             <Flex className="overview-tab" direction={{ default: "column", "2xl": "row" }}>
                 <FlexItem>
-                    <DescriptionList isHorizontal>
+                    <DescriptionList>
                         <Text component={TextVariants.h4}>
                             {_("General")}
                         </Text>
diff --git a/src/components/vm/overview/vsock.jsx b/src/components/vm/overview/vsock.jsx
index 4ed30f771..51643cb6d 100644
--- a/src/components/vm/overview/vsock.jsx
+++ b/src/components/vm/overview/vsock.jsx
@@ -154,7 +154,7 @@ export const VsockModal = ({ vm, vms, vmVsockNormalized, isVsockAttached, idPref
     const vsockUsage = getVsockUsageMessage(vm.name, vm.connectionName, vms, auto, address);
 
     const body = (
-        <Form onSubmit={e => e.preventDefault()} isHorizontal>
+        <Form onSubmit={e => e.preventDefault()}>
             <FormGroup fieldId="vsock-cid"
                        label={_("Custom identifier")}
                        isInline>
diff --git a/src/components/vm/overview/watchdog.jsx b/src/components/vm/overview/watchdog.jsx
index 2814907b4..2fe51399d 100644
--- a/src/components/vm/overview/watchdog.jsx
+++ b/src/components/vm/overview/watchdog.jsx
@@ -197,7 +197,7 @@ export const WatchdogModal = ({ vm, isWatchdogAttached, isRemovable, idPrefix })
                }>
             {needsShutdown()}
             <WatchdogModalAlert dialogError={dialogError} />
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <FormGroup role="radiogroup"
                            label={_("Action")}
                            fieldId="watchdog-action"
diff --git a/src/components/vm/snapshots/vmSnapshotsCreateModal.jsx b/src/components/vm/snapshots/vmSnapshotsCreateModal.jsx
index 94fe11f31..05628d1fb 100644
--- a/src/components/vm/snapshots/vmSnapshotsCreateModal.jsx
+++ b/src/components/vm/snapshots/vmSnapshotsCreateModal.jsx
@@ -182,7 +182,7 @@ export class CreateSnapshotModal extends React.Component {
         const validationError = this.onValidate();
 
         const body = (
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <NameRow name={name} validationError={validationError.name} onValueChanged={this.onValueChanged} />
                 <DescriptionRow description={description} onValueChanged={this.onValueChanged} />
                 {isExternal && vm.state === 'running' &&
diff --git a/src/components/vm/vmCloneDialog.jsx b/src/components/vm/vmCloneDialog.jsx
index 5651e97b2..a5e7b8a18 100644
--- a/src/components/vm/vmCloneDialog.jsx
+++ b/src/components/vm/vmCloneDialog.jsx
@@ -87,8 +87,7 @@ export const CloneDialog = ({ name, connectionName }) => {
             <Form onSubmit={e => {
                 e.preventDefault();
                 onClone();
-            }}
-            isHorizontal>
+            }}>
                 {!isObjectEmpty(error) && <ModalError dialogError={error.dialogError} dialogErrorDetail={virtCloneOutput} />}
                 <FormGroup label={_("Name")} fieldId="vm-name"
                            id="vm-name-group">
diff --git a/src/components/vm/vmMigrateDialog.jsx b/src/components/vm/vmMigrateDialog.jsx
index 73532f759..f17a7ec13 100644
--- a/src/components/vm/vmMigrateDialog.jsx
+++ b/src/components/vm/vmMigrateDialog.jsx
@@ -167,7 +167,7 @@ export const MigrateDialog = ({ vm, connectionName }) => {
     }
 
     const body = (
-        <Form onSubmit={e => e.preventDefault()} isHorizontal>
+        <Form onSubmit={e => e.preventDefault()}>
             <DestUriRow destUri={destUri}
                         setDestUri={setDestUri}
                         validationFailed={validationFailed} />
diff --git a/src/components/vm/vmRenameDialog.jsx b/src/components/vm/vmRenameDialog.jsx
index b9ab48619..260395a7c 100644
--- a/src/components/vm/vmRenameDialog.jsx
+++ b/src/components/vm/vmRenameDialog.jsx
@@ -75,8 +75,7 @@ export const RenameDialog = ({ vmName, vmId, connectionName }) => {
             <Form onSubmit={e => {
                 e.preventDefault();
                 onRename();
-            }}
-            isHorizontal>
+            }}>
                 {!isObjectEmpty(error) && <ModalError dialogError={error.dialogError} dialogErrorDetail={error.dialogErrorDetail} />}
                 <FormGroup label={_("New name")}
                            fieldId="rename-dialog-new-name">
diff --git a/test/reference b/test/reference
index 8ee2e589c..35974bdda 160000
--- a/test/reference
+++ b/test/reference
@@ -1 +1 @@
-Subproject commit 8ee2e589cb8448aaf4bd8cf07f22b3cbebc18739
+Subproject commit 35974bdda540bf95f58042085dbe9137254667b7