UI for reusing LVM volume groups

service/lib/agama/storage/devicegraph_conversions/to_json_conversions/volume_group.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-# Copyright (c) [2025] SUSE LLC
+# Copyright (c) [2025-2026] SUSE LLC
 #
 # All Rights Reserved.
 #
@@ -53,7 +53,7 @@ def lvm_vg_size
           #
           # @return [Array<String>]
           def lvm_vg_pvs
-            storage_device.lvm_pvs.map(&:sid)
+            storage_device.lvm_pvs.map(&:plain_blk_device).map(&:sid)
           end
         end
       end

web/src/components/core/Annotation.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2025] SUSE LLC
+ * Copyright (c) [2025-2026] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -48,4 +48,9 @@ describe("Annotation", () => {
     const content = screen.getByText("Configured for installation only");
     expect(content.tagName).toBe("STRONG");
   });
+
+  it("renders nothing when children is empty", () => {
+    const { container } = plainRender(<Annotation>{undefined}</Annotation>);
+    expect(container).toBeEmptyDOMElement();
+  });
 });

web/src/components/core/Annotation.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2025] SUSE LLC
+ * Copyright (c) [2025-2026] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -45,6 +45,8 @@ type AnnotationProps = React.PropsWithChildren<{
  * ```
  */
 export default function Annotation({ icon = "emergency", children }: AnnotationProps) {
+  if (!children) return null;
+
   return (
     <Flex component="p" alignItems={{ default: "alignItemsCenter" }} gap={{ default: "gapXs" }}>
       <Icon name={icon} /> <strong>{children}</strong>

web/src/components/core/Popup.test.tsx

@@ -172,6 +172,13 @@ describe("Popup.SecondaryAction", () => {
     const button = screen.queryByRole("button", { name: "Do something" });
     expect(button.classList.contains("pf-m-secondary")).toBe(true);
   });
+
+  it("renders a 'link' button when asLink is set", async () => {
+    installerRender(<Popup.SecondaryAction asLink>Do something</Popup.SecondaryAction>);
+
+    const button = screen.queryByRole("button", { name: "Do something" });
+    expect(button.classList.contains("pf-m-link")).toBe(true);
+  });
 });
 
 describe("Popup.AncillaryAction", () => {
@@ -234,4 +241,14 @@ describe("Popup.Cancel", () => {
       expect(button.classList.contains("pf-m-secondary")).toBe(true);
     });
   });
+
+  describe("when asLink is set", () => {
+    it("renders a 'link' button", async () => {
+      installerRender(<Popup.Cancel asLink />);
+
+      const button = screen.queryByRole("button", { name: "Cancel" });
+      expect(button).not.toBeNull();
+      expect(button.classList.contains("pf-m-link")).toBe(true);
+    });
+  });
 });

web/src/components/core/Popup.tsx

@@ -36,7 +36,7 @@ import { fork } from "radashi";
 import { _, TranslatedString } from "~/i18n";
 
 type ButtonWithoutVariantProps = Omit<ButtonProps, "variant">;
-type PredefinedAction = React.PropsWithChildren<ButtonWithoutVariantProps>;
+type PredefinedAction = React.PropsWithChildren<ButtonWithoutVariantProps & { asLink?: boolean }>;
 export type PopupProps = {
   /** The dialog title */
   title?: ModalHeaderProps["title"];
@@ -122,8 +122,8 @@ const Confirm = ({ children = _("Confirm"), ...actionProps }: PredefinedAction)
  *     <Text>Dismiss</Text>
  *   </SecondaryAction>
  */
-const SecondaryAction = ({ children, ...actionProps }: PredefinedAction) => (
-  <Action {...actionProps} variant="secondary">
+const SecondaryAction = ({ children, asLink, ...actionProps }: PredefinedAction) => (
+  <Action {...actionProps} variant={asLink ? "link" : "secondary"}>
     {children}
   </Action>
 );

web/src/components/layout/Icon.tsx

@@ -60,6 +60,7 @@ import MoreVert from "@bolderIcons/more_vert.svg?component";
 import NetworkWifi from "@icons/network_wifi.svg?component";
 import NetworkWifi1Bar from "@icons/network_wifi_1_bar.svg?component";
 import NetworkWifi3Bar from "@icons/network_wifi_3_bar.svg?component";
+import NotificationsActive from "@icons/notifications_active.svg?component";
 import Report from "@icons/report.svg?component";
 import RestartAlt from "@icons/restart_alt.svg?component";
 import SearchOff from "@icons/search_off.svg?component";
@@ -109,6 +110,7 @@ const icons = {
   network_wifi: NetworkWifi,
   network_wifi_1_bar: NetworkWifi1Bar,
   network_wifi_3_bar: NetworkWifi3Bar,
+  notifications_ative: NotificationsActive,
   report: Report,
   restart_alt: RestartAlt,
   search_off: SearchOff,

web/src/components/storage/ConfigEditor.tsx

@@ -70,8 +70,8 @@ export default function ConfigEditor() {
     <>
       {/* FIXME add arial label */}
       <DataList aria-label="" isCompact className="storage-structure">
-        {volumeGroups.map((vg, i) => {
-          return <VolumeGroupEditor key={`vg-${i}`} vg={vg} />;
+        {volumeGroups.map((_, i) => {
+          return <VolumeGroupEditor key={`vg-${i}`} index={i} />;
         })}
         {mdRaids.map((_, i) => (
           <MdRaidEditor key={`md-${i}`} index={i} />

web/src/components/storage/ConfigureDeviceMenu.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2025] SUSE LLC
+ * Copyright (c) [2025-2026] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -53,6 +53,22 @@ const vdb: Storage.Device = {
   },
 };
 
+const md0: Storage.Device = {
+  sid: 61,
+  class: "mdRaid",
+  name: "/dev/md0",
+  description: "MD RAID 0",
+  md: { level: "raid1", devices: [59, 60] },
+  block: {
+    start: 0,
+    size: 2e12,
+    active: true,
+    encrypted: false,
+    systems: [],
+    shrinking: { supported: false },
+  },
+};
+
 const vdaDrive: ConfigModel.Drive = {
   name: "/dev/vda",
   spacePolicy: "delete",
@@ -68,22 +84,27 @@ const vdbDrive: ConfigModel.Drive = {
 const mockAddDrive = jest.fn();
 const mockAddReusedMdRaid = jest.fn();
 const mockUseModel = jest.fn();
+const mockUseAvailableDevices = jest.fn();
 
 jest.mock("~/hooks/model/system/storage", () => ({
   ...jest.requireActual("~/hooks/model/system/storage"),
-  useAvailableDevices: () => [vda, vdb],
+  useAvailableDevices: () => mockUseAvailableDevices(),
+  useDevices: () => [],
+  useFlattenDevices: () => [],
 }));
 
 jest.mock("~/hooks/model/storage/config-model", () => ({
   ...jest.requireActual("~/hooks/model/storage/config-model"),
   useConfigModel: () => mockUseModel(),
   useAddDrive: () => mockAddDrive,
   useAddMdRaid: () => mockAddReusedMdRaid,
+  useAddVolumeGroup: () => jest.fn(),
 }));
 
 describe("ConfigureDeviceMenu", () => {
   beforeEach(() => {
-    mockUseModel.mockReturnValue({ drives: [], mdRaids: [] });
+    mockUseModel.mockReturnValue({ drives: [], mdRaids: [], volumeGroups: [] });
+    mockUseAvailableDevices.mockReturnValue([vda, vdb]);
   });
 
   it("renders an initially closed menu ", async () => {
@@ -113,18 +134,36 @@ describe("ConfigureDeviceMenu", () => {
         const disksMenuItem = screen.getByRole("menuitem", { name: "Add device menu" });
         await user.click(disksMenuItem);
         const dialog = screen.getByRole("dialog", { name: /Select a disk/ });
-        const confirmButton = screen.getByRole("button", { name: "Confirm" });
-        const vdaItemRow = within(dialog).getByRole("row", { name: /\/dev\/vda/ });
+        const confirmButton = screen.getByRole("button", { name: /Add/ });
+        const vdaItemRow = within(dialog).getByRole("row", { name: /vda/ });
         const vdaItemRadio = within(vdaItemRow).getByRole("radio");
         await user.click(vdaItemRadio);
         await user.click(confirmButton);
         expect(mockAddDrive).toHaveBeenCalledWith({ name: "/dev/vda", spacePolicy: "keep" });
       });
+
+      it("shows intro text in the device selector", async () => {
+        const { user } = installerRender(<ConfigureDeviceMenu />);
+        const toggler = screen.getByRole("button", { name: /More devices/ });
+        await user.click(toggler);
+        await user.click(screen.getByRole("menuitem", { name: "Add device menu" }));
+        within(screen.getByRole("dialog")).getByText("Start configuring a basic installation");
+      });
+
+      it("allows canceling the device selector without adding any device", async () => {
+        const { user } = installerRender(<ConfigureDeviceMenu />);
+        const toggler = screen.getByRole("button", { name: /More devices/ });
+        await user.click(toggler);
+        await user.click(screen.getByRole("menuitem", { name: "Add device menu" }));
+        await user.click(screen.getByRole("button", { name: "Cancel" }));
+        expect(screen.queryByRole("dialog")).toBeNull();
+        expect(mockAddDrive).not.toHaveBeenCalled();
+      });
     });
 
     describe("but some disks are already configured", () => {
       beforeEach(() => {
-        mockUseModel.mockReturnValue({ drives: [vdaDrive], mdRaids: [] });
+        mockUseModel.mockReturnValue({ drives: [vdaDrive], mdRaids: [], volumeGroups: [] });
       });
 
       it("allows users to add a new drive to an unused disk", async () => {
@@ -134,11 +173,11 @@ describe("ConfigureDeviceMenu", () => {
         const disksMenuItem = screen.getByRole("menuitem", { name: "Add device menu" });
         await user.click(disksMenuItem);
         const dialog = screen.getByRole("dialog", { name: /Select another disk/ });
-        const confirmButton = screen.getByRole("button", { name: "Confirm" });
-        expect(screen.queryByRole("row", { name: /vda$/ })).toBeNull();
-        const vdaItemRow = within(dialog).getByRole("row", { name: /\/dev\/vdb/ });
-        const vdaItemRadio = within(vdaItemRow).getByRole("radio");
-        await user.click(vdaItemRadio);
+        const confirmButton = screen.getByRole("button", { name: /Add/ });
+        expect(screen.queryByRole("row", { name: /vda/ })).toBeNull();
+        const vdbItemRow = within(dialog).getByRole("row", { name: /vdb/ });
+        const vdbItemRadio = within(vdbItemRow).getByRole("radio");
+        await user.click(vdbItemRadio);
         await user.click(confirmButton);
         expect(mockAddDrive).toHaveBeenCalledWith({ name: "/dev/vdb", spacePolicy: "keep" });
       });
@@ -147,7 +186,7 @@ describe("ConfigureDeviceMenu", () => {
 
   describe("when there are no more unused disks", () => {
     beforeEach(() => {
-      mockUseModel.mockReturnValue({ drives: [vdaDrive, vdbDrive], mdRaids: [] });
+      mockUseModel.mockReturnValue({ drives: [vdaDrive, vdbDrive], mdRaids: [], volumeGroups: [] });
     });
 
     it("renders the disks menu as disabled with an informative label", async () => {
@@ -156,6 +195,24 @@ describe("ConfigureDeviceMenu", () => {
       await user.click(toggler);
       const disksMenuItem = screen.getByRole("menuitem", { name: "Add device menu" });
       expect(disksMenuItem).toBeDisabled();
+      within(disksMenuItem).getByText("Already using all available disks");
+    });
+  });
+
+  describe("when there are MD RAID devices available", () => {
+    beforeEach(() => {
+      mockUseAvailableDevices.mockReturnValue([vda, md0]);
+    });
+
+    it("allows adding an MD RAID device", async () => {
+      const { user } = installerRender(<ConfigureDeviceMenu />);
+      const toggler = screen.getByRole("button", { name: /More devices/ });
+      await user.click(toggler);
+      await user.click(screen.getByRole("menuitem", { name: "Add device menu" }));
+      const dialog = screen.getByRole("dialog");
+      await user.click(within(dialog).getByRole("tab", { name: "RAID" }));
+      await user.click(screen.getByRole("button", { name: /Add/ }));
+      expect(mockAddReusedMdRaid).toHaveBeenCalledWith({ name: "/dev/md0", spacePolicy: "keep" });
     });
   });
 });