PatternFly version 5 update

.github/workflows/check-pr.yml

@@ -3,6 +3,7 @@ on:
   pull_request:
     branches:
       - main
+      - v4
 jobs:
   call-build-lint-test-workflow:
     uses: ./.github/workflows/build-lint-test.yml

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - v4
 jobs:
   call-build-lint-test-workflow:
     uses: ./.github/workflows/build-lint-test.yml

jest.config.js

@@ -1,7 +1,7 @@
 // Sync object
 /** @type {import('@jest/types').Config.InitialOptions} */
 
-const config = {
+module.exports = {
   verbose: true,
   coverageDirectory: './coverage/',
   collectCoverage: true,
@@ -23,6 +23,7 @@ const config = {
   testEnvironmentOptions: {
     url: 'http://localhost:5000/',
   },
+  setupFiles: [ './jest.setup.js' ],
   roots: [ '<rootDir>/packages/' ],
   // modulePathIgnorePatterns: ['<rootDir>/packages/create-crc-app/templates', '<rootDir>/packages/docs/.cache'],
   modulePathIgnorePatterns: [
@@ -44,5 +45,3 @@ const config = {
     '^.+\\.tsx?$': [ 'ts-jest', { tsconfig: './packages/module/tsconfig.json', } ],
   },
 };
-
-module.exports = config;

jest.setup.js

@@ -0,0 +1,2 @@
+const { TextEncoder } = require('util');
+global.TextEncoder = TextEncoder;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-component-groups-root",
   "private": true,
-  "version": "0.0.0",
+  "version": "5.0.0-alpha.0",
   "description": "This library provides patternfly extensions",
   "license": "MIT",
   "workspaces": [
@@ -28,17 +28,30 @@
     "serve:a11y": "npm run serve:a11y -w @patternfly/react-component-groups"
   },
   "devDependencies": {
-    "react": "^17",
-    "react-dom": "^17",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@testing-library/dom": "^8.0.7",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "babel-jest": "^29.2.2",
+    "babel-polyfill": "6.26.0",
+    "chokidar": "^3.5.3",
     "concurrently": "^5.3.0",
     "eslint": "^8.0.1",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-markdown": "^1.0.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.4",
-    "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.21.4",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-config-prettier": "8.6.0",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
@@ -51,18 +64,30 @@
     "@babel/preset-react":"^7.18.6",
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/react":"^12.1.5",
-    "@testing-library/user-event": "13.5.0",
-    "@testing-library/jest-dom":"5.16.5",
-    "jest-environment-jsdom": "^29.2.2",
-    "jest-canvas-mock": "2.4.0",
+    "@testing-library/react":"^13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@testing-library/jest-dom":"^5.14.1",
+    "@testing-library/dom": "^8.0.7",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-canvas-mock": "^2.4.0",
     "ts-jest":"29.0.3",
     "serve": "^14.1.2",
+    "rimraf": "^2.6.2",
     "whatwg-fetch": "^3.6.2",
     "babel-polyfill": "6.26.0",
     "identity-obj-proxy": "^3.0.0",
     "fs-extra": "^9.1.0",
     "glob": "^7.2.3",
-    "chokidar": "^3.5.3"
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.2.2",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.8.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "rimraf": "^2.6.2",
+    "serve": "^14.1.2",
+    "ts-jest": "29.0.3",
+    "whatwg-fetch": "^3.6.2"
   }
 }

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-component-groups",
-  "version": "1.0.0",
+  "version": "5.0.0-prerelease.0",
   "description": "Extended components used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -30,29 +30,27 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.250.1",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0",
     "react-jss": "^10.9.2"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^1.10.12",
-    "@reach/router": "1.3.4",
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "^4.82.115",
-    "@patternfly/react-table": "^4.113.0",
-    "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@patternfly/patternfly-a11y": "^4.3.1",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.57",
+    "@patternfly/patternfly": "^5.0.0",
+    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-code-editor": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.2.5",
     "copyfiles": "^2.4.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "^2.6.2",

packages/module/release.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  branches: [ { name: 'main', channel: 'prerelease' } ],
+  branches: [ { name: 'main', channel: 'prerelease' }, { name: 'v4', channel: 'alpha', prerelease: 'alpha' } ],
   analyzeCommits: {
     preset: 'angular'
   },
@@ -9,5 +9,6 @@ module.exports = {
     '@semantic-release/github',
     '@semantic-release/npm'
   ],
-  tagFormat: 'v${version}'
+  tagFormat: 'v${version}',
+  dryrun: true
 };

packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap

@@ -470,7 +470,6 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
     class="label"
   >
 
-
 
   </span>
 </div>

packages/module/src/DetailsPageHeader/DetailsPageHeader.tsx

@@ -95,7 +95,7 @@ export const DetailsPageHeader: React.FunctionComponent<DetailsPageHeaderProps>
                   color={pageHeading.label?.color}
                   variant={pageHeading.label?.variant}
                   isCompact={pageHeading.label?.isCompact}
-                  isTruncated={pageHeading.label?.isTruncated}
+
                   tooltipPosition={pageHeading.label?.tooltipPosition}
                   icon={pageHeading.label?.icon}
                   href={pageHeading.label?.href}

packages/module/src/DetailsPageHeader/utils/ActionButton.tsx

@@ -28,7 +28,7 @@ export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
       >
         {buttonProps.children}
       </Button>
-      {tooltip ? <Tooltip content={tooltip} reference={tooltipRef} id={tooltipId} position={tooltipPosition} /> : null}
+      {tooltip ? <Tooltip content={tooltip} triggerRef={tooltipRef} id={tooltipId} position={tooltipPosition} /> : null}
     </>
   );
 };

packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx

@@ -1,13 +1,15 @@
 import {
-  Dropdown,
-  DropdownGroup,
   DropdownGroupProps,
-  DropdownItem,
-  DropdownItemProps,
-  DropdownPosition,
-  DropdownToggle,
-  KebabToggle,
+  DropdownItemProps
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition as DropdownPositionDeprecated,
+  DropdownToggle as DropdownToggleDeprecated,
+  KebabToggle as KebabToggleDeprecated
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import React from 'react';
 import { createUseStyles } from 'react-jss'
@@ -25,7 +27,7 @@ export type ActionCTA =
   | { callback: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void }
   | { href: string; external?: boolean };
 
-export interface ActionProps extends Omit<DropdownItemProps, 'onClick'|'innerRef'> {
+export interface ActionProps extends Omit<DropdownItemProps, 'onClick' | 'innerRef'> {
   /** Executable callback or href. External links should automatically provide an external link icon on action. */
   cta: ActionCTA;
   /** Optional tooltip for this action. */
@@ -54,7 +56,7 @@ export interface ActionMenuOptions {
   /** Optional label for action menu (defaults to 'Actions') */
   label?: string;
   /** Optional position (left/right) at which the action menu appears (defaults to right) */
-  position?: DropdownPosition;
+  position?: DropdownPositionDeprecated;
   /** Optional flag to indicate whether labels should appear to the left of icons for the action menu items (icon appears after the label by default) */
   displayLabelBeforeIcon?: boolean;
   /** Optional id for action menu (defaults to 'actions') */
@@ -88,7 +90,7 @@ export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
   isDisabled,
   variant = ActionMenuVariant.DROPDOWN,
   label = 'Actions',
-  position = DropdownPosition.right,
+  position = DropdownPositionDeprecated.right,
   displayLabelBeforeIcon,
   id = 'actions',
 }: ActionMenuProps) => {
@@ -103,17 +105,17 @@ export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
     (action: ActionProps) => {
       const externalIcon =
         'href' in action.cta &&
-        'external' in action.cta &&
-        action.cta.href &&
-        action.cta.external ? (
+          'external' in action.cta &&
+          action.cta.href &&
+          action.cta.external ? (
             <ExternalLinkAltIcon />
           ) : null;
       const icon = action.icon ?? externalIcon;
       const href = 'href' in action.cta ? action.cta.href : undefined;
       const onClick =
         'callback' in action.cta && action.cta.callback ? action.cta.callback : undefined;
       return (
-        <DropdownItem
+        <DropdownItemDeprecated
           className={displayLabelBeforeIcon ? classes.menuItemWithLabelBeforeIcon : ''}
           description={action.description}
           isDisabled={action.isDisabled}
@@ -125,7 +127,7 @@ export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
           key={action.itemID}
         >
           {action.children}
-        </DropdownItem>
+        </DropdownItemDeprecated>
       );
     },
     [ classes.menuItemWithLabelBeforeIcon, displayLabelBeforeIcon ],
@@ -138,15 +140,15 @@ export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
     }
     if (isGrouped) {
       ddActionItems = groupedActions.map((action: GroupedActionsProps) => (
-        <DropdownGroup label={action?.label} key={action.groupId}>
+        <DropdownGroupDeprecated label={action?.label} key={action.groupId}>
           {action.groupActions.map((groupAction: ActionProps) => dropdownActionItem(groupAction))}
-        </DropdownGroup>
+        </DropdownGroupDeprecated>
       ))
     }
     return ddActionItems;
   }, [ actions, dropdownActionItem, isGrouped, groupedActions ]);
 
-  const onToggle = (open: boolean) => {
+  const onToggle = (_event: unknown, open: boolean) => {
     setIsOpen(open);
   };
 
@@ -164,16 +166,16 @@ export const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
 
   // Build dropdown
   return (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelect}
       position={position}
       toggle={
         variant === ActionMenuVariant.DROPDOWN ? (
-          <DropdownToggle id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled}>
+          <DropdownToggleDeprecated id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled}>
             {label}
-          </DropdownToggle>
+          </DropdownToggleDeprecated>
         ) : (
-          <KebabToggle id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled} />
+          <KebabToggleDeprecated id={`toggle-menu-${id}`} onToggle={onToggle} isDisabled={isDisabled} />
         )
       }
       isOpen={isOpen}

packages/module/src/ErrorBoundary/ErrorBoundary.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import ErrorBoundary from './ErrorBoundary';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom'
 
 describe('ErrorBoundary component', () => {
   const Surprise = () => {
@@ -57,7 +58,7 @@ describe('ErrorBoundary component', () => {
     );
 
     userEvent.click(screen.getByText(/show details/i));
-    expect(screen.getByText(/but a welcome one/i)).toBeVisible();
+    expect(screen.getByText(/but a welcome one/i)).toBeInTheDocument();
   });
 
   it('should show content again after changing url', () => {

packages/module/src/ErrorBoundary/ErrorBoundary.tsx

@@ -14,6 +14,8 @@ interface ErrorPageProps {
   errorDescription?: React.ReactNode;
   /** A default description of the error used if no errorDescription is provided. */
   defaultErrorDescription?: React.ReactNode;
+  /** Children components */
+  children?: React.ReactNode;
 }
 
 interface ErrorPageState {
@@ -40,6 +42,7 @@ class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
   }
 
   render() {
+
     if (this.state.historyState !== history.state) {
       this.setState({
         hasError: false,
@@ -76,4 +79,4 @@ class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
   }
 }
 
-export default ErrorBoundary;
+export default ErrorBoundary;