generator-jhipster 7.8.1 → 7.9.2

package/generators/client/templates/angular/src/main/webapp/declarations.d.ts.ejs

@@ -11,16 +11,11 @@ declare module '<%= remote.lowercaseBaseName %>/entity-routing' {
 declare module '<%= remote.lowercaseBaseName %>/entity-navbar-items' {
   export const EntityNavbarItems : []
 }
-<%_ if (enableTranslation) { _%>
+    <%_ if (enableTranslation) { _%>
+
 declare module '<%= remote.lowercaseBaseName %>/translation-module' {
   export class LazyTranslationModule {}
 }
-<%_ } _%>
-
-  <%_ } _%>
-  <%_ for (const entity of Object.values(this.configOptions.sharedEntities).filter(entity => entity.microserviceName)) { _%>
-declare module '<%= entity.microserviceName %>/<%= entity.entityFileName %>' {
-  export class <%= entity.microserviceName ? upperFirstCamelCase(entity.microserviceName) : '' %><%= entity.entityAngularName %>Module {}
-}
+    <%_ } _%>
   <%_ } _%>
 <%_ } _%>

package/generators/client/templates/angular/tsconfig.json.ejs

@@ -17,11 +17,13 @@
  limitations under the License.
 -%>
 {
+  "include": [],
   "compilerOptions": {
     "baseUrl": "<%= CLIENT_MAIN_SRC_DIR %>",
     "outDir": "./<%= DIST_DIR %>",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "strictNullChecks": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
@@ -35,7 +37,11 @@
     "importHelpers": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+<%_ if (microfrontend) { _%>
     "target": "es2017",
+<%_ } else { _%>
+    "target": "es2020",
+<%_ } _%>
     "module": "es2020",
     "lib": ["es2018", "dom"]
   },

package/generators/client/templates/angular/tsconfig.spec.json.ejs

@@ -23,5 +23,5 @@
     "types": ["jest", "node"]
   },
   "files": ["<%= MAIN_SRC_DIR %>polyfills.ts"],
-  "include": ["<%= MAIN_SRC_DIR %>**/*.spec.ts", "<%= MAIN_SRC_DIR %>**/*.d.ts"]
+  "include": ["<%= MAIN_SRC_DIR %>**/*.ts"]
 }

package/generators/client/templates/angular/webpack/webpack.custom.js.ejs

