Merge pull request #252 from nicolethoen/bump_all_deps

feat: update dependencies

.eslintrc.js

@@ -12,7 +12,6 @@ module.exports = {
   },
   // we want to use the recommended rules provided from the typescript plugin
   "extends": [
-    "@redhat-cloud-services/eslint-config-redhat-cloud-services",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended"

jest.config.js

@@ -28,5 +28,5 @@ module.exports = {
   preset: "ts-jest/presets/js-with-ts",
 
   // The test environment that will be used for testing.
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-fixed-jsdom",
 };

package.json

@@ -8,8 +8,7 @@
   "private": true,
   "scripts": {
     "prebuild": "npm run type-check && npm run clean",
-    "dr:surge": "node dr-surge.js",
-    "build": "webpack --config webpack.prod.js && npm run dr:surge",
+    "build": "webpack --config webpack.prod.js",
     "start": "sirv dist --cors --single --host --port 8080",
     "start:dev": "webpack serve --color --progress --config webpack.dev.js",
     "test": "jest",
@@ -25,59 +24,57 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "^29.5.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.14",
     "@types/react-router-dom": "^5.3.3",
-    "@types/victory": "^33.1.5",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.11.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "html-webpack-plugin": "^5.6.0",
-    "imagemin": "^8.0.1",
-    "jest": "^29.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "dotenv-webpack": "^8.1.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "imagemin": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.3.0",
+    "jest-fixed-jsdom": "^0.0.9",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-router-dom": "^5.3.4",
-    "regenerator-runtime": "^0.13.11",
-    "rimraf": "^5.0.7",
-    "style-loader": "^3.3.4",
+    "react-router-dom": "^7.0.2",
+    "regenerator-runtime": "^0.14.1",
+    "rimraf": "^6.0.1",
+    "style-loader": "^4.0.0",
     "svg-url-loader": "^8.0.0",
     "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.4.5",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.91.0",
+    "webpack": "^5.97.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.2",
-    "webpack-merge": "^5.10.0"
+    "webpack-dev-server": "^5.1.0",
+    "webpack-merge": "^6.0.1"
   },
   "dependencies": {
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-styles": "^6.0.0",
     "react": "^18",
     "react-dom": "^18",
-    "sirv-cli": "^2.0.2"
+    "sirv-cli": "^3.0.0"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/app/AppLayout/AppLayout.tsx

@@ -90,7 +90,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
 
   const renderNavItem = (route: IAppRoute, index: number) => (
     <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={route.path === location.pathname}>
-      <NavLink exact={route.exact} to={route.path}>
+      <NavLink
+        to={route.path}
+      >
         {route.label}
       </NavLink>
     </NavItem>
@@ -130,7 +132,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       onClick={(event) => {
         event.preventDefault();
         const primaryContentContainer = document.getElementById(pageId);
-        primaryContentContainer && primaryContentContainer.focus();
+        primaryContentContainer?.focus();
       }}
       href={`#${pageId}`}
     >

src/app/NotFound/NotFound.tsx

@@ -7,13 +7,13 @@ import {
   EmptyStateFooter,
   PageSection,
 } from '@patternfly/react-core';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const NotFound: React.FunctionComponent = () => {
   function GoHomeBtn() {
-    const history = useHistory();
+    const navigate = useNavigate();
     function handleClick() {
-      history.push('/');
+      navigate('/');
     }
     return (
       <Button onClick={handleClick}>Take me home</Button>

src/app/Settings/General/GeneralSettings.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
+import { useDocumentTitle } from '@app/utils/useDocumentTitle';
 
-const GeneralSettings: React.FunctionComponent = () => (
-  <PageSection hasBodyWrapper={false}>
-    <Title headingLevel="h1" size="lg">
-      General Settings Page Title
-    </Title>
-  </PageSection>
-);
+const GeneralSettings: React.FunctionComponent = () => {
+  useDocumentTitle("General Settings");
+  return (
+    <PageSection hasBodyWrapper={false}>
+      <Title headingLevel="h1" size="lg">
+        General Settings Page Title
+      </Title>
+    </PageSection>
+  );
+}
 
 export { GeneralSettings };

src/app/Settings/Profile/ProfileSettings.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
+import { useDocumentTitle } from '@app/utils/useDocumentTitle';
 
-const ProfileSettings: React.FunctionComponent = () => (
-  <PageSection hasBodyWrapper={false}>
-    <Title headingLevel="h1" size="lg">
-      Profile Settings Page Title
-    </Title>
-  </PageSection>
-);
+const ProfileSettings: React.FunctionComponent = () => {
+  useDocumentTitle("Profile Settings");
+
+  return (
+    <PageSection hasBodyWrapper={false}>
+      <Title headingLevel="h1" size="lg">
+        Profile Settings Page Title
+      </Title>
+    </PageSection>
+  );
+
+}
 
 export { ProfileSettings };

src/app/Support/Support.tsx

@@ -23,12 +23,12 @@ let Support: React.FunctionComponent<ISupportProps> = () => (
       <EmptyStateBody>
         <Content>
           <Content component="p">
-            This represents an the empty state pattern in Patternfly 4. Hopefully it&apos;s simple enough to use but
+            This represents an the empty state pattern in Patternfly. Hopefully it&apos;s simple enough to use but
             flexible enough to meet a variety of needs.
           </Content>
           <Content component={ContentVariants.small}>
             This text has overridden a css component variable to demonstrate how to apply customizations using
-            PatternFly&apos;s global variable API.
+            PatternFly&apos;s CSS tokens.
           </Content>
         </Content>
       </EmptyStateBody>

src/app/__snapshots__/app.test.tsx.snap

@@ -189,6 +189,7 @@ exports[`App tests should render default App component 1`] = `
               <a
                 aria-current="page"
                 class="pf-v6-c-nav__link pf-m-current active"
+                data-discover="true"
                 href="/"
               >
                 Dashboard
@@ -202,6 +203,7 @@ exports[`App tests should render default App component 1`] = `
             >
               <a
                 class="pf-v6-c-nav__link"
+                data-discover="true"
                 href="/support"
               >
                 Support
@@ -258,6 +260,7 @@ exports[`App tests should render default App component 1`] = `
                   >
                     <a
                       class="pf-v6-c-nav__link"
+                      data-discover="true"
                       href="/settings/general"
                     >
                       General
@@ -271,6 +274,7 @@ exports[`App tests should render default App component 1`] = `
                   >
                     <a
                       class="pf-v6-c-nav__link"
+                      data-discover="true"
                       href="/settings/profile"
                     >
                       Profile

src/app/app.css

@@ -5,7 +5,7 @@ body,
 }
 
 .pf-v6-c-content {
-  --pf-v6-c-content--small--Color: red; /* changes all <small> color to --pf-v5-global--palette--green-500 */
-  --pf-v6-c-content--blockquote--BorderLeftColor: purple; /* changes all <blockquote> left border color to --pf-v5-global--palette--cyan-600 */
-  --pf-v6-c-content--hr--BackgroundColor: yellow; /* changes a <hr> color to --pf-v5-global--palette--gold-500 */
+  --pf-v6-c-content--small--Color: var(--pf-t--global--color--status--danger--default); /* changes all <small> color to the semantic token for danger */
+  --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-t--global--color--nonstatus--purple--default); /* changes all <blockquote> left border color to the semantic token for non-status (purple) */
+  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); /* changes a <hr> color to the semantic token for non-status (yellow) */
 }

src/app/routes.tsx

@@ -1,17 +1,15 @@
 import * as React from 'react';
-import { Route, RouteComponentProps, Switch, useLocation } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { Dashboard } from '@app/Dashboard/Dashboard';
 import { Support } from '@app/Support/Support';
 import { GeneralSettings } from '@app/Settings/General/GeneralSettings';
 import { ProfileSettings } from '@app/Settings/Profile/ProfileSettings';
 import { NotFound } from '@app/NotFound/NotFound';
-import { useDocumentTitle } from '@app/utils/useDocumentTitle';
 
-let routeFocusTimer: number;
 export interface IAppRoute {
   label?: string; // Excluding the label will exclude the route from the nav sidebar in AppLayout
   /* eslint-disable @typescript-eslint/no-explicit-any */
-  component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
+  element: React.ReactElement;
   /* eslint-enable @typescript-eslint/no-explicit-any */
   exact?: boolean;
   path: string;
@@ -28,14 +26,14 @@ export type AppRouteConfig = IAppRoute | IAppRouteGroup;
 
 const routes: AppRouteConfig[] = [
   {
-    component: Dashboard,
+    element: <Dashboard />,
     exact: true,
     label: 'Dashboard',
     path: '/',
     title: 'PatternFly Seed | Main Dashboard',
   },
   {
-    component: Support,
+    element: <Support />,
     exact: true,
     label: 'Support',
     path: '/support',
@@ -45,14 +43,14 @@ const routes: AppRouteConfig[] = [
     label: 'Settings',
     routes: [
       {
-        component: GeneralSettings,
+        element: <GeneralSettings />,
         exact: true,
         label: 'General',
         path: '/settings/general',
         title: 'PatternFly Seed | General Settings',
       },
       {
-        component: ProfileSettings,
+        element: <ProfileSettings />,
         exact: true,
         label: 'Profile',
         path: '/settings/profile',
@@ -62,53 +60,18 @@ const routes: AppRouteConfig[] = [
   },
 ];
 
-// a custom hook for sending focus to the primary content container
-// after a view has loaded so that subsequent press of tab key
-// sends focus directly to relevant content
-// may not be necessary if https://github.com/ReactTraining/react-router/issues/5210 is resolved
-const useA11yRouteChange = () => {
-  const { pathname } = useLocation();
-  React.useEffect(() => {
-    routeFocusTimer = window.setTimeout(() => {
-      const mainContainer = document.getElementById('primary-app-container');
-      if (mainContainer) {
-        mainContainer.focus();
-      }
-    }, 50);
-    return () => {
-      window.clearTimeout(routeFocusTimer);
-    };
-  }, [pathname]);
-};
-
-const RouteWithTitleUpdates = ({ component: Component, title, ...rest }: IAppRoute) => {
-  useA11yRouteChange();
-  useDocumentTitle(title);
-
-  function routeWithTitle(routeProps: RouteComponentProps) {
-    return <Component {...rest} {...routeProps} />;
-  }
-
-  return <Route render={routeWithTitle} {...rest} />;
-};
-
-const PageNotFound = ({ title }: { title: string }) => {
-  useDocumentTitle(title);
-  return <Route component={NotFound} />;
-};
-
 const flattenedRoutes: IAppRoute[] = routes.reduce(
   (flattened, route) => [...flattened, ...(route.routes ? route.routes : [route])],
   [] as IAppRoute[],
 );
 
 const AppRoutes = (): React.ReactElement => (
-  <Switch>
-    {flattenedRoutes.map(({ path, exact, component, title }, idx) => (
-      <RouteWithTitleUpdates path={path} exact={exact} component={component} key={idx} title={title} />
+  <Routes>
+    {flattenedRoutes.map(({ path, element }, idx) => (
+      <Route path={path} element={element} key={idx} />
     ))}
-    <PageNotFound title="404 Page Not Found" />
-  </Switch>
+    <Route element={<NotFound />} />
+  </Routes>
 );
 
 export { AppRoutes, routes };

src/index.tsx

@@ -11,7 +11,7 @@ if (process.env.NODE_ENV !== "production") {
       }
     ]
   };
-  // eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const axe = require("react-axe");
   axe(React, ReactDOM, 1000, config);
 }