generator-jhipster 7.7.0 → 7.9.0

package/generators/client/templates/react/src/main/webapp/app/entities/reducers.ts.ejs

@@ -0,0 +1,25 @@
+<%#
+ Copyright 2013-2022 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+/* jhipster-needle-add-reducer-import - JHipster will add reducer here */
+
+const entitiesReducers = {
+  /* jhipster-needle-add-reducer-combine - JHipster will add reducer here */
+};
+
+export default entitiesReducers;

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

@@ -0,0 +1,49 @@
+<%#
+ Copyright 2013-2022 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import ErrorBoundaryRoutes from 'app/shared/error/error-boundary-routes';
+
+<%_ if (microfrontend || applicationTypeGateway) { _%>
+import { ReducersMapObject, combineReducers } from '@reduxjs/toolkit';
+
+import getStore from 'app/config/store';
+<%_ } _%>
+<%_ if (microfrontend || applicationTypeGateway) { _%>
+
+import entitiesReducers from './reducers';
+<%_ } _%>
+
+/* jhipster-needle-add-route-import - JHipster will add routes here */
+
+export default () => {
+<%_ if (microfrontend || applicationTypeGateway) { _%>
+  const store = getStore();
+  store.injectReducer('<%= lowercaseBaseName %>', combineReducers(entitiesReducers as ReducersMapObject));
+<%_ } _%>
+  return (
+    <div>
+      <ErrorBoundaryRoutes>
+        {/* prettier-ignore */}
+        {/* jhipster-needle-add-route-path - JHipster will add routes here */}
+      </ErrorBoundaryRoutes>
+    </div>
+  );
+};

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

@@ -21,15 +21,15 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import getStore from './config/store';
+import getStore from 'app/config/store';
 <%_ if (enableTranslation) { _%>
-import { registerLocale } from './config/translation';
+import { registerLocale } from 'app/config/translation';
 <%_ } _%>
-import setupAxiosInterceptors from './config/axios-interceptor';
-import { clearAuthentication } from './shared/reducers/authentication';
-import ErrorBoundary from './shared/error/error-boundary';
-import AppComponent from './app';
-import { loadIcons } from './config/icon-loader';
+import setupAxiosInterceptors from 'app/config/axios-interceptor';
+import { clearAuthentication } from 'app/shared/reducers/authentication';
+import ErrorBoundary from 'app/shared/error/error-boundary';
+import AppComponent from 'app/app';
+import { loadIcons } from 'app/config/icon-loader';
 
 const store = getStore();
 <%_ if (enableTranslation) { _%>

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

@@ -0,0 +1,19 @@
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+import('./index');

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

@@ -17,9 +17,9 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link,  useSearchParams } from 'react-router-dom';
 import { Row, Col, Alert } from 'reactstrap';
-import { Translate, getUrlParameter } from 'react-jhipster';
+import { Translate } from 'react-jhipster';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { activateAction, reset } from './activate.reducer';
@@ -43,10 +43,14 @@ const failureAlert = (
   </Alert>
 );
 
