update packages and run codemods

Author: gitdallas

package.json

@@ -79,12 +79,12 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.181.1",
-    "@patternfly/react-icons": "^4.32.1",
-    "@patternfly/react-styles": "^4.31.1",
+    "@patternfly/react-core": "^5.0.0-prerealse.13",
+    "@patternfly/react-icons": "^5.0.0-prerealse.7",
+    "@patternfly/react-styles": "^5.0.0-prerealse.5",
     "@storybook/builder-webpack5": "^6.2.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18",
+    "react-dom": "^18",
     "sirv-cli": "^1.0.12"
   }
 }

src/app/AppLayout/AppLayout.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { NavLink, useLocation, useHistory } from 'react-router-dom';
 import {
-  Nav,
-  NavList,
-  NavItem,
-  NavExpandable,
-  Page,
-  PageHeader,
-  PageSidebar,
-  SkipToContent
+	Nav,
+	NavList,
+	NavItem,
+	NavExpandable,
+	Page,
+	PageSidebar,
+	SkipToContent, PageSidebarBody
 } from '@patternfly/react-core';
+import {
+	PageHeader
+} from '@patternfly/react-core/deprecated';
 import { routes, IAppRoute, IAppRouteGroup } from '@app/routes';
 import logo from '@app/bgimages/Patternfly-Logo.svg';
 
@@ -82,10 +84,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   );
 
   const Sidebar = (
-    <PageSidebar
-      theme="dark"
-      nav={Navigation}
-      isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen} />
+    <PageSidebar theme="dark" isSidebarOpen={isMobileView ? isNavOpenMobile : isNavOpen} >
+<PageSidebarBody>
+{Navigation}
+</PageSidebarBody>
+</PageSidebar>
   );
 
   const pageId = 'primary-app-container';
@@ -104,7 +107,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       mainContainerId={pageId}
       header={Header}
       sidebar={Sidebar}
-      onPageResize={onPageResize}
+      onPageResize={(_event, props: { mobileView: boolean; windowSize: number }) => onPageResize(props)}
       skipToContent={PageSkipToContent}>
       {children}
     </Page>

src/app/NotFound/NotFound.tsx

@@ -2,11 +2,10 @@ import * as React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import {
   PageSection,
-  Title,
   Button,
   EmptyState,
   EmptyStateIcon,
-  EmptyStateBody,
+  EmptyStateBody, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import { useHistory } from 'react-router-dom';
 
@@ -24,15 +23,12 @@ const NotFound: React.FunctionComponent = () => {
   return (
     <PageSection>
     <EmptyState variant="full">
-      <EmptyStateIcon icon={ExclamationTriangleIcon} />
-      <Title headingLevel="h1" size="lg">
-        404 Page not found
-      </Title>
+      <EmptyStateHeader titleText="404 Page not found" icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} headingLevel="h1" />
       <EmptyStateBody>
         We didn&apos;t find a page that matches the address you navigated to.
-      </EmptyStateBody>
+      </EmptyStateBody><EmptyStateFooter>
       <GoHomeBtn />
-    </EmptyState>
+    </EmptyStateFooter></EmptyState>
   </PageSection>
   )
 };

src/app/Support/Support.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { CubesIcon } from '@patternfly/react-icons';
 import {
   PageSection,
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
   Text,
   TextContent,
-  TextVariants,
+  TextVariants, EmptyStateActions, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 
 export interface ISupportProps {
@@ -22,10 +20,7 @@ export interface ISupportProps {
 let Support: React.FunctionComponent<ISupportProps> = () => (
   <PageSection>
     <EmptyState variant={EmptyStateVariant.full}>
-      <EmptyStateIcon icon={CubesIcon} />
-      <Title headingLevel="h1" size="lg">
-        Empty State (Stub Support Module)
-      </Title>
+      <EmptyStateHeader titleText="Empty State (Stub Support Module)" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h1" />
       <EmptyStateBody>
         <TextContent>
           <Text component="p">
@@ -37,17 +32,17 @@ let Support: React.FunctionComponent<ISupportProps> = () => (
             PatternFly&apos;s global variable API.
           </Text>
         </TextContent>
-      </EmptyStateBody>
+      </EmptyStateBody><EmptyStateFooter>
       <Button variant="primary">Primary Action</Button>
-      <EmptyStateSecondaryActions>
+      <EmptyStateActions>
         <Button variant="link">Multiple</Button>
         <Button variant="link">Action Buttons</Button>
         <Button variant="link">Can</Button>
         <Button variant="link">Go here</Button>
         <Button variant="link">In the secondary</Button>
         <Button variant="link">Action area</Button>
-      </EmptyStateSecondaryActions>
-    </EmptyState>
+      </EmptyStateActions>
+    </EmptyStateFooter></EmptyState>
   </PageSection>
 );