[web] Change the location of page options

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,21 @@ section > .content {
     --pf-c-progress--GridGap: var(--spacer-small);
   }
 }
+
+.contextual-actions a {
+  font-size: 16px;
+  font-weight: var(--fw-bold);
+  text-decoration: none;
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: var(--color-link-hover);
+
+    svg {
+      color: var(--color-link);
+    }
+  }
+}

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;

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"

web/src/components/core/Sidebar.test.jsx

@@ -21,18 +21,10 @@
 
 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 { plainRender, mockLayout } from "~/test-utils";
+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 });

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";
@@ -39,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";

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,