@@ -48,7 +48,11 @@ module.exports = async (config, options, targetOptions) => {
   if (config.mode === 'development') {
     config.plugins.push(
       new ESLintPlugin({
-        extensions: ['js', 'ts'],
+        baseConfig: {
+          parserOptions: {
+            project: ['../tsconfig.app.json'],
+          },
+        },
       }),
       new WebpackNotifierPlugin({
         title: '<%= humanizedBaseName %>',
@@ -118,7 +122,7 @@ module.exports = async (config, options, targetOptions) => {
       globOptions: { ignore: ['**/index.html'] },
     },
     {
-      from: require.resolve('axios/dist/axios.min.js'), 
+      from: require.resolve('axios/dist/axios.min.js'),
       to: 'swagger-ui/',
     },
     { from: './<%= CLIENT_MAIN_SRC_DIR %>swagger-ui/', to: 'swagger-ui/' },

package/generators/client/templates/angular/webpack/webpack.microfrontend.js.ejs

@@ -41,7 +41,7 @@ module.exports = (config, options, targetOptions) => {
 <%_ if (applicationTypeGateway) { _%>
         remotes: {
   <%_ for (const remote of microfrontends) { _%>
-          '<%= remote.lowercaseBaseName %>': `<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js`,
+          '<%= remote.lowercaseBaseName %>': '<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js',
   <%_ } _%>
         },
 <%_ } _%>

package/generators/client/templates/common/package.json

@@ -1,16 +1,16 @@
 {
   "devDependencies": {
-    "@cypress/code-coverage": "3.9.12",
-    "babel-loader": "8.2.4",
+    "@cypress/code-coverage": "3.10.0",
+    "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
-    "cypress": "9.5.3",
+    "cypress": "10.4.0",
     "cypress-audit": "1.1.0",
     "eslint-plugin-cypress": "2.12.1",
-    "lighthouse": "9.5.0",
+    "lighthouse": "9.6.5",
     "nyc": "15.1.0",
-    "swagger-ui-dist": "4.10.3"
+    "swagger-ui-dist": "4.13.1"
   },
   "dependencies": {
-    "dayjs": "1.11.0"
+    "dayjs": "1.11.4"
   }
 }

package/generators/client/templates/common/src/main/webapp/swagger-ui/index.html.ejs

@@ -116,6 +116,8 @@
           const response = await axios.get('/management/jhiopenapigroups', axiosConfig);
           if (Array.isArray(response.data)) {
             urls = response.data.map(({ group, description }) => ({ name: description, url: `${baseUrl}/${group}` }));
+          } else {
+            urls = [{ name: 'default', url: baseUrl }];
           }
         }
         console.log(`Swagger urls`, urls);

package/generators/client/templates/react/.eslintrc.json.ejs

@@ -34,7 +34,16 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "project": "./<% if (protractorTests) { %>tsconfig.e2e.json<% } else { %>tsconfig.test.json<% } %>"
+    "project": [
+      "./tsconfig.json",
+<%_ if (cypressTests) { _%>
+      "./<%= CLIENT_TEST_SRC_DIR %>cypress/tsconfig.json",
+<%_ } _%>
+<%_ if (protractorTests) { _%>
+      "./tsconfig.e2e.json",
+<%_ } _%>
+      "./tsconfig.test.json"
+    ]
   },
   "settings": {
     "react": {

package/generators/client/templates/react/jest.conf.js.ejs

@@ -5,7 +5,9 @@ module.exports = {
   transform: {
     '^.+\\.tsx?$': 'ts-jest'
   },
-  testURL: 'http://localhost/',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
   cacheDirectory: '<rootDir>/<%= BUILD_DIR %>jest-cache',
   coverageDirectory: '<rootDir>/<%= BUILD_DIR %>test-results/',
   testMatch: ['<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/**/@(*.)@(spec.ts?(x))'],

package/generators/client/templates/react/package.json

@@ -1,88 +1,88 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/react-fontawesome": "0.1.18",
-    "@reduxjs/toolkit": "1.8.1",
-    "axios": "0.26.1",
-    "bootstrap": "5.1.3",
-    "bootswatch": "5.1.3",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@reduxjs/toolkit": "1.8.3",
+    "axios": "0.27.2",
+    "bootstrap": "5.2.0",
+    "bootswatch": "5.2.0",
     "lodash": "4.17.21",
     "path-browserify": "1.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-hook-form": "7.29.0",
-    "react-jhipster": "0.20.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "7.30.0",
+    "react-jhipster": "0.21.0",
     "react-loadable": "5.5.0",
-    "react-redux": "7.2.8",
-    "react-redux-loading-bar": "5.0.2",
-    "react-router-dom": "5.3.0",
-    "react-toastify": "8.2.0",
-    "react-transition-group": "4.4.2",
-    "reactstrap": "9.0.1",
-    "redux": "4.1.2",
+    "react-redux": "8.0.2",
+    "react-redux-loading-bar": "5.0.4",
+    "react-router-dom": "6.3.0",
+    "react-toastify": "9.0.7",
+    "react-transition-group": "4.4.5",
+    "reactstrap": "9.1.2",
+    "redux": "4.2.0",
     "redux-thunk": "2.4.1",
     "sonar-scanner": "3.1.0",
-    "tslib": "2.3.1",
+    "tslib": "2.4.0",
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@testing-library/react": "12.1.4",
-    "@types/jest": "27.4.1",
-    "@types/lodash": "4.14.181",
-    "@types/node": "16.11.26",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "@types/react-redux": "7.1.23",
-    "@types/react-router-dom": "5.3.3",
+    "@testing-library/react": "13.3.0",
+    "@types/jest": "28.1.6",
+    "@types/lodash": "4.14.182",
+    "@types/node": "16.11.47",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "@types/react-redux": "7.1.24",
     "@types/redux": "3.6.31",
-    "@types/webpack-env": "1.16.3",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@typescript-eslint/parser": "5.18.0",
-    "autoprefixer": "10.4.4",
-    "browser-sync": "2.27.9",
+    "@types/webpack-env": "1.17.0",
+    "@typescript-eslint/eslint-plugin": "5.32.0",
+    "@typescript-eslint/parser": "5.32.0",
+    "autoprefixer": "10.4.8",
+    "browser-sync": "2.27.10",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.4",
-    "core-js": "3.21.1",
+    "copy-webpack-plugin": "11.0.0",
+    "core-js": "3.24.1",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "3.4.1",
-    "eslint": "8.12.0",
+    "css-minimizer-webpack-plugin": "4.0.0",
+    "eslint": "8.21.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-webpack-plugin": "3.1.1",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.2",
-    "fork-ts-checker-webpack-plugin": "7.2.3",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.5.1",
-    "jest-junit": "13.1.0",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-junit": "14.0.0",
     "jest-sonar-reporter": "2.0.0",
     "json-loader": "0.5.7",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.6.0",
-    "postcss-loader": "6.2.1",
-    "postcss-rtlcss": "3.5.4",
+    "mini-css-extract-plugin": "2.6.1",
+    "postcss-loader": "7.0.1",
+    "postcss-rtlcss": "3.7.2",
     "react-infinite-scroll-component": "6.1.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
-    "sass": "1.49.11",
-    "sass-loader": "12.6.0",
+    "sass": "1.54.1",
+    "sass-loader": "13.0.2",
     "simple-progress-webpack-plugin": "2.0.0",
-    "sinon": "13.0.1",
-    "source-map-loader": "3.0.1",
+    "sinon": "14.0.0",
+    "source-map-loader": "4.0.0",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "style-loader": "3.3.1",
-    "terser-webpack-plugin": "5.3.1",
+    "terser-webpack-plugin": "5.3.3",
     "thread-loader": "3.0.4",
-    "ts-jest": "27.1.4",
-    "ts-loader": "9.2.8",
-    "typescript": "4.6.3",
-    "webpack": "5.71.0",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.8.0",
+    "ts-jest": "28.0.7",
+    "ts-loader": "9.3.1",
+    "typescript": "4.7.4",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0",
-    "workbox-webpack-plugin": "6.5.2"
+    "workbox-webpack-plugin": "6.5.4"
   }
-}
+}

package/generators/client/templates/react/package.json.ejs

@@ -77,7 +77,6 @@
     "@types/react": "<%= dependabotPackageJson.devDependencies['@types/react'] %>",
     "@types/react-dom": "<%= dependabotPackageJson.devDependencies['@types/react-dom'] %>",
     "@types/react-redux": "<%= dependabotPackageJson.devDependencies['@types/react-redux'] %>",
-    "@types/react-router-dom": "<%= dependabotPackageJson.devDependencies['@types/react-router-dom'] %>",
     "@types/redux": "<%= dependabotPackageJson.devDependencies['@types/redux'] %>",
 <%_ if (protractorTests) { _%>
     "@types/selenium-webdriver": "4.0.9",
@@ -111,6 +110,7 @@
     "html-webpack-plugin": "<%= dependabotPackageJson.devDependencies['html-webpack-plugin'] %>",
     "identity-obj-proxy": "<%= dependabotPackageJson.devDependencies['identity-obj-proxy'] %>",
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
+    "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest-environment-jsdom'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",
     "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
     "json-loader": "<%= dependabotPackageJson.devDependencies['json-loader'] %>",
@@ -194,8 +194,8 @@
 <%_ } _%>
 <%_ if (cypressTests) { _%>
     "e2e:cypress:headed": "<%= clientPackageManager %> run e2e:cypress -- --headed",
-    "e2e:cypress": "cypress run --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
-    "cypress": "cypress open",
+    "e2e:cypress": "cypress run --e2e --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
+    "cypress": "cypress open --e2e",
 <%_ } _%>
 <%_ if (protractorTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",

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

@@ -22,7 +22,7 @@ import 'app/config/dayjs.ts';
 
 import React, { useEffect } from 'react';
 import { Card } from 'reactstrap';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
@@ -59,7 +59,7 @@ export const App = () => {
 
   const paddingTop = '60px';
   return (
-    <Router basename={baseHref}>
+    <BrowserRouter basename={baseHref}>
       <div className="app-container" style={{ paddingTop }}>
         <ToastContainer position={toast.POSITION.TOP_LEFT} className="toastify-container" toastClassName="toastify-toast"/>
         <ErrorBoundary>
@@ -83,7 +83,7 @@ export const App = () => {
           <Footer/>
         </div>
       </div>
-    </Router>
+    </BrowserRouter>
   );
 };
 

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

@@ -42,4 +42,4 @@ const EntitiesMenu = () => {
   );
 };
 
-export default EntitiesMenu as React.ComponentType<any>;
+export default EntitiesMenu;

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

@@ -17,13 +17,15 @@
  limitations under the License.
 -%>
 import React from 'react';
-import { Switch } from 'react-router-dom';
+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';
 <%_ } _%>
-import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 <%_ if (microfrontend || applicationTypeGateway) { _%>
 
 import entitiesReducers from './reducers';
@@ -31,17 +33,17 @@ import entitiesReducers from './reducers';
 
 /* jhipster-needle-add-route-import - JHipster will add routes here */
 
-export default ({ match }) => {
+export default () => {
 <%_ if (microfrontend || applicationTypeGateway) { _%>
   const store = getStore();
   store.injectReducer('<%= lowercaseBaseName %>', combineReducers(entitiesReducers as ReducersMapObject));
 <%_ } _%>
   return (
     <div>
-      <Switch>
+      <ErrorBoundaryRoutes>
         {/* prettier-ignore */}
         {/* jhipster-needle-add-route-path - JHipster will add routes here */}
-      </Switch>
+      </ErrorBoundaryRoutes>
     </div>
   );
 };

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

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -42,18 +42,17 @@ setupAxiosInterceptors(() => actions.clearAuthentication('login.error.unauthoriz
 loadIcons();
 
 const rootEl = document.getElementById('root');
+const root = createRoot(rootEl);
 
 const render = Component =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(
+  root.render(
     <ErrorBoundary>
       <Provider store={store}>
         <div>
           <Component />
         </div>
       </Provider>
-    </ErrorBoundary>,
-    rootEl
+    </ErrorBoundary>
   );
 
 render(AppComponent);

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>