chore: upgrade to @patternfly/react-core 4.221.3

.editorconfig

@@ -7,3 +7,6 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package.json

@@ -10,32 +10,37 @@
     "deploy": "cp build/index.html build/200.html && surge build/ hawtio-next.surge.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^2.45.0",
-    "@patternfly/react-core": "^3.124.1",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
+    "@patternfly/react-core": "^4.221.3",
+    "@reduxjs/toolkit": "^1.8.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.165",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/node": "^16.11.39",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-redux": "^7.1.24",
+    "@types/react-router-dom": "^5.3.3",
     "@types/redux-thunk": "^2.1.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.1",
-    "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0",
-    "typescript": "^3.8.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^5.3.3",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.7.3",
     "typescript-fsa": "^3.0.0",
-    "typescript-fsa-reducers": "^1.2.1"
+    "typescript-fsa-reducers": "^1.2.2",
+    "web-vitals": "^2.1.4"
+  },
+  "resolutions": {
+    "@types/react": "17.0.45"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [

src/hawtio/Hawtio.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { connect } from 'react-redux'
 import './Hawtio.css'
 import HawtioPage from './ui/page/HawtioPage'
 
@@ -9,4 +8,4 @@ type HawtioProps = {
 const Hawtio: React.FunctionComponent<HawtioProps> = props =>
   <HawtioPage />
 
-export default connect()(Hawtio)
+export default Hawtio

src/hawtio/store.ts

@@ -1,11 +1,16 @@
-import { createStore, applyMiddleware } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
 import reducer from './reducer'
 import HawtioState from './state'
-import thunk from 'redux-thunk'
 
 const state = localStorage['hawtio-state'] ?
   JSON.parse(localStorage['hawtio-state']) : new HawtioState()
-const store = createStore(reducer, state, applyMiddleware(thunk))
+
+//const store = createStore(reducer, state, applyMiddleware(thunk))
+const store = configureStore({
+  reducer: reducer,
+  preloadedState: state,
+})
+
 store.subscribe(() =>
   localStorage['hawtio-state'] = JSON.stringify(store.getState())
 )

src/hawtio/ui/about/HawtioAbout.tsx

@@ -27,7 +27,8 @@ const HawtioAbout: React.FunctionComponent<HawtioAboutProps> = props => {
           <TextListItem component="dd">x.y.z</TextListItem>
         </TextList>
       </TextContent>
-    </AboutModal>)
+    </AboutModal>
+  )
 }
 
 export default HawtioAbout

src/hawtio/ui/page/HawtioBackground.tsx

@@ -1,4 +1,4 @@
-import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core'
+import { BackgroundImage, BackgroundImageSrcMap } from '@patternfly/react-core'
 import React from 'react'
 import backgroundImageSrcLg from '../../../img/pfbg_1200.jpg'
 import backgroundImageSrcXs from '../../../img/pfbg_576.jpg'
@@ -9,12 +9,12 @@ import backgroundImageSrcSm2x from '../../../img/[email protected]'
 type HawtioBackgroundProps = {
 }
 
-const images = {
-  [BackgroundImageSrc.xs]: backgroundImageSrcXs,
-  [BackgroundImageSrc.xs2x]: backgroundImageSrcXs2x,
-  [BackgroundImageSrc.sm]: backgroundImageSrcSm,
-  [BackgroundImageSrc.sm2x]: backgroundImageSrcSm2x,
-  [BackgroundImageSrc.lg]: backgroundImageSrcLg
+const images: BackgroundImageSrcMap = {
+  xs: backgroundImageSrcXs,
+  xs2x: backgroundImageSrcXs2x,
+  sm: backgroundImageSrcSm,
+  sm2x: backgroundImageSrcSm2x,
+  lg: backgroundImageSrcLg
 }
 
 const HawtioBackground: React.FunctionComponent<HawtioBackgroundProps> = props =>

src/hawtio/ui/page/HawtioHeader.css

@@ -0,0 +1,7 @@
+#hawtio-header-user-dropdown-toggle {
+  display: flex;
+}
+
+#hawtio-header-user-dropdown-toggle .pf-c-dropdown__toggle-text {
+  margin-left: 5px;
+}

src/hawtio/ui/page/HawtioHeader.tsx

