generator-jhipster 7.7.0 → 7.9.0

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Translate } from 'react-jhipster';
+import { Alert } from 'reactstrap';
+
+const ErrorLoading = () => {
+  return (
+    <div>
+      <Alert color="danger">Error loading component</Alert>
+    </div>
+  );
+};
+
+export default ErrorLoading;

package/generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs

@@ -2,18 +2,14 @@ import React from 'react';
 import { Translate } from 'react-jhipster';
 import { Alert } from 'reactstrap';
 
-class PageNotFound extends React.Component {
-  render() {
-    return (
-      <div>
-        <Alert color="danger">
-          <Translate contentKey="error.http.404">
-            The page does not exist.
-          </Translate>
-        </Alert>
-      </div>
-    );
-  }
-}
+const PageNotFound = () => {
+  return (
+    <div>
+      <Alert color="danger">
+        <Translate contentKey="error.http.404">The page does not exist.</Translate>
+      </Alert>
+    </div>
+  );
+};
 
 export default PageNotFound;

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.spec.tsx.ejs

@@ -19,8 +19,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter } from 'react-router-dom';
 
 import initStore from 'app/config/store';
 import Header from './header';
@@ -56,12 +55,11 @@ describe('Header', () => {
   const wrapper = (props = devProps) => {
     if (!mountedWrapper) {
       const store = initStore();
-      const history = createMemoryHistory();
       const { container } = render(
         <Provider store={store}>
-          <Router history={history}>
+          <MemoryRouter>
             <Header {...props} />
-          </Router>
+          </MemoryRouter>
         </Provider>
       );
       mountedWrapper = container.innerHTML;

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/account.spec.tsx.ejs

@@ -18,8 +18,7 @@
 -%>
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter } from 'react-router-dom';
 
 
 <%_ if (authenticationTypeOauth2) { _%>
@@ -32,11 +31,10 @@ describe('AccountMenu', () => {
 
   const authenticatedWrapper = () => {
     if (!mountedWrapper) {
-      const history = createMemoryHistory();
       const { container } = render(
-        <Router history={history}>
+        <MemoryRouter>
           <AccountMenu isAuthenticated />
-        </Router>
+        </MemoryRouter>
       );
       mountedWrapper = container.innerHTML;
     }
@@ -44,11 +42,10 @@ describe('AccountMenu', () => {
   };
   const guestWrapper = () => {
     if (!mountedWrapper) {
-      const history = createMemoryHistory();
       const { container } = (mountedWrapper = render(
-        <Router history={history}>
+        <MemoryRouter>
           <AccountMenu />
-        </Router>
+        </MemoryRouter>
       ));
       mountedWrapper = container.innerHTML;
     }

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/entities.tsx.ejs

@@ -16,14 +16,42 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import React from 'react';
-import MenuItem from 'app/shared/layout/menus/menu-item';
-import { Translate, translate } from 'react-jhipster';
+import React<% if (microfrontend) { %>, { Suspense }<% } %> from 'react';
+import { translate } from 'react-jhipster';
 import { NavDropdown } from './menu-components';
+<%_ if (microfrontend) { _%>
 
-export const EntitiesMenu = props => (
-  <NavDropdown icon="th-list" name={translate('global.menu.entities.main')} id="entity-menu" data-cy="entity" style={{ maxHeight: '80vh', overflow: 'auto'}}  >
-    <>{/* to avoid warnings when empty */}</>
-    {/* jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here */}
+const EntitiesMenuItems = React.lazy(() => import('app/entities/menu').catch(() => import('app/shared/error/error-loading')));
+  <%_ if (applicationTypeGateway) { _%>
+    <%_ for (const remote of microfrontends) { _%>
+const <%= remote.capitalizedBaseName %>EntitiesMenuItems = React.lazy(() => import('@<%= remote.lowercaseBaseName %>/entities-menu').catch(() => import('app/shared/error/error-loading')));
+    <%_ } _%>
+  <%_ } _%>
+<%_ } else { _%>
+import EntitiesMenuItems from 'app/entities/menu';
+<%_ } _%>
+
+export const EntitiesMenu = () => (
+  <NavDropdown
+    icon="th-list"
+    name={translate('global.menu.entities.main')}
+    id="entity-menu"
+    data-cy="entity"
+    style={{ maxHeight: '80vh', overflow: 'auto' }}
+  >
+<%_ if (microfrontend) { _%>
+    <Suspense fallback={<div>loading...</div>}>
+      <EntitiesMenuItems />
+    </Suspense>
+  <%_ if (applicationTypeGateway) { _%>
+    <%_ for (const remote of microfrontends) { _%>
+    <Suspense fallback={<div>loading...</div>}>
+      <<%= remote.capitalizedBaseName %>EntitiesMenuItems />
+    </Suspense>
+    <%_ } _%>
+  <%_ } _%>
+<%_ } else { _%>
+    <EntitiesMenuItems />
+<%_ } _%>
   </NavDropdown>
 );

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs

@@ -23,21 +23,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export interface IMenuItem {
+  children: React.ReactNode;
   icon: IconProp;
   to: string;
   id?: string;
-  "data-cy"?: string;
+  'data-cy'?: string;
 }
 
-export default class MenuItem extends React.Component<IMenuItem> {
+const MenuItem = (props: IMenuItem) => {
+  const { to, icon, id, children } = props;
 
-  render() {
-    const { to, icon, id, children } = this.props;
+  return (
+    <DropdownItem tag={Link} to={to} id={id} data-cy={props['data-cy']}>
+      <FontAwesomeIcon icon={icon} fixedWidth /> {children}
+    </DropdownItem>
+  );
+};
+
+export default MenuItem;
 
-    return (
-      <DropdownItem tag={Link} to={to} id={id} data-cy={this.props["data-cy"]} >
-        <FontAwesomeIcon icon={icon} fixedWidth /> {children}
-      </DropdownItem>
-    );
-  }
-}

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

@@ -16,6 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
+import { ReducersMapObject, combineReducers } from '@reduxjs/toolkit';
 import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';
 
 <%_ if (enableTranslation) { _%>
@@ -40,9 +41,12 @@ import passwordReset from 'app/modules/account/password-reset/password-reset.red
 import sessions from 'app/modules/account/sessions/sessions.reducer';
   <%_ } _%>
 <%_ } _%>
+<%_ if (applicationTypeMonolith) { _%>
+import entitiesReducers from 'app/entities/reducers';
+<%_ } _%>
 /* jhipster-needle-add-reducer-import - JHipster will add reducer here */
 
-const rootReducer = {
+const rootReducer: ReducersMapObject = {
   authentication,
 <%_ if (enableTranslation) { _%>
   locale,
@@ -62,8 +66,11 @@ const rootReducer = {
   sessions,
   <%_ } _%>
 <%_ } _%>
+  loadingBar,
   /* jhipster-needle-add-reducer-combine - JHipster will add reducer here */
-  loadingBar
+<%_ if (applicationTypeMonolith) { _%>
+  ...entitiesReducers,
+<%_ } _%>
 };
 
 export default rootReducer;

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/locale.spec.ts.ejs

@@ -25,7 +25,15 @@ describe('Locale reducer tests', () => {
   it('should correctly detect update in current locale state', () => {
     TranslatorContext.setLocale('en');
     expect(TranslatorContext.context.locale).toEqual('en');
-    const localeState = locale({ currentLocale: 'en' }, updateLocale('es'));
+    const localeState = locale(
+      {
+        currentLocale: 'en',
+        sourcePrefixes: [],
+        lastChange: new Date().getTime(),
+        loadedKeys: [],
+      },
+      updateLocale('es')
+    );
     expect(localeState).toMatchObject({
       currentLocale: 'es'
     });
@@ -48,8 +56,6 @@ describe('Locale reducer tests', () => {
 
       await store.dispatch(setLocale(defaultLocale));
       expect(store.getActions()).toEqual(expectedActions);
-      expect(TranslatorContext.context.translations).toBeDefined();
-      expect(Object.keys(TranslatorContext.context.translations)).toContainEqual(defaultLocale);
     });
   });
 });

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

@@ -24,16 +24,22 @@ import { AppThunk } from 'app/config/store';
 import { TranslatorContext } from 'react-jhipster';
 
 const initialState = {
-  currentLocale: ''
+  currentLocale: '',
+  sourcePrefixes: [],
+  lastChange: TranslatorContext.context.lastChange,
+  loadedKeys: [],
 };
 
 export type LocaleState =  Readonly<typeof initialState>;
 
-export const setLocale: (locale: string) => AppThunk = locale => async dispatch => {
-  if (!Object.keys(TranslatorContext.context.translations).includes(locale)) {
-    const response = await axios.get(`i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
+export const loadLocale = async (locale: string, prefix: string) => {
+  if (prefix || !Object.keys(TranslatorContext.context.translations).includes(locale)) {
+    const response = await axios.get(`${prefix}i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
     TranslatorContext.registerTranslations(locale, response.data);
   }
+};
+
+export const setLocale: (locale: string) => AppThunk = locale => dispatch => {
   dispatch(updateLocale(locale));
 };
 
@@ -49,10 +55,20 @@ export const LocaleSlice = createSlice({
       }
       state.currentLocale = currentLocale;
     },
+    loaded(state, action) {
+      state.lastChange = TranslatorContext.context.lastChange;
+      state.loadedKeys = state.loadedKeys.concat(action.payload);
+    },
+    addTranslationSourcePrefix(state, action) {
+      const sourcePrefix = action.payload;
+      if (!state.sourcePrefixes.includes(sourcePrefix)) {
+        state.sourcePrefixes = state.sourcePrefixes.concat(sourcePrefix);
+      }
+    },
   },
 });
 
-export const { updateLocale } = LocaleSlice.actions;
+export const { updateLocale, addTranslationSourcePrefix, loaded } = LocaleSlice.actions;
 
 // Reducer
 export default LocaleSlice.reducer;

package/generators/client/templates/react/src/main/webapp/app/typings.d.ts.ejs

@@ -27,3 +27,18 @@ declare module '*.json' {
     const value: any;
     export default value;
 }
+
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-routes' {
+  const _default: () => JSX.Element;
+  export default _default;
+}
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-menu' {
+  const _default: () => JSX.Element;
+  export default _default;
+}
+  <%_ } _%>
+<%_ } _%>

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

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => (<></>);

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

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => (<></>);

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

@@ -20,7 +20,7 @@
   "compilerOptions": {
     "jsx": "react",
     "target": "es6",
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
@@ -29,8 +29,8 @@
     "noImplicitAny": false,
     "suppressImplicitAnyIndexErrors": true,
     "outDir": "<%= DIST_DIR %>app",
-    "lib": ["dom", "es2015", "es2016", "es2017"],
-    "types": ["jest", "webpack-env"],
+    "lib": ["dom", "es2015", "es2016", "es2017", "es2019", "es2020"],
+    "types": ["webpack-env"],
     "allowJs": true,
     "checkJs": false,
     "baseUrl": "./",
@@ -41,8 +41,6 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["<%= MAIN_SRC_DIR %>app", "<%= TEST_SRC_DIR %>spec"],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["<%= MAIN_SRC_DIR %>app"],
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
 }

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

@@ -18,8 +18,17 @@
 -%>
 {
   "extends": "./tsconfig",
+  "include": ["<%= MAIN_SRC_DIR %>app", "<%= MAIN_SRC_DIR %>microfrontend"],
+  "exclude": [],
   "compilerOptions": {
-    "module": "commonjs",
+    "paths": {
+<%_ if (microfrontend && applicationTypeGateway) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+      "@<%= remote.lowercaseBaseName %>/*": ["<%= CLIENT_MAIN_SRC_DIR %>microfrontends/*"],
+  <%_ } _%>
+<%_ } _%>
+      "app/*": ["<%= CLIENT_MAIN_SRC_DIR %>app/*"]
+   },
     "types": ["jest", "webpack-env"]
   }
 }

package/generators/client/templates/react/webpack/webpack.common.js.ejs

@@ -101,7 +101,7 @@ return merge(
       /*
        ,
        Disabled due to https://github.com/jhipster/generator-jhipster/issues/16116
-       Can be enabled with @reduxjs/toolkit@>1.6.1 
+       Can be enabled with @reduxjs/toolkit@>1.6.1
       {
         enforce: 'pre',
         test: /\.jsx?$/,
@@ -113,17 +113,6 @@ return merge(
   stats: {
     children: false
   },
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        commons: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'all'
-        }
-      }
-    }
-  },
   plugins: [
     new webpack.EnvironmentPlugin({
       // react-jhipster requires LOG_LEVEL config.
@@ -138,19 +127,27 @@ return merge(
       SERVER_API_URL: JSON.stringify(environment.SERVER_API_URL),
     }),
     new ESLintPlugin({
-      extensions: ['js', 'ts', 'jsx', 'tsx']
+      baseConfig: {
+        parserOptions: {
+          project: ['../tsconfig.json'],
+        },
+      },
     }),
     new ForkTsCheckerWebpackPlugin(),
     new CopyWebpackPlugin({
       patterns: [
 <%_ if (applicationTypeGateway || applicationTypeMonolith) { _%>
         {
-          context: './node_modules/swagger-ui-dist/',
+          // 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: './node_modules/axios/dist/axios.min.js', to: 'swagger-ui/' },
+        {
+          from: require.resolve('axios/dist/axios.min.js'),
+          to: 'swagger-ui/',
+        },
         { from: './<%= MAIN_SRC_DIR %>swagger-ui/', to: 'swagger-ui/' },
 <%_ } _%>
         { from: './<%= MAIN_SRC_DIR %>content/', to: 'content/' },

package/generators/client/templates/react/webpack/webpack.dev.js.ejs

@@ -36,12 +36,12 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
   devtool: 'cheap-module-source-map', // https://reactjs.org/docs/cross-origin-errors.html
   mode: ENV,
   entry: [
-    './<%= CLIENT_MAIN_SRC_DIR %>app/index'
+    './<%= CLIENT_MAIN_SRC_DIR %>app/<%= microfrontend ? 'main' : 'index' %>'
   ],
   output: {
     path: utils.root('<%= DIST_DIR %>'),
-    filename: 'app/[name].bundle.js',
-    chunkFilename: 'app/[id].chunk.js'
+    filename: '[name].[contenthash:8].js',
+    chunkFilename: '[name].[chunkhash:8].chunk.js'
   },
   optimization: {
     moduleIds: 'named',
@@ -72,7 +72,7 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
     ]
   },
   devServer: {
-    hot: true,
+    hot: <%= !microfrontend %>,
     static: {
       directory: './<%= DIST_DIR %>',
     },
@@ -88,14 +88,14 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
         '/login',<% } %>
         '/auth'
       ],
-      target: `http${options.tls ? 's' : ''}://localhost:<%= serverPort %>`,
+      target: `http${options.tls ? 's' : ''}://localhost:<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>`,
       secure: false,
       changeOrigin: options.tls
     }<% if (communicationSpringWebsocket) { %>,{
       context: [
         '/websocket'
       ],
-      target: 'ws://127.0.0.1:<%= serverPort %>',
+      target: 'ws://127.0.0.1:<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>',
       ws: true
     }<% } %>],
     https: options.tls,
@@ -114,7 +114,7 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
         host: 'localhost',
         port: 9000,
         proxy: {
-          target: `http${options.tls ? 's' : ''}://localhost:<%= devServerPort %>`,
+          target: `http${options.tls ? 's' : ''}://localhost:${options.watch ? '<%= this.applicationTypeMicroservice ? gatewayServerPort : serverPort %>' : '<%= devServerPort %>'}`,
           ws: true,
           proxyOptions: {
               changeOrigin: false  //pass the Host header to the backend unchanged  https://github.com/Browsersync/browser-sync/issues/430
@@ -135,7 +135,6 @@ module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }
     }, {
       reload: false
     }),
-    new webpack.HotModuleReplacementPlugin(),
     new WebpackNotifierPlugin({
       title: '<%= humanizedBaseName %>',
       contentImage: path.join(__dirname, 'logo-jhipster.png')

package/generators/client/templates/react/webpack/webpack.microfrontend.js.jhi.react.ejs

@@ -0,0 +1,99 @@
+<%#
+ 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.
+-%>
+<&_ if (fragment.importsSection) { -&>
+<%_ if (applicationTypeMicroservice) { _%>
+const { DefinePlugin } = require('webpack');
+<%_ } _%>
+<&_ } -&>
+<&_ if (fragment.moduleFederationSection) { -&>
+<%_ if (applicationTypeGateway) { _%>
+        remotes: {
+  <%_ for (const microfrontend of microfrontends) { _%>
+          '@<%= microfrontend.lowercaseBaseName %>': `<%= microfrontend.lowercaseBaseName %>@/<%= microfrontend.endpointPrefix %>/remoteEntry.js`,
+  <%_ } _%>
+        },
+<%_ } _%>
+<%_ if (applicationTypeMicroservice) { _%>
+        exposes: {
+          './entities-menu': './<%= CLIENT_MAIN_SRC_DIR %>app/entities/menu',
+          './entities-routes': './<%= CLIENT_MAIN_SRC_DIR %>app/entities/routes',
+        },
+<%_ } _%>
+        shared: {
+          ...Object.fromEntries(Object.entries(packageJson.dependencies).map(([module]) => ([module, { singleton: true, shareScope: 'default' }]))),
+          'app/config/constants': {
+            singleton: true,
+            import: 'app/config/constants',
+            requiredVersion: appVersion,
+          },
+          'app/config/store': {
+            singleton: true,
+            import: 'app/config/store',
+            requiredVersion: appVersion,
+          },
+          'app/shared/error/error-boundary-routes': {
+            singleton: true,
+            import: 'app/shared/error/error-boundary-routes',
+            requiredVersion: appVersion,
+          },
+          'app/shared/layout/menus/menu-components': {
+            singleton: true,
+            import: 'app/shared/layout/menus/menu-components',
+            requiredVersion: appVersion,
+          },
+          'app/shared/layout/menus/menu-item': {
+            singleton: true,
+            import: 'app/shared/layout/menus/menu-item',
+            requiredVersion: appVersion,
+          },
+          'app/shared/reducers': {
+            singleton: true,
+            import: 'app/shared/reducers',
+            requiredVersion: appVersion,
+          },
+          'app/shared/reducers/locale': {
+            singleton: true,
+            import: 'app/shared/reducers/locale',
+            requiredVersion: appVersion,
+          },
+          'app/shared/reducers/reducer.utils': {
+            singleton: true,
+            import: 'app/shared/reducers/reducer.utils',
+            requiredVersion: appVersion,
+          },
+          'app/shared/util/date-utils': {
+            singleton: true,
+            import: 'app/shared/util/date-utils',
+            requiredVersion: appVersion,
+          },
+          'app/shared/util/entity-utils': {
+            singleton: true,
+            import: 'app/shared/util/entity-utils',
+            requiredVersion: appVersion,
+          },
+        },
+<&_ } -&>
+<&_ if (fragment.pluginsSection) { -&>
+<%_ if (applicationTypeMicroservice) { _%>
+      new DefinePlugin({
+        <%= _.upperCase(baseName) %>_I18N_RESOURCES_PREFIX: JSON.stringify(''),
+      }),
+<%_ } _%>
+<&_ } -&>
+