From 1daf2a94f4ef3ae4a038ce3ded3eec77735941e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 08:36:03 +0100
Subject: [PATCH 01/23] [web] Rename the layout slot for app actions

Basically used by the Sidebar, which will stop holding "Page" or
"Contextual" actions. Another slot will be created for them in order to
make these actions more discoverable.
---
 web/src/components/core/Sidebar.jsx  |  6 +++---
 web/src/components/layout/Layout.jsx | 17 +++++++++++++++--
 web/src/test-utils.js                |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index d25e343e88..f82f0f706f 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -21,7 +21,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
-import { Icon, PageActions } from "~/components/layout";
+import { Icon, AppActions } from "~/components/layout";
 
 // FIXME: look for a better way to allow opening the Sidebar from outside
 let openButtonRef = {};
@@ -89,7 +89,7 @@ const Sidebar = ({ children }) => {
 
   return (
     <>
-      <PageActions>
+      <AppActions>
         <button
           ref={openButtonRef}
           onClick={open}
@@ -100,7 +100,7 @@ const Sidebar = ({ children }) => {
         >
           <Icon name="menu" />
         </button>
-      </PageActions>
+      </AppActions>
 
       <nav
         id="navigation-and-options"
diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index 28ddbfaeaf..4e092918d3 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -51,7 +51,7 @@ const FooterInfoArea = createTeleporter();
  * @example
  *   <Layout>
  *     <PageIcon><DashboardIcon /></PageIcon>
- *     <PageActions><DashboardActions /></PageActions>
+ *     <AppActions><DashboardActions /></AppActions>
  *     <MainActions><Install /></MainActions>
  *     <Title>Dashboard</Title>
  *
@@ -127,6 +127,19 @@ const Title = PageTitle.Source;
  */
 const PageIcon = HeaderIcon.Source;
 
+/**
+ * Component for setting global actions shown on the header right
+ *
+ * @example
+ *   import { AppActions } from "agama-layout";
+ *   import { FancyButton } from "somewhere";
+ *   ...
+ *   <AppActions>
+ *     <FancyButton onClick={() => console.log("do something")} />
+ *   </AppActions>
+ */
+const AppActions = HeaderActions.Source;
+
 /**
  * Component for setting page actions shown on the header right
  *
@@ -183,7 +196,7 @@ export {
   Layout as default,
   Title,
   PageIcon,
-  PageActions,
+  AppActions,
   MainActions,
   AdditionalInfo,
   PageOptionsSlot,
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index 3420dc7aac..502fd02ed2 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -144,6 +144,7 @@ const mockLayout = () => ({
   default: ({ children }) => children,
   Title: ({ children }) => children,
   PageIcon: ({ children }) => children,
+  AppActions: ({ children }) => children,
   PageActions: ({ children }) => children,
   MainActions: ({ children }) => children,
   AdditionalInfo: ({ children }) => children,

From c005251e8926101bd9f4e00967e94b815b6461e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 08:39:29 +0100
Subject: [PATCH 02/23] [web] Add new layout slot for contextual/page actions

---
 web/src/components/layout/Layout.jsx | 9 +++++++--
 web/src/test-utils.js                | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index 4e092918d3..07f914aef1 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -27,6 +27,7 @@ import { About, Disclosure, LogsButton, Sidebar, ShowLogButton, ShowTerminalButt
 
 const PageTitle = createTeleporter();
 const PageOptions = createTeleporter();
+const PageActions = createTeleporter();
 const HeaderActions = createTeleporter();
 const HeaderIcon = createTeleporter();
 const FooterActions = createTeleporter();
@@ -76,7 +77,10 @@ function Layout({ children }) {
           <PageTitle.Target as="span" />
         </h1>
 
-        <HeaderActions.Target as="span" />
+        <div className="split">
+          <PageActions.Target as="span" />
+          <HeaderActions.Target as="span" />
+        </div>
       </header>
 
       <Sidebar>
@@ -151,7 +155,7 @@ const AppActions = HeaderActions.Source;
  *     <FancyButton onClick={() => console.log("do something")} />
  *   </PageActions>
  */
-const PageActions = HeaderActions.Source;
+const ContextualActions = PageActions.Source;
 
 /**
  * Component for setting the main actions shown on the footer right
@@ -197,6 +201,7 @@ export {
   Title,
   PageIcon,
   AppActions,
+  ContextualActions,
   MainActions,
   AdditionalInfo,
   PageOptionsSlot,
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index 502fd02ed2..ba7c7f47aa 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -145,7 +145,7 @@ const mockLayout = () => ({
   Title: ({ children }) => children,
   PageIcon: ({ children }) => children,
   AppActions: ({ children }) => children,
-  PageActions: ({ children }) => children,
+  ContextualActions: ({ children }) => children,
   MainActions: ({ children }) => children,
   AdditionalInfo: ({ children }) => children,
   PageOptionsContent: ({ children }) => children,

From 27715e849c3fb6969f0f261edce3f9504fee2f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 13:13:07 +0100
Subject: [PATCH 03/23] [web] Add a new ContextualActions core component

Based in the PatternFly Dropdown component[1] and intended for displaying
the actions related to the current page in an attempt to make them more
discoverable.

[1] https://www.patternfly.org/v4/components/dropdown
---
 web/src/assets/styles/blocks.scss             | 18 ++++-
 web/src/components/core/ContextualActions.jsx | 73 +++++++++++++++++++
 web/src/components/core/index.js              |  1 +
 web/src/components/layout/Icon.jsx            |  2 +
 4 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/core/ContextualActions.jsx

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index ace68ee440..1a6782af8e 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -1,7 +1,7 @@
 // Standard section
 // In the future we might need to use an specific CSS class for it if we start having different
 // section layouts.
-section {
+section:not([class^="pf-c"]) {
   display: grid;
   grid-template-columns: var(--icon-size-m) 1fr;
   grid-template-areas:
@@ -10,7 +10,7 @@ section {
   gap: var(--spacer-small);
 }
 
-section:not(:last-child) {
+section:not(:last-child, [class^="pf-c"]) {
   margin-block-end: var(--spacer-large);
 }
 
@@ -196,3 +196,17 @@ section > .content {
     --pf-c-progress--GridGap: var(--spacer-small);
   }
 }
+
+.contextual-actions a {
+  font-size: 16px;
+  font-weight: var(--fw-bold);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--color-link-hover);
+
+    svg {
+      color: var(--color-link);
+    }
+  }
+}
diff --git a/web/src/components/core/ContextualActions.jsx b/web/src/components/core/ContextualActions.jsx
new file mode 100644
index 0000000000..8b9464970e
--- /dev/null
+++ b/web/src/components/core/ContextualActions.jsx
@@ -0,0 +1,73 @@
+/*
+ * 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, { useState } from 'react';
+import { Button, Dropdown, DropdownItem, DropdownGroup } from '@patternfly/react-core';
+import { Icon, ContextualActions as ContextualActionsSlot } from "~/components/layout";
+
+const Toggler = ({ onClick }) => {
+  return (
+    <Button onClick={onClick} variant="plain">
+      <Icon name="expand_more" />
+    </Button>
+  );
+};
+
+const Group = ({ children, ...props }) => {
+  return (
+    <DropdownGroup {...props}>
+      {children}
+    </DropdownGroup>
+  );
+};
+
+const Item = ({ children, ...props }) => {
+  return (
+    <DropdownItem {...props}>
+      {children}
+    </DropdownItem>
+  );
+};
+
+const ContextualActions = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggle = () => setIsOpen(!isOpen);
+  const onSelect = () => setIsOpen(false);
+
+  return (
+    <ContextualActionsSlot>
+      <Dropdown
+        isOpen={isOpen}
+        toggle={<Toggler onClick={onToggle} />}
+        onSelect={onSelect}
+        dropdownItems={Array(children)}
+        position="right"
+        className="contextual-actions"
+        isGrouped
+      />
+    </ContextualActionsSlot>
+  );
+};
+
+ContextualActions.Group = Group;
+ContextualActions.Item = Item;
+
+export default ContextualActions;
diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index adfef7db16..e9273624b9 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -20,6 +20,7 @@
  */
 
 export { default as About } from "./About";
+export { default as ContextualActions } from "./ContextualActions";
 export { default as Disclosure } from "./Disclosure";
 export { default as Sidebar } from "./Sidebar";
 export { default as Section } from "./Section";
diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index 7075aa4b19..ea88ac9b0a 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -36,6 +36,7 @@ import Downloading from "@icons/downloading.svg?component";
 import Edit from "@icons/edit.svg?component";
 import EditSquare from "@icons/edit_square.svg?component";
 import Error from "@icons/error.svg?component";
+import ExpandMore from "@icons/expand_more.svg?component";
 import HardDrive from "@icons/hard_drive.svg?component";
 import Help from "@icons/help.svg?component";
 import HomeStorage from "@icons/home_storage.svg?component";
@@ -78,6 +79,7 @@ const icons = {
   edit: Edit,
   edit_square: EditSquare,
   error: Error,
+  expand_more: ExpandMore,
   hard_drive: HardDrive,
   help: Help,
   home_storage: HomeStorage,

From 67ce72c68e244d7f70fcc285e496f491f1ab2b89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 13:21:30 +0100
Subject: [PATCH 04/23] [web] Remove header no longer needed

---
 web/src/components/layout/Layout.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index 07f914aef1..c30ce474fe 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -87,7 +87,6 @@ function Layout({ children }) {
         <>
           <PageOptions.Target />
 
-          <h3>Other options</h3>
           <Disclosure label="Diagnostic tools" data-keep-sidebar-open>
             <ShowLogButton />
             <LogsButton data-keep-sidebar-open="true" />

From 1d2f5effcd216f5a45d85d5b64cb7469e4a883a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 13:22:04 +0100
Subject: [PATCH 05/23] [web] Adapt ProposalPage for using ContextualActions

And stop using the somehow "deprecated" PageOptions.
---
 web/src/components/storage/ProposalPage.jsx | 46 +++++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/web/src/components/storage/ProposalPage.jsx b/web/src/components/storage/ProposalPage.jsx
index 66c21b14e4..71ec788c1a 100644
--- a/web/src/components/storage/ProposalPage.jsx
+++ b/web/src/components/storage/ProposalPage.jsx
@@ -21,12 +21,12 @@
 
 import React, { useCallback, useReducer, useEffect, useState } from "react";
 import { Alert } from "@patternfly/react-core";
-import { Link } from "react-router-dom";
+import { useHref } from "react-router-dom";
 
 import { useInstallerClient } from "~/context/installer";
 import { useCancellablePromise } from "~/utils";
 import { Icon } from "~/components/layout";
-import { Page, PageOptions } from "~/components/core";
+import { Page, ContextualActions } from "~/components/core";
 import { ProposalActionsSection, ProposalSettingsSection } from "~/components/storage";
 
 const initialState = {
@@ -151,6 +151,7 @@ export default function ProposalPage() {
 
   const DASDLink = () => {
     const [show, setShow] = useState(false);
+    const href = useHref("/storage/dasd");
 
     useEffect(() => {
       client.dasd.isSupported().then(setShow);
@@ -159,23 +160,42 @@ export default function ProposalPage() {
     if (!show) return null;
 
     return (
-      <Link to="/storage/dasd">
-        <Icon name="settings" size="24" />
-        Configure DASD
-      </Link>
+      <ContextualActions.Item
+        key="dasd-link"
+        href={href}
+        description="Manage and format"
+      >
+        DASD
+      </ContextualActions.Item>
+    );
+  };
+
+  const ISCSILink = () => {
+    const href = useHref("/storage/iscsi");
+
+    return (
+      <ContextualActions.Item
+        key="iscsi-link"
+        href={href}
+        description="Connect to iSCSI targets"
+      >
+        iSCSI
+      </ContextualActions.Item>
     );
   };
 
   return (
     <Page title="Storage" icon="hard_drive" actionLabel="Back" actionVariant="secondary">
       <PageContent />
-      <PageOptions title="Storage">
-        <DASDLink />
-        <Link to="/storage/iscsi">
-          <Icon name="settings" size="24" />
-          Configure iSCSI
-        </Link>
-      </PageOptions>
+      <ContextualActions>
+        <ContextualActions.Group
+          label="Configure"
+          key="devices-options"
+        >
+          <DASDLink />
+          <ISCSILink />
+        </ContextualActions.Group>
+      </ContextualActions>
     </Page>
   );
 }

From 834ffc81e4032c3a95501034c22d22122f2a3405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 14:09:31 +0100
Subject: [PATCH 06/23] [web] Move ProposalPage options to its own file

---
 web/src/components/storage/ProposalPage.jsx   | 52 +------------
 .../components/storage/ProposalPage.test.jsx  |  1 +
 .../storage/ProposalPageOptions.jsx           | 74 +++++++++++++++++++
 web/src/components/storage/index.js           |  1 +
 4 files changed, 80 insertions(+), 48 deletions(-)
 create mode 100644 web/src/components/storage/ProposalPageOptions.jsx

diff --git a/web/src/components/storage/ProposalPage.jsx b/web/src/components/storage/ProposalPage.jsx
index 71ec788c1a..87b3cf68db 100644
--- a/web/src/components/storage/ProposalPage.jsx
+++ b/web/src/components/storage/ProposalPage.jsx
@@ -19,15 +19,14 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useCallback, useReducer, useEffect, useState } from "react";
+import React, { useCallback, useReducer, useEffect } from "react";
 import { Alert } from "@patternfly/react-core";
-import { useHref } from "react-router-dom";
 
 import { useInstallerClient } from "~/context/installer";
 import { useCancellablePromise } from "~/utils";
 import { Icon } from "~/components/layout";
-import { Page, ContextualActions } from "~/components/core";
-import { ProposalActionsSection, ProposalSettingsSection } from "~/components/storage";
+import { Page } from "~/components/core";
+import { ProposalActionsSection, ProposalPageOptions, ProposalSettingsSection } from "~/components/storage";
 
 const initialState = {
   loading: true,
@@ -149,53 +148,10 @@ export default function ProposalPage() {
     );
   };
 
-  const DASDLink = () => {
-    const [show, setShow] = useState(false);
-    const href = useHref("/storage/dasd");
-
-    useEffect(() => {
-      client.dasd.isSupported().then(setShow);
-    }, []);
-
-    if (!show) return null;
-
-    return (
-      <ContextualActions.Item
-        key="dasd-link"
-        href={href}
-        description="Manage and format"
-      >
-        DASD
-      </ContextualActions.Item>
-    );
-  };
-
-  const ISCSILink = () => {
-    const href = useHref("/storage/iscsi");
-
-    return (
-      <ContextualActions.Item
-        key="iscsi-link"
-        href={href}
-        description="Connect to iSCSI targets"
-      >
-        iSCSI
-      </ContextualActions.Item>
-    );
-  };
-
   return (
     <Page title="Storage" icon="hard_drive" actionLabel="Back" actionVariant="secondary">
       <PageContent />
-      <ContextualActions>
-        <ContextualActions.Group
-          label="Configure"
-          key="devices-options"
-        >
-          <DASDLink />
-          <ISCSILink />
-        </ContextualActions.Group>
-      </ContextualActions>
+      <ProposalPageOptions />
     </Page>
   );
 }
diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx
index a3878bce8e..0692bc3d4c 100644
--- a/web/src/components/storage/ProposalPage.test.jsx
+++ b/web/src/components/storage/ProposalPage.test.jsx
@@ -26,6 +26,7 @@ import { createClient } from "~/client";
 import { ProposalPage } from "~/components/storage";
 
 jest.mock("~/client");
+jest.mock("~/components/storage/ProposalPageOptions", mockComponent("ProposalPage Options"));
 
 jest.mock("@patternfly/react-core", () => {
   const original = jest.requireActual("@patternfly/react-core");
diff --git a/web/src/components/storage/ProposalPageOptions.jsx b/web/src/components/storage/ProposalPageOptions.jsx
new file mode 100644
index 0000000000..a464719f00
--- /dev/null
+++ b/web/src/components/storage/ProposalPageOptions.jsx
@@ -0,0 +1,74 @@
+/*
+ * 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, { useEffect, useState } from "react";
+import { useHref } from "react-router-dom";
+import { useInstallerClient } from "~/context/installer";
+import { If, ContextualActions } from "~/components/core";
+
+const DASDLink = () => {
+  const href = useHref("/storage/dasd");
+
+  return (
+    <ContextualActions.Item
+      key="dasd-link"
+      href={href}
+      description="Manage and format"
+    >
+      DASD
+    </ContextualActions.Item>
+  );
+};
+
+const ISCSILink = () => {
+  const href = useHref("/storage/iscsi");
+
+  return (
+    <ContextualActions.Item
+      key="iscsi-link"
+      href={href}
+      description="Connect to iSCSI targets"
+    >
+      iSCSI
+    </ContextualActions.Item>
+  );
+};
+
+export default function ProposalPageOptions () {
+  const [showDasdLink, setShowDasdLink] = useState(false);
+  const { storage: client } = useInstallerClient();
+
+  useEffect(() => {
+    client.dasd.isSupported().then(setShowDasdLink);
+  }, [client.dasd]);
+
+  return (
+    <ContextualActions>
+      <ContextualActions.Group
+        label="Configure"
+        key="devices-options"
+      >
+        <If condition={showDasdLink} then={<DASDLink />} />
+        <ISCSILink />
+      </ContextualActions.Group>
+    </ContextualActions>
+  );
+}
diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js
index 304b5d6bf0..4d8ae8a114 100644
--- a/web/src/components/storage/index.js
+++ b/web/src/components/storage/index.js
@@ -20,6 +20,7 @@
  */
 
 export { default as ProposalPage } from "./ProposalPage";
+export { default as ProposalPageOptions } from "./ProposalPageOptions";
 export { default as ProposalSettingsSection } from "./ProposalSettingsSection";
 export { default as ProposalActionsSection } from "./ProposalActionsSection";
 export { default as ProposalVolumes } from "./ProposalVolumes";

From 1e4683772606a726865a29efc20fb0091cdd4a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 16:57:04 +0100
Subject: [PATCH 07/23] [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    | 27 +++++++---
 .../components/network/NetworkPageOptions.jsx | 49 +++++++++++++++++++
 web/src/components/network/index.js           |  1 +
 3 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 web/src/components/network/NetworkPageOptions.jsx

diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
index a1d6e44888..462514c1f6 100644
--- a/web/src/components/network/NetworkPage.jsx
+++ b/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>
   );
 }
diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
new file mode 100644
index 0000000000..79707d99aa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/components/network/index.js b/web/src/components/network/index.js
index 5cb1b445b2..7850d43466 100644
--- a/web/src/components/network/index.js
+++ b/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";

From e403deba6aab1c50839226b46c8899452c35664e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 17:04:17 +0100
Subject: [PATCH 08/23] [web] Fix broken test

---
 web/src/components/storage/ProposalPage.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx
index 0692bc3d4c..9909a63964 100644
--- a/web/src/components/storage/ProposalPage.test.jsx
+++ b/web/src/components/storage/ProposalPage.test.jsx
@@ -26,7 +26,7 @@ import { createClient } from "~/client";
 import { ProposalPage } from "~/components/storage";
 
 jest.mock("~/client");
-jest.mock("~/components/storage/ProposalPageOptions", mockComponent("ProposalPage Options"));
+jest.mock("~/components/storage/ProposalPageOptions", () => mockComponent("ProposalPage Options"));
 
 jest.mock("@patternfly/react-core", () => {
   const original = jest.requireActual("@patternfly/react-core");

From 1e79a2d4994227723d094c85a8d88a74dcdf2f8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 17:13:31 +0100
Subject: [PATCH 09/23] [web] Display the change product link always

Now that we are going to stop teleporting links to the Sidebar and start
using another location for placing the page related links, the "Change
product" action will always be displayed in the Sidebar since, at least
initially, we don't want to relate actions only to the Overview.
---
 web/src/components/layout/Layout.jsx          | 2 ++
 web/src/components/overview/Overview.jsx      | 7 +------
 web/src/components/overview/Overview.test.jsx | 1 -
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index c30ce474fe..e5dbde40b0 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -23,6 +23,7 @@ import React from "react";
 
 import logoUrl from "~/assets/suse-horizontal-logo.svg";
 import { createTeleporter } from "react-teleporter";
+import { ChangeProductLink } from "~/components/software";
 import { About, Disclosure, LogsButton, Sidebar, ShowLogButton, ShowTerminalButton } from "~/components/core";
 
 const PageTitle = createTeleporter();
@@ -87,6 +88,7 @@ function Layout({ children }) {
         <>
           <PageOptions.Target />
 
+          <ChangeProductLink />
           <Disclosure label="Diagnostic tools" data-keep-sidebar-open>
             <ShowLogButton />
             <LogsButton data-keep-sidebar-open="true" />
diff --git a/web/src/components/overview/Overview.jsx b/web/src/components/overview/Overview.jsx
index 657c37c0e4..ed13813746 100644
--- a/web/src/components/overview/Overview.jsx
+++ b/web/src/components/overview/Overview.jsx
@@ -23,8 +23,7 @@ import React, { useState } from "react";
 import { useSoftware } from "~/context/software";
 import { Navigate } from "react-router-dom";
 
-import { Page, PageOptions, InstallButton } from "~/components/core";
-import { ChangeProductLink } from "~/components/software";
+import { Page, InstallButton } from "~/components/core";
 import {
   L10nSection,
   NetworkSection,
@@ -47,10 +46,6 @@ function Overview() {
       icon="inventory_2"
       action={<InstallButton onClick={() => setShowErrors(true)} />}
     >
-      <PageOptions>
-        <ChangeProductLink />
-      </PageOptions>
-
       <L10nSection />
       <NetworkSection />
       <StorageSection showErrors />
diff --git a/web/src/components/overview/Overview.test.jsx b/web/src/components/overview/Overview.test.jsx
index 790d2b5e3c..3e7630f1e2 100644
--- a/web/src/components/overview/Overview.test.jsx
+++ b/web/src/components/overview/Overview.test.jsx
@@ -50,7 +50,6 @@ jest.mock("~/components/overview/StorageSection", () => mockComponent("Storage S
 jest.mock("~/components/overview/NetworkSection", () => mockComponent("Network Section"));
 jest.mock("~/components/overview/UsersSection", () => mockComponent("Users Section"));
 jest.mock("~/components/overview/SoftwareSection", () => mockComponent("Software Section"));
-jest.mock("~/components/core/PageOptions", () => mockComponent("PageOptions"));
 jest.mock("~/components/core/InstallButton", () => mockComponent("Install Button"));
 
 beforeEach(() => {

From dd0065bca74d21cade8117bbf1eea1fb710c0683 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 17:45:16 +0100
Subject: [PATCH 10/23] [web] Drop the PageOptions layout slot

It'll become no longer needed
---
 web/src/components/core/Sidebar.test.jsx | 26 ++++++++++++------------
 web/src/components/layout/Layout.jsx     | 15 --------------
 web/src/test-utils.js                    |  1 -
 3 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/web/src/components/core/Sidebar.test.jsx b/web/src/components/core/Sidebar.test.jsx
index 00d1e8b64a..ed8d6f7505 100644
--- a/web/src/components/core/Sidebar.test.jsx
+++ b/web/src/components/core/Sidebar.test.jsx
@@ -22,17 +22,9 @@
 import React from "react";
 import { screen, within } from "@testing-library/react";
 import { plainRender, mockComponent, mockLayout } from "~/test-utils";
-import { PageOptions, Sidebar } from "~/components/core";
+import { Sidebar } from "~/components/core";
 
 jest.mock("~/components/layout/Layout", () => mockLayout());
-jest.mock("~/components/core/PageOptions", () => mockComponent(
-  <>
-    <a href="#">Goes somewhere</a>
-    <a href="#" data-keep-sidebar-open="true">Keep it open!</a>
-    <button>Do something</button>
-    <button data-keep-sidebar-open="true">Keep it open!</button>
-  </>
-));
 
 it("renders the sidebar initially hidden", async () => {
   plainRender(<Sidebar />);
@@ -41,7 +33,7 @@ it("renders the sidebar initially hidden", async () => {
 });
 
 it("renders a link for displaying the sidebar", async () => {
-  const { user } = plainRender(<Sidebar><PageOptions /></Sidebar>);
+  const { user } = plainRender(<Sidebar />);
 
   const link = await screen.findByLabelText(/Show/i);
   const nav = await screen.findByRole("navigation", { name: /options/i });
@@ -52,7 +44,7 @@ it("renders a link for displaying the sidebar", async () => {
 });
 
 it("renders a link for hiding the sidebar", async () => {
-  const { user } = plainRender(<Sidebar><PageOptions /></Sidebar>);
+  const { user } = plainRender(<Sidebar />);
 
   const openLink = await screen.findByLabelText(/Show/i);
   const closeLink = await screen.findByLabelText(/Hide/i);
@@ -66,7 +58,7 @@ it("renders a link for hiding the sidebar", async () => {
 });
 
 it("moves the focus to the close action after opening it", async () => {
-  const { user } = plainRender(<Sidebar><PageOptions /></Sidebar>);
+  const { user } = plainRender(<Sidebar />);
 
   const openLink = await screen.findByLabelText(/Show/i);
   const closeLink = await screen.findByLabelText(/Hide/i);
@@ -78,7 +70,15 @@ it("moves the focus to the close action after opening it", async () => {
 
 describe("onClick bubbling", () => {
   it("hides the sidebar only if the user clicked on a link or button w/o keepSidebarOpen attribute", async () => {
-    const { user } = plainRender(<Sidebar><PageOptions /></Sidebar>);
+    const { user } = plainRender(
+      <Sidebar>
+        <a href="#">Goes somewhere</a>
+        <a href="#" data-keep-sidebar-open="true">Keep it open!</a>
+        <button>Do something</button>
+        <button data-keep-sidebar-open="true">Keep it open!</button>
+      </Sidebar>
+    );
+
     const openLink = screen.getByLabelText(/Show/i);
     await user.click(openLink);
     const nav = screen.getByRole("navigation", { name: /options/i });
diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index e5dbde40b0..0ef2e20278 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -27,7 +27,6 @@ import { ChangeProductLink } from "~/components/software";
 import { About, Disclosure, LogsButton, Sidebar, ShowLogButton, ShowTerminalButton } from "~/components/core";
 
 const PageTitle = createTeleporter();
-const PageOptions = createTeleporter();
 const PageActions = createTeleporter();
 const HeaderActions = createTeleporter();
 const HeaderIcon = createTeleporter();
@@ -86,8 +85,6 @@ function Layout({ children }) {
 
       <Sidebar>
         <>
-          <PageOptions.Target />
-
           <ChangeProductLink />
           <Disclosure label="Diagnostic tools" data-keep-sidebar-open>
             <ShowLogButton />
@@ -187,16 +184,6 @@ const MainActions = FooterActions.Source;
  */
 const AdditionalInfo = FooterInfoArea.Source;
 
-/**
- * Component for setting the slot to place related options, usually in the Sidebar
- */
-const PageOptionsSlot = PageOptions.Target;
-
-/**
- * Component for teleport page related options to the PageOptions slot
- */
-const PageOptionsContent = PageOptions.Source;
-
 export {
   Layout as default,
   Title,
@@ -205,6 +192,4 @@ export {
   ContextualActions,
   MainActions,
   AdditionalInfo,
-  PageOptionsSlot,
-  PageOptionsContent,
 };
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index ba7c7f47aa..c1bb77de9c 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -148,7 +148,6 @@ const mockLayout = () => ({
   ContextualActions: ({ children }) => children,
   MainActions: ({ children }) => children,
   AdditionalInfo: ({ children }) => children,
-  PageOptionsContent: ({ children }) => children,
 });
 
 export {

From 3145b0a646fbd42c335c44e975ed9f490a4a70bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 17:47:40 +0100
Subject: [PATCH 11/23] [web] Drop PageOptions component

No longer needed since we've decided to stop teleporting page related
actions to make them more discoverable.
---
 web/src/components/core/PageOptions.jsx      | 82 --------------------
 web/src/components/core/PageOptions.test.jsx | 71 -----------------
 web/src/components/core/index.js             |  1 -
 3 files changed, 154 deletions(-)
 delete mode 100644 web/src/components/core/PageOptions.jsx
 delete mode 100644 web/src/components/core/PageOptions.test.jsx

diff --git a/web/src/components/core/PageOptions.jsx b/web/src/components/core/PageOptions.jsx
deleted file mode 100644
index 42b3ab3937..0000000000
--- a/web/src/components/core/PageOptions.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * 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.
- */
-
-// @ts-check
-
-import React from "react";
-import { PageOptionsContent } from '~/components/layout';
-
-/**
- * Wrapper for teleported page options that bubbles onClick
- * event to the slot element.
- *
- * Needed to "dispatch" the onClick events bind to any
- * parent on the DOM tree for "teleported nodes", bypassing the
- * default React Portal behavior of bubbling events up through the
- * React tree only.
- *
- * @example <caption>Simple usage</caption>
- *   <PageOptions title="Storage options">
- *     <Link to="/storage/iscsi">Configure iSCSI devices</Link>
- *     <Button
- *       onClick={showStorageHwInfo}
- *       data-keep-sidebar-open
- *     >
- *       Show Storage Hardware info
- *     </Button>
- *   </PageOptions>
- *
- * @param {object} props
- * @param {string} [props.title="Page options"] - a title for the group
- * @param {string} [props.className="flex-stack"] - CSS class for the wrapper div
- * @param {React.ReactElement} props.children - the teleported content
- */
-export default function PageOptions({
-  title = "Page options",
-  className = "flex-stack",
-  children
-}) {
-  const forwardEvents = (target) => {
-    return (
-      <div
-        className={className}
-        onClick={ e => {
-          // Using a CustomEvent because the originalTarget is needed to check the dataset.
-          // See Sidebar.jsx for better understanding
-          const customEvent = new CustomEvent(
-            e.type,
-            { ...e, detail: { originalTarget: e.target } }
-          );
-          target.dispatchEvent(customEvent);
-        }}
-      >
-        <h3>{title}</h3>
-        {children}
-      </div>
-    );
-  };
-
-  return (
-    <PageOptionsContent>
-      { (target) => forwardEvents(target) }
-    </PageOptionsContent>
-  );
-}
diff --git a/web/src/components/core/PageOptions.test.jsx b/web/src/components/core/PageOptions.test.jsx
deleted file mode 100644
index 543d8a4e4d..0000000000
--- a/web/src/components/core/PageOptions.test.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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 { screen } from "@testing-library/react";
-import { plainRender } from "~/test-utils";
-import { PageOptionsSlot } from "~/components/layout";
-import { PageOptions } from "~/components/core";
-
-describe("PageOptions", () => {
-  it("renders given title", () => {
-    plainRender(
-      <>
-        <PageOptionsSlot />
-        <PageOptions title="Awesome options">
-          The page options content
-        </PageOptions>
-      </>
-    );
-
-    screen.getByText("Awesome options");
-  });
-
-  it("renders given children", () => {
-    plainRender(
-      <>
-        <PageOptionsSlot />
-        <PageOptions title="Awesome options">
-          The page options content
-        </PageOptions>
-      </>
-    );
-
-    screen.getByText("The page options content");
-  });
-
-  it("dispatches onClick events to the target", async () => {
-    const onClickHandler = jest.fn();
-    const { user } = plainRender(
-      <>
-        <PageOptionsSlot onClick={onClickHandler} />
-        <PageOptions title="Awesome options">
-          <button>Click tester</button>
-        </PageOptions>
-      </>
-    );
-
-    const button = screen.getByRole("button", { name: "Click tester" });
-    await user.click(button);
-
-    expect(onClickHandler).toHaveBeenCalled();
-  });
-});
diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index e9273624b9..db8288c25f 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -40,7 +40,6 @@ export { default as FileViewer } from "./FileViewer";
 export { default as RowActions } from "./RowActions";
 export { default as ShowLogButton } from "./ShowLogButton";
 export { default as Page } from "./Page";
-export { default as PageOptions } from "./PageOptions";
 export { default as PasswordAndConfirmationInput } from "./PasswordAndConfirmationInput";
 export { default as Popup } from "./Popup";
 export { default as ProgressReport } from "./ProgressReport";

From dcdf6ba9177e879d79b8e05e3e515b1f61988018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 18:17:18 +0100
Subject: [PATCH 12/23] [web] CSS adjustment

---
 web/src/assets/styles/blocks.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index 1a6782af8e..f56eea423e 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -202,6 +202,10 @@ section > .content {
   font-weight: var(--fw-bold);
   text-decoration: none;
 
+  svg {
+    color: inherit;
+  }
+
   &:hover {
     color: var(--color-link-hover);
 

From 1cb6b597f0937590db00f478c7a7e17f95a3a6ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 19:06:02 +0100
Subject: [PATCH 13/23] [web] Internal improvements for NetworkPage

---
 web/src/components/network/NetworkPage.jsx | 53 ++++++++--------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
index 462514c1f6..315df9e5ea 100644
--- a/web/src/components/network/NetworkPage.jsx
+++ b/web/src/components/network/NetworkPage.jsx
@@ -27,33 +27,6 @@ import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
 import { If, Page, Section } from "~/components/core";
 import { ConnectionsTable, IpSettingsForm, NetworkPageOptions, WifiSelector } from "~/components/network";
 
-/**
- * Internal component for displaying the WifiSelector when applicable
- * @component
- *
- * @param {object} props
- * @param {boolean} props.supported - whether the system supports scanning WiFi networks
- * @param {string} [buttonVariant="link"] - the PF4/Button variant prop for the button. See {@link https://www.patternfly.org/v4/components/button#props }
- */
-const WifiScan = ({ supported, actionVariant = "link" }) => {
-  const [wifiSelectorOpen, setWifiSelectorOpen] = useState(false);
-
-  if (!supported) return null;
-
-  return (
-    <>
-      <Button
-        variant={actionVariant}
-        onClick={() => setWifiSelectorOpen(true)}
-        icon={<Icon name="wifi_find" size="24" />}
-      >
-        Connect to a Wi-Fi network
-      </Button>
-      <WifiSelector isOpen={wifiSelectorOpen} onClose={() => setWifiSelectorOpen(false)} />
-    </>
-  );
-};
-
 /**
  * Internal component for displaying info when none wire connection is found
  * @component
@@ -72,8 +45,9 @@ const NoWiredConnections = () => {
  *
  * @param {object} props
  * @param {boolean} props.supported - whether the system supports scanning WiFi networks
+ * @param {boolean} props.openWifiSelector - the function for opening the WiFi selector
  */
-const NoWifiConnections = ({ wifiScanSupported }) => {
+const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => {
   const message = wifiScanSupported
     ? "The system has not been configured for connecting to a WiFi network yet."
     : "The system does not support WiFi connections, probably because of missing or disabled hardware.";
@@ -82,7 +56,20 @@ const NoWifiConnections = ({ wifiScanSupported }) => {
     <div className="stack">
       <div className="bold">No WiFi connections found</div>
       <div>{message}</div>
-      <WifiScan supported={wifiScanSupported} actionVariant="primary" />
+      <If
+        condition={wifiScanSupported}
+        then={
+          <>
+            <Button
+              variant="primary"
+              onClick={openWifiSelector}
+              icon={<Icon name="wifi_find" size="24" />}
+            >
+              Connect to a Wi-Fi network
+            </Button>
+          </>
+        }
+      />
     </div>
   );
 };
@@ -160,13 +147,13 @@ export default function NetworkPage() {
 
   const WifiConnections = () => {
     if (activeWifiConnections.length === 0) {
-      return <NoWifiConnections wifiScanSupported={wifiScanSupported} />;
+      return (
+        <NoWifiConnections wifiScanSupported={wifiScanSupported} openWifiSelector={openWifiSelector} />
+      );
     }
 
     return (
-      <>
-        <ConnectionsTable connections={activeWifiConnections} onEdit={selectConnection} onForget={forgetConnection} />
-      </>
+      <ConnectionsTable connections={activeWifiConnections} onEdit={selectConnection} onForget={forgetConnection} />
     );
   };
 

From e5e9ec0708a1f5a74095ae3369b43ca55f5625ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 21 Apr 2023 19:47:20 +0100
Subject: [PATCH 14/23] [web] Do not import no longer used test util

Forgotten at dd0065bca74d21cade8117bbf1eea1fb710c0683
---
 web/src/components/core/Sidebar.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/Sidebar.test.jsx b/web/src/components/core/Sidebar.test.jsx
index ed8d6f7505..a29e802a86 100644
--- a/web/src/components/core/Sidebar.test.jsx
+++ b/web/src/components/core/Sidebar.test.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
-import { plainRender, mockComponent, mockLayout } from "~/test-utils";
+import { plainRender, mockLayout } from "~/test-utils";
 import { Sidebar } from "~/components/core";
 
 jest.mock("~/components/layout/Layout", () => mockLayout());

From e91e7ccbeb65f913a380d003d8aa273fef86533c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 13:03:52 +0100
Subject: [PATCH 15/23] [web] Limit when connect to WiFi menu option is
 rendered

For not displaying it when the WiFi scan is not supported.

See https://github.com/openSUSE/agama/pull/545#discussion_r1174995268
---
 web/src/components/network/NetworkPage.jsx    |  5 +----
 .../components/network/NetworkPageOptions.jsx | 21 ++++++-------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
index 315df9e5ea..f643f2a76c 100644
--- a/web/src/components/network/NetworkPage.jsx
+++ b/web/src/components/network/NetworkPage.jsx
@@ -173,10 +173,7 @@ export default function NetworkPage() {
         { ready ? <WifiConnections /> : <Skeleton /> }
       </Section>
 
-      <NetworkPageOptions
-        wifiScanSupported={wifiScanSupported}
-        openWifiSelectorCallback={openWifiSelector}
-      />
+      <NetworkPageOptions wifiScanSupported={wifiScanSupported} openWifiSelector={openWifiSelector} />
 
       <If
         condition={wifiScanSupported}
diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
index 79707d99aa..b5d44fa973 100644
--- a/web/src/components/network/NetworkPageOptions.jsx
+++ b/web/src/components/network/NetworkPageOptions.jsx
@@ -22,26 +22,17 @@
 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
+  openWifiSelector,
 }) {
+  // Since there are not more options yet, do not show the menu if WiFi scan is
+  // not supported.
+  if (!wifiScanSupported) return null;
+
   return (
     <ContextualActions>
-      <ContextualActions.Item
-        key="open-wifi-selector"
-        onClick={openWifiSelectorCallback}
-        isDisabled={!wifiScanSupported}
-        description={!wifiScanSupported ? <WifiScanNotSupported /> : null}
-      >
+      <ContextualActions.Item key="open-wifi-selector" onClick={openWifiSelector}>
         <>Connect to a Wi-Fi network</>
       </ContextualActions.Item>
     </ContextualActions>

From d80381b42a10ac1100d6c3ee9023a656de0d8368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 13:09:56 +0100
Subject: [PATCH 16/23] [web] Delete a no longer needed nor true hint

The option for configuring additional devices should be discoverable
enough now and, hopefully, the user does not need to be taught anymore
about where to find options related to a specific page. What is more,
it's no longer true that such actions can be done from the Sidebar.
---
 .../storage/ProposalSettingsSection.jsx       | 39 +++++++------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
index 637b8af7bf..41ee3fac3e 100644
--- a/web/src/components/storage/ProposalSettingsSection.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -26,7 +26,7 @@ import {
   Tooltip
 } from "@patternfly/react-core";
 
-import { If, PasswordAndConfirmationInput, Section, Sidebar, Popup } from "~/components/core";
+import { If, PasswordAndConfirmationInput, Section, Popup } from "~/components/core";
 import { ProposalVolumes } from "~/components/storage";
 import { Icon } from "~/components/layout";
 import { noop } from "~/utils";
@@ -130,14 +130,6 @@ const InstallationDeviceField = ({ current, devices, isLoading, onChange }) => {
     return <Button variant="link" isInline onClick={openForm}>{text}</Button>;
   };
 
-  const SidebarLink = ({ label }) => {
-    return (
-      <Sidebar.OpenButton onClick={closeForm}>
-        {label}
-      </Sidebar.OpenButton>
-    );
-  };
-
   if (isLoading) {
     return <Skeleton width="25%" />;
   }
@@ -153,23 +145,18 @@ const InstallationDeviceField = ({ current, devices, isLoading, onChange }) => {
         title="Installation device"
         isOpen={isFormOpen}
       >
-        <div className="flex-stack">
-          <If
-            condition={devices.length === 0}
-            then={<div className="bold">No devices found</div>}
-            else={
-              <InstallationDeviceForm
-                id="bootDeviceForm"
-                current={device}
-                devices={devices}
-                onSubmit={acceptForm}
-              />
-            }
-          />
-          <p>
-            Use the <SidebarLink label="advanced options menu" /> to configure access to more disks.
-          </p>
-        </div>
+        <If
+          condition={devices.length === 0}
+          then={<div className="bold">No devices found</div>}
+          else={
+            <InstallationDeviceForm
+              id="bootDeviceForm"
+              current={device}
+              devices={devices}
+              onSubmit={acceptForm}
+            />
+          }
+        />
         <Popup.Actions>
           <Popup.Confirm
             form="bootDeviceForm"

From a492944bda33c32b3d124ac42d74b1df32b8b40a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 13:24:09 +0100
Subject: [PATCH 17/23] [web] Drop Sidebar.OpenButton component

Because the use case [1] for which it was introduced was already gone:
to provide a link for directly opening the sidebar from a text teaching
the user where to find page related actions.

We can bring back the component if needed, but let's get rid of it now.

This commit "reverts" f1a56eba9, df85b3c70, and a bit of f39f65dc1

[1] https://github.com/openSUSE/agama/pull/500
---
 web/src/components/core/Sidebar.jsx | 28 ++--------------------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index f82f0f706f..38be25ad92 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -23,9 +23,6 @@ import React, { useEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon, AppActions } from "~/components/layout";
 
-// FIXME: look for a better way to allow opening the Sidebar from outside
-let openButtonRef = {};
-
 /**
  * Agama sidebar navigation
  * @component
@@ -33,9 +30,8 @@ let openButtonRef = {};
  * @param {object} props
  * @param {React.ReactElement} props.children
  */
-const Sidebar = ({ children }) => {
+export default function Sidebar ({ children }) {
   const [isOpen, setIsOpen] = useState(false);
-  openButtonRef = useRef(null);
   const closeButtonRef = useRef(null);
 
   const open = () => setIsOpen(true);
@@ -91,7 +87,6 @@ const Sidebar = ({ children }) => {
     <>
       <AppActions>
         <button
-          ref={openButtonRef}
           onClick={open}
           className="plain-control"
           aria-label="Show navigation and other options"
@@ -134,23 +129,4 @@ const Sidebar = ({ children }) => {
       </nav>
     </>
   );
-};
-
-/**
- * Button for opening the sidebar
- * @component
- *
- * @param {object} props
- * @param {onClickFn} [props.onClick] - On click callback
- * @param {React.ReactElement} props.children
- */
-Sidebar.OpenButton = ({ onClick: onClickProp, children }) => {
-  const onClick = () => {
-    if (onClickProp !== undefined) onClickProp();
-    openButtonRef.current.click();
-  };
-
-  return <Button variant="link" isInline onClick={onClick}>{children}</Button>;
-};
-
-export default Sidebar;
+}

From 390329e4bc1be0d650a3cc181d1ddd6ddd400ae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 15:12:28 +0100
Subject: [PATCH 18/23] [web] Add documentation and test for ContextualActions

---
 web/src/components/core/ContextualActions.jsx | 65 ++++++++++++++++
 .../core/ContextualActions.test.jsx           | 76 +++++++++++++++++++
 2 files changed, 141 insertions(+)
 create mode 100644 web/src/components/core/ContextualActions.test.jsx

diff --git a/web/src/components/core/ContextualActions.jsx b/web/src/components/core/ContextualActions.jsx
index 8b9464970e..7e3395fb76 100644
--- a/web/src/components/core/ContextualActions.jsx
+++ b/web/src/components/core/ContextualActions.jsx
@@ -23,6 +23,13 @@ import React, { useState } from 'react';
 import { Button, Dropdown, DropdownItem, DropdownGroup } from '@patternfly/react-core';
 import { Icon, ContextualActions as ContextualActionsSlot } from "~/components/layout";
 
+/**
+ * Internal component to build the {ContextualActions} toggler
+ * @component
+ *
+ * @param {object} props
+ * @param {function} props.onClick
+ */
 const Toggler = ({ onClick }) => {
   return (
     <Button onClick={onClick} variant="plain">
@@ -31,6 +38,16 @@ const Toggler = ({ onClick }) => {
   );
 };
 
+/**
+ * A group of actions belonging to a {ContextualActions} component
+ * @component
+ *
+ * Built on top of {@link https://www.patternfly.org/v4/components/dropdown/#dropdowngroup PF DropdownGroup}
+ *
+ * @see {ContextualActions } examples.
+ *
+ * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdowngroup}
+ */
 const Group = ({ children, ...props }) => {
   return (
     <DropdownGroup {...props}>
@@ -39,6 +56,16 @@ const Group = ({ children, ...props }) => {
   );
 };
 
+/**
+ * An action belonging to a {ContextualActions} component
+ * @component
+ *
+ * Built on top of {@link https://www.patternfly.org/v4/components/dropdown/#dropdownitem PF DropdownItem}
+ *
+ * @see {ContextualActions } examples.
+ *
+ * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdownitem}
+ */
 const Item = ({ children, ...props }) => {
   return (
     <DropdownItem {...props}>
@@ -47,6 +74,44 @@ const Item = ({ children, ...props }) => {
   );
 };
 
+/**
+ * Component for rendering actions related to the current page
+ * @component
+ *
+ * It consist in a {@link https://www.patternfly.org/v4/components/dropdown
+ * PatternFly Dropdown} "teleported" to the header, close to the
+ * action for opening the Sidebar
+ *
+ * @example <caption>Usage example</caption>
+ *   <ContextualActions>
+ *     <ContextualActions.Item
+ *       key="reprobe-link"
+ *       description="Run a storage device detection"
+ *     >
+ *
+ *       Reprobe
+ *     </ContextualActions.Item>
+ *     <ContextualActions.Group key="configuration-links" label="Configure">
+ *       <ContextualActions.Item
+ *         key="dasd-link"
+ *         href={href}
+ *         description="Manage and format"
+ *       >
+ *         DASD
+ *       </ContextualActions.Item>
+ *       <ContextualActions.Item
+ *         key="iscsi-link"
+ *         href={href}
+ *         description="Connect to iSCSI targets"
+ *        >
+ *         iSCSI
+ *       </ContextualActions.Item>
+ *     </ContextualActions.Group>
+ *   </ContextualActions>
+ *
+ * @param {object} props
+ * @param {Group|Item|Array<Group|Item>} props.children
+ */
 const ContextualActions = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const onToggle = () => setIsOpen(!isOpen);
diff --git a/web/src/components/core/ContextualActions.test.jsx b/web/src/components/core/ContextualActions.test.jsx
new file mode 100644
index 0000000000..8fe1acc01b
--- /dev/null
+++ b/web/src/components/core/ContextualActions.test.jsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) [2022-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 { screen, within } from "@testing-library/react";
+import { plainRender, mockLayout } from "~/test-utils";
+import { ContextualActions } from "~/components/core";
+
+jest.mock("~/components/layout/Layout", () => mockLayout());
+
+it("renders the component initially closed", async () => {
+  const { user } = plainRender(
+    <ContextualActions>
+      <ContextualActions.Item>A dummy action</ContextualActions.Item>
+    </ContextualActions>
+  );
+
+  expect(screen.queryByRole("menuitem", { name: "A dummy action" })).toBeNull();
+});
+
+it("show and hide the component content on user request", async () => {
+  const { user } = plainRender(
+    <ContextualActions>
+      <ContextualActions.Item><>A dummy action</></ContextualActions.Item>
+    </ContextualActions>
+  );
+
+  const toggler = screen.getByRole("button");
+
+  expect(screen.queryByRole("menuitem", { name: "A dummy action" })).toBeNull();
+
+  await user.click(toggler);
+
+  screen.getByRole("menuitem", { name: "A dummy action" });
+
+  await user.click(toggler);
+
+  expect(screen.queryByRole("menuitem", { name: "A dummy action" })).toBeNull();
+});
+
+it("hide the component content when the user clicks on one of its actions", async () => {
+  const { user } = plainRender(
+    <ContextualActions>
+      <ContextualActions.Group label="Refresh">
+        <ContextualActions.Item><>Section</></ContextualActions.Item>
+        <ContextualActions.Item><>Page</></ContextualActions.Item>
+      </ContextualActions.Group>
+      <ContextualActions.Item><>Exit</></ContextualActions.Item>
+    </ContextualActions>
+  );
+
+  const toggler = screen.getByRole("button");
+  await user.click(toggler);
+  const action = screen.getByRole("menuitem", { name: "Section" });
+  await user.click(action);
+
+  expect(screen.queryByRole("menuitem", { name: "A dummy action" })).toBeNull();
+});

From a195e8dc7b6b5da1b4a8a80044b8cae99a75644a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 15:17:38 +0100
Subject: [PATCH 19/23] [web] CSS adjustment

---
 web/src/assets/styles/blocks.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index f56eea423e..c11acaf65a 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -197,6 +197,10 @@ section > .content {
   }
 }
 
+.contextual-actions > button {
+  --pf-c-button--PaddingRight: 0
+}
+
 .contextual-actions a {
   font-size: 16px;
   font-weight: var(--fw-bold);

From 6a8999026890e24ad18013f86c7f483e52cc84e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 15:25:24 +0100
Subject: [PATCH 20/23] [web] Rename ContextualActions to PageOptions

Because the component is more related to a PageMenu or PageOptions and
not to a "contextual actions".
---
 web/src/assets/styles/blocks.scss             |  4 +-
 ...{ContextualActions.jsx => PageOptions.jsx} | 46 +++++++++----------
 ...lActions.test.jsx => PageOptions.test.jsx} | 28 +++++------
 web/src/components/core/index.js              |  2 +-
 web/src/components/layout/Layout.jsx          | 22 ++++-----
 .../components/network/NetworkPageOptions.jsx | 10 ++--
 .../storage/ProposalPageOptions.jsx           | 18 ++++----
 web/src/test-utils.js                         |  2 +-
 8 files changed, 66 insertions(+), 66 deletions(-)
 rename web/src/components/core/{ContextualActions.jsx => PageOptions.jsx} (76%)
 rename web/src/components/core/{ContextualActions.test.jsx => PageOptions.test.jsx} (75%)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index c11acaf65a..3bccf67918 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -197,11 +197,11 @@ section > .content {
   }
 }
 
-.contextual-actions > button {
+.page-options > button {
   --pf-c-button--PaddingRight: 0
 }
 
-.contextual-actions a {
+.page-options a {
   font-size: 16px;
   font-weight: var(--fw-bold);
   text-decoration: none;
diff --git a/web/src/components/core/ContextualActions.jsx b/web/src/components/core/PageOptions.jsx
similarity index 76%
rename from web/src/components/core/ContextualActions.jsx
rename to web/src/components/core/PageOptions.jsx
index 7e3395fb76..a25a5a264e 100644
--- a/web/src/components/core/ContextualActions.jsx
+++ b/web/src/components/core/PageOptions.jsx
@@ -21,10 +21,10 @@
 
 import React, { useState } from 'react';
 import { Button, Dropdown, DropdownItem, DropdownGroup } from '@patternfly/react-core';
-import { Icon, ContextualActions as ContextualActionsSlot } from "~/components/layout";
+import { Icon, PageOptions as PageOptionsSlot } from "~/components/layout";
 
 /**
- * Internal component to build the {ContextualActions} toggler
+ * Internal component to build the {PageOptions} toggler
  * @component
  *
  * @param {object} props
@@ -39,12 +39,12 @@ const Toggler = ({ onClick }) => {
 };
 
 /**
- * A group of actions belonging to a {ContextualActions} component
+ * A group of actions belonging to a {PageOptions} component
  * @component
  *
  * Built on top of {@link https://www.patternfly.org/v4/components/dropdown/#dropdowngroup PF DropdownGroup}
  *
- * @see {ContextualActions } examples.
+ * @see {PageOptions } examples.
  *
  * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdowngroup}
  */
@@ -57,12 +57,12 @@ const Group = ({ children, ...props }) => {
 };
 
 /**
- * An action belonging to a {ContextualActions} component
+ * An action belonging to a {PageOptions} component
  * @component
  *
  * Built on top of {@link https://www.patternfly.org/v4/components/dropdown/#dropdownitem PF DropdownItem}
  *
- * @see {ContextualActions } examples.
+ * @see {PageOptions } examples.
  *
  * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdownitem}
  */
@@ -83,56 +83,56 @@ const Item = ({ children, ...props }) => {
  * action for opening the Sidebar
  *
  * @example <caption>Usage example</caption>
- *   <ContextualActions>
- *     <ContextualActions.Item
+ *   <PageOptions>
+ *     <PageOptions.Item
  *       key="reprobe-link"
  *       description="Run a storage device detection"
  *     >
  *
  *       Reprobe
- *     </ContextualActions.Item>
- *     <ContextualActions.Group key="configuration-links" label="Configure">
- *       <ContextualActions.Item
+ *     </PageOptions.Item>
+ *     <PageOptions.Group key="configuration-links" label="Configure">
+ *       <PageOptions.Item
  *         key="dasd-link"
  *         href={href}
  *         description="Manage and format"
  *       >
  *         DASD
- *       </ContextualActions.Item>
- *       <ContextualActions.Item
+ *       </PageOptions.Item>
+ *       <PageOptions.Item
  *         key="iscsi-link"
  *         href={href}
  *         description="Connect to iSCSI targets"
  *        >
  *         iSCSI
- *       </ContextualActions.Item>
- *     </ContextualActions.Group>
- *   </ContextualActions>
+ *       </PageOptions.Item>
+ *     </PageOptions.Group>
+ *   </PageOptions>
  *
  * @param {object} props
  * @param {Group|Item|Array<Group|Item>} props.children
  */
-const ContextualActions = ({ children }) => {
+const PageOptions = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const onToggle = () => setIsOpen(!isOpen);
   const onSelect = () => setIsOpen(false);
 
   return (
-    <ContextualActionsSlot>
+    <PageOptionsSlot>
       <Dropdown
         isOpen={isOpen}
         toggle={<Toggler onClick={onToggle} />}
         onSelect={onSelect}
         dropdownItems={Array(children)}
         position="right"
-        className="contextual-actions"
+        className="page-options"
         isGrouped
       />
-    </ContextualActionsSlot>
+    </PageOptionsSlot>
   );
 };
 
-ContextualActions.Group = Group;
-ContextualActions.Item = Item;
+PageOptions.Group = Group;
+PageOptions.Item = Item;
 
-export default ContextualActions;
+export default PageOptions;
diff --git a/web/src/components/core/ContextualActions.test.jsx b/web/src/components/core/PageOptions.test.jsx
similarity index 75%
rename from web/src/components/core/ContextualActions.test.jsx
rename to web/src/components/core/PageOptions.test.jsx
index 8fe1acc01b..472ef22bb1 100644
--- a/web/src/components/core/ContextualActions.test.jsx
+++ b/web/src/components/core/PageOptions.test.jsx
@@ -22,15 +22,15 @@
 import React from "react";
 import { screen, within } from "@testing-library/react";
 import { plainRender, mockLayout } from "~/test-utils";
-import { ContextualActions } from "~/components/core";
+import { PageOptions } from "~/components/core";
 
 jest.mock("~/components/layout/Layout", () => mockLayout());
 
 it("renders the component initially closed", async () => {
   const { user } = plainRender(
-    <ContextualActions>
-      <ContextualActions.Item>A dummy action</ContextualActions.Item>
-    </ContextualActions>
+    <PageOptions>
+      <PageOptions.Item>A dummy action</PageOptions.Item>
+    </PageOptions>
   );
 
   expect(screen.queryByRole("menuitem", { name: "A dummy action" })).toBeNull();
@@ -38,9 +38,9 @@ it("renders the component initially closed", async () => {
 
 it("show and hide the component content on user request", async () => {
   const { user } = plainRender(
-    <ContextualActions>
-      <ContextualActions.Item><>A dummy action</></ContextualActions.Item>
-    </ContextualActions>
+    <PageOptions>
+      <PageOptions.Item><>A dummy action</></PageOptions.Item>
+    </PageOptions>
   );
 
   const toggler = screen.getByRole("button");
@@ -58,13 +58,13 @@ it("show and hide the component content on user request", async () => {
 
 it("hide the component content when the user clicks on one of its actions", async () => {
   const { user } = plainRender(
-    <ContextualActions>
-      <ContextualActions.Group label="Refresh">
-        <ContextualActions.Item><>Section</></ContextualActions.Item>
-        <ContextualActions.Item><>Page</></ContextualActions.Item>
-      </ContextualActions.Group>
-      <ContextualActions.Item><>Exit</></ContextualActions.Item>
-    </ContextualActions>
+    <PageOptions>
+      <PageOptions.Group label="Refresh">
+        <PageOptions.Item><>Section</></PageOptions.Item>
+        <PageOptions.Item><>Page</></PageOptions.Item>
+      </PageOptions.Group>
+      <PageOptions.Item><>Exit</></PageOptions.Item>
+    </PageOptions>
   );
 
   const toggler = screen.getByRole("button");
diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index db8288c25f..aa646259a7 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -20,7 +20,7 @@
  */
 
 export { default as About } from "./About";
-export { default as ContextualActions } from "./ContextualActions";
+export { default as PageOptions } from "./PageOptions";
 export { default as Disclosure } from "./Disclosure";
 export { default as Sidebar } from "./Sidebar";
 export { default as Section } from "./Section";
diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
index 0ef2e20278..1cbdbb836b 100644
--- a/web/src/components/layout/Layout.jsx
+++ b/web/src/components/layout/Layout.jsx
@@ -130,30 +130,30 @@ const Title = PageTitle.Source;
 const PageIcon = HeaderIcon.Source;
 
 /**
- * Component for setting global actions shown on the header right
+ * Component for setting page actions shown on the header right
  *
  * @example
- *   import { AppActions } from "agama-layout";
+ *   import { PageActions } from "agama-layout";
  *   import { FancyButton } from "somewhere";
  *   ...
- *   <AppActions>
+ *   <PageActions>
  *     <FancyButton onClick={() => console.log("do something")} />
- *   </AppActions>
+ *   </PageActions>
  */
-const AppActions = HeaderActions.Source;
+const PageOptions = PageActions.Source;
 
 /**
- * Component for setting page actions shown on the header right
+ * Component for setting global actions shown on the header right
  *
  * @example
- *   import { PageActions } from "agama-layout";
+ *   import { AppActions } from "agama-layout";
  *   import { FancyButton } from "somewhere";
  *   ...
- *   <PageActions>
+ *   <AppActions>
  *     <FancyButton onClick={() => console.log("do something")} />
- *   </PageActions>
+ *   </AppActions>
  */
-const ContextualActions = PageActions.Source;
+const AppActions = HeaderActions.Source;
 
 /**
  * Component for setting the main actions shown on the footer right
@@ -189,7 +189,7 @@ export {
   Title,
   PageIcon,
   AppActions,
-  ContextualActions,
+  PageOptions,
   MainActions,
   AdditionalInfo,
 };
diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
index b5d44fa973..01286ecf73 100644
--- a/web/src/components/network/NetworkPageOptions.jsx
+++ b/web/src/components/network/NetworkPageOptions.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { ContextualActions } from "~/components/core";
+import { PageOptions } from "~/components/core";
 
 export default function NetworkPageOptions ({
   wifiScanSupported = false,
@@ -31,10 +31,10 @@ export default function NetworkPageOptions ({
   if (!wifiScanSupported) return null;
 
   return (
-    <ContextualActions>
-      <ContextualActions.Item key="open-wifi-selector" onClick={openWifiSelector}>
+    <PageOptions>
+      <PageOptions.Item key="open-wifi-selector" onClick={openWifiSelector}>
         <>Connect to a Wi-Fi network</>
-      </ContextualActions.Item>
-    </ContextualActions>
+      </PageOptions.Item>
+    </PageOptions>
   );
 }
diff --git a/web/src/components/storage/ProposalPageOptions.jsx b/web/src/components/storage/ProposalPageOptions.jsx
index a464719f00..a6a90ad060 100644
--- a/web/src/components/storage/ProposalPageOptions.jsx
+++ b/web/src/components/storage/ProposalPageOptions.jsx
@@ -22,19 +22,19 @@
 import React, { useEffect, useState } from "react";
 import { useHref } from "react-router-dom";
 import { useInstallerClient } from "~/context/installer";
-import { If, ContextualActions } from "~/components/core";
+import { If, PageOptions } from "~/components/core";
 
 const DASDLink = () => {
   const href = useHref("/storage/dasd");
 
   return (
-    <ContextualActions.Item
+    <PageOptions.Item
       key="dasd-link"
       href={href}
       description="Manage and format"
     >
       DASD
-    </ContextualActions.Item>
+    </PageOptions.Item>
   );
 };
 
@@ -42,13 +42,13 @@ const ISCSILink = () => {
   const href = useHref("/storage/iscsi");
 
   return (
-    <ContextualActions.Item
+    <PageOptions.Item
       key="iscsi-link"
       href={href}
       description="Connect to iSCSI targets"
     >
       iSCSI
-    </ContextualActions.Item>
+    </PageOptions.Item>
   );
 };
 
@@ -61,14 +61,14 @@ export default function ProposalPageOptions () {
   }, [client.dasd]);
 
   return (
-    <ContextualActions>
-      <ContextualActions.Group
+    <PageOptions>
+      <PageOptions.Group
         label="Configure"
         key="devices-options"
       >
         <If condition={showDasdLink} then={<DASDLink />} />
         <ISCSILink />
-      </ContextualActions.Group>
-    </ContextualActions>
+      </PageOptions.Group>
+    </PageOptions>
   );
 }
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index c1bb77de9c..a472747423 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -145,7 +145,7 @@ const mockLayout = () => ({
   Title: ({ children }) => children,
   PageIcon: ({ children }) => children,
   AppActions: ({ children }) => children,
-  ContextualActions: ({ children }) => children,
+  PageOptions: ({ children }) => children,
   MainActions: ({ children }) => children,
   AdditionalInfo: ({ children }) => children,
 });

From fd4f07991e3412bd6e06aeaf9be8b86ec06f9d19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 16:47:38 +0100
Subject: [PATCH 21/23] [web] Add documentation

---
 web/src/components/network/NetworkPageOptions.jsx  |  8 ++++++++
 web/src/components/storage/ProposalPageOptions.jsx | 12 ++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
index 01286ecf73..b27cb1d4ab 100644
--- a/web/src/components/network/NetworkPageOptions.jsx
+++ b/web/src/components/network/NetworkPageOptions.jsx
@@ -22,6 +22,14 @@
 import React from "react";
 import { PageOptions } from "~/components/core";
 
+/**
+ * Component for rendering the options available from Network page
+ * @component
+ *
+ * @param {object} props
+ * @param {boolean} [props.wifiScanSupported=false] - wether the scan of WiFi networks is supported
+ * @param {function} props.openWifiSelector - the function for opening the WiFi network selector
+ */
 export default function NetworkPageOptions ({
   wifiScanSupported = false,
   openWifiSelector,
diff --git a/web/src/components/storage/ProposalPageOptions.jsx b/web/src/components/storage/ProposalPageOptions.jsx
index a6a90ad060..858e8310e3 100644
--- a/web/src/components/storage/ProposalPageOptions.jsx
+++ b/web/src/components/storage/ProposalPageOptions.jsx
@@ -24,6 +24,10 @@ import { useHref } from "react-router-dom";
 import { useInstallerClient } from "~/context/installer";
 import { If, PageOptions } from "~/components/core";
 
+/**
+ * Internal component for build the link to Storage/DASD page
+ * @component
+ */
 const DASDLink = () => {
   const href = useHref("/storage/dasd");
 
@@ -38,6 +42,10 @@ const DASDLink = () => {
   );
 };
 
+/**
+ * Internal component for build the link to Storage/iSCSI page
+ * @component
+ */
 const ISCSILink = () => {
   const href = useHref("/storage/iscsi");
 
@@ -52,6 +60,10 @@ const ISCSILink = () => {
   );
 };
 
+/**
+ * Component for rendering the options available from Storage/ProposalPage
+ * @component
+ */
 export default function ProposalPageOptions () {
   const [showDasdLink, setShowDasdLink] = useState(false);
   const { storage: client } = useInstallerClient();

From a60b512cde93747d7a882f602848e760d55f6a53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 24 Apr 2023 16:54:53 +0100
Subject: [PATCH 22/23] [web] Update the changes file

---
 web/package/cockpit-agama.changes | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index c204d48697..db0d9246d9 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Mon Apr 24 15:53:35 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- Extract page options from the Sidebar to make them
+  more discoverable (gh#openSUSE/agama#545)
+
 -------------------------------------------------------------------
 Fri Apr 14 13:08:05 UTC 2023 - José Iván López González <jlopez@suse.com>
 

From 6d9c61b72848071012eee543a82aff15a0cca130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Tue, 25 Apr 2023 08:39:06 +0100
Subject: [PATCH 23/23] [web] Please linters

---
 web/src/components/core/PageOptions.test.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/core/PageOptions.test.jsx b/web/src/components/core/PageOptions.test.jsx
index 472ef22bb1..00c26aaafa 100644
--- a/web/src/components/core/PageOptions.test.jsx
+++ b/web/src/components/core/PageOptions.test.jsx
@@ -20,14 +20,14 @@
  */
 
 import React from "react";
-import { screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { plainRender, mockLayout } from "~/test-utils";
 import { PageOptions } from "~/components/core";
 
 jest.mock("~/components/layout/Layout", () => mockLayout());
 
 it("renders the component initially closed", async () => {
-  const { user } = plainRender(
+  plainRender(
     <PageOptions>
       <PageOptions.Item>A dummy action</PageOptions.Item>
     </PageOptions>