-export const ActivatePage = (props: RouteComponentProps<{ key: any }>) => {
+export const ActivatePage = () => {
   const dispatch = useAppDispatch();
+
+  const [searchParams] = useSearchParams();
+
   useEffect(() => {
-    const key = getUrlParameter('key', props.location.search);
+    const key = searchParams.get("key");
+
     dispatch(activateAction(key));
     return () => {
       dispatch(reset());

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

@@ -17,8 +17,9 @@
  limitations under the License.
 -%>
 import React from 'react';
+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 Settings from './settings/settings';
 import Password from './password/password';
@@ -26,14 +27,16 @@ import Password from './password/password';
 import Sessions from './sessions/sessions';
 <%_ } _%>
 
-const Routes = ({ match }) => (
+const AccountRoutes = () => (
   <div>
-    <ErrorBoundaryRoute path={`${match.url}/settings`} component={Settings} />
-    <ErrorBoundaryRoute path={`${match.url}/password`} component={Password} />
+    <ErrorBoundaryRoutes>
+      <Route path="settings" element={<Settings />} />
+      <Route path="password" element={<Password />} />
 <%_ if (authenticationTypeSession) { _%>
-    <ErrorBoundaryRoute path={`${match.url}/sessions`} component={Sessions} />
+      <Route path="sessions" element={<Sessions />} />
 <%_ } _%>
+    </ErrorBoundaryRoutes>
   </div>
 );
 
-export default Routes;
+export default AccountRoutes;

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

@@ -60,6 +60,7 @@ export const PasswordPage = () => {
       toast.error(errorMessage);
 <%_ } _%>
     }
+    dispatch(reset());
   }, [successMessage, errorMessage]);
 
   return (

package/generators/client/templates/react/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs

@@ -18,19 +18,22 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Col, Row, Button } from 'reactstrap';
-import { Translate, translate, getUrlParameter, ValidatedField, ValidatedForm } from 'react-jhipster';
-import { RouteComponentProps } from 'react-router-dom';
+import { Translate, translate, ValidatedField, ValidatedForm } from 'react-jhipster';
+import { useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { handlePasswordResetFinish, reset } from '../password-reset.reducer';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
-export const PasswordResetFinishPage = (props: RouteComponentProps<{ key: string }>) => {
-  const [password, setPassword] = useState('');
-  const [key] = useState(getUrlParameter('key', props.location.search));
+export const PasswordResetFinishPage = () => {
   const dispatch = useAppDispatch();
 
+  const [searchParams] = useSearchParams();
+  const key = searchParams.get('key');
+
+  const [password, setPassword] = useState('');
+
   useEffect(
     () => () => {
       dispatch(reset());

package/generators/client/templates/react/src/main/webapp/app/modules/administration/administration.reducer.ts.ejs

@@ -113,16 +113,18 @@ export const AdministrationSlice = createSlice({
     <%_ } _%>
   },
   extraReducers(builder) {
+<%_ if (withAdminUi || (applicationTypeGateway && serviceDiscoveryType)) { _%>
+    builder
       <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
-    builder.addCase(getGatewayRoutes.fulfilled, (state, action) => {
+      .addCase(getGatewayRoutes.fulfilled, (state, action) => {
         state.loading = false;
         state.gateway = {
           routes: action.payload.data
         };
-      });
+      })
       <%_ } _%>
       <%_ if (withAdminUi) { _%>
-    builder.addCase(getSystemHealth.fulfilled, (state, action) => {
+      .addCase(getSystemHealth.fulfilled, (state, action) => {
         state.loading = false;
         state.health = action.payload.data;
       })
@@ -155,7 +157,6 @@ export const AdministrationSlice = createSlice({
         };
       })
       <%_ } _%>
-      <%_ if (withAdminUi || (applicationTypeGateway && serviceDiscoveryType)) { _%>
       .addMatcher(
         isPending(
           <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
@@ -175,8 +176,6 @@ export const AdministrationSlice = createSlice({
           state.loading = true;
         }
       )
-      <%_ } _%>
-      <%_ if (withAdminUi || (applicationTypeGateway && serviceDiscoveryType)) { _%>
       .addMatcher(
         isRejected(
           <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
@@ -196,7 +195,7 @@ export const AdministrationSlice = createSlice({
           state.loading = false;
         }
       );
-      <%_ } _%>
+<%_ } _%>
   },
 });
 

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

@@ -18,6 +18,7 @@
 -%>
 import React from 'react';
 import { Table, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Translate } from 'react-jhipster';
 
 const formatDiskSpaceOutput = rawValue => {
   // Should display storage space in an human readable unit
@@ -38,8 +39,8 @@ const HealthModal = ({ handleClose, healthObject, showModal }) => {
         <Table bordered>
           <thead>
             <tr>
-              <th>Name</th>
-              <th>Value</th>
+              <th><Translate contentKey="health.details.name">Name</Translate></th>
+              <th><Translate contentKey="health.details.value">Value</Translate></th>
             </tr>
           </thead>
           <tbody>

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

@@ -59,7 +59,7 @@ export const HealthPage = () => {
   return (
     <div>
       <h2 id="health-page-heading" data-cy="healthPageHeading">
-        Health Checks
+        <Translate contentKey="health.title">Health Checks</Translate>
       </h2>
       <p>
         <Button onClick={fetchSystemHealth} color={isFetching ? 'btn btn-danger' : 'btn btn-primary'} disabled={isFetching}>
@@ -75,9 +75,9 @@ export const HealthPage = () => {
           <Table bordered aria-describedby="health-page-heading">
             <thead>
               <tr>
-                <th>Service Name</th>
-                <th>Status</th>
-                <th>Details</th>
+                <th><Translate contentKey="health.table.service">Service Name</Translate></th>
+                <th><Translate contentKey="health.table.status">Status</Translate></th>
+                <th><Translate contentKey="health.details.details">Details</Translate></th>
               </tr>
             </thead>
             <tbody>

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/logs/logs.tsx.ejs

@@ -40,7 +40,7 @@ export const LogsPage = () => {
 
   const filterFn = l => l.name.toUpperCase().includes(filter.toUpperCase());
 
-  const loggers = logs ? Object.entries(logs.loggers).map(e => ({ name: e[0], level: e[1].effectiveLevel })) : [];
+  const loggers = logs ? Object.entries(logs.loggers).map((e: any) => ({ name: e[0], level: e[1].effectiveLevel })) : [];
 
   return (
     <div>

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 => {