refactor(web): restore interface for managing iSCSI form web client

rust/agama-utils/src/api/scope.rs

@@ -47,6 +47,8 @@ pub enum Scope {
     Software,
     Storage,
     Files,
+    #[strum(serialize = "iscsi")]
+    #[serde(rename = "iscsi")]
     ISCSI,
     #[strum(serialize = "dasd")]
     #[serde(rename = "dasd")]

rust/share/system.iscsi.schema.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://json-schema.org/draft/2019-09/schema",
+  "$id": "https://github.com/openSUSE/agama/blob/master/rust/share/system.storage.schema.json",
+  "title": "System",
+  "description": "API description of the iSCSI system",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["initiator", "targets"],
+  "properties": {
+    "initiator": {
+      "title": "Initiator",
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["name", "ibft"],
+      "properties": {
+        "name": { "type": "string" },
+        "ibft": { "type": "boolean" }
+      }
+    },
+    "targets": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/target" }
+    }
+  },
+  "$defs": {
+    "target": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["name", "address", "port", "interface", "ibtf", "startup", "connected", "locked"],
+      "properties": {
+        "name": { "type": "string" },
+        "address": { "type": "string" },
+        "port": { "type": "number" },
+        "interface": { "type": "string" },
+        "ibft": {
+          "description": "Whether the target was initiated by iBFT.",
+          "type": "boolean"
+        },
+        "startup": {
+          "enum": ["onboot", "manual", "automatic"]
+        },
+        "connected": {
+          "description": "Whether the node is connected (there is a session).",
+          "type": "boolean"
+        },
+        "locked": {
+          "description": "Whether the node is locked (cannot be deactivated)",
+          "type": "boolean"
+        }
+      }
+    }
+  }
+}

web/package/agama-web-ui.changes

@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Thu Feb 12 11:56:57 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Restore the interface for managing iSCSI in the web client
+  (gh#agama-project/agama#3092).
+- Restore the "Rescan devices" storage option (bsc#1258089).
+
 -------------------------------------------------------------------
 Wed Feb 11 14:24:03 UTC 2026 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/api.ts

@@ -28,7 +28,7 @@ import type { Proposal } from "~/model/proposal";
 import type { Question } from "~/model/question";
 import type { Status } from "~/model/status";
 import type { System } from "~/model/system";
-import type { Action, L10nSystemConfig } from "~/model/action";
+import type { Action, L10nSystemConfig, DiscoverISCSIConfig } from "~/model/action";
 import type { AxiosResponse } from "axios";
 import type { Job } from "~/types/job";
 
@@ -78,6 +78,8 @@ const activateStorageAction = () => postAction({ activateStorage: null });
 
 const probeStorageAction = () => postAction({ probeStorage: null });
 
+const discoverISCSIAction = (config: DiscoverISCSIConfig) => postAction({ discoverISCSI: config });
+
 const finishInstallation = () => postAction({ finish: "reboot" });
 
 /**
@@ -102,6 +104,7 @@ export {
   configureL10nAction,
   activateStorageAction,
   probeStorageAction,
+  discoverISCSIAction,
   finishInstallation,
   getStorageJobs,
 };

web/src/assets/styles/index.scss

@@ -559,6 +559,11 @@ span.in-quotes {
   }
 }
 
+nav.agm-breadcrumb h1 {
+  // Allow heading in breadcrumb use fontSize from its parent
+  font-size: inherit;
+}
+
 // FIXME: make ir more generic, if possible, or even without CSS but not
 // rendering such a label if "storage instructions" are more than one
 .storage-structure:has(> li:nth-child(2)) span.action-text {

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

@@ -109,4 +109,16 @@ describe("Breadcrumbs.Item", () => {
     expect(label).not.toHaveClass(textStyles.fontSizeLg);
     expect(label).not.toHaveClass(textStyles.fontWeightBold);
   });
+
+  it("renders menu when provided", () => {
+    installerRender(
+      <Breadcrumbs.Item
+        label="Software"
+        path="/software"
+        menu={<div role="menu" aria-label="Software menu" />}
+      />,
+    );
+
+    screen.getByRole("menu", { name: "Software menu" });
+  });
 });

web/src/components/core/Breadcrumbs.tsx

@@ -28,12 +28,47 @@ import Icon from "~/components/layout/Icon";
 import { TranslatedString, _ } from "~/i18n";
 
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import displayStyles from "@patternfly/react-styles/css/utilities/Display/display";
 
 export type BreadcrumbProps = {
   /** The label to display for the breadcrumb item */
   label: React.ReactNode | TranslatedString;
   /** The URL path the breadcrumb item links to */
   path?: string;
+  /**
+   * Optional menu providing contextual navigation for the breadcrumb item.
+   *
+   * When provided, it appears adjacent to the breadcrumb label and is intended
+   * to contain navigation options related to the area or section represented by
+   * the breadcrumb.
+   *
+   * @remarks
+   *
+   * **Accessibility requirement**
+   *
+   * The menu trigger must be fully accessible.
+   * Missing or incorrect ARIA attributes may result in an inaccessible breadcrumb.
+   *
+   * At a minimum, the trigger is expected to define:
+   *   - aria-label="[Descriptive label]"
+   *   - aria-haspopup="true"
+   *   - aria-expanded="true | false"
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumbs.Item
+   *   label="Storage"
+   *   path="/storage"
+   *   menu={
+   *     <Dropdown>
+   *       <DropdownItem to="/storage/settings">Advanced settings</DropdownItem>
+   *       <DropdownItem to="/storage/iscsi">iSCSI configuration</DropdownItem>
+   *     </Dropdown>
+   *   }
+   * />
+   * ```
+   */
+  menu?: React.ReactNode;
   /** Option to hide the divider (e.g., chevron icon) between breadcrumb items */
   hideDivider?: boolean;
   /** Flag to indicate if the breadcrumb item should have special editorial
@@ -51,6 +86,7 @@ export type BreadcrumbProps = {
 const Breadcrumb = ({
   label,
   path,
+  menu,
   isCurrent = false,
   hideDivider = false,
   isEditorial = false,
@@ -70,12 +106,13 @@ const Breadcrumb = ({
     >
       {!hideDivider && <Icon name="chevron_right" aria-hidden />}
       {isCurrent ? (
-        <h1>{content}</h1>
+        <h1 className={displayStyles.displayInline}>{content}</h1>
       ) : (
         <Link to={path} variant="link" isInline>
           {content}
         </Link>
       )}
+      {menu}
     </Flex>
   );
 };
@@ -92,10 +129,10 @@ const Breadcrumb = ({
  */
 const Breadcrumbs = ({ a11yName = _("Breadcrumbs"), children }) => {
   return (
-    <nav aria-label={a11yName}>
+    <nav aria-label={a11yName} className="agm-breadcrumb">
       <Flex
         component="ol"
-        gap={{ default: "gapXs" }}
+        gap={{ default: "gapNone" }}
         alignItems={{ default: "alignItemsCenter" }}
         alignContent={{ default: "alignContentCenter" }}
       >

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

@@ -22,11 +22,11 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
+import { installerRender, mockStage } from "~/test-utils";
 import { useSystem } from "~/hooks/model/system";
+import { Product } from "~/model/system";
 import { PRODUCT as PATHS } from "~/routes/paths";
 import ChangeProductOption from "./ChangeProductOption";
-import { Product } from "~/model/system";
 
 const tumbleweed: Product = {
   id: "Tumbleweed",
@@ -46,38 +46,74 @@ const microos: Product = {
   modes: [],
 };
 
-// let registrationInfoMock: RegistrationInfo;
+const tumbleweedWithModes: Product = {
+  ...tumbleweed,
+  modes: [
+    { id: "mode1", name: "Mode 1", description: "Mode 1 desc" },
+    { id: "mode2", name: "Mode 2", description: "Mode 2 desc" },
+  ],
+};
+
 const mockSystemProducts: jest.Mock<Product[]> = jest.fn();
+const mockSoftware: jest.Mock = jest.fn();
 
 jest.mock("~/hooks/model/system", () => ({
   ...jest.requireActual("~/hooks/model/system"),
   useSystem: (): ReturnType<typeof useSystem> => ({
     products: mockSystemProducts(),
+    software: mockSoftware(),
   }),
 }));
 
 describe("ChangeProductOption", () => {
+  beforeEach(() => {
+    mockSoftware.mockReturnValue(null);
+    mockStage("configuring");
+  });
+
   describe("when there is more than one product available", () => {
     beforeEach(() => {
       mockSystemProducts.mockReturnValue([tumbleweed, microos]);
     });
 
-    it("renders a menu item for navigating to product selection page", () => {
+    it("renders a link by default for navigating to product selection page", () => {
       installerRender(<ChangeProductOption />);
-      const link = screen.getByRole("menuitem", { name: "Change product" });
+      const link = screen.getByRole("link", { name: "Change product" });
       expect(link).toHaveAttribute("href", PATHS.changeProduct);
     });
 
-    // FIXME: activate it again when registration is ready in api v2
-    describe.skip("but a product is registered", () => {
-      // beforeEach(() => {
-      //   registrationInfoMock = {
-      //     registered: true,
-      //     key: "INTERNAL-USE-ONLY-1234-5678",
-      //     email: "",
-      //     url: "",
-      //   };
-      // });
+    it("renders a menu item when component prop is 'dropdownitem'", () => {
+      installerRender(<ChangeProductOption component="dropdownitem" />);
+      screen.getByRole("menuitem", { name: "Change product" });
+    });
+
+    it("renders with an icon when showIcon is true", () => {
+      const { container } = installerRender(<ChangeProductOption showIcon />);
+      const icon = container.querySelector("svg");
+      expect(icon).toHaveAttribute("data-icon-name", "edit_square");
+    });
+
+    it("does not render an icon by default", () => {
+      installerRender(<ChangeProductOption />);
+      const link = screen.getByRole("link", { name: "Change product" });
+      expect(link.querySelector("svg")).toBeNull();
+    });
+
+    describe("but a product is registered", () => {
+      beforeEach(() => {
+        mockSoftware.mockReturnValue({ registration: true });
+      });
+
+      it("renders nothing", () => {
+        const { container } = installerRender(<ChangeProductOption />);
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+
+    describe("but the stage is not 'configuring'", () => {
+      beforeEach(() => {
+        mockStage("installing");
+      });
 
       it("renders nothing", () => {
         const { container } = installerRender(<ChangeProductOption />);
@@ -87,13 +123,42 @@ describe("ChangeProductOption", () => {
   });
 
   describe("when there is only one product available", () => {
+    describe("without modes", () => {
+      beforeEach(() => {
+        mockSystemProducts.mockReturnValue([tumbleweed]);
+      });
+
+      it("renders nothing", () => {
+        const { container } = installerRender(<ChangeProductOption />);
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+
+    describe("with modes", () => {
+      beforeEach(() => {
+        mockSystemProducts.mockReturnValue([tumbleweedWithModes]);
+      });
+
+      it("renders with 'Change mode' label", () => {
+        installerRender(<ChangeProductOption />);
+        screen.getByRole("link", { name: "Change mode" });
+      });
+    });
+  });
+
+  describe("when there are multiple products and at least one has modes", () => {
     beforeEach(() => {
-      mockSystemProducts.mockReturnValue([tumbleweed]);
+      mockSystemProducts.mockReturnValue([tumbleweedWithModes, microos]);
+    });
+
+    it("renders with 'Change product or mode' label", () => {
+      installerRender(<ChangeProductOption />);
+      screen.getByRole("link", { name: "Change product or mode" });
     });
 
-    it("renders nothing", () => {
-      const { container } = installerRender(<ChangeProductOption />);
-      expect(container).toBeEmptyDOMElement();
+    it("renders with icon when showIcon is true", () => {
+      installerRender(<ChangeProductOption showIcon component="dropdownitem" />);
+      screen.getByRole("menuitem", { name: /Change product or mode/ });
     });
   });
 });