[BUILD ONLY] Network config wizard step build iso

docs/installation-steps.rst

@@ -5,13 +5,14 @@ Installation Flow Overview
 This document describes the step-by-step process for installing the system using the Web UI.
 
 1. **Welcome**
-2. **Date and time**
-3. **Software selection**
-4. **Installation method**
-5. **Storage configuration**
-6. **Create Account**
-7. **Review and install**
-8. **Installation progress**
+2. **Network**
+3. **Date and time**
+4. **Software selection**
+5. **Installation method**
+6. **Storage configuration**
+7. **Create Account**
+8. **Review and install**
+9. **Installation progress**
 
 Detailed Step Descriptions
 =============================
@@ -21,17 +22,22 @@ Detailed Step Descriptions
 
 Select the language & keyboard to use during installation and for the target system.
 
-2. Date and time
+2. Network
+----------
+
+Configure network connections for the system.
+
+3. Date and time
 ----------------
 
 Configure your system's timezone, date, and time settings. You can also set up network time synchronization.
 
-3. Software selection
+4. Software selection
 ---------------------
 
 Select packages to install by choosing a base environment.
 
-4. Installation method
+5. Installation method
 ----------------------
 
 Choose the target device(s) for the installation and the partitioning scenario.
@@ -73,22 +79,22 @@ Reinstalls Fedora while preserving your existing home directory and user data. U
 
 Installs using only unallocated free space, preserving existing partitions and data. Use when you want to dual-boot with existing operating systems. This option only appears when existing partitions are detected on the selected disks.
 
-5. Storage configuration
+6. Storage configuration
 ------------------------
 
 Automatic partitioning configuration, disk encryption, and storage options.
 
-6. Create Account
+7. Create Account
 -----------------
 
 Set up user accounts and administrator passwords for your system.
 
-7. Review and install
+8. Review and install
 ---------------------
 
 Review your installation settings and start the installation process.
 
-8. Installation progress
+9. Installation progress
 ------------------------
 
 Monitor the installation progress and completion.

src/components/AnacondaWizard.jsx

