diff --git a/web/src/components/storage/VolumeLocationDialog.jsx b/web/src/components/storage/VolumeLocationDialog.jsx index a8e944a24a..dc848601a3 100644 --- a/web/src/components/storage/VolumeLocationDialog.jsx +++ b/web/src/components/storage/VolumeLocationDialog.jsx @@ -22,7 +22,12 @@ // @ts-check import React, { useState } from "react"; -import { Radio, Form } from "@patternfly/react-core"; +import { + Form, + MenuToggle, + Select, SelectOption, SelectList +} from '@patternfly/react-core'; + import { sprintf } from "sprintf-js"; import { _ } from "~/i18n"; @@ -70,6 +75,63 @@ const sanitizeTarget = (volume, device) => { return targets.includes(volume.target) ? volume.target : defaultTarget(device); }; +const SelectTarget = ({ volume, onSelect, selectedId }) => { + const TARGETS = [ + { + id: "NEW_PARTITION", + label: _("Create a new partition"), + description: _("The file system will be allocated as a new partition at the selected disk.") + }, + { + id: "DEVICE", + // TRANSLATORS: %s is replaced by a file system type (e.g., Ext4). + description: sprintf(_("The selected device will be formatted as %s file system."), volume.fsType), + label: _("Format the device") + }, + { + id: "NEW_VG", + description: _("A new volume group will be allocated in the selected disk and the file system will be created as a logical volume."), + label: _("Create a dedicated LVM volume group") + }, + { + id: "FILESYSTEM", + description: _("The current file system on the selected device will be mounted without formatting the device."), + label: _("Mount the file system") + } + ]; + + const [isOpen, setIsOpen] = useState(false); + const selected = TARGETS.find(t => t.id === selectedId); + const onToggleClick = () => setIsOpen(!isOpen); + + const toggle = toggleRef => ( + + {selected.label} + + ); + + const whenSelect = (_, value) => { + onSelect(value); + setIsOpen(false); + }; + + return ( + + ); +}; + /** * Renders a dialog that allows the user to change the location of a volume. * @component @@ -148,47 +210,7 @@ export default function VolumeLocationDialog({
  1. {_("Select how the file system will be allocated")}
    -
    - setTarget("NEW_PARTITION")} - /> - setTarget("DEVICE")} - /> - setTarget("NEW_VG")} - /> - setTarget("FILESYSTEM")} - /> -
    +