@@ -1,11 +1,12 @@
-import { Avatar, Brand, Dropdown, DropdownItem, DropdownToggle, PageHeader, Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
+import { Avatar, Brand, Dropdown, DropdownItem, DropdownToggle, PageHeader, PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem } from '@patternfly/react-core'
 import { HelpIcon } from '@patternfly/react-icons'
 import React from 'react'
+import { Link } from 'react-router-dom'
 import imgLogo from '../../../img/hawtio-logo.svg'
 import imgAvatar from '../../../img/img_avatar.svg'
-import HawtioExtension from '../extension/HawtioExtension'
 import HawtioAbout from '../about/HawtioAbout'
-import { Link } from 'react-router-dom'
+import HawtioExtension from '../extension/HawtioExtension'
+import './HawtioHeader.css'
 
 type HawtioHeaderProps = {
 }
@@ -27,19 +28,19 @@ class HawtioHeader extends React.Component<HawtioHeaderProps, HawtioHeaderState>
   }
 
   private onHelpToggle = (isHelpOpen: boolean) =>
-    this.setState({ isHelpOpen })
+    this.setState({ isHelpOpen });
 
   private onHelpSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) =>
-    this.setState({ isHelpOpen: !this.state.isHelpOpen })
+    this.setState({ isHelpOpen: !this.state.isHelpOpen });
 
   private onUserToggle = (isUserOpen: boolean) =>
-    this.setState({ isUserOpen })
+    this.setState({ isUserOpen });
 
   private onUserSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) =>
-    this.setState({ isUserOpen: !this.state.isUserOpen })
+    this.setState({ isUserOpen: !this.state.isUserOpen });
 
   private onAboutToggle = () =>
-    this.setState(({ isAboutOpen }) => ({ isAboutOpen: !isAboutOpen }))
+    this.setState(({ isAboutOpen }) => ({ isAboutOpen: !isAboutOpen }));
 
   render() {
     const { isUserOpen, isHelpOpen, isAboutOpen } = this.state
@@ -60,51 +61,56 @@ class HawtioHeader extends React.Component<HawtioHeaderProps, HawtioHeaderState>
       } />
     ]
 
-    const PageToolbar = (
-      <Toolbar>
-        <ToolbarGroup>
-          <ToolbarItem>
+    const HeaderTools = (
+      <PageHeaderTools>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem>
             <HawtioExtension name="header-tools" />
-          </ToolbarItem>
-          <ToolbarItem>
+          </PageHeaderToolsItem>
+          <PageHeaderToolsItem>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onHelpSelect}
               toggle={
-                <DropdownToggle onToggle={this.onHelpToggle} iconComponent={HelpIcon} />
+                <DropdownToggle toggleIndicator={null} onToggle={this.onHelpToggle}>
+                  <HelpIcon />
+                </DropdownToggle>
               }
               isOpen={isHelpOpen}
               dropdownItems={helpItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <ToolbarItem>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+        <PageHeaderToolsGroup>
+          <PageHeaderToolsItem>
             <Dropdown
               isPlain
               position="right"
               onSelect={this.onUserSelect}
               isOpen={isUserOpen}
               toggle={
-                <DropdownToggle onToggle={this.onUserToggle}>
+                <DropdownToggle
+                  id="hawtio-header-user-dropdown-toggle"
+                  onToggle={this.onUserToggle}
+                  icon={<Avatar src={imgAvatar} alt="user" />}
+                >
                   Hawtio User
                 </DropdownToggle>
               }
               dropdownItems={userItems}
             />
-          </ToolbarItem>
-        </ToolbarGroup>
-      </Toolbar>
+          </PageHeaderToolsItem>
+        </PageHeaderToolsGroup>
+      </PageHeaderTools>
     )
 
     return (
       <React.Fragment>
         <PageHeader
           logo={<Brand src={imgLogo} alt="Hawtio Management Console" />}
           logoProps={{ href: '/' }}
-          toolbar={PageToolbar}
-          avatar={<Avatar src={imgAvatar} alt="user" />}
+          headerTools={HeaderTools}
           showNavToggle
         />
         <HawtioAbout isOpen={isAboutOpen} onClose={this.onAboutToggle} />

src/index.tsx

@@ -6,7 +6,7 @@ import hawtioBootstrap from './hawtio/core/bootstrap'
 import Hawtio from './hawtio/Hawtio'
 import store from './hawtio/store'
 import './index.css'
-import * as serviceWorker from './serviceWorker'
+import reportWebVitals from './reportWebVitals'
 
 // TODO: debugging
 (window as any).store = store
@@ -15,12 +15,15 @@ import * as serviceWorker from './serviceWorker'
 hawtioBootstrap()
 
 ReactDOM.render(
-  <Provider store={store}>
-    <Hawtio />
-  </Provider>,
-  document.getElementById('root'))
+  <React.StrictMode>
+    <Provider store={store}>
+      <Hawtio />
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
+)
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;