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/AccountList/accountList.scss

@@ -8,11 +8,11 @@
   }
 
   .account-list {
-    .pf-c-accordion__toggle {
+    .pf-v5-c-accordion__toggle {
       margin-top: 10px;
     }
 
-    .pf-c-accordion__toggle-text {
+    .pf-v5-c-accordion__toggle-text {
       font-size: 16px;
       display: flex;
       justify-content: space-between;
@@ -21,7 +21,7 @@
       .account-icon {
         margin-right: 5px;
 
-        .pf-c-label__icon {
+        .pf-v5-c-label__icon {
           margin: 0;
         }
       }

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/InventoryFilter/inventoryFilter.scss

@@ -1,5 +1,5 @@
 #inventory_filter_form {
-  .pf-c-form__group-control {
+  .pf-v5-c-form__group-control {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;

webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.scss

@@ -12,16 +12,16 @@
       font-size: 16px;
     }
 
-    .pf-c-dropdown__toggle {
+    .pf-v5-c-dropdown__toggle {
       margin-right: -20px;
     }
 
     .settings-alert {
       margin-bottom: 30px;
-      .pf-c-alert {
+      .pf-v5-c-alert {
         margin-bottom: 5px;
 
-        .pf-c-alert__title {
+        .pf-v5-c-alert__title {
           font-size: var(--pf-global--FontSize--md);
           line-height: var(--pf-global--LineHeight--md);
         }

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 @@
           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,18 @@ 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 @@
   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/InsightsTable/table.scss

@@ -1,5 +1,5 @@
 .rh-cloud-recommendations-table {
-  .pf-c-table__check {
+  .pf-v5-c-table__check {
     input:disabled {
       display: none;
     }

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/InsightsCloudSync/InsightsCloudSync.scss

@@ -78,7 +78,7 @@
       width: 100%;
     }
 
-    .pf-c-pagination {
+    .pf-v5-c-pagination {
       padding-right: 0;
     }
   }

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/HelpLabel.js

@@ -9,7 +9,7 @@ export const HelpLabel = ({ text, id, className }) => {
     <Popover id={`${id}-help`} bodyContent={text} aria-label="help-text">
       <button
         onClick={e => e.preventDefault()}
-        className={`pf-c-form__group-label-help ${className}`}
+        className={`pf-v5-c-form__group-label-help ${className}`}
       >
         <HelpIcon />
       </button>

webpack/common/Switcher/SwitcherPF4.scss

@@ -7,7 +7,7 @@ label.foreman-rh-cloud-switcher {
     padding-left: 5px;
   }
 
-  .pf-c-switch__toggle {
+  .pf-v5-c-switch__toggle {
     margin-right: 5px;
   }
 }

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

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