fix: Upgrade of hawtio/react to 1.5.0

* With this upgrade, the transport method of jolokia requests has been
  changed from jquery to fetch. This meant a number of changes in the
  development server in order to continue working.

* management-service.ts
 * Rather than just blindly connect to a target app, try testing the
   connection first and if it fails do not change location / open a new
   browser tab but notify the user with the event service

* oauth/[....]service.ts
 * Mandate a Content-Type of application/json when using fetch. Due to CORS
   this is not possible when actually calling fetch(uri, { headers })
 * Ensure when regsitering the fetch interceptor that the headers that
   have been created are not overwritten by any headers already contained
   in the requestConfig.

* webpack.config.dev.js
 * Re-implements management endpoint to conduct a sub-request using fetch
   to the master endpoint rather than redirecting. The fetch function appears
   to not redirect correctly when a Content-Length header is specified
 * Implementing a sub-request is the same way that the gateway component
   solves this issue
 * Ensures the token is passed to the sub-request
 * Logs whether the request body has been incorrectly parsed empty by
   the Express server in the webpack-dev-server.

packages/kubernetes-api-app/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@hawtio/online-kubernetes-api": "workspace:*",
-    "@hawtio/react": "^1.3.0",
+    "@hawtio/react": "^1.5.0",
     "@patternfly/react-core": "^5.3.3",
     "@patternfly/react-styles": "^5.3.1",
     "@patternfly/react-table": "^5.3.3",

packages/kubernetes-api/package.json

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

packages/management-api-app/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@hawtio/online-management-api": "workspace:*",
-    "@hawtio/react": "^1.3.0",
+    "@hawtio/react": "^1.5.0",
     "@patternfly/react-core": "^5.3.3",
     "@patternfly/react-styles": "^5.3.1",
     "@patternfly/react-table": "^5.3.3",

packages/management-api/package.json

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

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'eventemitter3'
 import { ManagedPod } from './managed-pod'
-import { Connection, Connections, connectService } from '@hawtio/react'
+import { Connection, ConnectionTestResult, Connections, connectService, eventService } from '@hawtio/react'
 import {
   k8Service,
   k8Api,
@@ -389,7 +389,32 @@ export class ManagementService extends EventEmitter implements Paging {
       return
     }
 
-    connectService.connect(connection)
+    connectService
+      .testConnection(connection)
+      .then((result: ConnectionTestResult) => {
+        if (result.status !== 'reachable') {
+          const msg = `There was a problem connecting to the jolokia service ${connectName}`
+          log.error(msg)
+          eventService.notify({ type: 'danger', message: msg })
+          return
+        }
+
+        if (result.message.includes('auth failed')) {
+          const msg = `A problem occurred with authentication while trying to connect to the jolokia service ${connectName}`
+          log.error(msg)
+          eventService.notify({ type: 'danger', message: msg })
+          return
+        }
+
+        connectService.connect(connection)
+      })
+      .catch(error => {
+        const msg = `A problem occurred while trying to connect to the jolokia service ${connectName}`
+        log.error(msg)
+        log.error(error)
+        eventService.notify({ type: 'danger', message: msg })
+        return
+      })
   }
 
   /********************

packages/oauth-app/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@hawtio/online-oauth": "workspace:*",
-    "@hawtio/react": "^1.3.0",
+    "@hawtio/react": "^1.5.0",
     "@patternfly/react-core": "^5.3.1",
     "@patternfly/react-styles": "^5.3.0",
     "@patternfly/react-table": "^5.3.1",

packages/oauth/package.json

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

packages/oauth/src/form/form-service.ts

@@ -23,6 +23,7 @@ type LoginOptions = {
 
 interface Headers {
   Authorization: string
+  'Content-Type': string
   'X-XSRF-TOKEN'?: string
 }
 
@@ -122,11 +123,13 @@ export class FormService implements OAuthProtoService {
 
     log.debug('Intercept Fetch API to attach auth token to authorization header')
     this.fetchUnregister = fetchIntercept.register({
-      request: (url, config) => {
+      request: (url, requestConfig) => {
         log.debug('Fetch intercepted for oAuth authentication')
 
+        // Include any requestConfig headers to ensure they are retained
         let headers: Headers = {
           Authorization: `Bearer ${this.userProfile.getToken()}`,
+          'Content-Type': 'application/json',
         }
 
         // For CSRF protection with Spring Security
@@ -139,7 +142,15 @@ export class FormService implements OAuthProtoService {
           }
         }
 
-        return [url, { headers, ...config }]
+        /*
+         * if requestConfig exists and already has a set of headers
+         */
+        if (requestConfig && requestConfig.headers) {
+          headers = { ...requestConfig.headers, ...headers }
+        }
+
+        // headers must be 2nd so that it overwrites headers property in requestConfig
+        return [url, { ...requestConfig, headers }]
       },
     })
   }

packages/oauth/src/openshift/osoauth-service.ts

