[web] Stop using legacy PF/Dropdown

Use the new PF/Dropdown and PF/MenuToggle instead. Related to patternfly/patternfly-react#8835 and others.
agama-project · Sep 14, 2023 · 2edc4e2 · 2edc4e2
1 parent 559609a
commit 2edc4e2
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 108 deletions.
diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
@@ -193,6 +193,11 @@ section > .content {
   }
 }
 
+// temporary fix during migration
+.page-options > li {
+  min-inline-size: 150px;
+}
+
 .page-options > button {
   --pf-c-button--PaddingRight: 0
 }

diff --git a/web/src/components/core/KebabMenu.jsx b/web/src/components/core/KebabMenu.jsx
@@ -20,27 +20,29 @@
  */
 
 import React, { useState } from "react";
-import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownList, MenuToggle } from '@patternfly/react-core';
 import { Icon } from "~/components/layout";
 
-export default function KebabMenu({ items, position = "right", id = Date.now(), ...props }) {
+export default function KebabMenu({ items, position = "right", ...props }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggle = () => setIsOpen(!isOpen);
 
   return (
     <Dropdown
       onSelect={toggle}
-      toggle={
-        <DropdownToggle id={`${id}-toggler`} className="toggler" toggleIndicator={null} onToggle={toggle}>
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} variant="plain" onClick={toggle} className="toggler">
           <Icon name="more_vert" size="24" />
-        </DropdownToggle>
-      }
-      isPlain
+        </MenuToggle>
+      )}
       isOpen={isOpen}
-      position={position}
+      popperProps={{ position }}
       {...props}
-      dropdownItems={items}
-    />
+    >
+      <DropdownList>
+        { items }
+      </DropdownList>
+    </Dropdown>
   );
 }
diff --git a/web/src/components/core/PageOptions.jsx b/web/src/components/core/PageOptions.jsx
@@ -20,8 +20,10 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Button } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownGroup } from '@patternfly/react-core/deprecated';
+import {
+  Dropdown, DropdownGroup, DropdownItem, DropdownList,
+  MenuToggle
+} from '@patternfly/react-core';
 import { Icon, PageOptions as PageOptionsSlot } from "~/components/layout";
 
 /**
@@ -31,11 +33,11 @@ import { Icon, PageOptions as PageOptionsSlot } from "~/components/layout";
  * @param {object} props
  * @param {function} props.onClick
  */
