Update to Patternfly5

webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItem/__tests__/__snapshots__/ListItem.test.js.snap

@@ -10,13 +10,7 @@ exports[`ListItem rendering render with Props 1`] = `
       <Label
         className="account-icon"
         color="blue"
-        icon={
-          <UserIcon
-            color="currentColor"
-            noVerticalAlign={false}
-            size="sm"
-          />
-        }
+        icon={<UserIcon />}
         variant="outline"
       />
       test

webpack/ForemanInventoryUpload/Components/AccountList/Components/ListItemStatus/__tests__/__snapshots__/ListItemStatus.test.js.snap

@@ -12,11 +12,7 @@ exports[`ListItemStatus rendering render with Props 1`] = `
     <p>
       Generating
     </p>
-    <CheckIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
+    <CheckIcon />
   </GridItem>
   <GridItem
     className="item"

webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js

@@ -29,7 +29,7 @@ const InventoryFilter = ({
           value={filterTerm}
           type="text"
           placeholder={__('Filter..')}
-          onChange={handleFilterChange}
+          onChange={(e, v) => handleFilterChange(v)}
         />
         <ClearButton onClear={handleFilterClear} />
       </FormGroup>

webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-  DropdownPosition,
-  Grid,
-  GridItem,
+	Grid,
+	GridItem
 } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle,
+	DropdownPosition
+} from '@patternfly/react-core/deprecated';
 import Head from 'foremanReact/components/Head';
 import {
   INVENTORY_PAGE_TITLE,
@@ -58,7 +60,7 @@ const PageTitle = () => {
           className="title-dropdown"
           onSelect={() => setIsDropdownOpen(false)}
           toggle={
-            <KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />
+            <KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />
           }
           isOpen={isDropdownOpen}
           isPlain

webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js

@@ -2,7 +2,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table';
+import {
+	Table,
+	TableBody,
+	TableHeader
+} from '@patternfly/react-table/deprecated';
 import {
   Card,
   CardTitle,
@@ -11,6 +15,7 @@ import {
   ModalVariant,
   Spinner,
   Text,
+  Icon,
 } from '@patternfly/react-core';
 import {
   CheckCircleIcon,
@@ -108,8 +113,8 @@ const CloudPingModal = ({ title, isOpen, toggle }) => {
 
 const StatusIcon = ({ isPending, authStatus }) => {
   if (isPending) return <Spinner size="sm" />;
-  if (authStatus.success) return <CheckCircleIcon color="green" />;
-  if (authStatus.error) return <ExclamationCircleIcon color="red" />;
+  if (authStatus.success) return <Icon color="green"><CheckCircleIcon /></Icon>;
+  if (authStatus.error) return <Icon color="red"><ExclamationCircleIcon /></Icon>;
   return <Spinner size="sm" />;
 };
 

webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap

@@ -56,11 +56,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
           >
             Show Advanced Settings
              
-            <CaretRightIcon
-              color="currentColor"
-              noVerticalAlign={false}
-              size="sm"
-            />
+            <CaretRightIcon />
           </Button>
         </Popover>
       </Col>
@@ -78,11 +74,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
         <Text
           component="p"
         >
-          <InfoAltIcon
-            color="currentColor"
-            noVerticalAlign={false}
-            size="sm"
-          />
+          <InfoAltIcon />
            
           More details can be found in
            

webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
 import {

webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js

@@ -4,7 +4,9 @@ import {
   InsightsLabel,
   Section,
 } from '@redhat-cloud-services/frontend-components';
-import { DropdownItem } from '@patternfly/react-core';
+import {
+	DropdownItem
+} from '@patternfly/react-core/deprecated';
 import { sortable, cellWidth } from '@patternfly/react-table';
 import { AnsibeTowerIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';

webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js

@@ -20,13 +20,13 @@ const paginationTitles = {
   page: '', // doesn't work well with translations as it adds 's' for plural, see: https://github.com/patternfly/patternfly-react/issues/6707
   itemsPerPage: __('Items per page'),
   perPageSuffix: __('per page'),
-  toFirstPage: __('Go to first page'),
-  toPreviousPage: __('Go to previous page'),
-  toLastPage: __('Go to last page'),
-  toNextPage: __('Go to next page'),
-  optionsToggle: __('Items per page'),
-  currPage: __('Current page'),
-  paginationTitle: __('Pagination'),
+  toFirstPageAriaLabel: __('Go to first page'),
+  toPreviousPageAriaLabel: __('Go to previous page'),
+  toLastPageAriaLabel: __('Go to last page'),
+  toNextPageAriaLabel: __('Go to next page'),
+  optionsToggleAriaLabel: __('Items per page'),
+  currPageAriaLabel: __('Current page'),
+  paginationAriaLabel: __('Pagination'),
 };
 
 const Pagination = ({ variant, ...props }) => {

webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js

@@ -1,7 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import { isEmpty } from 'lodash';
 import { STATUS } from 'foremanReact/constants';

webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { cellWidth } from '@patternfly/react-table';
+import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
 
 export const rebootFormatter = ({ title: reboot }) => ({
-  children: reboot ? <CheckCircleIcon color="green" /> : __('No'),
+  children: reboot ? <Icon color="green"><CheckCircleIcon /></Icon> : __('No'),
 });
 
 export const columns = [

webpack/InsightsCloudSync/Components/ToolbarDropdown.js

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { redHatAdvisorSystems } from '../InsightsCloudSyncHelpers';
 
@@ -30,7 +34,7 @@ const ToolbarDropdown = ({ onRecommendationSync }) => {
     <Dropdown
       className="title-dropdown"
       onSelect={() => setIsDropdownOpen(false)}
-      toggle={<KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />}
+      toggle={<KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />}
       isOpen={isDropdownOpen}
       isPlain
       dropdownItems={dropdownItems}

webpack/InsightsHostDetailsTab/InsightsTotalRiskChart.js

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { push } from 'connected-react-router';
 import { useHistory } from 'react-router-dom';
-import { DropdownItem, Bullseye, Title } from '@patternfly/react-core';
+import {
+	Bullseye,
+	Title
+} from '@patternfly/react-core';
+import {
+	DropdownItem
+} from '@patternfly/react-core/deprecated';
 import { ChartDonut, ChartLegend, ChartLabel } from '@patternfly/react-charts';
 import { STATUS } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';

webpack/InsightsHostDetailsTab/NewHostDetailsTab.js

@@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
-  Grid,
-  GridItem,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
+	Grid,
+	GridItem
 } from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import InsightsTable from '../InsightsCloudSync/Components/InsightsTable';
 import RemediationModal from '../InsightsCloudSync/Components/RemediationModal';
@@ -74,7 +76,7 @@ const NewHostDetailsTab = ({ hostName, router }) => {
           ouiaId="insights-dropdown"
           onSelect={() => setIsDropdownOpen(false)}
           toggle={
-            <KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />
+            <KebabToggle onToggle={(_event, isOpen) => setIsDropdownOpen(isOpen)} />
           }
           isOpen={isDropdownOpen}
           isPlain

webpack/common/DropdownToggle.js

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import {
+	Dropdown,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 const DropdownToggle = ({ items, ...props }) => {
   const [isOpen, setOpen] = useState(false);
   return (
     <Dropdown
       onSelect={() => setOpen(false)}
-      toggle={<KebabToggle onToggle={value => setOpen(value)} />}
+      toggle={<KebabToggle onToggle={(_event, value) => setOpen(value)} />}
       isOpen={isOpen}
       isPlain
       dropdownItems={items}

webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap

@@ -10,11 +10,7 @@ exports[`InsightsCloudSync helpers should return insights cloud Url 1`] = `
     className="pf-c-form__group-label-help some-class"
     onClick={[Function]}
   >
-    <HelpIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
+    <HelpIcon />
   </button>
 </Popover>
 `;

webpack/common/table/EmptyState.js

@@ -4,9 +4,8 @@ import {
   EmptyState,
   EmptyStateIcon,
   Spinner,
-  EmptyStateVariant,
-  Title,
-} from '@patternfly/react-core';
+  EmptyStateVariant, EmptyStateHeader,
+  } from '@patternfly/react-core';
 import { ExclamationCircleIcon, CheckIcon } from '@patternfly/react-icons';
 
 import { STATUS } from 'foremanReact/constants';
@@ -16,33 +15,24 @@ const TableEmptyState = ({ status, error, rowsLength }) => {
   switch (status) {
     case STATUS.PENDING:
       return (
-        <EmptyState variant={EmptyStateVariant.small}>
-          <EmptyStateIcon variant="container" component={Spinner} />
-          <Title headingLevel="h2" size="lg">
-            {__('Loading')}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.sm}>
+          <EmptyStateHeader titleText={<>{__('Loading')}</>} icon={<EmptyStateIcon  icon={Spinner} />} headingLevel="h2" />
         </EmptyState>
       );
     case STATUS.ERROR:
       return (
-        <EmptyState variant={EmptyStateVariant.small}>
-          <EmptyStateIcon
-            variant="container"
-            component={ExclamationCircleIcon}
-          />
-          <Title headingLevel="h2" size="lg">
-            {sprintf(__('The server returned the following error: %s'), error)}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.sm}>
+          <EmptyStateHeader titleText={<>{sprintf(__('The server returned the following error: %s'), error)}</>} icon={<EmptyStateIcon
+
+            icon={ExclamationCircleIcon}
+          />} headingLevel="h2" />
         </EmptyState>
       );
     case STATUS.RESOLVED:
       if (rowsLength > 0) return null;
       return (
-        <EmptyState variant={EmptyStateVariant.large}>
-          <EmptyStateIcon variant="container" component={CheckIcon} />
-          <Title headingLevel="h2" size="lg">
-            {__('There are no recommendations for your hosts')}
-          </Title>
+        <EmptyState variant={EmptyStateVariant.lg}>
+          <EmptyStateHeader titleText={<>{__('There are no recommendations for your hosts')}</>} icon={<EmptyStateIcon  icon={CheckIcon} />} headingLevel="h2" />
         </EmptyState>
       );
     default: