generator-jhipster 7.7.0 → 7.9.0

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.service.ts.ejs

@@ -0,0 +1,31 @@
+<%#
+ 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 { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class SortService {
+  private collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  });
+
+  public startSort(property: string, order: number): (a: any, b: any) => number {
+    return (a: any, b: any) => this.collator.compare(a[property], b[property]) * order;
+  }
+}

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

@@ -35,7 +35,6 @@ const ESLintPlugin = require('eslint-webpack-plugin');
 const environment = require('./environment');
 const proxyConfig = require('./proxy.conf');
 
-
 module.exports = async (config, options, targetOptions) => {
 <%_ if (enableTranslation) { _%>
   const languagesHash = await hashElement(path.resolve(__dirname, '../<%= MAIN_SRC_DIR %>i18n'), {
@@ -49,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 %>',
@@ -111,6 +114,18 @@ module.exports = async (config, options, targetOptions) => {
   }
 
   const patterns = [
+    {
+      // https://github.com/swagger-api/swagger-ui/blob/v4.6.1/swagger-ui-dist-package/README.md
+      context: require('swagger-ui-dist').getAbsoluteFSPath(),
+      from: '*.{js,css,html,png}',
+      to: 'swagger-ui/',
+      globOptions: { ignore: ['**/index.html'] },
+    },
+    {
+      from: require.resolve('axios/dist/axios.min.js'),
+      to: 'swagger-ui/',
+    },
+    { from: './<%= CLIENT_MAIN_SRC_DIR %>swagger-ui/', to: 'swagger-ui/' },
     // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
   ];
 

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,15 +1,16 @@
 {
   "devDependencies": {
-    "@cypress/code-coverage": "3.9.12",
-    "babel-loader": "8.2.3",
+    "@cypress/code-coverage": "3.10.0",
+    "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
-    "cypress": "9.5.0",
-    "eslint-plugin-cypress": "2.12.1",
+    "cypress": "10.3.1",
     "cypress-audit": "1.1.0",
-    "lighthouse": "9.4.0",
-    "nyc": "15.1.0"
+    "eslint-plugin-cypress": "2.12.1",
+    "lighthouse": "9.6.4",
+    "nyc": "15.1.0",
+    "swagger-ui-dist": "4.13.0"
   },
   "dependencies": {
-    "dayjs": "1.10.7"
+    "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/common/webpack/webpack.microfrontend.js.jhi.ejs

@@ -34,6 +34,8 @@ module.exports = ({ serve }) => {
   return {
     optimization: {
       moduleIds: 'named',
+      chunkIds: 'named',
+      runtimeChunk: false,
     },
     plugins: [
       new ModuleFederationPlugin({
@@ -49,8 +51,5 @@ module.exports = ({ serve }) => {
     output: {
       publicPath: 'auto',
     },
-    optimization: {
-      runtimeChunk: false,
-    },
   };
 };

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

@@ -34,7 +34,16 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "project": "./<% if (protractorTests) { %>tsconfig.e2e.json<% } else { %>tsconfig.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

@@ -1,11 +1,13 @@
-const tsconfig = require('./tsconfig.json');
+const tsconfig = require('./tsconfig.test.json');
 
 module.exports = {
   testEnvironment: 'jsdom',
   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,89 +1,88 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.0.0",
-    "@fortawesome/react-fontawesome": "0.1.17",
-    "@reduxjs/toolkit": "1.7.2",
-    "axios": "0.26.0",
-    "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.27.1",
-    "react-jhipster": "0.19.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.6",
-    "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.4",
+    "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.3",
-    "@types/jest": "27.4.1",
-    "@types/lodash": "4.14.178",
-    "@types/node": "16.11.26",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.22",
-    "@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.12.1",
-    "@typescript-eslint/parser": "5.12.1",
-    "autoprefixer": "10.4.2",
-    "browser-sync": "2.27.7",
+    "@types/webpack-env": "1.17.0",
+    "@typescript-eslint/eslint-plugin": "5.31.0",
+    "@typescript-eslint/parser": "5.31.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.6.0",
-    "css-minimizer-webpack-plugin": "3.4.1",
-    "eslint": "8.9.0",
-    "eslint-config-prettier": "8.4.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-webpack-plugin": "3.1.1",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
+    "eslint": "8.20.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.2",
-    "fork-ts-checker-webpack-plugin": "7.2.1",
+    "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.0.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.5.3",
-    "postcss-loader": "6.2.1",
-    "postcss-rtlcss": "3.5.2",
+    "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.9",
-    "sass-loader": "12.6.0",
+    "sass": "1.54.0",
+    "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",
-    "swagger-ui-dist": "4.5.2",
-    "terser-webpack-plugin": "5.3.1",
+    "terser-webpack-plugin": "5.3.3",
     "thread-loader": "3.0.4",
-    "ts-jest": "27.1.3",
-    "ts-loader": "9.2.6",
-    "typescript": "4.5.5",
-    "webpack": "5.69.1",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.7.4",
+    "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.0"
+    "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",
@@ -212,6 +212,7 @@
     "test": "<%= clientPackageManager %> run jest --",
     "test-ci": "<%= clientPackageManager %> run lint && <%= clientPackageManager %> run jest:update --",
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
+    "watch": "concurrently 'npm run start' npm:backend:start",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
     "webapp:build:dev": "webpack --config webpack/webpack.dev.js --env stats=minimal",
     "webapp:build:prod": "webpack --config webpack/webpack.prod.js --progress=profile",

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

@@ -21,7 +21,7 @@
 @import "~bootswatch/dist/<%= clientTheme %>/variables";
 <%_ } _%>
 // Import Bootstrap source files from node_modules
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
 <%_ if (!clientThemeNone) { _%>
 @import "~bootswatch/dist/<%= clientTheme %>/bootswatch";
 <%_ } _%>

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/config/store.ts.ejs

@@ -16,20 +16,34 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { AnyAction, configureStore, ThunkAction } from '@reduxjs/toolkit';
+import {
+  AnyAction,
+  configureStore,
+  ThunkAction,
+<%_ if (microfrontend || applicationTypeGateway) { _%>
+  Action,
+  Store,
+  Reducer,
+  ReducersMapObject,
+  combineReducers,
+<%_ } _%>
+} from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { loadingBarMiddleware } from 'react-redux-loading-bar';
 
-import reducer from 'app/shared/reducers';
+import sharedReducers from 'app/shared/reducers';
 import errorMiddleware from './error-middleware';
 import notificationMiddleware from './notification-middleware';
 import loggerMiddleware from './logger-middleware';
 <%_ if (communicationSpringWebsocket) { _%>
 import websocketMiddleware from './websocket-middleware';
 <%_ } _%>
-import { loadingBarMiddleware } from 'react-redux-loading-bar';
+<%_ if (enableTranslation) { _%>
+import translationMiddleware from './translation-middleware';
+<%_ } _%>
 
 const store = configureStore({
-  reducer,
+  reducer: sharedReducers,
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       serializableCheck: {
@@ -40,14 +54,47 @@ const store = configureStore({
       errorMiddleware,
       notificationMiddleware,
       loadingBarMiddleware(),
-    <%_ if (communicationSpringWebsocket) { _%>
+<%_ if (communicationSpringWebsocket) { _%>
       websocketMiddleware,
-    <%_ } _%>
+<%_ } _%>
+<%_ if (enableTranslation) { _%>
+      translationMiddleware,
+<%_ } _%>
       loggerMiddleware
     ),
 });
+<%_ if (microfrontend || applicationTypeGateway) { _%>
+
+// Allow lazy loading of reducers https://github.com/reduxjs/redux/blob/master/docs/usage/CodeSplitting.md
+interface InjectableStore<S = any, A extends Action = AnyAction> extends Store<S, A> {
+  asyncReducers: ReducersMapObject;
+  injectReducer(key: string, reducer: Reducer): void;
+}
+
+export function configureInjectableStore(storeToInject) {
+  const injectableStore = storeToInject as InjectableStore<any, any>;
+  injectableStore.asyncReducers = {};
+
+  injectableStore.injectReducer = (key, asyncReducer) => {
+    injectableStore.asyncReducers[key] = asyncReducer;
+    injectableStore.replaceReducer(
+      combineReducers({
+        ...sharedReducers,
+        ...injectableStore.asyncReducers,
+      })
+    );
+  };
+
+  return injectableStore;
+}
+
+const injectableStore = configureInjectableStore(store);
+
+const getStore = () => injectableStore;
+<%_ } else { _%>
 
 const getStore = () => store;
+<%_ } _%>
 
 export type IRootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

package/generators/client/templates/react/src/main/webapp/app/config/translation-middleware.ts.ejs

@@ -0,0 +1,58 @@
+<%#
+ 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 { createListenerMiddleware } from '@reduxjs/toolkit';
+import { updateLocale, addTranslationSourcePrefix, loadLocale, loaded } from 'app/shared/reducers/locale';
+import getStore from './store';
+
+const listenerMiddleware = createListenerMiddleware();
+
+listenerMiddleware.startListening({
+  actionCreator: updateLocale,
+  async effect(action) {
+    const store = getStore();
+    const { sourcePrefixes, loadedKeys } = store.getState().locale;
+    const keys = (
+      await Promise.all(
+        [''].concat(sourcePrefixes).map(async sourcePrefix => {
+          const key = `${sourcePrefix}${action.payload}`;
+          if (loadedKeys.includes(key)) return;
+          await loadLocale(action.payload, sourcePrefix);
+          return key;
+        })
+      )
+    ).filter(Boolean);
+    store.dispatch(loaded(keys));
+  },
+});
+
+listenerMiddleware.startListening({
+  actionCreator: addTranslationSourcePrefix,
+  async effect(action) {
+    const store = getStore();
+    const { currentLocale, loadedKeys } = store.getState().locale;
+    const key = `${action.payload}${currentLocale}`;
+
+    if (!loadedKeys.includes(key)) {
+      await loadLocale(currentLocale, action.payload);
+    }
+    store.dispatch(loaded(key));
+  },
+});
+
+export default listenerMiddleware.middleware;

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

@@ -0,0 +1,45 @@
+<%#
+ 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<%_ if (applicationTypeMicroservice) { %>, { useEffect, useState } <% } %> from 'react';
+import { Translate } from 'react-jhipster';
+
+import MenuItem from 'app/shared/layout/menus/menu-item';
+<%_ if (applicationTypeMicroservice) { _%>
+import { addTranslationSourcePrefix } from 'app/shared/reducers/locale';
+import { useAppDispatch, useAppSelector } from 'app/config/store';
+<%_ } _%>
+
+const EntitiesMenu = () => {
+<%_ if (applicationTypeMicroservice) { _%>
+  const lastChange = useAppSelector(state => state.locale.lastChange);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(addTranslationSourcePrefix('services/<%= lowercaseBaseName %>/'));
+  }, [lastChange]);
+
+<%_ } _%>
+  return (
+    <>
+      {/* prettier-ignore */}
+      {/* jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here */}
+    </>
+  );
+};
+
+export default EntitiesMenu;