feat: Upgrade Patternfly to v5 with necessary refactors

upgrade hawtio/react to 1.3.0

package.json

@@ -73,21 +73,6 @@
     "jasmine": "^5.1.0"
   },
   "resolutions": {
-    "eslint-config-react-app/eslint-plugin-react-hooks": "^4.6.2",
-    "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-tooltip": "36.8.6",
-    "victory-voronoi-container": "36.8.6",
-    "victory-zoom-container": "36.8.6"
+    "eslint-config-react-app/eslint-plugin-react-hooks": "^4.6.2"
   }
 }

packages/kubernetes-api-app/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@hawtio/online-kubernetes-api": "workspace:*",
-    "@hawtio/react": "^1.2.6",
-    "@patternfly/react-core": "^4.278.1",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.113.7",
-    "@patternfly/react-tokens": "^4.94.6",
+    "@hawtio/react": "^1.3.0",
+    "@patternfly/react-core": "^5.3.3",
+    "@patternfly/react-styles": "^5.3.1",
+    "@patternfly/react-table": "^5.3.3",
+    "@patternfly/react-tokens": "^5.3.1",
     "@types/node": "^20.14.9",
     "@types/react": "18.2.64",
     "@types/react-dom": "^18.3.0",

packages/kubernetes-api-app/src/KubernetesPods.tsx

@@ -8,7 +8,7 @@ import {
   PanelMain,
   PanelMainBody,
 } from '@patternfly/react-core'
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 
 type KubePodsProps = {
   pods: KubePod[]
@@ -19,7 +19,7 @@ export const KubernetesPods: React.FunctionComponent<KubePodsProps> = (props: Ku
     <Panel isScrollable>
       <PanelMain>
         <PanelMainBody>
-          <TableComposable key='breakpoints' aria-label='Breakpoints table' variant='compact'>
+          <Table key='breakpoints' aria-label='Breakpoints table' variant='compact'>
             <Thead>
               <Tr>
                 <Th>Name</Th>
@@ -62,7 +62,7 @@ export const KubernetesPods: React.FunctionComponent<KubePodsProps> = (props: Ku
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </PanelMainBody>
       </PanelMain>
     </Panel>

packages/kubernetes-api-app/src/KubernetesProjects.tsx

@@ -9,7 +9,7 @@ import {
   PanelMain,
   PanelMainBody,
 } from '@patternfly/react-core'
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 
 type KubeProjectProps = {
   projects: KubeProject[]
@@ -20,7 +20,7 @@ export const KubernetesProjects: React.FunctionComponent<KubeProjectProps> = (pr
     <Panel isScrollable>
       <PanelMain>
         <PanelMainBody>
-          <TableComposable key='breakpoints' aria-label='Breakpoints table' variant='compact'>
+          <Table key='breakpoints' aria-label='Breakpoints table' variant='compact'>
             <Thead>
               <Tr>
                 <Th>Name</Th>
@@ -59,7 +59,7 @@ export const KubernetesProjects: React.FunctionComponent<KubeProjectProps> = (pr
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </PanelMainBody>
       </PanelMain>
     </Panel>

packages/kubernetes-api-app/src/login/AuthLoadingPage.tsx

@@ -5,7 +5,7 @@ export const AuthLoadingPage: React.FunctionComponent = () => (
   <Page>
     <Bullseye>
       <div style={{ justifyContent: 'center' }}>
-        <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+        <Spinner diameter='60px' aria-label='Loading Hawtio' />
 
         <TextContent>
           <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>

packages/kubernetes-api-app/src/login/AuthLoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { usePlugins, DEFAULT_APP_NAME, useHawtconfig, useUser } from '@hawtio/react'
-import { backgroundImages, hawtioLogo } from './img'
+import { background, hawtioLogo } from './img'
 import { ListItem, ListVariant, LoginFooterItem, LoginPage } from '@patternfly/react-core'
 import { log } from '@hawtio/online-oauth'
 import { AuthLoadingPage } from './AuthLoadingPage'
@@ -60,7 +60,7 @@ export const AuthLoginPage: React.FunctionComponent = () => {
 
   return (
     <LoginPage
-      backgroundImgSrc={backgroundImages}
+      backgroundImgSrc={background}
       brandImgSrc={appLogo}
       brandImgAlt={appName}
       loginTitle={title}

packages/kubernetes-api-app/src/login/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/kubernetes-api/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@hawtio/online-oauth": "workspace:*",
-    "@hawtio/react": "^1.2.6",
+    "@hawtio/react": "^1.3.0",
     "@types/jquery": "^3.5.29",
     "@types/jsonpath": "^0.2.4",
     "@types/node": "^20.14.9",

packages/management-api-app/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@hawtio/online-management-api": "workspace:*",
-    "@hawtio/react": "^1.2.6",
-    "@patternfly/react-core": "^4.278.1",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.113.7",
-    "@patternfly/react-tokens": "^4.94.6",
+    "@hawtio/react": "^1.3.0",
+    "@patternfly/react-core": "^5.3.3",
+    "@patternfly/react-styles": "^5.3.1",
+    "@patternfly/react-table": "^5.3.3",
+    "@patternfly/react-tokens": "^5.3.1",
     "@types/node": "^20.14.9",
     "@types/react": "18.2.64",
     "@types/react-dom": "^18.3.0",

packages/management-api-app/src/Management.tsx

@@ -127,7 +127,7 @@ export const Management: React.FunctionComponent = () => {
 
             <Bullseye>
               <div style={{ justifyContent: 'center' }}>
-                <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+                <Spinner diameter='60px' aria-label='Loading Hawtio' />
 
                 <TextContent>
                   <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>

packages/management-api-app/src/ManagementPods.tsx

@@ -9,7 +9,7 @@ import {
   PanelMain,
   PanelMainBody,
 } from '@patternfly/react-core'
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 
 type ManagedPodsProps = {
   pods: ManagedPod[]
@@ -27,7 +27,7 @@ export const ManagementPods: React.FunctionComponent<ManagedPodsProps> = (props:
     <Panel isScrollable>
       <PanelMain>
         <PanelMainBody>
-          <TableComposable key='breakpoints' aria-label='Breakpoints table' variant='compact'>
+          <Table key='breakpoints' aria-label='Breakpoints table' variant='compact'>
             <Thead>
               <Tr>
                 <Th>Name</Th>
@@ -93,7 +93,7 @@ export const ManagementPods: React.FunctionComponent<ManagedPodsProps> = (props:
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </PanelMainBody>
       </PanelMain>
     </Panel>

packages/management-api-app/src/login/AuthLoadingPage.tsx

@@ -5,7 +5,7 @@ export const AuthLoadingPage: React.FunctionComponent = () => (
   <Page>
     <Bullseye>
       <div style={{ justifyContent: 'center' }}>
-        <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+        <Spinner diameter='60px' aria-label='Loading Hawtio' />
 
         <TextContent>
           <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>

packages/management-api-app/src/login/AuthLoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { usePlugins, DEFAULT_APP_NAME, useHawtconfig, useUser } from '@hawtio/react'
-import { backgroundImages, hawtioLogo } from './img'
+import { background, hawtioLogo } from './img'
 import { ListItem, ListVariant, LoginFooterItem, LoginPage } from '@patternfly/react-core'
 import { log } from '@hawtio/online-oauth'
 import { AuthLoadingPage } from './AuthLoadingPage'
@@ -60,7 +60,7 @@ export const AuthLoginPage: React.FunctionComponent = () => {
 
   return (
     <LoginPage
-      backgroundImgSrc={backgroundImages}
+      backgroundImgSrc={background}
       brandImgSrc={appLogo}
       brandImgAlt={appName}
       loginTitle={title}

packages/management-api-app/src/login/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/management-api/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@hawtio/online-kubernetes-api": "workspace:*",
-    "@hawtio/react": "^1.2.6",
+    "@hawtio/react": "^1.3.0",
     "eventemitter3": "^5.0.1",
     "jolokia.js": "^2.0.1",
     "jquery": "^3.7.0",

packages/management-api/src/management-service.ts

@@ -302,6 +302,7 @@ export class ManagementService extends EventEmitter {
       const url: URL = this.connectToUrl(pod, container)
       const protocol = url.protocol.replace(':', '') as 'http' | 'https'
       const connection: Connection = {
+        id: this.connectionKeyName(pod, container),
         name: this.connectionKeyName(pod, container),
         jolokiaUrl: url.toString(),
 

packages/oauth-app/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@hawtio/online-oauth": "workspace:*",
-    "@hawtio/react": "^1.2.6",
-    "@patternfly/react-core": "^4.278.1",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.113.7",
-    "@patternfly/react-tokens": "^4.94.6",
+    "@hawtio/react": "^1.3.0",
+    "@patternfly/react-core": "^5.3.1",
+    "@patternfly/react-styles": "^5.3.0",
+    "@patternfly/react-table": "^5.3.1",
+    "@patternfly/react-tokens": "^5.3.1",
     "@types/node": "^20.14.9",
     "@types/react": "18.2.64",
     "@types/react-dom": "^18.3.0",

packages/oauth-app/src/login/AuthLoadingPage.tsx

@@ -5,10 +5,10 @@ export const AuthLoadingPage: React.FunctionComponent = () => (
   <Page>
     <Bullseye>
       <div style={{ justifyContent: 'center' }}>
-        <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+        <Spinner diameter='60px' aria-label='Loading Hawtio' />
 
         <TextContent>
-          <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>
+          <Text className={'--pf-v5-global--Color--200'} component={TextVariants.h3}>
             Loading ...
           </Text>
         </TextContent>

packages/oauth-app/src/login/AuthLoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { usePlugins, DEFAULT_APP_NAME, useHawtconfig, useUser } from '@hawtio/react'
-import { backgroundImages, hawtioLogo } from './img'
+import { background, hawtioLogo } from './img'
 import { ListItem, ListVariant, LoginFooterItem, LoginPage } from '@patternfly/react-core'
 import { log } from '@hawtio/online-oauth'
 import { AuthLoadingPage } from './AuthLoadingPage'
@@ -60,7 +60,7 @@ export const AuthLoginPage: React.FunctionComponent = () => {
 
   return (
     <LoginPage
-      backgroundImgSrc={backgroundImages}
+      backgroundImgSrc={background}
       brandImgSrc={appLogo}
       brandImgAlt={appName}
       loginTitle={title}

packages/oauth-app/src/login/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/oauth/package.json

@@ -29,7 +29,7 @@
     "prepack": "yarn build && yarn replace-version"
   },
   "dependencies": {
-    "@hawtio/react": "^1.2.6",
+    "@hawtio/react": "^1.3.0",
     "@thumbmarkjs/thumbmarkjs": "^0.14.7",
     "babel-jest": "^29.6.1",
     "fetch-intercept": "^2.4.0",