kie-tools-issues#2641: Upgrade Patternfly to v5

examples/bpmn-editor-classic-on-webapp/package.json

@@ -19,8 +19,8 @@
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/stunner-editors": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "copy-webpack-plugin": "^11.0.0",

examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx

@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { Sidebar } from "./Sidebar";
 
 export function BpmnEditorClassicPage() {

examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx

@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
             value={fileName}
             type={"text"}
             aria-label={"Edit file name"}
-            onChange={setFileName}
+            onChange={(_event, val) => setFileName(val)}
             onBlur={onChangeName}
           />
           <br />

examples/dmn-editor-classic-on-webapp/package.json

@@ -19,8 +19,8 @@
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/stunner-editors": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "copy-webpack-plugin": "^11.0.0",

examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx

@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { Sidebar } from "./Sidebar";
 
 export function DmnEditorClassicPage() {

examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx

@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
             value={fileName}
             type={"text"}
             aria-label={"Edit file name"}
-            onChange={setFileName}
+            onChange={(_event, val) => setFileName(val)}
             onBlur={onChangeName}
           />
           <br />

examples/dmn-editor-on-webapp/package.json

@@ -19,8 +19,8 @@
     "@kie-tools/dmn-editor-envelope": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "copy-webpack-plugin": "^11.0.0",

examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx

@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { Sidebar } from "./Sidebar";
 
 export function DmnEditorPage() {

examples/dmn-editor-on-webapp/src/Sidebar.tsx

@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
             value={fileName}
             type={"text"}
             aria-label={"Edit file name"}
-            onChange={setFileName}
+            onChange={(_event, val) => setFileName(val)}
             onBlur={onChangeName}
           />
           <br />

examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json

@@ -18,8 +18,8 @@
     "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "copy-webpack-plugin": "^11.0.0",

examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx

@@ -22,7 +22,8 @@ import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/ap
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { EmbeddedEditor } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 import { Base64PngGallery } from "./Base64PngGallery";

examples/micro-frontends-multiplying-architecture-base64png-editor/package.json

@@ -27,8 +27,8 @@
     "@kie-tools-core/notifications": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools-core/workspace": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6"
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1"
   },
   "devDependencies": {
     "@kie-tools/root-env": "workspace:*",

examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx

@@ -20,11 +20,10 @@
 import * as React from "react";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { EditorApi, KogitoEditorEnvelopeContextType } from "@kie-tools-core/editor/dist/api";
-import { EmptyState, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import { EmptyState, EmptyStateIcon, EmptyStateHeader } from "@patternfly/react-core/dist/js/components/EmptyState";
 import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
 import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { Switch } from "@patternfly/react-core/dist/js/components/Switch";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
 import { Base64PngEdit, Base64PngEditorStateControl } from "./Base64PngEditorStateControl";
 import { KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
@@ -452,10 +451,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
           />
           {disabled && (
             <EmptyState>
-              <EmptyStateIcon icon={CubesIcon} />
-              <Title headingLevel="h5" size="4xl">
-                Empty image
-              </Title>
+              <EmptyStateHeader titleText="Empty image" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h5" />
             </EmptyState>
           )}
           <canvas ref={canvasRef} className={"base64png-editor--canvas"} />
@@ -545,7 +541,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
                     id="invert-switch"
                     isDisabled={disabled}
                     isChecked={invert === "100"}
-                    onChange={(value) => tweakInvert(value ? "100" : "0")}
+                    onChange={(_event, value) => tweakInvert(value ? "100" : "0")}
                   />
                 </div>
               </NavItem>

examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json

@@ -20,8 +20,8 @@
     "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-router": "^5.1.20",

examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx

@@ -21,7 +21,8 @@ import * as React from "react";
 import { useEffect, useState } from "react";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
 import { PingPongReactIFrameViewsPage } from "./React/PingPongReactIFrameViewsPage";
 import { PingPongReactDivViewsPage } from "./React/PingPongReactDivViewsPage";
@@ -58,7 +59,7 @@ export function App() {
           <PageHeader
             logo={<Brand src={"logo.png"} alt="Logo" />}
             topNav={
-              <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+              <Nav onSelect={(_event, e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
                 <NavList>
                   <NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
                     <Link to={Location.HOME}>Home</Link>

examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx

@@ -21,7 +21,6 @@ import * as React from "react";
 import { useState, useEffect } from "react";
 import { Label } from "@patternfly/react-core/dist/js/components/Label";
 import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
 
 interface Props {
   lastPing: string;

examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json

@@ -18,8 +18,8 @@
     "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "copy-webpack-plugin": "^11.0.0",

examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx

@@ -25,7 +25,8 @@ import {
 } from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/embedded";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
-import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button/Button";
 
 import { useStateAsSharedValue } from "@kie-tools-core/envelope-bus/dist/hooks";

examples/serverless-workflow-editor-standalone-on-webapp/package.json

@@ -18,8 +18,8 @@
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/serverless-workflow-standalone-editor": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-router": "^5.1.20",

examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx

@@ -21,7 +21,8 @@ import * as React from "react";
 import { useEffect, useState } from "react";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
 import { SwfStandaloneEditorPage } from "./Pages/SwfStandaloneEditorPage";
 import { SwfStandaloneDiagramOnlyEditorPage } from "./Pages/SwfStandaloneDiagramOnlyEditorPage";
@@ -54,7 +55,7 @@ export function App() {
           <PageHeader
             logo={<Brand src={"logo.png"} alt="Logo" />}
             topNav={
-              <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+              <Nav onSelect={(_event, e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
                 <NavList>
                   <NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
                     <Link to={Location.HOME}>Home</Link>

examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx

@@ -23,10 +23,11 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
   EmptyStateVariant,
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
 import { ChangeEvent } from "react";
 
@@ -44,25 +45,28 @@ interface UploadProps {
 interface AllProps extends NewProps, UploadProps {}
 
 export const ServerlessWorkflowEmptyState = (props: AllProps) => (
-  <EmptyState variant={EmptyStateVariant.small}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      No serverless workflow document
-    </Title>
+  <EmptyState variant={EmptyStateVariant.sm}>
+    <EmptyStateHeader
+      titleText="No serverless workflow document"
+      icon={<EmptyStateIcon icon={CubesIcon} />}
+      headingLevel="h4"
+    />
     <EmptyStateBody>
       No serverless workflow document has been selected. Please either upload an existing document or create a new one.
     </EmptyStateBody>
-    <FileChooser setContent={props.setContent} />
-    {!props.isDiagramOnly && !props.isTextOnly && (
-      <EmptyStateSecondaryActions>
-        <Button variant="link" onClick={(e) => props.newContent("json")} ouiaId="new-button">
-          New JSON
-        </Button>
-        <Button variant="link" onClick={(e) => props.newContent("yaml")} ouiaId="new-button">
-          New YAML
-        </Button>
-      </EmptyStateSecondaryActions>
-    )}
+    <EmptyStateFooter>
+      <FileChooser setContent={props.setContent} />
+      {!props.isDiagramOnly && !props.isTextOnly && (
+        <EmptyStateActions>
+          <Button variant="link" onClick={(e) => props.newContent("json")} ouiaId="new-button">
+            New JSON
+          </Button>
+          <Button variant="link" onClick={(e) => props.newContent("yaml")} ouiaId="new-button">
+            New YAML
+          </Button>
+        </EmptyStateActions>
+      )}
+    </EmptyStateFooter>
   </EmptyState>
 );
 
@@ -86,8 +90,8 @@ const FileChooser = (props: UploadProps) => {
   };
 
   return (
-    <div style={{ marginTop: "var(--pf-c-empty-state__primary--MarginTop)" }}>
-      <label htmlFor="file-upload" className="pf-c-button pf-m-primary" data-ouia-component-id="upload-button">
+    <div style={{ marginTop: "var(--pf-v5-c-empty-state__primary--MarginTop)" }}>
+      <label htmlFor="file-upload" className="pf-v5-c-button pf-m-primary" data-ouia-component-id="upload-button">
         <i className="fa fa-cloud-upload" />
         Upload
       </label>

examples/uniforms-patternfly/package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools/uniforms-patternfly": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
     "ajv": "^8.17.1",
     "ajv-draft-04": "^1.0.0",
     "ajv-formats": "^3.0.1",

examples/uniforms-patternfly/src/App.tsx

@@ -21,7 +21,8 @@ import * as React from "react";
 import { useState } from "react";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
 import { Form } from "./Form";
 
 export enum SchemaType {
@@ -38,7 +39,7 @@ export function App() {
         <PageHeader
           logo={<Brand src={"logo.png"} alt="Logo" />}
           topNav={
-            <Nav onSelect={(e) => setSchemaType(e.itemId as SchemaType)} aria-label="Nav" variant="horizontal">
+            <Nav onSelect={(_event, e) => setSchemaType(e.itemId as SchemaType)} aria-label="Nav" variant="horizontal">
               <NavList>
                 <NavItem itemId={SchemaType.JsonSchema} isActive={schemaType === SchemaType.JsonSchema}>
                   JSON Schema

packages/boxed-expression-component/package.json

@@ -6,7 +6,7 @@
   "keywords": [],
   "scripts": {
     "build:dev": "rimraf dist && pnpm copy:css && tsc -p tsconfig.json",
-    "build:prod": "rimraf dist && pnpm copy:css && pnpm lint && tsc -p tsconfig.json && pnpm test && pnpm test-e2e",
+    "build:prod": "rimraf dist && pnpm copy:css && pnpm lint && tsc -p tsconfig.json && pnpm test  && pnpm test-e2e",
     "build:storybook": "rimraf dist-storybook && NODE_ENV=development storybook build -o dist-storybook",
     "copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/",
     "deploy": "gh-pages -d dist-dev",
@@ -31,10 +31,10 @@
     "@kie-tools/i18n-common-dictionary": "workspace:*",
     "@kie-tools/jest-base": "workspace:*",
     "@kie-tools/xml-parser-ts": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.112.39",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.1",
+    "@patternfly/react-styles": "^5.4.0",
+    "@patternfly/react-table": "^5.4.1",
     "lodash": "^4.17.21",
     "react-resizable": "^1.11.0",
     "react-table": "^7.6.2",