feat: Upgrade to Patternfly5

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/img/index.ts

@@ -1,4 +1,3 @@
-import { BackgroundImageSrcMap } from '@patternfly/react-core'
 import hawtioLogo from './hawtio-logo.svg'
 import userAvatar from './img_avatar.svg'
 import backgroundImageSrcLg from './pfbg_1200.jpg'
@@ -7,7 +6,7 @@ import backgroundImageSrcXs2x from './pfbg_576@2x.jpg'
 import backgroundImageSrcSm from './pfbg_768.jpg'
 import backgroundImageSrcSm2x from './pfbg_768@2x.jpg'
 
-export const backgroundImages: BackgroundImageSrcMap = {
+export const backgroundImages = {
   xs: backgroundImageSrcXs,
   xs2x: backgroundImageSrcXs2x,
   sm: backgroundImageSrcSm,

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

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

@@ -4,7 +4,8 @@ import { HawtioLoadingCard } from '@hawtiosrc/plugins/shared'
 import { AttributeValues } from '@hawtiosrc/plugins/shared/jolokia-service'
 import { Card, CardBody, Text } from '@patternfly/react-core'
 import { InfoCircleIcon } from '@patternfly/react-icons'
-import { TableComposable, TableProps, Tbody, Td, Th, Thead, Tr, wrappable } from '@patternfly/react-table'
+import { Table, Tbody, Td, Th, Thead, Tr, wrappable } from '@patternfly/react-table'
+import { TableProps } from '@patternfly/react-table/deprecated'
 import { Response } from 'jolokia.js'
 import React, { useContext, useEffect, useState } from 'react'
 import { log } from '../globals'
@@ -130,7 +131,7 @@ export const Contexts: React.FunctionComponent = () => {
         contexts={contexts.filter(c => selectedCtx.includes(c.node.name))}
         deleteCallback={handleDeletedContexts}
       />
-      <TableComposable aria-label='Contexts' variant='compact'>
+      <Table aria-label='Contexts' variant='compact'>
         <Thead>
           <Tr>
             <Th
@@ -158,7 +159,7 @@ export const Contexts: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   )
 }

packages/hawtio/src/plugins/camel/debug/ConditionalBreakpointModel.tsx

@@ -54,7 +54,7 @@ export const ConditionalBreakpointModal: React.FunctionComponent<CondBkpsProps>
     <Modal
       variant={ModalVariant.small}
       title='Add Conditional Breakpoint'
-      titleIconVariant='default'
+      titleIconVariant='custom'
       isOpen={props.isConditionalBreakpointOpen}
       onClose={props.onAddConditionalBreakpointToggle}
       actions={[
@@ -83,7 +83,7 @@ export const ConditionalBreakpointModal: React.FunctionComponent<CondBkpsProps>
               onChange={() => setLanguage('simple')}
             />
             <Popover bodyContent={helpLanguageChoice('simple')}>
-              <Button className='cond-bkp-form-lang-radio-help' variant='plain' isSmall icon={<HelpIcon />} />
+              <Button className='cond-bkp-form-lang-radio-help' variant='plain' size='sm' icon={<HelpIcon />} />
             </Popover>
           </div>
           <div>
@@ -97,7 +97,7 @@ export const ConditionalBreakpointModal: React.FunctionComponent<CondBkpsProps>
               onChange={() => setLanguage('xpath')}
             />
             <Popover bodyContent={helpLanguageChoice('xpath')}>
-              <Button className='cond-bkp-form-lang-radio-help' variant='plain' isSmall icon={<HelpIcon />} />
+              <Button className='cond-bkp-form-lang-radio-help' variant='plain' size='sm' icon={<HelpIcon />} />
             </Popover>
           </div>
         </FormGroup>
@@ -108,7 +108,7 @@ export const ConditionalBreakpointModal: React.FunctionComponent<CondBkpsProps>
             isDisabled={!language || language.length === 0}
             type='text'
             value={predicate}
-            onChange={value => setPredicate(value)}
+            onChange={(_event, value) => setPredicate(value)}
           />
         </FormGroup>
         {error && (

packages/hawtio/src/plugins/camel/debug/Debug.tsx

@@ -25,7 +25,7 @@ import {
   PlusIcon,
   TimesCircleIcon,
 } from '@patternfly/react-icons'
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
+import { Table /* data-codemods */, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 import { Response } from 'jolokia.js'
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import * as camelService from '../camel-service'
@@ -372,7 +372,7 @@ export const Debug: React.FunctionComponent = () => {
    * Extra panel to add to the drawer slide-in
    */
   const debugPanelBreakpointsTab = () => (
-    <TableComposable key='breakpoints' aria-label='Breakpoints table' variant='compact'>
+    <Table key='breakpoints' aria-label='Breakpoints table' variant='compact'>
       <Thead>
         <Tr>
           <Th>Breakpoint</Th>
@@ -386,15 +386,15 @@ export const Debug: React.FunctionComponent = () => {
             <Td dataLabel='Remove'>
               <Button
                 variant='plain'
-                isSmall
+                size='sm'
                 icon={<TimesCircleIcon />}
                 onClick={() => handleRemoveBreakpoint(selectedNode, breakpoint)}
               ></Button>
             </Td>
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   )
 
   const toolbarButtons = (
@@ -403,7 +403,7 @@ export const Debug: React.FunctionComponent = () => {
         <ToolbarItem spacer={{ default: 'spacerSm' }} title='Remove the breakpoint on the selected node'>
           <Button
             variant='secondary'
-            isSmall
+            size='sm'
             icon={<MinusIcon />}
             isDisabled={!graphSelection}
             onClick={onRemoveBreakpoint}
@@ -417,7 +417,7 @@ export const Debug: React.FunctionComponent = () => {
           <ToolbarItem spacer={{ default: 'spacerSm' }} title='Add a breakpoint on the selected node'>
             <Button
               variant='secondary'
-              isSmall
+              size='sm'
               icon={<PlusIcon />}
               isDisabled={shouldDisableAddBreakpoint()}
               onClick={onAddBreakpoint}
@@ -428,7 +428,7 @@ export const Debug: React.FunctionComponent = () => {
           <ToolbarItem spacer={{ default: 'spacerSm' }} title='Add a conditional breakpoint on the selected node'>
             <Button
               variant='secondary'
-              isSmall
+              size='sm'
               icon={<PlusCircleIcon />}
               isDisabled={shouldDisableAddBreakpoint()}
               onClick={onAddConditionalBreakpointToggle}
@@ -442,7 +442,7 @@ export const Debug: React.FunctionComponent = () => {
       <ToolbarItem spacer={{ default: 'spacerSm' }} title='Step into the next node'>
         <Button
           variant='secondary'
-          isSmall
+          size='sm'
           icon={<LongArrowAltDownIcon />}
           isDisabled={suspendedBreakpoints.length === 0}
           onClick={onStep}
@@ -453,7 +453,7 @@ export const Debug: React.FunctionComponent = () => {
       <ToolbarItem spacer={{ default: 'spacerSm' }} title='Resume running'>
         <Button
           variant='secondary'
-          isSmall
+          size='sm'
           icon={<PlayIcon />}
           isDisabled={suspendedBreakpoints.length === 0}
           onClick={onResume}
@@ -467,7 +467,7 @@ export const Debug: React.FunctionComponent = () => {
           <ToolbarItem spacer={{ default: 'spacerSm' }} title='Show Debug Panel'>
             <Button
               variant='secondary'
-              isSmall
+              size='sm'
               icon={<BarsIcon />}
               isDisabled={suspendedBreakpoints.length === 0}
               onClick={onDebugPanelToggle}
@@ -486,7 +486,7 @@ export const Debug: React.FunctionComponent = () => {
         <Title headingLevel='h3'>Debug</Title>
         <Button
           variant='primary'
-          isSmall
+          size='sm'
           icon={!isDebugging ? React.createElement(PlayIcon) : React.createElement(BanIcon)}
           onClick={onDebugging}
           isDisabled={!camelService.canGetBreakpoints(selectedNode)}

packages/hawtio/src/plugins/camel/debug/MessageDrawer.tsx

@@ -15,7 +15,7 @@ import {
   PanelMainBody,
   Text,
 } from '@patternfly/react-core'
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
+import { Table /* data-codemods */, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 import React from 'react'
 import { useRef, useState } from 'react'
 import { MessageData } from './debug-service'
@@ -58,7 +58,7 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
     if (!message) return <em key='header-no-messages'>No Messages</em>
 
     return (
-      <TableComposable key={'header-' + message.uid} aria-label='Header table' variant='compact'>
+      <Table key={'header-' + message.uid} aria-label='Header table' variant='compact'>
         <Thead>
           <Tr>
             <Th>Key</Th>
@@ -73,7 +73,7 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     )
   }
 
@@ -125,7 +125,7 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
             <em>UID: {props.messages && props.messages.length > 0 ? props.messages[0]?.uid : ''}</em>
           </Text>
           <Nav
-            onSelect={onSelectTab}
+            onSelect={(_event, result: { itemId: number | string }) => onSelectTab(result)}
             variant='horizontal'
             theme='light'
             aria-label='Show Header or Body Debug Info Table'

packages/hawtio/src/plugins/camel/endpoints/AddEndpointURI.tsx

@@ -35,7 +35,7 @@ export const AddEndpointURI: React.FunctionComponent = () => {
           id='uri-input-text'
           name='uri-input-text'
           value={componentURI}
-          onChange={handleURIChange}
+          onChange={(_event, uri: string) => handleURIChange(uri)}
         />
       </FormGroup>
       <ActionGroup>