feat: upgrade to Patternfly v5

app/public/branding-example.css

@@ -1,7 +1,7 @@
 /* You can add customised styles here. */
 
-.pf-c-login,
-.pf-c-about-modal-box__hero {
+.pf-v5-c-login,
+.pf-v5-c-about-modal-box__hero {
   background-image: url(img/background.svg) !important;
   background-size: cover;
 }

app/src/examples/example3/Example3HeaderItems.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, Modal } from '@patternfly/react-core'
+import { Button, Dropdown, DropdownItem, Divider, MenuToggleElement, MenuToggle, Modal } from '@patternfly/react-core'
 
 export const Example3HeaderItem1: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false)
@@ -10,7 +10,7 @@ export const Example3HeaderItem1: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button id='example3-header-item1-button' variant='primary' isSmall onClick={handleModalToggle}>
+      <Button id='example3-header-item1-button' variant='primary' onClick={handleModalToggle}>
         Click Me!
       </Button>
 
@@ -37,8 +37,8 @@ export const Example3HeaderItem1: React.FunctionComponent = () => {
 export const Example3HeaderItem2: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  const onToggle = (isOpen: boolean) => {
-    setIsOpen(isOpen)
+  const onToggle = () => {
+    setIsOpen(!isOpen)
   }
 
   const onFocus = () => {
@@ -50,37 +50,38 @@ export const Example3HeaderItem2: React.FunctionComponent = () => {
     setIsOpen(false)
     onFocus()
   }
-
-  const dropdownItems = [
-    <DropdownItem key='link'>Link</DropdownItem>,
-    <DropdownItem key='action' component='button'>
-      Action
-    </DropdownItem>,
-    <DropdownItem key='disabled link' isDisabled href='www.google.com'>
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem key='disabled action' isAriaDisabled component='button' tooltipProps={{ position: 'top' }}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key='separator' />,
-    <DropdownItem key='separated link'>Separated link</DropdownItem>,
-    <DropdownItem key='separated action' component='button'>
-      Separated action
-    </DropdownItem>,
-  ]
-
   return (
     <Dropdown
       id='example3-header-item2-dropdown'
       onSelect={onSelect}
-      toggle={
-        <DropdownToggle id='example3-header-item2-dropdown-toggle' onToggle={onToggle}>
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle id='example3-header-item2-dropdown-toggle' ref={toggleRef} onClick={onToggle}>
           Example 3
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={isOpen}
-      dropdownItems={dropdownItems}
       isPlain
-    />
+    >
+      <DropdownItem key='link'>Link</DropdownItem>
+      <DropdownItem key='action' component='button'>
+        Action
+      </DropdownItem>
+      <DropdownItem key='disabled link' isDisabled href='www.google.com'>
+        Disabled link
+      </DropdownItem>
+      <DropdownItem
+        key='disabled action'
+        isAriaDisabled
+        component='button'
+        tooltipProps={{ content: '  Disabled action', position: 'top' }}
+      >
+        Disabled action
+      </DropdownItem>
+      <Divider key='separator' />
+      <DropdownItem key='separated link'>Separated link</DropdownItem>
+      <DropdownItem key='separated action' component='button'>
+        Separated action
+      </DropdownItem>
+    </Dropdown>
   )
 }

package.json

@@ -48,22 +48,6 @@
     "eslint-plugin-testing-library": "^6.2.2",
     "prettier": "3.2.5"
   },
-  "resolutions": {
-    "victory-area": "36.8.6",
-    "victory-bar": "36.8.6",
-    "victory-brush-container": "36.8.6",
-    "victory-core": "36.8.6",
-    "victory-cursor-container": "36.8.6",
-    "victory-create-container": "36.8.6",
-    "victory-legend": "36.8.6",
-    "victory-line": "36.8.6",
-    "victory-pie": "36.8.6",
-    "victory-scatter": "36.8.6",
-    "victory-selection-container": "36.8.6",
-    "victory-shared-events": "36.8.6",
-    "victory-voronoi-container": "36.8.6",
-    "victory-zoom-container": "36.8.6"
-  },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog",

packages/hawtio/package.json

@@ -36,10 +36,10 @@
     "@hawtio/camel-model-v4_0": "npm:@hawtio/camel-model@~4.0.5",
     "@hawtio/camel-model-v4_4": "npm:@hawtio/camel-model@~4.4.2",
     "@module-federation/utilities": "^3.0.20",
-    "@patternfly/react-charts": "~6.94.21",
-    "@patternfly/react-code-editor": "~4.82.122",
-    "@patternfly/react-core": "~4.278.1",
-    "@patternfly/react-table": "~4.113.7",
+    "@patternfly/react-charts": "~7.3.0",
+    "@patternfly/react-code-editor": "~5.3.3",
+    "@patternfly/react-core": "~5.3.3",
+    "@patternfly/react-table": "~5.3.3",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -96,22 +96,6 @@
       "optional": true
     }
   },
-  "resolutions": {
-    "victory-area": "36.8.6",
-    "victory-bar": "36.8.6",
-    "victory-brush-container": "36.8.6",
-    "victory-core": "36.8.6",
-    "victory-cursor-container": "36.8.6",
-    "victory-create-container": "36.8.6",
-    "victory-legend": "36.8.6",
-    "victory-line": "36.8.6",
-    "victory-pie": "36.8.6",
-    "victory-scatter": "36.8.6",
-    "victory-selection-container": "36.8.6",
-    "victory-shared-events": "36.8.6",
-    "victory-voronoi-container": "36.8.6",
-    "victory-zoom-container": "36.8.6"
-  },
   "engines": {
     "node": ">=18"
   },

packages/hawtio/src/core/event-service.ts

@@ -3,7 +3,7 @@ import { Logger } from './logging'
 
 const log = Logger.get('hawtio-core-event')
 
-export type NotificationType = 'default' | 'info' | 'success' | 'warning' | 'danger'
+export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'custom'
 
 export type Notification = {
   type: NotificationType

packages/hawtio/src/img/index.ts

@@ -1,18 +1,5 @@
-import { BackgroundImageSrcMap } from '@patternfly/react-core'
 import hawtioLogo from './hawtio-logo.svg'
 import userAvatar from './img_avatar.svg'
-import backgroundImageSrcLg from './pfbg_1200.jpg'
-import backgroundImageSrcXs from './pfbg_576.jpg'
-import backgroundImageSrcXs2x from './[email protected]'
-import backgroundImageSrcSm from './pfbg_768.jpg'
-import backgroundImageSrcSm2x from './[email protected]'
+import background from './background.svg'
 
-export const backgroundImages: BackgroundImageSrcMap = {
-  xs: backgroundImageSrcXs,
-  xs2x: backgroundImageSrcXs2x,
-  sm: backgroundImageSrcSm,
-  sm2x: backgroundImageSrcSm2x,
-  lg: backgroundImageSrcLg,
-}
-
-export { hawtioLogo, userAvatar }
+export { hawtioLogo, userAvatar, background }

packages/hawtio/src/plugins/camel/Camel.tsx

@@ -5,7 +5,7 @@ import {
   PageSection,
   PageSectionVariants,
   Spinner,
-  Title,
+  EmptyStateHeader,
 } from '@patternfly/react-core'
 import { CubesIcon } from '@patternfly/react-icons'
 import React from 'react'
@@ -21,7 +21,7 @@ export const Camel: React.FunctionComponent = () => {
   if (!loaded) {
     return (
       <PageSection>
-        <Spinner isSVG aria-label='Loading Camel Contexts tree' />
+        <Spinner aria-label='Loading Camel Contexts tree' />
       </PageSection>
     )
   }
@@ -30,10 +30,11 @@ export const Camel: React.FunctionComponent = () => {
     return (
       <PageSection variant={PageSectionVariants.light}>
         <EmptyState variant={EmptyStateVariant.full}>
-          <EmptyStateIcon icon={CubesIcon} />
-          <Title headingLevel='h1' size='lg'>
-            No Camel Contexts found
-          </Title>
+          <EmptyStateHeader
+            titleText='No Camel Contexts found'
+            icon={<EmptyStateIcon icon={CubesIcon} />}
+            headingLevel='h1'
+          />
         </EmptyState>
       </PageSection>
     )

packages/hawtio/src/plugins/camel/CamelContent.css

@@ -2,7 +2,7 @@
   overflow-y: inherit;
 }
 
-#camel-content-main .pf-c-page__main {
+#camel-content-main .pf-v5-c-page__main {
   overflow-x: auto;
 }
 #camel-content {

packages/hawtio/src/plugins/camel/CamelContent.tsx

@@ -13,6 +13,7 @@ import {
   PageSectionVariants,
   Text,
   Title,
+  EmptyStateHeader,
 } from '@patternfly/react-core'
 import { CubesIcon } from '@patternfly/react-icons'
 import { Response } from 'jolokia.js'
@@ -57,10 +58,11 @@ export const CamelContent: React.FunctionComponent = () => {
     return (
       <PageSection variant={PageSectionVariants.light} isFilled>
         <EmptyState variant={EmptyStateVariant.full}>
-          <EmptyStateIcon icon={CubesIcon} />
-          <Title headingLevel='h1' size='lg'>
-            Select Camel Node
-          </Title>
+          <EmptyStateHeader
+            titleText='Select Camel Node'
+            icon={<EmptyStateIcon icon={CubesIcon} />}
+            headingLevel='h1'
+          />
         </EmptyState>
       </PageSection>
     )

packages/hawtio/src/plugins/camel/CamelPreferences.css

@@ -1,13 +1,13 @@
-.pf-c-form__group {
+.pf-v5-c-form__group {
   grid-template-columns: 1fr 4fr !important;
 }
 
-.pf-c-form__group-label {
+.pf-v5-c-form__group-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.pf-c-icon {
+.pf-v5-c-icon {
   padding-right: 1em;
 }

packages/hawtio/src/plugins/camel/CamelPreferences.tsx

@@ -13,15 +13,17 @@ export const CamelPreferences: React.FunctionComponent = () => {
     setOptions(updated)
   }
 
-  const updateNumberValueFor = (key: keyof CamelOptions) => (value: string) => {
-    const intValue = parseInt(value)
-    if (!intValue) return
-    updateOptions(key, intValue)
-  }
+  const updateNumberValueFor =
+    (key: keyof CamelOptions) => (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+      const intValue = parseInt(value)
+      if (!intValue) return
+      updateOptions(key, intValue)
+    }
 
-  const updateCheckboxValueFor = (key: keyof CamelOptions) => (value: boolean) => {
-    updateOptions(key, value)
-  }
+  const updateCheckboxValueFor =
+    (key: keyof CamelOptions) => (_event: React.FormEvent<HTMLInputElement>, value: boolean) => {
+      updateOptions(key, value)
+    }
 
   return (
     <CardBody>

packages/hawtio/src/plugins/camel/CamelTreeView.css

@@ -1,29 +1,29 @@
-#camel-tree-view .pf-c-tree-view__list {
+#camel-tree-view .pf-v5-c-tree-view__list {
   height: 100%;
 }
 
-#camel-tree-view .pf-c-tree-view__node {
+#camel-tree-view .pf-v5-c-tree-view__node {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
-#camel-tree-view .pf-c-tree-view__node-toggle {
+#camel-tree-view .pf-v5-c-tree-view__node-toggle {
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 6px;
   padding-right: 6px;
 }
 
-#camel-tree-view .pf-c-tree-view__node-text {
+#camel-tree-view .pf-v5-c-tree-view__node-text {
   padding-top: 2px;
   font-size: smaller;
 }
 
-#camel-tree-view .pf-c-tree-view__node-icon {
+#camel-tree-view .pf-v5-c-tree-view__node-icon {
   flex-shrink: 0;
 }
 
-#camel-tree-view .pf-c-tree-view__node-text {
+#camel-tree-view .pf-v5-c-tree-view__node-text {
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

packages/hawtio/src/plugins/camel/contexts/ContextToolbar.tsx

@@ -1,17 +1,7 @@
 import { eventService } from '@hawtiosrc/core'
 import { workspace } from '@hawtiosrc/plugins/shared'
-import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-  Modal,
-  ModalVariant,
-  Skeleton,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-} from '@patternfly/react-core'
+import { Button, Modal, ModalVariant, Skeleton, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated'
 import { AsleepIcon, PlayIcon, Remove2Icon } from '@patternfly/react-icons'
 import React, { useState } from 'react'
 import {
@@ -147,7 +137,7 @@ export const ContextToolbar: React.FunctionComponent<{
       <ToolbarItem>
         <Button
           variant='primary'
-          isSmall={true}
+          size='sm'
           isDisabled={
             !(firstContext && firstContext.node.hasInvokeRights(CONTEXT_OPERATIONS.start)) || !isStartEnabled()
           }
@@ -160,7 +150,7 @@ export const ContextToolbar: React.FunctionComponent<{
       <ToolbarItem>
         <Button
           variant='danger'
-          isSmall={true}
+          size='sm'
           isDisabled={
             !(firstContext && firstContext.node.hasInvokeRights(CONTEXT_OPERATIONS.suspend)) || !isSuspendEnabled()
           }
@@ -218,7 +208,12 @@ export const ContextToolbar: React.FunctionComponent<{
           {toolbarButtons}
           <ToolbarItem id='camel-contexts-toolbar-item-dropdown'>
             <Dropdown
-              toggle={<KebabToggle id='camel-contexts-toolbar-item-dropdown-toggle' onToggle={onDropdownToggle} />}
+              toggle={
+                <KebabToggle
+                  id='camel-contexts-toolbar-item-dropdown-toggle'
+                  onToggle={(_event, isOpen: boolean) => onDropdownToggle(isOpen)}
+                />
+              }
               isOpen={isDropdownOpen}
               dropdownItems={dropdownItems}
               isPlain