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

@@ -15,22 +15,22 @@
 
     .legend-title {
       font-weight: bold;
-      font-size: var(--pf-global--FontSize--sm);
+      font-size: var(--pf-v5-global--FontSize--sm);
       margin-left: 8px;
       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

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button, Split, SplitItem } from '@patternfly/react-core';
 import {
-  Button,
   Dropdown,
   DropdownItem,
   DropdownPosition,
   DropdownSeparator,
   DropdownToggle,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+} 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 +240,7 @@ const JobInvocationToolbarButtons = ({
                   </Button>,
                 ]}
                 splitButtonVariant="action"
-                onToggle={setIsActionOpen}
+                onToggle={(_event, val) => setIsActionOpen(val)}
               />
             }
             isOpen={isActionOpen}

webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -97,7 +97,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();
@@ -116,22 +116,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

@@ -1,19 +1,20 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Button, Tooltip, Spinner } from '@patternfly/react-core';
 import {
-  Button,
   WizardFooter,
   WizardContextConsumer,
-  Tooltip,
-  Spinner,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { WIZARD_TITLES } from './JobWizardConstants';
 import { selectIsSubmitting } from './JobWizardSelectors';
 
 export const Footer = ({ canSubmit, onSave }) => {
   const isSubmitting = useSelector(selectIsSubmitting);
+
+  const tooltipRefRunSelected = useRef(null);
+  const tooltipRefSkip = useRef(null);
   return (
     <WizardFooter>
       <WizardContextConsumer>
@@ -46,6 +47,16 @@ export const Footer = ({ canSubmit, onSave }) => {
               >
                 {__('Back')}
               </Button>
+              <Button
+                ouiaId="run-on-selected-hosts-footer"
+                variant="tertiary"
+                onClick={onSave}
+                isAriaDisabled={!canSubmit}
+                isDisabled={isSubmitting}
+                ref={tooltipRefRunSelected}
+              >
+                {__('Run on selected hosts')}
+              </Button>
               <Tooltip
                 content={
                   <div>
@@ -54,17 +65,19 @@ export const Footer = ({ canSubmit, onSave }) => {
                       : __('Fill all required fields in all the steps')}
                   </div>
                 }
+                triggerRef={tooltipRefRunSelected}
+              />
+              <Button
+                ouiaId="skip-to-review-footer"
+                variant="tertiary"
+                onClick={() => goToStepByName(WIZARD_TITLES.review)}
+                isAriaDisabled={!canSubmit}
+                isDisabled={isSubmitting}
+                ref={tooltipRefSkip}
               >
-                <Button
-                  ouiaId="run-on-selected-hosts-footer"
-                  variant="tertiary"
-                  onClick={onSave}
-                  isAriaDisabled={!canSubmit}
-                  isDisabled={isSubmitting}
-                >
-                  {__('Run on selected hosts')}
-                </Button>
-              </Tooltip>
+                {__('Skip to review')}
+              </Button>
+
               <Tooltip
                 content={
                   <div>
@@ -75,17 +88,8 @@ export const Footer = ({ canSubmit, onSave }) => {
                         )}
                   </div>
                 }
-              >
-                <Button
-                  ouiaId="skip-to-review-footer"
-                  variant="tertiary"
-                  onClick={() => goToStepByName(WIZARD_TITLES.review)}
-                  isAriaDisabled={!canSubmit}
-                  isDisabled={isSubmitting}
-                >
-                  {__('Skip to review')}
-                </Button>
-              </Tooltip>
+                triggerRef={tooltipRefSkip}
+              />
               <Button ouiaId="cancel-footer" variant="link" onClick={onClose}>
                 {__('Cancel')}
               </Button>

webpack/JobWizard/JobWizard.js

@@ -3,7 +3,7 @@
 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

@@ -1,21 +1,21 @@
 .job-wizard {
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   .wizard-title {
     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%;
     }
@@ -34,19 +34,19 @@
   }
 
   .gray-text {
-    color: var(--pf-global--Color--dark-200);
+    color: var(--pf-v5-global--Color--dark-200);
   }
 
   .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;
       }
     }
@@ -63,8 +63,8 @@
       display: grid;
       grid-template-columns: repeat(7, 1fr);
     }
-    .pf-l-grid {
-      gap: var(--pf-c-form--GridGap);
+    .pf-v5-l-grid {
+      gap: var(--pf-v5-cform--GridGap);
     }
     #repeat-on-hourly {
       max-height: 300px;
@@ -99,14 +99,14 @@
     .clear-datetime-button {
       margin-left: 10px;
       align-self: center;
-      font-size: var(--pf-global--FontSize--md);
+      font-size: var(--pf-v5-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,12 @@ import {
   Divider,
   Skeleton,
   Button,
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   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,23 +64,28 @@ const JobWizardPageRerun = ({
   const currentLocation = useForemanLocation();
 
   const emptyStateLarge = (
-    <EmptyState variant={EmptyStateVariant.large}>
-      <EmptyStateIcon
-        icon={ExclamationCircleIcon}
-        color={exclamationColor.value}
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader
+        titleText={<>{__('Unable to run job')}</>}
+        icon={
+          <EmptyStateIcon
+            icon={ExclamationCircleIcon}
+            color={exclamationColor.value}
+          />
+        }
+        headingLevel="h4"
       />
-      <Title ouiaId="job-wizard-empty-state-header" headingLevel="h4" size="lg">
-        {__('Unable to run job')}
-      </Title>
       <EmptyStateBody>{sprintf(errorMessage)}</EmptyStateBody>
-      <Button
-        ouiaId="job-wizard-run-job-button"
-        component="a"
-        href="/job_invocations/new"
-        variant="primary"
-      >
-        {__('Create job')}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          ouiaId="job-wizard-run-job-button"
+          component="a"
+          href="/job_invocations/new"
+          variant="primary"
+        >
+          {__('Create job')}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );