Upgrade to PatternFly 6

.babelrc

@@ -1,4 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }]
+  ],
   "plugins": ["@babel/plugin-transform-runtime"]
 }

package.json

@@ -12,24 +12,20 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-charts": "6.51.19",
-    "@patternfly/react-core": "4.198.19",
-    "@patternfly/react-icons": "4.49.19",
-    "@patternfly/react-styles": "6.4.0",
-    "@patternfly/react-table": "4.67.19",
+    "@patternfly/react-core": "^6.4.3",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-table": "^6.4.3",
     "axios": "^1.8.3",
-    "connected-react-router": "6.9.3",
-    "history": "4.7.2",
+    "history": "^5.0.0",
     "humanize-duration": "3.28.0",
     "luxon": "1.28.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "react-csv": "1.1.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
-    "redux": "4.1.2",
-    "redux-thunk": "2.4.2",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.0",
+    "react-router-dom": "^6.30.0",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.2",
     "sass": "1.94.2"
   },
   "devDependencies": {
@@ -39,6 +35,7 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@eslint/js": "^9.26.0",
+    "@patternfly/pf-codemods": "^2.6.3",
     "babel-loader": "8.4.1",
     "css-loader": "6.11.0",
     "eslint": "^9.26.0",

src/App.js

@@ -1,31 +1,28 @@
-import './App.scss';
-
 import * as AppActions from './actions';
 
 import { API_URL, PAYLOADS_ITEM, STATUSES_ITEM, TRACK_ITEM } from './AppConstants';
-import React, { useEffect, useState } from 'react';
-import { Route, Switch, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Routes, Route, useLocation, useNavigate, Navigate } from 'react-router-dom';
 import API from './utilities/Api';
 
+import ErrorBoundary from './components/ErrorBoundary';
 import MainHeader from './components/MainHeader';
 import MainSidebar from './components/MainSidebar';
-import { Page } from '@patternfly/react-core';
+import { Page, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
 import Payloads from './components/Payloads/Payloads';
-import PropTypes from 'prop-types';
-import { Redirect } from 'react-router';
 import Statuses from './components/Statuses/Statuses';
 import Track from './components/Track/Track';
 import { useDispatch } from 'react-redux';
-import { push } from 'connected-react-router';
 
 const App = () => {
     const { pathname } = useLocation();
     const dispatch = useDispatch();
+    const navigate = useNavigate();
 
     const [isNavOpen, toggleNav] = useState(false);
     const [activeItem, setActiveItem] = useState(PAYLOADS_ITEM);
 
-    const onClickFn = (url) => { dispatch(push(url)); toggleNav(false); };
+    const onClickFn = (url) => { navigate(url); toggleNav(false); };
 
     useEffect(() => {
         pathname.indexOf('/app/payload-tracker/track') >= 0 ? setActiveItem(TRACK_ITEM) : (
@@ -45,26 +42,33 @@ const App = () => {
         };
 
         getDownloadRole();
-    }, []);
+    }, [dispatch]);
+
+    const masthead = <MainHeader isNavOpen={isNavOpen} toggleNav={toggleNav} pathname={pathname}/>;
+
+    const sidebar = (
+        <PageSidebar isSidebarOpen={isNavOpen}>
+            <PageSidebarBody>
+                <MainSidebar activeItem={activeItem} onClickFn={onClickFn}/>
+            </PageSidebarBody>
+        </PageSidebar>
+    );
 
     return <Page
-        header={<MainHeader isNavOpen={isNavOpen} toggleNav={toggleNav} pathname={pathname}/>}
-        sidebar={<MainSidebar activeItem={activeItem} onClickFn={onClickFn} isNavOpen={isNavOpen}/>}
+        masthead={masthead}
+        sidebar={sidebar}
+        onPageResize={() => {}}
     >
-        <Switch>
-            <Route path='/app/payload-tracker' exact render={() => <Redirect to='/app/payload-tracker/payloads'/>}/>
-            <Route path='/app/payload-tracker/payloads' component={Payloads}/>
-            <Route path='/app/payload-tracker/statuses' component={Statuses}/>
-            <Route exact path='/app/payload-tracker/track' component={Track}/>
-        </Switch>
+        <ErrorBoundary>
+            <Routes>
+                <Route path='/app/payload-tracker' element={<Navigate to='/app/payload-tracker/payloads' replace />}/>
+                <Route path='/app/payload-tracker/payloads' element={<Payloads />}/>
+                <Route path='/app/payload-tracker/statuses' element={<Statuses />}/>
+                <Route path='/app/payload-tracker/track' element={<Track />}/>
+            </Routes>
+        </ErrorBoundary>
     </Page>;
 
 };
 
-App.propTypes = {
-    pathname: PropTypes.string,
-    push: PropTypes.func,
-    setHasDownloadRole: PropTypes.func
-};
-
 export default App;

src/AppConstants.js

@@ -3,6 +3,7 @@ import { sortable } from '@patternfly/react-table';
 export const API_URL = process.env.ENV === 'development' ? 'http://localhost:8080/app/payload-tracker' : '/app/payload-tracker';
 
 export const SET_CELL_ACTIVITY = 'SET_CELL_ACTIVITY';
+export const INITIALIZE_CELLS = 'INITIALIZE_CELLS';
 export const TOGGLE_NAV = 'TOGGLE_NAV';
 export const GET_DATA = 'GET_DATA';
 export const GET_PAYLOAD_TRACK = 'GET_PAYLOAD_TRACK';
@@ -28,6 +29,9 @@ export const UNSTAGE_FILTER = 'UNSTAGE_FILTER';
 
 export const UPDATE_FILTERS = 'UPDATE_FILTERS';
 
+export const RESET_DATA_STATE = 'RESET_DATA_STATE';
+export const RESET_PAGE_STATE = 'RESET_PAGE_STATE';
+
 export const PAYLOAD_FILTER_TYPES = [
     'account', 'inventory_id', 'system_id'
 ];

src/AppReducer.js

@@ -3,12 +3,10 @@ import DataReducer from './reducers/DataReducer';
 import PayloadsReducer from './reducers/PayloadsReducer';
 import TrackReducer from './reducers/TrackReducer';
 import { combineReducers } from 'redux';
-import { connectRouter } from 'connected-react-router';
 
-export default (history) => combineReducers({
+export default combineReducers({
     cell: CellReducer,
     data: DataReducer,
     payloads: PayloadsReducer,
-    track: TrackReducer,
-    router: connectRouter(history)
+    track: TrackReducer
 });

src/actions.js

@@ -39,6 +39,11 @@ export const setCellActivity = (title, bool = false) => ({
     payload: bool
 });
 
+export const initializeCells = (cellType) => ({
+    type: ActionTypes.INITIALIZE_CELLS,
+    payload: cellType
+});
+
 export const setRecentTimeType = (type) => ({
     type: ActionTypes.SET_RECENT_TIME_TYPE,
     payload: type
@@ -120,3 +125,11 @@ export const setHasDownloadRole = (has_download_role) => ({
     type: ActionTypes.SET_HAS_DOWNLOAD_ROLE,
     payload: has_download_role
 });
+
+export const resetDataState = () => ({
+    type: ActionTypes.RESET_DATA_STATE
+});
+
+export const resetPageState = () => ({
+    type: ActionTypes.RESET_PAGE_STATE
+});

src/components/DateFilter/DateRangeFilter.js

@@ -10,13 +10,15 @@ import {
     FlexItem,
     Form,
     FormGroup,
-    Modal,
     Radio,
     Tab,
     Tabs,
-    Text,
+    Content,
     CalendarMonth
 } from '@patternfly/react-core';
+import {
+    Modal
+} from '@patternfly/react-core/deprecated';
 import { CaretLeftIcon, CaretRightIcon, ClockIcon } from '@patternfly/react-icons';
 import React, { useEffect, useRef, useState } from 'react';
 import { quickFilters, useQuickFilters, useStacks } from './utils';
@@ -116,22 +118,22 @@ const DateRangeFilter = () => {
             </Form>
             <Tabs activeKey={activeTab} onSelect={(e, index) => setActiveTab(index)}>
                 <Tab eventKey={0} title='Quick'>
-                    <Flex className='pf-c-filters__date--tab' direction={{ default: 'column' }}>
+                    <Flex className='pf-v6-c-filters__date--tab' direction={{ default: 'column' }}>
                         {filters.map(({ title }, index) =>
                             <FlexItem className='pt-c-filters__date--quick' key={ index }>
                                 <Button
                                     variant='link'
                                     isDisabled={!type}
                                     onClick={() => updateFilters(title)}
                                 >
-                                    <Text>{title}</Text>
+                                    <Content component="p">{title}</Content>
                                 </Button>
                                 <Divider/>
                             </FlexItem>)}
                     </Flex>
                 </Tab>
                 <Tab eventKey={1} title='Absolute'>
-                    <div className='pf-c-filters__date--tab'>
+                    <div className='pf-v6-c-filters__date--tab'>
                         <Bullseye>
                             <Form>
                                 <Flex direction={{ default: 'row' }}>
@@ -146,7 +148,7 @@ const DateRangeFilter = () => {
                                             </FlexItem>
                                             <FlexItem>
                                                 <CalendarMonth
-                                                    onChange={(day) => fromRef.current.setValue(day)}
+                                                    onChange={(_event, day) => fromRef.current?.setValue(day)}
                                                 />                                            </FlexItem>
                                         </Flex>
                                     </FormGroup>
@@ -161,7 +163,7 @@ const DateRangeFilter = () => {
                                             </FlexItem>
                                             <FlexItem>
                                                 <CalendarMonth
-                                                    onChange={(day) => toRef.current.setValue(day)}
+                                                    onChange={(_event, day) => toRef.current?.setValue(day)}
                                                 />
                                             </FlexItem>
                                         </Flex>
@@ -173,10 +175,10 @@ const DateRangeFilter = () => {
                 </Tab>
             </Tabs>
         </Modal>}
-        {leftStack && leftStack.length !== 0 && <Button
+        {leftStack && leftStack.length !== 0 && <Button icon={<CaretLeftIcon/>}
             variant='inline'
             onClick={ toggleLeft }
-        > <CaretLeftIcon/> </Button>}
+        >  </Button>}
         <Button variant='inline' onClick={() => setOpen(!isOpen)}>
             <Flex direction={{ default: 'row' }} >
                 <FlexItem>
@@ -187,10 +189,10 @@ const DateRangeFilter = () => {
                 </FlexItem>
             </Flex>
         </Button>
-        {rightStack && rightStack.length !== 0 && <Button
+        {rightStack && rightStack.length !== 0 && <Button icon={<CaretRightIcon/>}
             variant='inline'
             onClick={ toggleRight }
-        > <CaretRightIcon/> </Button>}
+        >  </Button>}
     </React.Fragment>;
 };
 

src/components/DateFilter/DateRangeFilter.scss

@@ -1,16 +1,16 @@
-.pf-c-modal-box {
+.pf-v6-c-modal-box {
     height: 700px;
     width: 700px !important;
 }
 
 .pt-c-filters__date--radio {
     margin-bottom: 10px;
-    .pf-c-radio {
+    .pf-v6-c-radio {
         margin: 5px 0 5px 0;
     }
 }
 
-.pf-c-filters__date--tab {
+.pf-v6-c-filters__date--tab {
     margin-top: 20px;
     display: block;
 }