Fixes #39444 - Migrate Subscriptions from pf3 to pf5

webpack/components/LoadingState/LoadingState.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Spinner } from 'patternfly-react';
+import { Spinner } from '@patternfly/react-core';
 import './LoadingState.scss';
 
 class LoadingState extends Component {
@@ -28,7 +28,7 @@ class LoadingState extends Component {
     const { loading, loadingText, children } = this.props;
     const spinner = (
       <div className="loading-state">
-        <Spinner loading={loading} size="lg" />
+        <Spinner size="lg" />
         <p>{loadingText}</p>
       </div>);
 

webpack/components/TooltipButton/TooltipButton.js

@@ -1,19 +1,30 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'patternfly-react';
-import { Tooltip } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
 import './TooltipButton.scss';
 
 const TooltipButton = ({
-  disabled, title, tooltipText, tooltipId, tooltipPlacement, renderedButton, ...props
+  disabled, title, tooltipText, tooltipId, tooltipPlacement, renderedButton, variant, ...props
 }) => {
   const triggerRef = useRef(null);
 
-  if (!disabled) return renderedButton || (<Button {...props}>{title}</Button>);
+  const effectiveVariant = disabled && variant === 'danger' ? 'secondary' : variant;
+
+  if (!disabled) {
+    return renderedButton || (
+      <Button {...props} variant={variant} ouiaId={tooltipId}>
+        {title}
+      </Button>
+    );
+  }
   return (
     <>
       <div className="tooltip-button-helper" ref={triggerRef}>
-        {renderedButton || (<Button {...props} disabled>{title}</Button>)}
+        {renderedButton || (
+          <Button {...props} variant={effectiveVariant} isDisabled ouiaId={tooltipId}>
+            {title}
+          </Button>
+        )}
       </div>
       <Tooltip
         id={tooltipId}
@@ -33,6 +44,7 @@ TooltipButton.propTypes = {
   tooltipId: PropTypes.string.isRequired,
   tooltipPlacement: PropTypes.string,
   renderedButton: PropTypes.node,
+  variant: PropTypes.string,
 };
 
 TooltipButton.defaultProps = {
@@ -41,6 +53,7 @@ TooltipButton.defaultProps = {
   tooltipPlacement: 'bottom',
   tooltipText: '',
   renderedButton: null,
+  variant: 'secondary',
 };
 
 export default TooltipButton;

webpack/components/pf3Table/formatters/EntitlementsInlineEditFormatter.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { KEYCODES } from 'foremanReact/common/keyCodes';
-import { Table, FormControl, FormGroup, HelpBlock, Spinner } from 'patternfly-react';
+import { Table, FormControl, FormGroup, HelpBlock } from 'patternfly-react';
+import { Spinner } from '@patternfly/react-core';
 import { validateQuantity } from '../../../scenes/Subscriptions/SubscriptionValidations';
 import { getEntitlementsDisplayValue } from '../../../scenes/Subscriptions/components/SubscriptionsTable/SubscriptionsTableHelpers';
 
@@ -62,7 +63,9 @@ const renderEdit = (hasChanged, onChange, value, additionalData) => {
     // The same issue prevents from correct switching inputs on TAB.
     // See the reactabular code for details:
     // https://github.com/reactabular/reactabular/blob/master/packages/reactabular-table/src/body-row.js#L58
-    <Spinner loading={!upstreamAvailableLoaded} size="xs">
+    !upstreamAvailableLoaded ? (
+      <Spinner size="sm" />
+    ) : (
       <FormGroup
         validationState={validation.state}
       >
@@ -80,7 +83,7 @@ const renderEdit = (hasChanged, onChange, value, additionalData) => {
           </div>
         </HelpBlock>
       </FormGroup>
-    </Spinner>
+    )
   );
 
   return (

webpack/redux/reducers/index.js

@@ -10,6 +10,7 @@ import { reducers as organizationProductsReducers } from '../OrganizationProduct
 import { contentViewDetails } from '../../scenes/ContentViews/Details';
 import hostDetails from '../../components/extensions/HostDetails/HostDetailsReducer';
 import searchBar from '../../components/extensions/SearchBar/SearchBarReducer';
+import tables from '../../scenes/Settings';
 
 export default combineReducers({
   organization,
@@ -22,5 +23,6 @@ export default combineReducers({
   contentViewDetails,
   hostDetails,
   searchBar,
+  settings: combineReducers({ tables }),
   ...organizationProductsReducers,
 });

webpack/scenes/Subscriptions/Details/SubscriptionDetailProduct.js

@@ -1,32 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'patternfly-react';
+import { Grid, GridItem } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const SubscriptionDetailProduct = ({ content }) => (
-  <Row key={content.id}>
-    <Col sm={12}>
-      <Row>
-        <u>{content.name}</u>
-      </Row>
-    </Col>
-    <Row>
-      <Col sm={3}>{__('Content Download URL')}</Col>
-      <Col sm={9}>{content.content_url} </Col>
-    </Row>
-    <Row>
-      <Col sm={3}>{__('GPG Key URL')}</Col>
-      <Col sm={9}>{content.gpg_url} </Col>
-    </Row>
-    <Row>
-      <Col sm={3}>{__('Repo Type')}</Col>
-      <Col sm={9}>{content.type} </Col>
-    </Row>
-    <Row>
-      <Col sm={3}>{__('Enabled')}</Col>
-      <Col sm={9}>{content.enabled ? __('yes') : __('no')} </Col>
-    </Row>
-  </Row>
+  <Grid hasGutter key={content.id}>
+    <GridItem span={12}>
+      <u>{content.name}</u>
+    </GridItem>
+    <GridItem span={3}>{__('Content Download URL')}</GridItem>
+    <GridItem span={9}>{content.content_url}</GridItem>
+    <GridItem span={3}>{__('GPG Key URL')}</GridItem>
+    <GridItem span={9}>{content.gpg_url}</GridItem>
+    <GridItem span={3}>{__('Repo Type')}</GridItem>
+    <GridItem span={9}>{content.type}</GridItem>
+    <GridItem span={3}>{__('Enabled')}</GridItem>
+    <GridItem span={9}>{content.enabled ? __('yes') : __('no')}</GridItem>
+  </Grid>
 );
 
 SubscriptionDetailProduct.propTypes = {