Fixes #38984: Upgrade PF3 to PF5 buttons

webpack/ForemanTasks/Components/TasksTable/Components/ActionSelectButton.js

@@ -1,42 +1,43 @@
 import React from 'react';
-import { DropdownButton, MenuItem } from 'patternfly-react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 
 export const ActionSelectButton = ({
   onCancel,
   onResume,
   onForceCancel,
   disabled,
-}) => (
-  <DropdownButton
-    title={__('Select Action')}
-    disabled={disabled}
-    id="selcted-action-type"
-  >
-    <MenuItem
-      title={__('Cancel selected tasks')}
-      onClick={onCancel}
-      eventKey="1"
-    >
-      {__('Cancel Selected')}
-    </MenuItem>
-    <MenuItem
-      title={__('Resume selected tasks')}
-      onClick={onResume}
-      eventKey="2"
-    >
-      {__('Resume Selected')}
-    </MenuItem>
-    <MenuItem
-      title={__('Force Cancel selected tasks')}
-      onClick={onForceCancel}
-      eventKey="3"
-    >
-      {__('Force Cancel Selected')}
-    </MenuItem>
-  </DropdownButton>
-);
+}) => {
+  const buttons = [
+    {
+      title: __('Select Action'),
+      action: {
+        onClick: () => {},
+      },
+    },
+    {
+      title: __('Cancel Selected'),
+      action: {
+        onClick: onCancel,
+      },
+    },
+    {
+      title: __('Resume Selected'),
+      action: {
+        onClick: onResume,
+      },
+    },
+    {
+      title: __('Force Cancel Selected'),
+      action: {
+        onClick: onForceCancel,
+      },
+    },
+  ];
+
+  return <ActionButtons buttons={buttons} />;
+};
 
 ActionSelectButton.propTypes = {
   disabled: PropTypes.bool,

webpack/ForemanTasks/Components/TasksTable/Components/__test__/ActionSelectButton.test.js

@@ -1,14 +1,37 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ActionSelectButton } from '../ActionSelectButton';
 
-const fixtures = {
-  'renders with minimal props': {
-    onCancel: jest.fn(),
-    onResume: jest.fn(),
-    onForceCancel: jest.fn(),
-  },
-};
+const mockOnCancel = jest.fn();
+const mockOnResume = jest.fn();
+const mockOnForceCancel = jest.fn();
+
+describe('ActionSelectButton', () => {
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      onCancel: mockOnCancel,
+      onResume: mockOnResume,
+      onForceCancel: mockOnForceCancel,
+      disabled: false,
+    };
+    return render(<ActionSelectButton {...defaultProps} {...props} />);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with minimal props', () => {
+    renderComponent();
+
+    const actionButtons = document.querySelector('button');
+    const content = JSON.parse(actionButtons.textContent);
 
-describe('ActionSelectButton', () =>
-  testComponentSnapshotsWithFixtures(ActionSelectButton, fixtures));
+    expect(content.buttons).toHaveLength(4);
+    expect(content.buttons[0].title).toBe('Select Action');
+    expect(content.buttons[1].title).toBe('Cancel Selected');
+    expect(content.buttons[2].title).toBe('Resume Selected');
+    expect(content.buttons[3].title).toBe('Force Cancel Selected');
+  });
+});

webpack/ForemanTasks/Components/TasksTable/TasksTablePage.js

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import URI from 'urijs';
 import { getURIsearch } from 'foremanReact/common/urlHelpers';
-import { Spinner, Button, Icon } from 'patternfly-react';
+import { Button, Spinner, Icon } from '@patternfly/react-core';
+import { RedoIcon } from '@patternfly/react-icons';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { getURIQuery } from 'foremanReact/common/helpers';
@@ -128,10 +129,17 @@ const TasksTablePage = ({
         breadcrumbOptions={getBreadcrumbs(props.actionName)}
         toolbarButtons={
           <React.Fragment>
-            <Button onClick={() => props.reloadPage(url, props.parentTaskID)}>
-              <Icon type="fa" name="refresh" /> {__('Refresh Data')}
+            <Button
+              ouiaId="tasks-table-refresh-data"
+              variant="primary"
+              onClick={() => props.reloadPage(url, props.parentTaskID)}
+            >
+              <Icon>
+                <RedoIcon />
+              </Icon>{' '}
+              {__('Refresh Data')}
             </Button>
-            {props.status === STATUS.PENDING && <Spinner size="md" loading />}
+            {props.status === STATUS.PENDING && <Spinner size="lg" />}
             <ExportButton
               url={getCSVurl(history.location.pathname, uriQuery)}
               title={__('Export All')}

webpack/ForemanTasks/Components/TasksTable/__tests__/__snapshots__/TasksTablePage.test.js.snap

@@ -109,26 +109,18 @@ exports[`TasksTablePage rendering render with Breadcrubs and edit permissions 1`
     toolbarButtons={
       <React.Fragment>
         <Button
-          active={false}
-          block={false}
-          bsClass="btn"
-          bsStyle="default"
-          disabled={false}
           onClick={[Function]}
+          ouiaId="tasks-table-refresh-data"
+          variant="primary"
         >
-          <Icon
-            name="refresh"
-            type="fa"
-          />
+          <Icon>
+            <RedoIcon />
+          </Icon>
 
           Refresh Data
         </Button>
         <Spinner
-          className=""
-          inline={false}
-          inverse={false}
-          loading={true}
-          size="md"
+          size="lg"
         />
         <ExportButton
           title="Export All"
@@ -284,26 +276,18 @@ exports[`TasksTablePage rendering render with minimal props 1`] = `
     toolbarButtons={
       <React.Fragment>
         <Button
-          active={false}
-          block={false}
-          bsClass="btn"
-          bsStyle="default"
-          disabled={false}
           onClick={[Function]}
+          ouiaId="tasks-table-refresh-data"
+          variant="primary"
         >
-          <Icon
-            name="refresh"
-            type="fa"
-          />
+          <Icon>
+            <RedoIcon />
+          </Icon>
 
           Refresh Data
         </Button>
         <Spinner
-          className=""
-          inline={false}
-          inverse={false}
-          loading={true}
-          size="md"
+          size="lg"
         />
         <ExportButton
           title="Export All"