[web] Adapt NetworkPage for using ContextualActions

Moving the actions to its own NetworkPageOptions page and stop using the
"deprecated" PageOptions to show them in the Sidebar.

web/src/components/network/NetworkPage.jsx

@@ -24,8 +24,8 @@ import { Button, Skeleton } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
-import { Page, PageOptions, Section } from "~/components/core";
-import { ConnectionsTable, IpSettingsForm, WifiSelector } from "~/components/network";
+import { If, Page, Section } from "~/components/core";
+import { ConnectionsTable, IpSettingsForm, NetworkPageOptions, WifiSelector } from "~/components/network";
 
 /**
  * Internal component for displaying the WifiSelector when applicable
@@ -98,6 +98,10 @@ export default function NetworkPage() {
   const [connections, setConnections] = useState([]);
   const [selectedConnection, setSelectedConnection] = useState(null);
   const [wifiScanSupported, setWifiScanSupported] = useState(false);
+  const [wifiSelectorOpen, setWifiSelectorOpen] = useState(false);
+
+  const openWifiSelector = () => setWifiSelectorOpen(true);
+  const closeWifiSelector = () => setWifiSelectorOpen(false);
 
   useEffect(() => {
     client.setUp().then(() => setInitialized(true));
@@ -182,12 +186,21 @@ export default function NetworkPage() {
         { ready ? <WifiConnections /> : <Skeleton /> }
       </Section>
 
+      <NetworkPageOptions
+        wifiScanSupported={wifiScanSupported}
+        openWifiSelectorCallback={openWifiSelector}
+      />
+
+      <If
+        condition={wifiScanSupported}
+        then={<WifiSelector isOpen={wifiSelectorOpen} onClose={closeWifiSelector} />}
+      />
+
       { /* TODO: improve the connections edition */ }
-      { selectedConnection && <IpSettingsForm connection={selectedConnection} onClose={() => setSelectedConnection(null)} /> }
-      { wifiScanSupported &&
-        <PageOptions title="Network">
-          <WifiScan supported={wifiScanSupported} />
-        </PageOptions> }
+      <If
+        condition={selectedConnection}
+        then=<IpSettingsForm connection={selectedConnection} onClose={() => setSelectedConnection(null)} />
+      />
     </Page>
   );
 }

web/src/components/network/NetworkPageOptions.jsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * 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 { ContextualActions } from "~/components/core";
+
+const WifiScanNotSupported = () => {
+  return (
+    <>
+      The system does not support scanning WiFi networks
+    </>
+  );
+};
+
+export default function NetworkPageOptions ({
+  wifiScanSupported = false,
+  openWifiSelectorCallback
+}) {
+  return (
+    <ContextualActions>
+      <ContextualActions.Item
+        key="open-wifi-selector"
+        onClick={openWifiSelectorCallback}
+        isDisabled={!wifiScanSupported}
+        description={!wifiScanSupported ? <WifiScanNotSupported /> : null}
+      >
+        <>Connect to a Wi-Fi network</>
+      </ContextualActions.Item>
+    </ContextualActions>
+  );
+}

web/src/components/network/index.js

@@ -20,6 +20,7 @@
  */
 
 export { default as NetworkPage } from "./NetworkPage";
+export { default as NetworkPageOptions } from "./NetworkPageOptions";
 export { default as AddressesDataList } from "./AddressesDataList";
 export { default as ConnectionsTable } from "./ConnectionsTable";
 export { default as DnsDataList } from "./DnsDataList";