Anaconda network page

pkg/lib/anaconda/_anaconda.scss

@@ -30,9 +30,9 @@
     --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   }
 
-  .pf-v6-c-card {
-    --pf-v6-c-card--BorderColor: transparent;
-  }
+  // .pf-v6-c-card {
+    // --pf-v6-c-card--BorderColor: transparent;
+  // }
 
   // Approximates PageSection padding={{ default: "noPadding" }} isFilled={false} (PF .pf-m-no-padding / .pf-m-no-fill)
   .pf-v6-c-page__main-section {

pkg/networkmanager/anaconda-main.css

@@ -0,0 +1,5 @@
+#network-interface {
+  .pf-v6-c-card.pf-m-plain .pf-v6-c-card__header, .pf-v6-c-card.pf-m-plain > .pf-v6-c-card__title {
+    padding-block-start: 0;
+  }
+}

pkg/networkmanager/anaconda-main.tsx

@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2026 Red Hat, Inc.
+ * SPDX-License-Identifier: LGPL-2.1-or-later
+ */
+
+import cockpit from "cockpit";
+import React, { useState } from 'react';
+
+import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
+import { Page, } from "@patternfly/react-core/dist/esm/components/Page/index.js";
+
+import {
+    has_group,
+    is_loopback,
+    is_managed,
+    is_wireless,
+    render_active_connection,
+} from './interfaces.js';
+import { Content, ContentVariants, SimpleList, SimpleListGroup, SimpleListItem, Split, SplitItem } from "@patternfly/react-core";
+import { NetworkInterfacePage } from "./network-interface.jsx";
+import "./anaconda-main.css";
+import { EmptyStatePanel } from "cockpit-components-empty-state.js";
+
+const _ = cockpit.gettext;
+
+interface AnacondaNetworkPageProps {
+    privileged: boolean;
+    operationInProgress: boolean;
+    usage_monitor: any;
+    interfaces: any[];
+    iface?: any;
+}
+
+interface AnacondaActiveNetwork {
+    isWireless?: boolean;
+    iface: any;
+}
+
+export const AnacondaNetworkPage = ({ privileged, operationInProgress, usage_monitor, interfaces }: AnacondaNetworkPageProps) => {
+    const [active, setActive] = useState<AnacondaActiveNetwork>();
+
+    const managedWired: React.ReactNode[] = [];
+    const managedWireless: React.ReactNode[] = [];
+
+    interfaces.forEach(iface => {
+        // Skip loopback
+        if (is_loopback(iface))
+            return;
+
+        // Skip members
+        else if (has_group(iface))
+            return;
+
+        const dev = iface.Device;
+
+        const activeConnection = render_active_connection(dev, false, true);
+        const isWireless = is_wireless(iface);
+
+        let connectionStatus;
+        if (activeConnection) {
+            connectionStatus = _("Connected")
+        } else {
+            connectionStatus = _("Disconnected")
+        }
+
+        const row = (
+            <SimpleListItem key={iface.name} onClick={() => {setActive({isWireless, iface})}}>
+                <Flex
+                    direction={{ default: 'row' }}
+                    justifyContent={{ default: 'justifyContentSpaceBetween' }}
+                    flexWrap={{ default: 'nowrap' }}
+                >
+                    <FlexItem flex={{ default: 'flex_1' }}>{iface.Name}</FlexItem>
+                    <FlexItem>
+                        <Content component={ContentVariants.small}>{connectionStatus}</Content>
+                    </FlexItem>
+                </Flex>
+            </SimpleListItem>
+        )
+
+        if (!dev || is_managed(dev)) {
+            isWireless ? managedWireless.push(row) : managedWired.push(row);
+        }
+    });
+
+    return (
+        <Page data-test-wait={operationInProgress} id="networking" className="pf-m-no-sidebar anaconda">
+            <Content component="h1">{_("Networks")}</Content>
+            <Split hasGutter>
+                <SplitItem>
+                    <SimpleList>
+                        {managedWireless.length !== 0 && (
+                            <SimpleListGroup title={_("Wireless")} id="wireless-connections">{...managedWireless}</SimpleListGroup>
+                        )}
+                        {managedWired.length !== 0 && (
+                            <SimpleListGroup title={_("Wired")} id="wired-connections">{...managedWired}</SimpleListGroup>
+                        )}
+                        {(managedWireless.length === 0 && managedWired.length === 0) && (
+                            <SimpleListItem key="not-found">{_("No networks found")}</SimpleListItem>
+                        )}
+                    </SimpleList>
+                </SplitItem>
+                <SplitItem isFilled>
+                    {active?.iface ?
+                        <NetworkInterfacePage
+                            privileged={privileged}
+                            operationInProgress={operationInProgress}
+                            usage_monitor={usage_monitor}
+                            plot_state={undefined}
+                            interfaces={interfaces}
+                            iface={active.iface} /> :
+                        <EmptyStatePanel
+                            title={_("No network selected.")}
+                            paragraph={_("Select a network interface to configure the connection.")}
+                        />
+                    }
+                </SplitItem>
+            </Split>
+
+        </Page>
+    );
+};

pkg/networkmanager/interfaces.js

@@ -2105,6 +2105,24 @@ export function apply_group_member(choices, model, apply_group, group_connection
     });
 }
 
+export function is_loopback(iface) {
+    return iface.Name == "lo" || (iface.Device && iface.Device.DeviceType == "loopback");
+}
+
+export function has_group(iface) {
+    return (
+        (iface.Device &&
+            iface.Device.ActiveConnection &&
+            iface.Device.ActiveConnection.Group &&
+            iface.Device.ActiveConnection.Group.Members.length > 0) ||
+        (iface.MainConnection && iface.MainConnection.Groups.length > 0)
+    );
+}
+
+export function is_wireless(iface) {
+    return iface.Device?.DeviceType === '802-11-wireless';
+}
+
 export function init() {
     cockpit.translate();
 }