diff --git a/web/src/components/core/FlexRow.tsx b/web/src/components/core/FlexRow.tsx new file mode 100644 index 0000000000..149730b58f --- /dev/null +++ b/web/src/components/core/FlexRow.tsx @@ -0,0 +1,46 @@ +/* + * Copyright (c) [2025] SUSE LLC + * + * All Rights Reserved. + * + * This program is free software; you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation; either version 2 of the License, or (at your option) + * any later version. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, contact SUSE LLC. + * + * To contact SUSE LLC about this file by physical or electronic mail, you may + * find current contact information at www.suse.com. + */ + +import React from "react"; +import { Flex, FlexItem } from "@patternfly/react-core"; +import spacingStyles from "@patternfly/react-styles/css/utilities/Spacing/spacing"; + +type AllowGaps = "Xs" | "Sm" | "Md" | "Lg" | "Xl"; +type FlexRowProps = React.PropsWithChildren<{ + title?: React.ReactNode; + titleGap?: AllowGaps; + childrenGap?: AllowGaps; +}>; + +/** + * Wrapper on top of PF/Flex for easing laying out lists + */ +const FlexRow = ({ title, titleGap = "Sm", childrenGap = "Xs", children }: FlexRowProps) => { + return ( + + {title && {title}} + {children} + + ); +}; + +export default FlexRow; diff --git a/web/src/components/storage/AddExistingDeviceMenu.tsx b/web/src/components/storage/AddExistingDeviceMenu.tsx index 0729890966..675a3579e6 100644 --- a/web/src/components/storage/AddExistingDeviceMenu.tsx +++ b/web/src/components/storage/AddExistingDeviceMenu.tsx @@ -31,8 +31,6 @@ import { MenuToggleElement, MenuToggle, Divider, - Split, - Flex, Label, } from "@patternfly/react-core"; import { MenuHeader } from "~/components/core"; @@ -40,6 +38,7 @@ import MenuDeviceDescription from "./MenuDeviceDescription"; import { useAvailableDevices } from "~/queries/storage"; import { useConfigModel, useModel } from "~/queries/storage/config-model"; import { deviceLabel } from "~/components/storage/utils"; +import FlexRow from "../core/FlexRow"; export default function AddExistingDeviceMenu() { const [isOpen, setIsOpen] = useState(false); @@ -93,16 +92,13 @@ export default function AddExistingDeviceMenu() { description={} onClick={() => modelHook.addDrive(device.name)} > - - {deviceLabel(device)} - - {device.systems.map((s, i) => ( - - ))} - - + + {["Windows", "Leap"].map((s, i) => ( + + ))} + ))} diff --git a/web/src/components/storage/MenuDeviceDescription.tsx b/web/src/components/storage/MenuDeviceDescription.tsx index 6c6b92bf8e..69f024595a 100644 --- a/web/src/components/storage/MenuDeviceDescription.tsx +++ b/web/src/components/storage/MenuDeviceDescription.tsx @@ -21,13 +21,14 @@ */ import React from "react"; -import { Stack, Flex, Split, Label } from "@patternfly/react-core"; +import { Stack, Label, Content } from "@patternfly/react-core"; import { typeDescription, contentDescription, filesystemLabels, } from "~/components/storage/utils/device"; import { StorageDevice } from "~/types/storage"; +import FlexRow from "../core/FlexRow"; /** * Renders the content to be used at a menu entry describing a device. @@ -36,19 +37,24 @@ import { StorageDevice } from "~/types/storage"; * @param device - Device to represent */ export default function MenuDeviceDescription({ device }: { device: StorageDevice }) { + console.log(filesystemLabels); + return ( - - {typeDescription(device)} - {contentDescription(device)} - - - {filesystemLabels(device).map((s, i) => ( + + {typeDescription(device)} + {contentDescription(device)} + + } + > + {["FAKE", "label", "LI-ST"].map((s, i) => ( ))} - + ); } diff --git a/web/src/components/storage/PartitionPage.tsx b/web/src/components/storage/PartitionPage.tsx index f61018be93..084793dd27 100644 --- a/web/src/components/storage/PartitionPage.tsx +++ b/web/src/components/storage/PartitionPage.tsx @@ -39,7 +39,6 @@ import { SelectOption, SelectOptionProps, Split, - SplitItem, Stack, TextInput, } from "@patternfly/react-core"; @@ -68,6 +67,7 @@ import { sprintf } from "sprintf-js"; import { configModel } from "~/api/storage/types"; import { STORAGE as PATHS } from "~/routes/paths"; import { compact, uniq } from "~/utils"; +import FlexRow from "../core/FlexRow"; const NO_VALUE = ""; const NEW_PARTITION = "new"; @@ -499,24 +499,22 @@ type PartitionDescriptionProps = { }; function PartitionDescription({ partition }: PartitionDescriptionProps): React.ReactNode { - const label = partition.filesystem?.label; + const label = partition.filesystem?.label || "Fake label"; return ( - - {partition.description} + {label && ( - - - + )} - + ); } function TargetOptions(): React.ReactNode { - const partitions = useUnusedPartitions(); + const partitions = [{ name: "Fake partition", description: "Fake description" }]; + console.log(useUnusedPartitions()); return (