@@ -36,6 +36,7 @@ interface UserObject {
 
 interface Headers {
   Authorization: string
+  'Content-Type': string
   'X-XSRF-TOKEN'?: string
 }
 
@@ -120,8 +121,10 @@ export class OSOAuthService implements OAuthProtoService {
           this.doLogout(config)
         }
 
+        // Include any requestConfig headers to ensure they are retained
         let headers: Headers = {
           Authorization: `Bearer ${this.userProfile.getToken()}`,
+          'Content-Type': 'application/json',
         }
 
         // For CSRF protection with Spring Security
@@ -134,7 +137,15 @@ export class OSOAuthService implements OAuthProtoService {
           }
         }
 
-        return [url, { headers, ...requestConfig }]
+        /*
+         * if requestConfig exists and already has a set of headers
+         */
+        if (requestConfig && requestConfig.headers) {
+          headers = { ...requestConfig.headers, ...headers }
+        }
+
+        // headers must be 2nd so that it overwrites headers property in requestConfig
+        return [url, { ...requestConfig, headers }]
       },
     })
   }

packages/online-shell/package.json

@@ -36,7 +36,7 @@
     "@hawtio/online-kubernetes-api": "workspace:*",
     "@hawtio/online-management-api": "workspace:*",
     "@hawtio/online-oauth": "workspace:*",
-    "@hawtio/react": "^1.3.0",
+    "@hawtio/react": "^1.5.0",
     "@patternfly/react-core": "^5.3.3",
     "@patternfly/react-styles": "^5.3.1",
     "@types/node": "^20.14.9",

packages/online-shell/webpack.config.dev.js

@@ -6,6 +6,7 @@ const historyApiFallback = require('connect-history-api-fallback')
 const path = require('path')
 const url = require('url')
 const dotenv = require('dotenv')
+const express = require('express')
 const { common } = require('./webpack.config.common.js')
 
 // this will update the process.env with environment variables in .env file
@@ -121,6 +122,15 @@ module.exports = (env, argv) => {
           throw new Error('webpack-dev-server is not defined')
         }
 
+        /*
+         * Ensure that dev server properly handles json in request body
+         * Important to keep a high limit as the default of 100kb can be
+         * exceeded by request bodies resulting in the parser transmitting
+         * an empty body.
+         */
+        devServer.app.use(express.json({ type: '*/json', limit: '50mb', strict: false }))
+        devServer.app.use(express.urlencoded({ extended: false }))
+
         // Redirect / or /${publicPath} to /${publicPath}/
         devServer.app.get('/', (_, res) => res.redirect(`${publicPath}/`))
         devServer.app.get(`/${publicPath}$`, (_, res) => res.redirect(`${publicPath}/`))
@@ -193,16 +203,75 @@ module.exports = (env, argv) => {
         }
 
         /* Redirects from management alias path to full master path */
-        const management = (req, res, next) => {
+        const management = async (req, res, next) => {
           const url = /\/management\/namespaces\/(.+)\/pods\/(http|https):([^/]+)\/(.+)/
           const match = req.originalUrl.match(url)
           const redirectPath = `/master/api/v1/namespaces/${match[1]}/pods/${match[2]}:${match[3]}/proxy/${match[4]}`
-          if (match) {
-            // 307 - post redirect
-            res.redirect(307, redirectPath)
-          } else {
+          if (!match) {
             next()
           }
+
+          /*
+           * Redirect will no longer work since fetch is being used by
+           * jolokia instead and request contains Content-Length header.
+           * So perform a sub-request instead on master to return the
+           * correct response
+           */
+          const origin = `http://localhost:${devPort}`
+          const uri = `${origin}${redirectPath}`
+
+          /*
+           * Ensure the authorization token is passed to the sub request
+           */
+          const headers = new Headers({
+            Authorization: req.get('Authorization'),
+          })
+
+          let response
+          if (req.method === 'GET') {
+            response = await fetch(uri, {
+              method: req.method,
+              headers: headers,
+            })
+          } else {
+            const body = req.body
+            const isEmptyObject = typeof body === 'object' && Object.keys(body).length === 0
+            const isEmptyArray = Array.isArray(body) && body.length === 0
+
+            let msg
+            if (!body) {
+              msg = `Error (dev-server): undefined body found in POST request ${redirectPath}`
+              console.warn(msg, body)
+            } else if (isEmptyArray) {
+              msg = `Error (dev-server): empty body array found in POST request ${redirectPath}`
+              console.warn(msg, body)
+            } else if (isEmptyObject) {
+              msg = `Error (dev-server): empty body object found in POST request ${redirectPath}`
+              console.warn(msg, body)
+            } else {
+              console.log(`Body in request ${redirectPath} to be passed to master`, body)
+            }
+
+            response = await fetch(uri, {
+              method: req.method,
+              body: JSON.stringify(body),
+              headers: headers,
+            })
+          }
+
+          if (!response.ok) {
+            res.status(response.status).send(response.statusText)
+          } else {
+            var data
+            try {
+              data = await response.json()
+            } catch (error) {
+              console.error('Error (dev-server): error response from master: ', error)
+              data = await response.text()
+            }
+
+            res.status(response.status).send(data)
+          }
         }
 
         const username = 'developer'