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 (