Fixes #37750 - Update to Patternfly 5

package.json

@@ -29,8 +29,7 @@
     "prettier": "^1.19.1",
     "redux-mock-store": "^1.2.2",
     "graphql-tag": "^2.11.0",
-    "graphql": "^15.5.0",
-    "victory-core": "~36.8.6"
+    "graphql": "^15.5.0"
   },
   "peerDependencies": {
     "@theforeman/vendor": ">= 12.0.1"

webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -20,17 +20,17 @@
       margin-bottom: 0;
     }
 
-    .pf-c-description-list {
+    .pf-v5-c-description-list {
       margin-left: 8px;
       margin-top: 8px;
 
-      .pf-c-description-list__term .pf-c-description-list__text {
+      .pf-v5-c-description-list__term .pf-v5-c-description-list__text {
         font-weight: normal;
       }
     }
   }
 
-  .pf-c-divider {
+  .pf-v5-c-divider {
     max-height: $chart_size;
   }
 

webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -2,15 +2,17 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownSeparator,
-  DropdownToggle,
-  Split,
-  SplitItem,
+	Button,
+	Split,
+	SplitItem
 } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	DropdownPosition,
+	DropdownSeparator,
+	DropdownToggle
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { STATUS as APIStatus } from 'foremanReact/constants';
@@ -242,7 +244,7 @@ const JobInvocationToolbarButtons = ({
                   </Button>,
                 ]}
                 splitButtonVariant="action"
-                onToggle={setIsActionOpen}
+                onToggle={(_event, val) => setIsActionOpen(val)}
               />
             }
             isOpen={isActionOpen}

webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -93,7 +93,7 @@ describe('JobInvocationDetailPage', () => {
 
     expect(screen.getByText('Description')).toBeInTheDocument();
     expect(
-      container.querySelector('.chart-donut .pf-c-chart')
+      container.querySelector('.chart-donut .pf-v5-c-chart')
     ).toBeInTheDocument();
     expect(screen.getByText('2/6')).toBeInTheDocument();
     expect(screen.getByText('Systems')).toBeInTheDocument();
@@ -112,22 +112,22 @@ describe('JobInvocationDetailPage', () => {
 
     Object.entries(informationToCheck).forEach(([term, expectedText]) => {
       const termContainers = container.querySelectorAll(
-        '.pf-c-description-list__term .pf-c-description-list__text'
+        '.pf-v5-c-description-list__term .pf-v5-c-description-list__text'
       );
       termContainers.forEach(termContainer => {
         if (termContainer.textContent.includes(term)) {
           let descriptionContainer;
           if (term === 'SSH user:') {
             descriptionContainer = termContainer
-              .closest('.pf-c-description-list__group')
+              .closest('.pf-v5-c-description-list__group')
               .querySelector(
-                '.pf-c-description-list__description .pf-c-description-list__text .disabled-text'
+                '.pf-v5-c-description-list__description .pf-v5-c-description-list__text .disabled-text'
               );
           } else {
             descriptionContainer = termContainer
-              .closest('.pf-c-description-list__group')
+              .closest('.pf-v5-c-description-list__group')
               .querySelector(
-                '.pf-c-description-list__description .pf-c-description-list__text'
+                '.pf-v5-c-description-list__description .pf-v5-c-description-list__text'
               );
           }
           expect(descriptionContainer.textContent).toContain(expectedText);

webpack/JobWizard/Footer.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-  Button,
-  WizardFooter,
-  WizardContextConsumer,
-  Tooltip,
-  Spinner,
+	Button,
+	Tooltip,
+	Spinner
 } from '@patternfly/react-core';
+import {
+	WizardFooter,
+	WizardContextConsumer
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { WIZARD_TITLES } from './JobWizardConstants';
 import { selectIsSubmitting } from './JobWizardSelectors';

webpack/JobWizard/JobWizard.js

@@ -3,7 +3,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Wizard } from '@patternfly/react-core';
+import {
+	Wizard
+} from '@patternfly/react-core/deprecated';
 import { get } from 'foremanReact/redux/API';
 import history from 'foremanReact/history';
 

webpack/JobWizard/JobWizard.scss

@@ -4,18 +4,18 @@
     margin-bottom: 25px;
   }
 
-  .pf-c-wizard__nav.pf-m-expanded {
+  .pf-v5-c-wizard__nav.pf-m-expanded {
     z-index: calc(
-      var(--pf-c-wizard__toggle--ZIndex) + 2
+      var(--pf-v5-cwizard__toggle--ZIndex) + 2
     ); // So the small screen navigation can be shown above the select box and wizard body
   }
 
-  .pf-c-wizard__main {
+  .pf-v5-c-wizard__main {
     z-index: calc(
-      var(--pf-c-wizard__toggle--ZIndex) + 1
+      var(--pf-v5-cwizard__toggle--ZIndex) + 1
     ); // So the select box can be shown above the wizard footer and navigation toggle
   }
-  .pf-c-wizard__main-body {
+  .pf-v5-c-wizard__main-body {
     @media (max-width: 600px) {
       max-width: 100%;
     }
@@ -38,15 +38,15 @@
   }
 
   .target-hosts-and-inputs {
-    .pf-c-chip-group.pf-m-category {
+    .pf-v5-c-chip-group.pf-m-category {
       margin-bottom: 10px;
     }
-    .pf-c-select__toggle-typeahead {
+    .pf-v5-c-select__toggle-typeahead {
       border: 0px;
     }
 
     .target-method-select {
-      .pf-c-select__toggle-wrapper {
+      .pf-v5-c-select__toggle-wrapper {
         flex-wrap: nowrap;
       }
     }
@@ -64,7 +64,7 @@
       grid-template-columns: repeat(7, 1fr);
     }
     .pf-l-grid {
-      gap: var(--pf-c-form--GridGap);
+      gap: var(--pf-v5-cform--GridGap);
     }
     #repeat-on-hourly {
       max-height: 300px;
@@ -101,12 +101,12 @@
       align-self: center;
       font-size: var(--pf-global--FontSize--md);
     }
-    .pf-c-form__group-control {
+    .pf-v5-c-form__group-control {
       display: flex;
       flex-wrap: wrap;
     }
   }
-  .pf-c-date-picker {
+  .pf-v5-c-date-picker {
     vertical-align: top;
   }
 
@@ -123,7 +123,7 @@
     min-height: 40px;
     min-width: 100px;
   }
-  .pf-c-modal-box {
+  .pf-v5-c-modal-box {
     width: auto;
   }
 
@@ -132,15 +132,15 @@
       margin-left: 10px;
     }
   }
-  .pf-c-radio__body {
-    font-size: var(--pf-c-radio__label--FontSize);
+  .pf-v5-c-radio__body {
+    font-size: var(--pf-v5-cradio__label--FontSize);
   }
   .reset-default {
     padding-bottom: 0;
   }
 }
 
-.job-wizard-alert.pf-c-alert.pf-m-warning {
+.job-wizard-alert.pf-v5-c-alert.pf-m-warning {
   margin-bottom: 10px;
   margin-top: 10px;
 }

webpack/JobWizard/JobWizardPageRerun.js

@@ -7,11 +7,10 @@ import {
   Divider,
   Skeleton,
   Button,
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
-  EmptyStateBody,
+  EmptyStateBody, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { global_palette_red_200 as exclamationColor } from '@patternfly/react-tokens';
@@ -63,15 +62,12 @@ const JobWizardPageRerun = ({
   const currentLocation = useForemanLocation();
 
   const emptyStateLarge = (
-    <EmptyState variant={EmptyStateVariant.large}>
-      <EmptyStateIcon
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader titleText={<>{__('Unable to run job')}</>} icon={<EmptyStateIcon
         icon={ExclamationCircleIcon}
         color={exclamationColor.value}
-      />
-      <Title ouiaId="job-wizard-empty-state-header" headingLevel="h4" size="lg">
-        {__('Unable to run job')}
-      </Title>
-      <EmptyStateBody>{sprintf(errorMessage)}</EmptyStateBody>
+      />} headingLevel="h4" />
+      <EmptyStateBody>{sprintf(errorMessage)}</EmptyStateBody><EmptyStateFooter>
       <Button
         ouiaId="job-wizard-run-job-button"
         component="a"
@@ -80,7 +76,7 @@ const JobWizardPageRerun = ({
       >
         {__('Create job')}
       </Button>
-    </EmptyState>
+    </EmptyStateFooter></EmptyState>
   );
 
   useEffect(() => {

webpack/JobWizard/PermissionDenied.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Icon } from 'patternfly-react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateBody,
+  EmptyStateBody, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 
 const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
@@ -37,18 +36,16 @@ const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
       <span className="empty-state-icon">
         <Icon name="lock" type="fa" size="2x" />
       </span>
-      <Title ouiaId="empty-state-header" headingLevel="h5" size="4xl">
-        {__('Permission Denied')}
-      </Title>
-      <EmptyStateBody>{description}</EmptyStateBody>
+      <EmptyStateHeader titleText={<>{__('Permission Denied')}</>} headingLevel="h5" />
+      <EmptyStateBody>{description}</EmptyStateBody><EmptyStateFooter>
       <Button
         ouiaId="job-invocation-proceed-anyway-button"
         variant="primary"
         onClick={handleProceedAnyway}
       >
         {__('Proceed Anyway')}
       </Button>
-    </EmptyState>
+    </EmptyStateFooter></EmptyState>
   );
 };
 

webpack/JobWizard/__tests__/integration.test.js

@@ -59,26 +59,28 @@ describe('Job wizard fill', () => {
         <JobWizard />
       </Provider>
     );
-    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
-      5
-    );
+    expect(
+      wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-disabled')
+    ).toHaveLength(5);
     selectors.selectJobCategoriesStatus.mockImplementation(() => 'RESOLVED');
     expect(store.getActions()).toMatchSnapshot('initial');
     selectors.selectJobTemplate.mockRestore();
     jest.spyOn(selectors, 'selectJobTemplate');
     selectors.selectJobTemplate.mockImplementation(() => jobTemplate);
-    wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click');
+    wrapper
+      .find('.pf-v5-c-button.pf-v5-c-select__toggle-button')
+      .simulate('click');
     await act(async () => {
       await wrapper
-        .find('.pf-c-select__menu-item')
+        .find('.pf-v5-c-select__menu-item')
         .first()
         .simulate('click');
     });
     expect(store.getActions().slice(-1)).toMatchSnapshot('select template');
     wrapper.update();
-    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
-      0
-    );
+    expect(
+      wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-disabled')
+    ).toHaveLength(0);
   });
 
   it('have all steps', async () => {