Fixes #37747 - Update to Patternfly 5

webpack/components/AnsibleHostDetail/AnsibleHostDetail.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'foremanReact/common/colors';
 
 .ansible-host-detail {
   background-color: $pf-color-white;

webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js

@@ -5,14 +5,7 @@ import { useMutation } from '@apollo/client';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { openConfirmModal } from 'foremanReact/components/ConfirmModal';
-import {
-  TableComposable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { Flex, FlexItem } from '@patternfly/react-core';
 
 import Pagination from 'foremanReact/components/Pagination';
@@ -77,7 +70,7 @@ const AnsibleVariableOverridesTable = ({
     innerDispatch({ idx, payload: { open: flag } });
   };
 
-  const onValueChange = (idx, variable) => value => {
+  const onValueChange = (idx, variable) => (e, value) => {
     const payload = {
       value,
       validation: validateValue(variable, value),
@@ -156,7 +149,7 @@ const AnsibleVariableOverridesTable = ({
           />
         </FlexItem>
         <FlexItem>
-          <TableComposable ouiaId="table-composable-compact" variant="compact">
+          <Table ouiaId="table-composable-compact" variant="compact">
             <Thead>
               <Tr ouiaId="row-header">
                 {columns.map(col => (
@@ -203,7 +196,7 @@ const AnsibleVariableOverridesTable = ({
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination

webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/EditableValueHelper.js

@@ -5,17 +5,23 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 
 const withFormGroup = Component => componentProps => {
   const { validation, ...rest } = componentProps;
   return (
-    <FormGroup
-      label=""
-      helperTextInvalid={validation.msg}
-      validated={validation.key}
-    >
+    <FormGroup label="">
       <Component {...rest} validated={validation.key} />
+      {validation.key === 'error' && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{validation.msg}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.scss

@@ -1,4 +1,4 @@
-.pf-c-backdrop {
+.pf-v5-c-backdrop {
   z-index: 1040;
 }
 
@@ -8,7 +8,7 @@
     height: 70vh;
   }
 
-  .pf-c-form-control, .pf-c-date-picker, .pf-c-date-picker__input {
+  .pf-v5-c-form-control, .pf-v5-c-date-picker, .pf-v5-c-date-picker__input {
     width: 250px
   }
 }

webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js

@@ -3,14 +3,7 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
-import {
-  TableComposable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import Pagination from 'foremanReact/components/Pagination';
 
@@ -40,7 +33,7 @@ const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
           />
         </FlexItem>
         <FlexItem>
-          <TableComposable ouiaId="table-composable-compact" variant="compact">
+          <Table ouiaId="table-composable-compact" variant="compact">
             <Thead>
               <Tr ouiaId="row-header">
                 {columns.map(col => (
@@ -73,7 +66,7 @@ const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination

webpack/components/AnsibleHostDetail/components/JobsTab/RecurringJobsTable.js

@@ -5,14 +5,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 import { openConfirmModal } from 'foremanReact/components/ConfirmModal';
 
-import {
-  TableComposable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 
 import {
   useCancelMutation,
@@ -60,7 +53,7 @@ const RecurringJobsTable = ({
   return (
     <React.Fragment>
       <h3>{__('Scheduled recurring jobs')}</h3>
-      <TableComposable ouiaId="table-composable-compact" variant="compact">
+      <Table ouiaId="table-composable-compact" variant="compact">
         <Thead>
           <Tr ouiaId="row-header">
             {columns.map(col => (
@@ -93,7 +86,7 @@ const RecurringJobsTable = ({
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js

@@ -2,14 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import {
-  TableComposable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import Pagination from 'foremanReact/components/Pagination';
 import withLoading from '../../../../withLoading';
@@ -28,7 +21,7 @@ const AllRolesTable = ({ allAnsibleRoles, totalCount }) => {
             variant="top"
           />
         </FlexItem>
-        <TableComposable ouiaId="table-composable-compact" variant="compact">
+        <Table ouiaId="table-composable-compact" variant="compact">
           <Thead>
             <Tr ouiaId="row-header">
               <Th />
@@ -60,7 +53,7 @@ const AllRolesTable = ({ allAnsibleRoles, totalCount }) => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination
             ouiaId="pagination-bottom"

webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/EditRolesModal.scss

@@ -1,3 +1,3 @@
-.pf-c-backdrop {
+.pf-v5-c-backdrop {
   z-index: 1040;
 }

webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js

@@ -4,14 +4,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { Route, Link } from 'react-router-dom';
 import Pagination from 'foremanReact/components/Pagination';
 
-import {
-  TableComposable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { Flex, FlexItem, Button } from '@patternfly/react-core';
 
 import EditRolesModal from './EditRolesModal';
@@ -66,7 +59,7 @@ const RolesTable = ({
       </Flex>
       <Flex direction={{ default: 'column' }}>
         <FlexItem>
-          <TableComposable variant="compact" ouiaId="table-composable-compact">
+          <Table variant="compact" ouiaId="table-composable-compact">
             <Thead>
               <Tr ouiaId="row-header">
                 {columns.map(col => (
@@ -92,7 +85,7 @@ const RolesTable = ({
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination

webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  cellWidth,
+	cellWidth
 } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import {
   Button,
   Toolbar,
@@ -99,7 +101,7 @@
             <Checkbox
               ouiaId="ansible-roles-and-variables-table-select-all-checkbox"
               isChecked={isChecked}
-              onChange={SelectAll}
+              onChange={(_event, checked) => SelectAll(checked)}
               aria-label="select all checkbox"
               id="select-all"
               name="select-all"

webpack/components/DualList/ListControls.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const ListControls = props => (
-  <div className="pf-c-dual-list-selector__controls">
-    <div className="pf-c-dual-list-selector__controls-item">
+  <div className="pf-v5-c-dual-list-selector__controls">
+    <div className="pf-v5-c-dual-list-selector__controls-item">
       <button
-        className="pf-c-button pf-m-plain"
+        className="pf-v5-c-button pf-m-plain"
         type="button"
         disabled={props.addSelectedDisabled}
         onClick={props.onAddSelected}
@@ -15,9 +15,9 @@ const ListControls = props => (
         <i className="fas fa-fw fa-angle-right" />
       </button>
     </div>
-    <div className="pf-c-dual-list-selector__controls-item">
+    <div className="pf-v5-c-dual-list-selector__controls-item">
       <button
-        className="pf-c-button pf-m-plain"
+        className="pf-v5-c-button pf-m-plain"
         type="button"
         disabled={props.addAllDisabled}
         onClick={props.onAddAll}
@@ -26,9 +26,9 @@ const ListControls = props => (
         <i className="fas fa-fw fa-angle-double-right" />
       </button>
     </div>
-    <div className="pf-c-dual-list-selector__controls-item">
+    <div className="pf-v5-c-dual-list-selector__controls-item">
       <button
-        className="pf-c-button pf-m-plain"
+        className="pf-v5-c-button pf-m-plain"
         type="button"
         disabled={props.removeAllDisabled}
         onClick={props.onRemoveAll}
@@ -37,9 +37,9 @@ const ListControls = props => (
         <i className="fas fa-fw fa-angle-double-left" />
       </button>
     </div>
-    <div className="pf-c-dual-list-selector__controls-item">
+    <div className="pf-v5-c-dual-list-selector__controls-item">
       <button
-        className="pf-c-button pf-m-plain"
+        className="pf-v5-c-button pf-m-plain"
         type="button"
         disabled={props.removeSelectedDisabled}
         onClick={props.onRemoveSelected}

webpack/components/DualList/ListHeader.js

@@ -2,9 +2,9 @@
 import PropTypes from 'prop-types';
 
 const ListHeader = props => (
-  <div className="pf-c-dual-list-selector__header">
-    <div className="pf-c-dual-list-selector__title">
-      <div className="pf-c-dual-list-selector__title-text">{props.title}</div>
+  <div className="pf-v5-c-dual-list-selector__header">
+    <div className="pf-v5-c-dual-list-selector__title">
+      <div className="pf-v5-c-dual-list-selector__title-text">{props.title}</div>
     </div>
   </div>
 );

webpack/components/DualList/ListItem.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 const ListItem = props => {
   const draggableBtn = (
-    <div className="pf-c-dual-list-selector__draggable">
+    <div className="pf-v5-c-dual-list-selector__draggable">
       <button
-        className="pf-c-button pf-m-plain"
+        className="pf-v5-c-button pf-m-plain"
         type="button"
         aria-pressed="false"
         aria-label="Reorder"
@@ -24,27 +24,27 @@ const ListItem = props => {
   );
 
   return (
-    <li className="pf-c-dual-list-selector__list-item">
+    <li className="pf-v5-c-dual-list-selector__list-item">
       <div
-        className={classNames('pf-c-dual-list-selector__list-item-row ', {
+        className={classNames('pf-v5-c-dual-list-selector__list-item-row ', {
           'pf-m-selected': props.selected,
           'pf-m-ghost-row': props.dragging,
         })}
       >
         {props.draggable && draggableBtn}
         <button
-          className="pf-c-dual-list-selector__item"
+          className="pf-v5-c-dual-list-selector__item"
           type="button"
           onClick={props.onClick}
         >
-          <span className="pf-c-dual-list-selector__item-main">
-            <span className="pf-c-dual-list-selector__item-text">
+          <span className="pf-v5-c-dual-list-selector__item-main">
+            <span className="pf-v5-c-dual-list-selector__item-text">
               {props.draggable && orderBtn}
               <span>{props.name}</span>
             </span>
           </span>
-          <span className="pf-c-dual-list-selector__item-count">
-            <span className="pf-c-badge pf-m-read" />
+          <span className="pf-v5-c-dual-list-selector__item-count">
+            <span className="pf-v5-c-badge pf-m-read" />
           </span>
         </button>
       </div>

webpack/components/DualList/ListPane.js

@@ -58,16 +58,16 @@ const ListPane = ({
 
   return (
     <div
-      className={`pf-c-dual-list-selector__pane pf-m-available ${paneClass}`}
+      className={`pf-v5-c-dual-list-selector__pane pf-m-available ${paneClass}`}
     >
       <ListHeader title={title} />
       <SelectedStatus
         selectedCount={selected.length}
         totalCount={items.length}
       />
-      <div className="pf-c-dual-list-selector__menu">
+      <div className="pf-v5-c-dual-list-selector__menu">
         <DndProvider backend={HTML5Backend}>
-          <ul className="pf-c-dual-list-selector__list">
+          <ul className="pf-v5-c-dual-list-selector__list">
             {items.map(renderItem)}
           </ul>
         </DndProvider>