@@ -66,6 +66,7 @@ export const AnacondaWizard = ({ currentStepId, dispatch, isFetching, onCritFail
             let stepProps = {
                 id: s.id,
                 isAriaDisabled: isFormDisabled || isFetching,
+                isDisabled: isFormDisabled || isFetching,
                 isHidden: s.isHidden || s.isFinal,
                 isVisited,
                 name: s.label,

src/components/network/CockpitNetworkConfiguration.jsx

@@ -11,32 +11,12 @@ import { PageSection } from "@patternfly/react-core/dist/esm/components/Page/ind
 
 import { useMaybeBackdrop } from "../../hooks/CockpitIntegration.jsx";
 
+import { useNetworkStatus } from "./useNetworkStatus.js";
+
 import "./CockpitNetworkConfiguration.scss";
 
 const _ = cockpit.gettext;
 
-// Hook to track checkpoint status from the Cockpit networkmanager iframe
-const useNetworkStatus = () => {
-    const [hasActiveCheckpoint, setHasActiveCheckpoint] = useState(false);
-
-    useEffect(() => {
-        const checkpointState = window.sessionStorage.getItem("cockpit_has_checkpoint");
-        setHasActiveCheckpoint(checkpointState === "true");
-
-        const handleCheckpointEvent = (event) => {
-            if (event.key === "cockpit_has_checkpoint") {
-                setHasActiveCheckpoint(event.newValue === "true");
-            }
-        };
-
-        window.addEventListener("storage", handleCheckpointEvent);
-
-        return () => window.removeEventListener("storage", handleCheckpointEvent);
-    }, []);
-
-    return { hasActiveCheckpoint };
-};
-
 export const CockpitNetworkConfiguration = ({
     onCritFail,
     setIsNetworkOpen,

src/components/network/NetworkConfiguration.jsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2025 Red Hat, Inc.
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+import cockpit from "cockpit";
+
+import React, { useEffect, useState } from "react";
+
+import { useMaybeBackdrop } from "../../hooks/CockpitIntegration.jsx";
+
+import { useNetworkStatus } from "./useNetworkStatus.js";
+
+import "./NetworkConfiguration.scss";
+
+const _ = cockpit.gettext;
+
+export const NetworkConfiguration = ({
+    onCritFail,
+    setIsFormDisabled,
+    setIsFormValid,
+}) => {
+    const [isIframeMounted, setIsIframeMounted] = useState(false);
+    const { hasActiveCheckpoint } = useNetworkStatus();
+    const backdropClass = useMaybeBackdrop();
+    const handleIframeLoad = () => setIsIframeMounted(true);
+    const idPrefix = "network-configuration";
+
+    const hasModal = backdropClass !== "";
+    const isBlocked = hasActiveCheckpoint || hasModal;
+
+    useEffect(() => {
+        setIsFormValid(!isBlocked);
+        setIsFormDisabled(isBlocked);
+    }, [isBlocked, setIsFormDisabled, setIsFormValid]);
+
+    useEffect(() => {
+        if (isIframeMounted) {
+            const iframe = document.getElementById("network-configuration-frame");
+            iframe.contentWindow.addEventListener("error", exception => {
+                onCritFail({ context: _("Network plugin failed") })({ message: exception.error.message, stack: exception.error.stack });
+            });
+
+            // Hide elements not needed in the installer context
+            const hideSelectors = ["#networking-graphs", ".cockpit-log-panel"];
+            const iframeDoc = iframe.contentDocument;
+            const observer = new MutationObserver(() => {
+                hideSelectors.forEach(sel => {
+                    const el = iframeDoc.querySelector(sel);
+                    if (el && el.style.display !== "none") {
+                        el.style.display = "none";
+                    }
+                });
+            });
+            observer.observe(iframeDoc.body, { childList: true, subtree: true });
+
+            return () => observer.disconnect();
+        }
+    }, [isIframeMounted, onCritFail]);
+
+    return (
+        <div className={backdropClass + " " + idPrefix + "-page-section"}>
+            <iframe
+              src="/cockpit/@localhost/network/index.html"
+              name="network-configuration"
+              id="network-configuration-frame"
+              onLoad={handleIframeLoad}
+              className={idPrefix + "-iframe"} />
+        </div>
+    );
+};

src/components/network/NetworkConfiguration.scss

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2025 Red Hat, Inc.
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+@import "global-variables";
+@import "../../styles/cockpit-iframe-backdrop";
+
+.network-configuration-page-section,
+.network-configuration-iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.network-configuration-iframe {
+  border-radius: var(--pf-t--global--border--radius--medium);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
+  background-clip: content-box;
+}

src/components/network/index.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2025 Red Hat, Inc.
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+
+import cockpit from "cockpit";
+
+import { NetworkConfiguration } from "./NetworkConfiguration.jsx";
+
+const _ = cockpit.gettext;
+
+export class Page {
+    _description = "Configure network connections for the system.";
+
+    constructor ({ isBootIso }) {
+        this.component = NetworkConfiguration;
+        this.id = "anaconda-screen-network";
+        this.isHidden = !isBootIso;
+        this.label = _("Network");
+        this.title = _("Network Configuration");
+    }
+}

src/components/network/useNetworkStatus.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2025 Red Hat, Inc.
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+import { useEffect, useState } from "react";
+
+// Hook to track checkpoint status from the Cockpit networkmanager iframe
+export const useNetworkStatus = () => {
+    const [hasActiveCheckpoint, setHasActiveCheckpoint] = useState(false);
+
+    useEffect(() => {
+        const checkpointState = window.sessionStorage.getItem("cockpit_has_checkpoint");
+        setHasActiveCheckpoint(checkpointState === "true");
+
+        const handleCheckpointEvent = (event) => {
+            if (event.key === "cockpit_has_checkpoint") {
+                setHasActiveCheckpoint(event.newValue === "true");
+            }
+        };
+
+        window.addEventListener("storage", handleCheckpointEvent);
+
+        return () => window.removeEventListener("storage", handleCheckpointEvent);
+    }, []);
+
+    return { hasActiveCheckpoint };
+};

src/components/steps.js

@@ -9,6 +9,7 @@ import { debug } from "../helpers/log.js";
 import { Page as PageDateAndTime } from "./datetime/index.js";
 import { Page as PageProgress } from "./installation/index.js";
 import { Page as PageInstallationLanguage } from "./localization/index.js";
+import { Page as PageNetworkConfiguration } from "./network/index.js";
 import { Page as PageReviewConfiguration } from "./review/index.js";
 import { Page as PageSoftwareSelection } from "./software/index.js";
 import { Page as PageInstallationMethod } from "./storage/installation-method/index.js";
@@ -23,6 +24,7 @@ export const getSteps = (userInterfaceConfig, args) => {
     const hiddenScreens = userInterfaceConfig.hidden_webui_pages || [];
     const stepsOrder = [
         new PageInstallationLanguage(args),
+        new PageNetworkConfiguration(args),
         new PageDateAndTime(args),
         new PageSoftwareSelection(args),
         new PageInstallationMethod(args),

test/helpers/installer.py

@@ -14,6 +14,7 @@ class InstallerSteps(UserDict):
     DATE_TIME = steps.DATE_TIME
     CUSTOM_MOUNT_POINT = steps.CUSTOM_MOUNT_POINT
     INSTALLATION_METHOD = steps.INSTALLATION_METHOD
+    NETWORK = steps.NETWORK
     SOFTWARE_SELECTION = steps.SOFTWARE_SELECTION
     LANGUAGE = steps.LANGUAGE
     PROGRESS = steps.PROGRESS
@@ -30,14 +31,16 @@ def __init__(self, hidden_steps=None, scenario=None, machine=None):
         CUSTOM_MOUNT_POINT = self.CUSTOM_MOUNT_POINT
         DATE_TIME = self.DATE_TIME
         INSTALLATION_METHOD = self.INSTALLATION_METHOD
+        NETWORK = self.NETWORK
         SOFTWARE_SELECTION = self.SOFTWARE_SELECTION
         LANGUAGE = self.LANGUAGE
         PROGRESS = self.PROGRESS
         REVIEW = self.REVIEW
         STORAGE_CONFIGURATION = self.STORAGE_CONFIGURATION
 
         _steps_jump = {
-            LANGUAGE: [DATE_TIME],
+            LANGUAGE: [NETWORK],
+            NETWORK: [DATE_TIME],
             DATE_TIME: [SOFTWARE_SELECTION],
             SOFTWARE_SELECTION: [INSTALLATION_METHOD],
             STORAGE_CONFIGURATION: [ACCOUNTS],
@@ -182,6 +185,7 @@ def open(self, step=None):
 
     def click_step_on_sidebar(self, step=None):
         step = step or self.get_current_page()
+        self.browser.wait_visible(f"#{step}:not([disabled])")
         self.browser.click(f"#{step}")
 
     @log_step()

test/helpers/steps.py

@@ -3,6 +3,7 @@
 
 
 LANGUAGE = "anaconda-screen-language"
+NETWORK = "anaconda-screen-network"
 DATE_TIME = "anaconda-screen-date-time"
 INSTALLATION_METHOD = "anaconda-screen-method"
 SOFTWARE_SELECTION = "anaconda-screen-software-selection"

webui-desktop

@@ -240,7 +240,8 @@ else
                 XDG_SESSION_TYPE=wayland \
                 XDG_RUNTIME_DIR="${INSTALLER_XDG_RUNTIME_DIR}" \
                 WAYLAND_DISPLAY="${ROOT_WAYLAND_SOCKET}" \
-                dbus-run-session -- "${BROWSER[@]}" "$WEBUI_URL" &
+                dbus-run-session -- "${BROWSER[@]}" "$WEBUI_URL" \
+                >/tmp/webui-browser.log 2>&1 &
             BLOCK_ON_PID=$!
         fi
     else