Fixes #38822: update pf3 buttons to pf5

Upgrade ActionButtons. Replace Enzyme tests with React Testing Library
Fix style. Upgrade ForemanForm ActionsButtons, DeleteButton, DiffModal
ForemanModalFooter, ExportButton, SubmitOrCancel, SubmitBtn, CancelBtn
PersonalAccessToken

Author: Konstantinos Familonidis

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, Icon, Button } from 'patternfly-react';
+import { Modal, Icon } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import { noop } from '../../../common/helpers';
@@ -22,9 +23,10 @@ const DiffModal = ({
     <Modal.Header>
       <h4 id="diff-modal-h4">{title}</h4>
       <Button
+        ouiaId="diff-modal-close-button"
         className="close diff-modal-close"
         onClick={toggleModal}
-        bsStyle="link"
+        variant="link"
       >
         <Icon type="pf" name="close" />
       </Button>

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js

@@ -1,33 +1,41 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import { configure } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
 import DiffModal from '../DiffModal';
 import { diffModalMock } from '../DiffModal.fixtures';
 
+const toggleModal = jest.fn();
+const changeState = jest.fn();
 const fixtures = {
-  'renders diffModal': diffModalMock,
+  renders: {
+    ...diffModalMock,
+    toggleModal: toggleModal,
+    changeViewType: changeState,
+  },
 };
+configure({ testIdAttribute: 'data-ouia-component-id'})
 
 describe('DiffModal', () => {
-  describe('rendering...', () =>
-    testComponentSnapshotsWithFixtures(DiffModal, fixtures));
+  describe('rendering', () => {
+      it('should render modal with title and close button', () => {
+        render(<DiffModal {...fixtures.renders} />);
+
+        expect(screen.getByText('log1')).toBeInTheDocument();
+        const closeButton = document.querySelector('.diff-modal-close');
+        expect(closeButton).toBeInTheDocument();
+        expect(closeButton).toHaveClass('close', 'diff-modal-close');
+      });
+  });
 
   describe('triggering..', () => {
-    it('should trigger onHide', () => {
-      const toggleModal = jest.fn();
-      const changeState = jest.fn();
-      const component = mount(
-        <DiffModal
-          {...diffModalMock}
-          toggleModal={toggleModal}
-          changeViewType={changeState}
-        />
-      );
-      component
-        .find('.close')
-        .at(0)
-        .simulate('click');
+    it('should trigger onHide', async () => {
+      render(<DiffModal {...fixtures.renders} />);
+      const closeButton = screen.getByTestId('diff-modal-close-button');
+
+      await act(async () => await fireEvent.click(closeButton));
+
       expect(toggleModal).toHaveBeenCalled();
     });
   });

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/__snapshots__/DiffModal.test.js.snap

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button } from 'patternfly-react';
+import { Modal } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import { useModalContext } from '../ForemanModalHooks';
 import { translate as __ } from '../../../common/I18n';
 
@@ -12,7 +13,7 @@ const ForemanModalFooter = props => {
 
   // Render the provided children, or default markup if none given
   const closeButton = childCount === 0 && (
-    <Button bsStyle="default" onClick={onClose}>
+    <Button ouiaId="close-modal-button" variant="secondary" onClick={onClose}>
       {__('Close')}
     </Button>
   );

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js

@@ -1,25 +1,31 @@
 import React from 'react';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import { translate as __ } from '../../../../common/I18n';
 
-const CancelBtn = ({ onCancel, disabled, bsStyle, btnText }) => (
-  <Button bsStyle={bsStyle} onClick={onCancel} disabled={disabled}>
+const CancelBtn = ({ onCancel, disabled, variant, btnText }) => (
+  <Button
+    ouiaId="cancel-button"
+    variant={variant}
+    onClick={onCancel}
+    isDisabled={disabled}
+    isDanger
+  >
     {btnText}
   </Button>
 );
 
 CancelBtn.propTypes = {
   onCancel: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  bsStyle: PropTypes.string,
+  variant: PropTypes.oneOf(['secondary', 'danger']),
   btnText: PropTypes.string,
 };
 
 CancelBtn.defaultProps = {
   disabled: false,
-  bsStyle: 'default',
+  variant: 'secondary',
   btnText: __('Cancel'),
 };
 

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from '../../../../common/I18n';
 import { simpleLoader } from '../../../common/Loader';
 
-const SubmitBtn = ({ isSubmitting, onSubmit, bsStyle, btnText }) => (
-  <Button bsStyle={bsStyle} disabled={isSubmitting} onClick={onSubmit}>
+const SubmitBtn = ({ isSubmitting, onSubmit, variant, btnText }) => (
+  <Button
+    ouiaId="submit-button"
+    variant={variant}
+    isDisabled={isSubmitting}
+    onClick={onSubmit}
+  >
     &nbsp;
     {btnText}
     &nbsp;
@@ -16,12 +21,12 @@ const SubmitBtn = ({ isSubmitting, onSubmit, bsStyle, btnText }) => (
 SubmitBtn.propTypes = {
   isSubmitting: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  bsStyle: PropTypes.string,
+  variant: PropTypes.oneOf(['primary']),
   btnText: PropTypes.string,
 };
 
 SubmitBtn.defaultProps = {
-  bsStyle: 'primary',
+  variant: 'primary',
   btnText: __('Submit'),
 };
 

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js

@@ -1,34 +1,75 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import SubmitOrCancel from './SubmitOrCancel';
+import SubmitBtn from './SubmitBtn';
+import CancelBtn from './CancelBtn';
 
-const handlers = {
+// Helper functions for creating props
+const createHandlers = () => ({
   submitProps: {
     submitBtnProps: {
-      bsStyle: 'default',
+      variant: 'primary',
       btnText: 'Confirm',
     },
     cancelBtnProps: {
-      bsStyle: 'danger',
+      variant: 'danger',
       btnText: 'Deny',
     },
   },
   onCancel: jest.fn(),
   onSubmit: jest.fn(),
   id: 'test-modal',
-};
+});
+
+const createBaseProps = (isSubmitting = false) => ({
+  isSubmitting,
+  ...createHandlers(),
+});
 
 const fixtures = {
-  'should render': {
-    isSubmitting: false,
-    ...handlers,
-  },
-  'should render when isSubmitting': {
-    isSubmitting: true,
-    ...handlers,
-  },
+  render: createBaseProps(false),
+  whenSubmitting: createBaseProps(true),
 };
 
+const createSubmitBtnProps = (isSubmitting = false) => ({
+  ...fixtures.render.submitProps.submitBtnProps,
+  ...createHandlers(),
+  isSubmitting,
+});
+
+const createCancelBtnProps = (isSubmitting = false) => ({
+  ...fixtures.render.submitProps.cancelBtnProps,
+  ...createHandlers(),
+  isSubmitting,
+});
+
 describe('SubmitOrCancel', () => {
-  testComponentSnapshotsWithFixtures(SubmitOrCancel, fixtures);
+  it('renders', () => {
+    render(<SubmitOrCancel {...fixtures.render} />);
+    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('renders when submitting', () => {
+    render(<SubmitOrCancel {...fixtures.whenSubmitting} />);
+
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled();
+  });
+
+  describe('SubmitBtn', () => {
+    it('renders', () => {
+      render(<SubmitBtn {...createSubmitBtnProps()} />);
+      expect(screen.getByRole('button', { name: /Confirm/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('CancelBtn', () => {
+    it('renders', () => {
+      render(<CancelBtn {...createCancelBtnProps()} />);
+      expect(screen.getByRole('button', { name: /Deny/i })).toBeInTheDocument();
+    });
+  });
 });