general: Place dialog form labels on top of their fields

This allows for longer labels.
cockpit-project · Sep 5, 2024 · c03b9ff · c03b9ff
1 parent abd4fa8
commit c03b9ff
Show file tree

Hide file tree

Showing 22 changed files with 24 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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