Fixes #37675 - Change All Hosts kebab menu to match design

webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js

@@ -1,38 +1,44 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import { Menu, MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import './ActionKebab.scss';
 
 /**
  * Generate a button or a dropdown of buttons
  * @param  {String} title The title of the button for the title and text inside the button
  * @param  {Object} action action to preform when the button is click can be href with data-method or Onclick
  * @return {Function} button component or splitbutton component
  */
-export const ActionKebab = ({ items }) => {
-  const [isOpen, setIsOpen] = useState(false);
+export const ActionKebab = ({ items, menuOpen, setMenuOpen }) => {
   if (!items.length) return null;
   return (
     <>
-      {items.length > 0 && (
-        <Dropdown
-          ouiaId="action-buttons-dropdown"
-          toggle={
-            <KebabToggle
-              aria-label="toggle action dropdown"
-              onToggle={setIsOpen}
-            />
-          }
-          isOpen={isOpen}
-          isPlain
-          dropdownItems={items}
-        />
+      <MenuToggle
+        variant="plain"
+        aria-label="plain kebab"
+        onClick={() => setMenuOpen(prev => !prev)}
+        isExpanded={menuOpen}
+      >
+        <EllipsisVIcon />
+      </MenuToggle>
+      {items.length > 0 && menuOpen && (
+        <Menu
+          containsFlyout
+          ouiaId="actions-kebab"
+          onSelect={() => setMenuOpen(false)}
+        >
+          {items}
+        </Menu>
       )}
     </>
   );
 };
 
 ActionKebab.propTypes = {
   items: PropTypes.arrayOf(PropTypes.node),
+  menuOpen: PropTypes.bool.isRequired,
+  setMenuOpen: PropTypes.func.isRequired,
 };
 
 ActionKebab.defaultProps = {

webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.scss

@@ -0,0 +1,4 @@
+.pf-c-menu.pf-m-flyout {
+  position: absolute;
+  top: 3.1em;
+}

webpack/assets/javascripts/react_app/components/HostsIndex/index.js

@@ -4,8 +4,10 @@ import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { Tr, Td, ActionsColumn } from '@patternfly/react-table';
 import {
   ToolbarItem,
+  Divider,
   Dropdown,
   DropdownItem,
+  MenuItem,
   KebabToggle,
   Flex,
   FlexItem,
@@ -59,6 +61,7 @@ export const ForemanHostsIndexActionsBarContext = forceSingleton(
 );
 
 const HostsIndex = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
   const [allColumns, setAllColumns] = useState(
     getColumnData({ tableName: 'hosts' })
   );
@@ -205,38 +208,50 @@ const HostsIndex = () => {
   });
 
   const dropdownItems = [
-    <DropdownItem
-      ouiaId="delete=hosts-dropdown-item"
-      key="delete=hosts-dropdown-item"
-      onClick={handleBulkDelete}
-      isDisabled={selectedCount === 0}
-    >
-      {__('Delete')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="build-hosts-dropdown-item"
+    <MenuItem
+      itemId="build-hosts-dropdown-item"
       key="build-hosts-dropdown-item"
       onClick={setBuildModalOpen}
       isDisabled={selectedCount === 0}
     >
       {__('Build management')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="reassign-hg-dropdown-item"
+    </MenuItem>,
+    <MenuItem
+      itemId="reassign-hg-dropdown-item"
       key="reassign-hg-dropdown-item"
       onClick={setHgModalOpen}
       isDisabled={selectedCount === 0}
     >
       {__('Change host group')}
-    </DropdownItem>,
+    </MenuItem>,
+  ];
+
+  const dangerZoneItems = [
+    <Divider
+      component="li"
+      id="danger-zone-separator"
+      key="danger-zone-separator"
+    />,
+    <MenuItem
+      itemId="delete=hosts-dropdown-item"
+      key="delete=hosts-dropdown-item"
+      onClick={handleBulkDelete}
+      isDisabled={selectedCount === 0}
+    >
+      {__('Delete')}
+    </MenuItem>,
   ];
 
   const registeredItems = useSelector(selectKebabItems, shallowEqual);
   const pluginToolbarItems = jsReady => (
     <ForemanHostsIndexActionsBarContext.Provider
-      value={{ ...selectAllOptions, fetchBulkParams }}
+      value={{ ...selectAllOptions, fetchBulkParams, menuOpen, setMenuOpen }}
     >
-      <ActionKebab items={dropdownItems.concat(registeredItems)} />
+      <ActionKebab
+        items={dropdownItems.concat(registeredItems).concat(dangerZoneItems)}
+        menuOpen={menuOpen}
+        setMenuOpen={setMenuOpen}
+      />
       {jsReady && <ColumnSelector data={columnSelectData} />}
     </ForemanHostsIndexActionsBarContext.Provider>
   );