generator-jhipster 7.8.1 → 7.9.0

package/generators/client/templates/react/src/main/webapp/app/modules/administration/index.tsx.ejs

@@ -18,7 +18,8 @@
 -%>
 import React from 'react';
 
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import { Route } from 'react-router-dom';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 <%_ if (!skipUserManagement) { _%>
 import UserManagement from './user-management';
 <%_ } _%>
@@ -36,25 +37,27 @@ import Gateway from './gateway/gateway';
 import Tracker from './tracker/tracker';
 <%_ } _%>
 
-const Routes = ({ match }) => (
+const AdministrationRoutes = () => (
   <div>
+    <ErrorBoundaryRoutes>
 <%_ if (!skipUserManagement) { _%>
-    <ErrorBoundaryRoute path={`${match.url}/user-management`} component={UserManagement} />
+      <Route path="user-management/*" element={<UserManagement />} />
 <%_ } _%>
 <%_ if (communicationSpringWebsocket) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/tracker`} component={Tracker} />
+      <Route path="tracker" element={<Tracker />} />
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/gateway`} component={Gateway} />
+      <Route path="gateway" element={<Gateway />} />
 <%_ } _%>
 <%_ if (withAdminUi) { _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/health`} component={Health} />
-    <ErrorBoundaryRoute exact path={`${match.url}/metrics`} component={Metrics} />
-    <ErrorBoundaryRoute exact path={`${match.url}/configuration`} component={Configuration} />
-    <ErrorBoundaryRoute exact path={`${match.url}/logs`} component={Logs} />
+      <Route path="health" element={<Health />} />
+      <Route path="metrics" element={<Metrics />} />
+      <Route path="configuration" element={<Configuration />} />
+      <Route path="logs" element={<Logs />} />
   <%_ } _%>
-    <ErrorBoundaryRoute exact path={`${match.url}/docs`} component={Docs} />
+      <Route path="docs" element={<Docs />} />
+    </ErrorBoundaryRoutes>
   </div>
 );
 
-export default Routes;
+export default AdministrationRoutes;

package/generators/client/templates/react/src/main/webapp/app/modules/administration/metrics/metrics.tsx.ejs

@@ -56,7 +56,9 @@ export const MetricsPage = () => {
   return (
     <div>
       <h2 id="metrics-page-heading" data-cy="metricsPageHeading">
-        Application Metrics
+        <Translate contentKey="metrics.title">
+          Application Metrics
+        </Translate>
       </h2>
       <p>
         <Button onClick={getMetrics} color={isFetching ? 'btn btn-danger' : 'btn btn-primary'} disabled={isFetching}>
@@ -71,7 +73,11 @@ export const MetricsPage = () => {
 
       <Row>
         <Col sm="12">
-          <h3>JVM Metrics</h3>
+          <h3>
+            <Translate contentKey="metrics.jvm.title">
+              JVM Metrics
+            </Translate>
+          </h3>
           <Row>
             <Col md="4">
               {metrics?.jvm ? <JvmMemory jvmMetrics={metrics.jvm} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/index.tsx.ejs

@@ -17,24 +17,24 @@
  limitations under the License.
 -%>
 import React from 'react';
-import { Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 import UserManagement from './user-management';
 import UserManagementDetail from './user-management-detail';
 import UserManagementUpdate from './user-management-update';
 import UserManagementDeleteDialog from './user-management-delete-dialog';
 
-const Routes = ({ match }) => (
-  <>
-    <Switch>
-      <ErrorBoundaryRoute exact path={`${match.url}/new`} component={UserManagementUpdate} />
-      <ErrorBoundaryRoute exact path={`${match.url}/:login/edit`} component={UserManagementUpdate} />
-      <ErrorBoundaryRoute exact path={`${match.url}/:login`} component={UserManagementDetail} />
-      <ErrorBoundaryRoute path={match.url} component={UserManagement} />
-    </Switch>
-    <ErrorBoundaryRoute path={`${match.url}/:login/delete`} component={UserManagementDeleteDialog} />
-  </>
+const UserManagementRoutes = () => (
+  <ErrorBoundaryRoutes>
+    <Route index element={<UserManagement />} />
+    <Route path="new" element={<UserManagementUpdate />} />
+    <Route path=":login">
+      <Route index element={<UserManagementDetail />} />
+      <Route path="edit" element={<UserManagementUpdate />} />
+      <Route path="delete" element={<UserManagementDeleteDialog />} />
+    </Route>
+  </ErrorBoundaryRoutes>
 );
 
-export default Routes;
+export default UserManagementRoutes;

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management-delete-dialog.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { Translate } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -25,16 +25,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getUser, deleteUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagementDeleteDialog = (props: RouteComponentProps<{ login: string }>) => {
+export const UserManagementDeleteDialog = () => {
   const dispatch = useAppDispatch();
 
+  const navigate = useNavigate();
+  const { login } = useParams<'login'>();
+
   useEffect(() => {
-    dispatch(getUser(props.match.params.login));
+    dispatch(getUser(login));
   }, []);
 
   const handleClose = event => {
     event.stopPropagation();
-    props.history.push('/admin/user-management');
+    navigate('/admin/user-management');
   };
 
   const user = useAppSelector(state => state.userManagement.user);

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management-detail.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { Button, Row, Badge } from 'reactstrap';
 import { Translate, TextFormat } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -27,11 +27,13 @@ import { APP_DATE_FORMAT } from 'app/config/constants';
 import { getUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagementDetail = (props: RouteComponentProps<{ login: string }>) => {
+export const UserManagementDetail = () => {
   const dispatch = useAppDispatch();
 
+  const { login } = useParams<'login'>();
+
   useEffect(() => {
-    dispatch(getUser(props.match.params.login));
+    dispatch(getUser(login));
   }, []);
 
   const user = useAppSelector(state => state.userManagement.user);

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Button, Row, Col, FormText } from 'reactstrap';
 import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -28,24 +28,28 @@ import { locales, languages } from 'app/config/translation';
 import { getUser, getRoles, updateUser, createUser, reset } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagementUpdate = (props: RouteComponentProps<{ login: string }>) => {
-  const [isNew] = useState(!props.match.params || !props.match.params.login);
+export const UserManagementUpdate = () => {
   const dispatch = useAppDispatch();
 
+  const navigate = useNavigate();
+
+  const { login } = useParams<'login'>();
+  const isNew = login === undefined;
+
   useEffect(() => {
     if (isNew) {
       dispatch(reset());
     } else {
-      dispatch(getUser(props.match.params.login));
+      dispatch(getUser(login));
     }
     dispatch(getRoles());
     return () => {
       dispatch(reset());
     };
-  }, [props.match.params.login]);
+  }, [login]);
 
   const handleClose = () => {
-    props.history.push('/admin/user-management');
+    navigate('/admin/user-management');
   };
 
   const saveUser = values => {

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Button, Table, Badge } from 'reactstrap';
 import {
   Translate,
@@ -34,10 +34,15 @@ import { overridePaginationStateWithQueryParams } from 'app/shared/util/entity-u
 import { getUsersAsAdmin, updateUser } from './user-management.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const UserManagement = (props: RouteComponentProps<any>) => {
+export const UserManagement = () => {
   const dispatch = useAppDispatch();
 
-  const [pagination, setPagination] = useState(overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, '<%= user.primaryKey.name %>'), props.location.search));
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [pagination, setPagination] = useState(
+    overridePaginationStateWithQueryParams(getSortState(location, ITEMS_PER_PAGE, 'id'), location.search)
+  );
 
   const getUsersFromProps = () => {
     dispatch(
@@ -48,8 +53,8 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
       })
     );
     const endURL = `?page=${pagination.activePage}&sort=${pagination.sort},${pagination.order}`;
-    if (props.location.search !== endURL) {
-      props.history.push(`${props.location.pathname}${endURL}`);
+    if (location.search !== endURL) {
+      navigate(`${location.pathname}${endURL}`);
     }
   };
 
@@ -58,7 +63,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
   }, [pagination.activePage, pagination.order, pagination.sort]);
 
   useEffect(() => {
-    const params = new URLSearchParams(props.location.search);
+    const params = new URLSearchParams(location.search);
     const page = params.get('page');
     const sortParam = params.get(SORT);
     if (page && sortParam) {
@@ -70,7 +75,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
         order: sortSplit[1]
       });
     }
-  }, [props.location.search]);
+  }, [location.search]);
 
   const sort = p => () =>
     setPagination({
@@ -98,7 +103,6 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
     );
   };
 
-  const { match } = props;
   const account = useAppSelector(state => state.authentication.account);
   const users = useAppSelector(state => state.userManagement.users);
   const totalItems = useAppSelector(state => state.userManagement.totalItems);
@@ -112,7 +116,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
           <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="userManagement.home.refreshListLabel">Refresh List</Translate>
           </Button>
-          <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity">
+          <Link to="new" className="btn btn-primary jh-create-entity">
             <FontAwesomeIcon icon="plus" /> <Translate contentKey="userManagement.home.createLabel">Create a new user</Translate>
           </Link>
         </div>
@@ -145,10 +149,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
           users.map((user, i) => (
             <tr id={user.login} key={`user-${i}`}>
               <td>
-                <Button
-                  tag={Link} to={`${match.url}/${user.login}`}
-                  color="link" size="sm"
-                >
+                <Button tag={Link} to={user.login} color="link" size="sm">
                   {user.id}
                 </Button>
               </td>
@@ -191,22 +192,13 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
 <%_ } _%>
               <td className="text-end">
                 <div className="btn-group flex-btn-group-container">
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}`}
-                    color="info" size="sm"
-                  >
-                    <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.view">View</Translate></span>
+                  <Button tag={Link} to={user.login} color="info" size="sm">
+                    <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.view">View</Translate></span>
                   </Button>
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}/edit`}
-                    color="primary" size="sm"
-                  >
+                  <Button tag={Link} to={`${user.login}/edit`} color="primary" size="sm">
                     <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
                   </Button>
-                  <Button
-                    tag={Link} to={`${match.url}/${user.login}/delete`}
-                    color="danger" size="sm" disabled={account.login === user.login}
-                  >
+                  <Button tag={Link} to={`${user.login}/delete`} color="danger" size="sm" disabled={account.login === user.login}>
                     <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.delete">Delete</Translate></span>
                   </Button>
                 </div>

package/generators/client/templates/react/src/main/webapp/app/modules/login/login-redirect.tsx.ejs

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react';
 import { REDIRECT_URL } from 'app/shared/util/url-utils';
+import { useLocation } from 'react-router';
+
+export const LoginRedirect = () => {
+  const location = useLocation();
 
-export const LoginRedirect = (props) => {
   useEffect(() => {
-    localStorage.setItem(REDIRECT_URL, props.location.state.from.pathname);
+    localStorage.setItem(REDIRECT_URL, (location.state as any).from.pathname);
     window.location.reload();
   });
 
   return null;
 };
 
-export default LoginRedirect;
+export default LoginRedirect;

package/generators/client/templates/react/src/main/webapp/app/modules/login/login.tsx.ejs

@@ -17,18 +17,20 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { login } from 'app/shared/reducers/authentication';
 import LoginModal from './login-modal';
 
-export const Login = (props: RouteComponentProps<any>) => {
+export const Login = () => {
   const dispatch = useAppDispatch();
   const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated);
   const loginError = useAppSelector(state => state.authentication.loginError);
   const showModalLogin = useAppSelector(state => state.authentication.showModalLogin);
   const [showModal, setShowModal] = useState(showModalLogin);
+  const navigate = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     setShowModal(true);
@@ -38,13 +40,12 @@ export const Login = (props: RouteComponentProps<any>) => {
 
   const handleClose = () => {
     setShowModal(false);
-    props.history.push('/');
+    navigate('/');
   };
 
-  const { location } = props;
   const { from } = location.state as any || { from: { pathname: '/', search: location.search } };
   if (isAuthenticated) {
-    return <Redirect to={from} />;
+    return <Navigate to={from} replace />;
   }
   return <LoginModal showModal={showModal} handleLogin={handleLogin} handleClose={handleClose} loginError={loginError} />;
 };

package/generators/client/templates/react/src/main/webapp/app/routes.tsx.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React<% if (applicationTypeGateway && microfrontend) { %>, { Suspense }<% } %> from 'react';
-import { Switch <% if (communicationSpringWebsocket) { %>, useLocation <% } %><% if (applicationTypeGateway && microfrontend) { %>, Route <% } %>} from 'react-router-dom';
+import { Route <% if (communicationSpringWebsocket) { %>, useLocation <% } %>} from 'react-router-dom';
 import Loadable from 'react-loadable';
 
 <%_ if (!authenticationTypeOauth2) { _%>
@@ -36,7 +36,7 @@ import Logout from 'app/modules/login/logout';
 import Home from 'app/modules/home/home';
 import EntitiesRoutes from 'app/entities/routes';
 import PrivateRoute from 'app/shared/auth/private-route';
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
 import PageNotFound from 'app/shared/error/page-not-found';
 import { AUTHORITIES } from 'app/config/constants';
 <%_ if (communicationSpringWebsocket) { _%>
@@ -63,7 +63,7 @@ const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => import('@<%= re
   <%_ } _%>
 <%_ } _%>
 
-const Routes = () => {
+const AppRoutes = () => {
 <%_ if (communicationSpringWebsocket) { _%>
   const location = useLocation();
   React.useEffect(() => {
@@ -72,39 +72,67 @@ const Routes = () => {
 <%_ } _%>
   return (
     <div className="view-routes">
-      <Switch>
+      <ErrorBoundaryRoutes>
+        <Route index element={<Home />} />
 <%_ if (!authenticationTypeOauth2) { _%>
-        <ErrorBoundaryRoute path="/login" component={Login} />
+        <Route path="login" element={<Login />} />
 <%_ } _%>
-        <ErrorBoundaryRoute path="/logout" component={Logout} />
+        <Route path="logout" element={<Logout />} />
 <%_ if (!skipUserManagement) { _%>
-        <ErrorBoundaryRoute path="/account/register" component={Register} />
-        <ErrorBoundaryRoute path="/account/activate/:key?" component={Activate} />
-        <ErrorBoundaryRoute path="/account/reset/request" component={PasswordResetInit} />
-        <ErrorBoundaryRoute path="/account/reset/finish/:key?" component={PasswordResetFinish} />
-<%_ } _%>
-        <PrivateRoute path="/admin" component={Admin} hasAnyAuthorities={[AUTHORITIES.ADMIN]}/>
-<%_ if (!skipUserManagement) { _%>
-        <PrivateRoute path="/account" component={Account} hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}/>
+        <Route path="account">
+          <Route
+            path="*"
+            element={
+              <PrivateRoute hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}>
+                <Account />
+              </PrivateRoute>
+            }
+          />
+          <Route path="register" element={<Register />} />
+          <Route path="activate" element={<Activate />} />
+          <Route path="reset">
+            <Route path="request" element={<PasswordResetInit />} />
+            <Route path="finish" element={<PasswordResetFinish />} />
+          </Route>
+        </Route>
 <%_ } _%>
-        <ErrorBoundaryRoute path="/" exact component={Home}/>
+        <Route
+          path="admin/*"
+          element={
+            <PrivateRoute hasAnyAuthorities={[AUTHORITIES.ADMIN]}>
+              <Admin />
+            </PrivateRoute>
+          }
+        />
 <%_ if (authenticationTypeOauth2) { _%>
-        <ErrorBoundaryRoute path="/oauth2/authorization/oidc" component={LoginRedirect} />
+        <Route path="oauth2/authorization/oidc" element={<LoginRedirect />} />
 <%_ } _%>
 <%_ if (applicationTypeGateway && microfrontend) { _%>
   <%_ for (const remote of microfrontends) { _%>
-        <Route path="/<%= remote.lowercaseBaseName %>/">
-          <Suspense fallback={loading}>
-            <PrivateRoute component={<%= remote.capitalizedBaseName %>Routes} hasAnyAuthorities={[AUTHORITIES.USER]} />
-          </Suspense>
-        </Route>
+        <Route
+          path="<%= remote.lowercaseBaseName %>/*"
+          element={
+            <Suspense fallback={loading}>
+              <PrivateRoute hasAnyAuthorities={[AUTHORITIES.USER]}>
+                <<%= remote.capitalizedBaseName %>Routes />
+              </PrivateRoute>
+            </Suspense>
+          }
+        />
   <%_ } _%>
 <%_ } _%>
-        <PrivateRoute path="/<%= microfrontend && applicationTypeMicroservice ? lowercaseBaseName + '/' : '' %>" component={EntitiesRoutes} hasAnyAuthorities={[AUTHORITIES.USER]}/>
-        <ErrorBoundaryRoute component={PageNotFound} />
-      </Switch>
+        <Route
+          path="<%= microfrontend && applicationTypeMicroservice ? lowercaseBaseName + '/' : '' %>*"
+          element={
+            <PrivateRoute hasAnyAuthorities={[AUTHORITIES.USER]}>
+              <EntitiesRoutes />
+            </PrivateRoute>
+          }
+        />
+        <Route path="*" element={<PageNotFound />} />
+      </ErrorBoundaryRoutes>
     </div>
   );
 };
 
-export default Routes;
+export default AppRoutes;

package/generators/client/templates/react/src/main/webapp/app/shared/auth/private-route.spec.tsx.ejs

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render } from '@testing-library/react';
 <%_ if (enableTranslation) { _%>
 import { TranslatorContext } from 'react-jhipster';
@@ -10,7 +9,7 @@ import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 
 import { AUTHORITIES } from 'app/config/constants';
-import { PrivateRouteComponent, hasAnyAuthority } from './private-route';
+import PrivateRoute, { hasAnyAuthority } from './private-route';
 
 const TestComp = () => <div>Test</div>;
 
@@ -26,15 +25,19 @@ describe('private-route component', () => {
   const mockStore = configureStore([thunk]);
   const wrapper = (Elem: JSX.Element, authentication) => {
     const store = mockStore({ authentication });
-    return render(<Provider store={store}>{Elem}</Provider>);
+    return render(
+      <Provider store={store}>
+        <MemoryRouter>{Elem}</MemoryRouter>
+      </Provider>
+    );
   };
 
   // All tests will go here
-  it('Should throw error when no component is provided', () => {
+  it('Should throw error when falsy children are provided', () => {
     const originalError = console.error;
     console.error = jest.fn();
     expect(() =>
-      wrapper(<PrivateRouteComponent component={null} path="/" />, {
+      wrapper(<PrivateRoute>{null}</PrivateRoute>, {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
         account: {
@@ -46,11 +49,10 @@ describe('private-route component', () => {
   });
 
   it('Should render an error message when the user has no authorities', () => {
-    const history = createMemoryHistory();
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent component={TestComp} path="/" />
-      </Router>,
+      <PrivateRoute>
+        <TestComp />
+      </PrivateRoute>,
       {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
@@ -59,23 +61,16 @@ describe('private-route component', () => {
         },
       }
     );
-<%_ if (enableTranslation) { _%>
-    expect(container.innerHTML).toEqual(
-      '<div class="insufficient-authority"><div class="alert alert-danger"><span>You are not authorized to access this page.</span></div></div>'
-    );
-<%_ } else { _%>
-    expect(container.innerHTML).toEqual(
-      '<div class="insufficient-authority"><div class="alert alert-danger">You are not authorized to access this page.</div></div>'
+    expect(container.innerHTML).toMatch(
+      /<div class="insufficient-authority"><div class="alert alert-danger">.*<\/div><\/div>/
     );
-<%_ } _%>
   });
 
   it('Should render a route for the component provided when authenticated', () => {
-    const history = createMemoryHistory();
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent component={TestComp} path="/" />
-      </Router>,
+      <PrivateRoute>
+        <TestComp />
+      </PrivateRoute>,
       {
         isAuthenticated: true,
         sessionHasBeenFetched: true,
@@ -87,12 +82,19 @@ describe('private-route component', () => {
     expect(container.innerHTML).toEqual('<div>Test</div>');
   });
 
-  it('Should render a redirect to login when not authenticated', () => {
-    const history = createMemoryHistory();
+  it('Should redirect when not authenticated', () => {
     const { container } = wrapper(
-      <Router history={history}>
-        <PrivateRouteComponent exact component={TestComp} path="/" />
-      </Router>,
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <PrivateRoute>
+              <TestComp />
+            </PrivateRoute>
+          }
+        />
+        <Route path="<% if(authenticationTypeOauth2) { %>/oauth2/authorization/oidc<% } else { %>/login<% } %>" element={<div>Login</div>} />
+      </Routes>,
       {
         isAuthenticated: false,
         sessionHasBeenFetched: true,
@@ -102,6 +104,7 @@ describe('private-route component', () => {
       }
     );
     expect(container.innerHTML).not.toEqual('<div>Test</div>');
+    expect(container.innerHTML).toEqual('<div>Login</div>');
   });
 });