-const Toggler = ({ onClick }) => {
+const Toggler = ({ toggleRef, onClick }) => {
   return (
-    <Button onClick={onClick} variant="plain">
+    <MenuToggle ref={toggleRef} onClick={onClick} variant="plain">
       <Icon name="expand_more" />
-    </Button>
+    </MenuToggle>
   );
 };
 
@@ -58,7 +60,7 @@ const Group = ({ children, ...props }) => {
 };
 
 /**
- * An action belonging to a {PageOptions} component
+ * An option belonging to a {PageOptions} component
  * @component
  *
  * Built on top of {@link https://www.patternfly.org/v4/components/dropdown/#dropdownitem PF DropdownItem}
@@ -67,14 +69,32 @@ const Group = ({ children, ...props }) => {
  *
  * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdownitem}
  */
-const Item = ({ children, ...props }) => {
+const Option = ({ children, ...props }) => {
   return (
     <DropdownItem {...props}>
       {children}
     </DropdownItem>
   );
 };
 
+/**
+ * A colleciton of {Option}s belonging to a {PageOptions} component
+ * @component
+ *
+ * Built on top of {@link https://www.patternfly.org/components/menus/dropdown#dropdownlist PatternFly DropdownList}
+ *
+ * @see {PageOptions} examples.
+ *
+ * @param {object} props - PF DropdownItem props, See {@link https://www.patternfly.org/v4/components/dropdowngroup}
+ */
+const Options = ({ children, ...props }) => {
+  return (
+    <DropdownList {...props}>
+      {children}
+    </DropdownList>
+  );
+};
+
 /**
  * Component for rendering actions related to the current page
  * @component
@@ -85,28 +105,32 @@ const Item = ({ children, ...props }) => {
  *
  * @example <caption>Usage example</caption>
  *   <PageOptions>
- *     <PageOptions.Item
- *       key="reprobe-link"
- *       description="Run a storage device detection"
- *     >
+ *     <PageOptions.Options>
+ *       <PageOptions.Option
+ *         key="reprobe-link"
+ *         description="Run a storage device detection"
+ *       >
  *
- *       Reprobe
- *     </PageOptions.Item>
+ *         Reprobe
+ *       </PageOptions.Option>
+ *     </PageOptions.Options>
  *     <PageOptions.Group key="configuration-links" label="Configure">
- *       <PageOptions.Item
- *         key="dasd-link"
- *         href={href}
- *         description="Manage and format"
- *       >
- *         DASD
- *       </PageOptions.Item>
- *       <PageOptions.Item
- *         key="iscsi-link"
- *         href={href}
- *         description="Connect to iSCSI targets"
- *        >
- *         iSCSI
- *       </PageOptions.Item>
+ *       <PageOptions.Options>
+ *         <PageOptions.Option
+ *           key="dasd-link"
+ *           href={href}
+ *           description="Manage and format"
+ *         >
+ *           DASD
+ *         </PageOptions.Option>
+ *         <PageOptions.Option
+ *           key="iscsi-link"
+ *           href={href}
+ *           description="Connect to iSCSI targets"
+ *          >
+ *           iSCSI
+ *         </PageOptions.Option>
+ *       <PageOptions.Options>
  *     </PageOptions.Group>
  *   </PageOptions>
  *
@@ -141,19 +165,22 @@ const PageOptions = ({ children }) => {
       <div ref={dropdownRef}>
         <Dropdown
           isOpen={isOpen}
-          toggle={<Toggler onClick={onToggle} />}
+          toggle={(toggleRef) => <Toggler toggleRef={toggleRef} onClick={onToggle} />}
           onSelect={onSelect}
-          dropdownItems={Array(children)}
-          position="right"
+          popperProps={{ minWidth: "150px", position: "right" }}
           className="page-options"
-          isGrouped
-        />
+        >
+          <DropdownList>
+            {Array(children)}
+          </DropdownList>
+        </Dropdown>
       </div>
     </PageOptionsSlot>
   );
 };
 
 PageOptions.Group = Group;
-PageOptions.Item = Item;
+PageOptions.Options = Options;
+PageOptions.Option = Option;
 
 export default PageOptions;
diff --git a/web/src/components/core/PageOptions.test.jsx b/web/src/components/core/PageOptions.test.jsx
@@ -29,7 +29,7 @@ jest.mock("~/components/layout/Layout", () => mockLayout());
 it("renders the component initially closed", async () => {
   plainRender(
     <PageOptions>
-      <PageOptions.Item>A dummy action</PageOptions.Item>
+      <PageOptions.Option>A dummy action</PageOptions.Option>
     </PageOptions>
   );
 
@@ -39,7 +39,7 @@ it("renders the component initially closed", async () => {
 it("show and hide the component content on user request", async () => {
   const { user } = plainRender(
     <PageOptions>
-      <PageOptions.Item><>A dummy action</></PageOptions.Item>
+      <PageOptions.Option><>A dummy action</></PageOptions.Option>
     </PageOptions>
   );
 
@@ -60,10 +60,10 @@ it("hide the component content when the user clicks on one of its actions", asyn
   const { user } = plainRender(
     <PageOptions>
       <PageOptions.Group label="Refresh">
-        <PageOptions.Item><>Section</></PageOptions.Item>
-        <PageOptions.Item><>Page</></PageOptions.Item>
+        <PageOptions.Option><>Section</></PageOptions.Option>
+        <PageOptions.Option><>Page</></PageOptions.Option>
       </PageOptions.Group>
-      <PageOptions.Item><>Exit</></PageOptions.Item>
+      <PageOptions.Option><>Exit</></PageOptions.Option>
     </PageOptions>
   );
 
@@ -78,8 +78,8 @@ it("hide the component content when the user clicks on one of its actions", asyn
 it('should close the dropdown on click outside', async () => {
   const { user } = plainRender(
     <PageOptions>
-      <PageOptions.Item><>Item 1</></PageOptions.Item>
-      <PageOptions.Item><>Item 2</></PageOptions.Item>
+      <PageOptions.Option><>Option 1</></PageOptions.Option>
+      <PageOptions.Option><>Option 2</></PageOptions.Option>
     </PageOptions>
   );
 
@@ -88,11 +88,11 @@ it('should close the dropdown on click outside', async () => {
   await user.click(toggler);
 
   // Ensure the dropdown is open
-  screen.getByRole("menuitem", { name: "Item 2" });
+  screen.getByRole("menuitem", { name: "Option 2" });
 
   // Click outside the dropdown
   fireEvent.click(document);
 
   // Ensure the dropdown is closed
-  expect(screen.queryByRole("menuitem", { name: "Item 2" })).toBeNull();
+  expect(screen.queryByRole("menuitem", { name: "Option 2" })).toBeNull();
 });
diff --git a/web/src/components/core/RowActions.jsx b/web/src/components/core/RowActions.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { DropdownToggle } from '@patternfly/react-core/deprecated';
+import { MenuToggle } from '@patternfly/react-core';
 import { ActionsColumn } from '@patternfly/react-table';
 
 import { Icon } from '~/components/layout';
@@ -57,21 +57,23 @@ import { _ } from "~/i18n";
  */
 export default function RowActions({ id, actions, "aria-label": toggleAriaLabel, ...rest }) {
   const actionsToggle = (props) => (
-    <DropdownToggle
+    <MenuToggle
       id={id}
-      aria-label={toggleAriaLabel || _("Actions")}
-      toggleIndicator={null}
+      variant="plain"
+      ref={props.toggleRef}
       isDisabled={props.isDisabled}
-      onToggle={props.onToggle}
+      onClick={props.onToggle}
+      aria-label={toggleAriaLabel || _("Actions")}
     >
       <Icon name="more_vert" size="24" />
-    </DropdownToggle>
+    </MenuToggle>
   );
 
   return (
     <ActionsColumn
       items={actions}
       actionsToggle={actionsToggle}
+      popperProps={{ position: "right" }}
       {...rest}
     />
   );

diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
@@ -76,8 +76,8 @@ function Layout({ children }) {
         </h1>
 
         <div className="split">
-          <PageActions.Target as="span" />
-          <HeaderActions.Target as="span" />
+          <PageActions.Target as="div" />
+          <HeaderActions.Target as="div" />
         </div>
 
       </header>

diff --git a/web/src/components/network/NetworkPageOptions.jsx b/web/src/components/network/NetworkPageOptions.jsx
@@ -41,9 +41,11 @@ export default function NetworkPageOptions ({
 
   return (
     <PageOptions>
-      <PageOptions.Item key="open-wifi-selector" onClick={openWifiSelector}>
-        <>{_("Connect to a Wi-Fi network")}</>
-      </PageOptions.Item>
+      <PageOptions.Options>
+        <PageOptions.Option key="open-wifi-selector" onClick={openWifiSelector}>
+          <>{_("Connect to a Wi-Fi network")}</>
+        </PageOptions.Option>
+      </PageOptions.Options>
     </PageOptions>
   );
 }
diff --git a/web/src/components/network/WifiNetworkMenu.jsx b/web/src/components/network/WifiNetworkMenu.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { Icon } from "~/components/layout";
 import { KebabMenu } from "~/components/core";
 import { useInstallerClient } from "~/context/installer";
@@ -31,7 +31,6 @@ export default function WifiNetworkMenu({ settings, position = "right" }) {
 
   return (
     <KebabMenu
-      id={`network-${settings.ssid}-menu`}
       position={position}
       className="wifi-network-menu"
       items={[