generator-jhipster 8.0.0-rc.1 → 8.1.0

package/dist/generators/react/resources/package.json

@@ -1,25 +1,25 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@reduxjs/toolkit": "1.9.7",
-    "axios": "1.5.1",
+    "axios": "1.6.2",
     "bootstrap": "5.3.2",
     "bootswatch": "5.3.2",
     "lodash": "4.17.21",
     "path-browserify": "1.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.47.0",
+    "react-hook-form": "7.49.0",
     "react-jhipster": "0.25.3",
     "react-loadable": "5.5.0",
     "react-redux": "8.1.3",
-    "react-redux-loading-bar": "5.0.4",
-    "react-router-dom": "6.16.0",
+    "react-redux-loading-bar": "5.0.5",
+    "react-router-dom": "6.20.1",
     "react-toastify": "9.1.3",
     "react-transition-group": "4.4.5",
-    "reactstrap": "9.2.0",
+    "reactstrap": "9.2.1",
     "redux": "4.2.1",
     "redux-thunk": "2.4.2",
     "sonar-scanner": "3.1.0",
@@ -27,32 +27,33 @@
     "uuid": "9.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "14.0.0",
-    "@types/jest": "29.5.5",
-    "@types/lodash": "4.14.199",
-    "@types/node": "18.18.5",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
-    "@types/react-redux": "7.1.27",
+    "@module-federation/utilities": "3.0.3-0",
+    "@testing-library/react": "14.1.2",
+    "@types/jest": "29.5.11",
+    "@types/lodash": "4.14.202",
+    "@types/node": "18.19.3",
+    "@types/react": "18.2.43",
+    "@types/react-dom": "18.2.17",
+    "@types/react-redux": "7.1.31",
     "@types/redux": "3.6.31",
-    "@types/webpack-env": "1.18.2",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/webpack-env": "1.18.4",
+    "@typescript-eslint/eslint-plugin": "6.13.2",
+    "@typescript-eslint/parser": "6.13.2",
     "autoprefixer": "10.4.16",
     "browser-sync": "2.29.3",
     "browser-sync-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "11.0.0",
-    "core-js": "3.33.0",
+    "core-js": "3.34.0",
     "cross-env": "7.0.3",
     "css-loader": "6.8.1",
     "css-minimizer-webpack-plugin": "5.0.1",
-    "eslint": "8.51.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint": "8.55.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-webpack-plugin": "4.0.1",
     "folder-hash": "4.0.4",
-    "fork-ts-checker-webpack-plugin": "9.0.0",
-    "html-webpack-plugin": "5.5.3",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
+    "html-webpack-plugin": "5.5.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -62,26 +63,26 @@
     "merge-jsons-webpack-plugin": "2.0.1",
     "mini-css-extract-plugin": "2.7.6",
     "postcss-loader": "7.3.3",
-    "postcss-rtlcss": "4.0.8",
+    "postcss-rtlcss": "4.0.9",
     "react-infinite-scroll-component": "6.1.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "5.0.5",
-    "sass": "1.69.3",
+    "sass": "1.69.5",
     "sass-loader": "13.3.2",
     "simple-progress-webpack-plugin": "2.0.0",
-    "sinon": "16.1.0",
+    "sinon": "17.0.1",
     "source-map-loader": "4.0.1",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "thread-loader": "4.0.2",
     "ts-jest": "29.1.1",
-    "ts-loader": "9.5.0",
-    "typescript": "5.2.2",
-    "webpack": "5.88.2",
+    "ts-loader": "9.5.1",
+    "typescript": "5.3.3",
+    "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.9.0",
+    "webpack-merge": "5.10.0",
     "webpack-notifier": "1.15.0",
     "workbox-webpack-plugin": "7.0.0"
   }

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

@@ -45,6 +45,7 @@
     "react-loadable": "<%= nodeDependencies['react-loadable'] %>",
     "react-redux": "<%= nodeDependencies['react-redux'] %>",
     "react-redux-loading-bar": "<%= nodeDependencies['react-redux-loading-bar'] %>",
+    "react-router": "<%= nodeDependencies['react-router-dom'] %>",
     "react-router-dom": "<%= nodeDependencies['react-router-dom'] %>",
     "react-toastify": "<%= nodeDependencies['react-toastify'] %>",
     "react-transition-group": "<%= nodeDependencies['react-transition-group'] %>",
@@ -64,6 +65,9 @@
     <%_ } _%>
   },
   "devDependencies": {
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>",
+<%_ } _%>
     "@testing-library/react": "<%= nodeDependencies['@testing-library/react'] %>",
     "@types/jest": "<%= nodeDependencies['@types/jest'] %>",
     "@types/lodash": "<%= nodeDependencies['@types/lodash'] %>",
@@ -104,11 +108,6 @@
 <%_ if (enableI18nRTL) { _%>
     "postcss-rtlcss": "<%= nodeDependencies['postcss-rtlcss'] %>",
 <%_ } _%>
-    "prettier": "<%= nodeDependencies['prettier'] %>",
-<%_ if (!skipServer) { _%>
-    "prettier-plugin-java": "<%= nodeDependencies['prettier-plugin-java'] %>",
-<%_ } _%>
-    "prettier-plugin-packagejson": "<%= nodeDependencies['prettier-plugin-packagejson'] %>",
     "react-infinite-scroll-component": "<%= nodeDependencies['react-infinite-scroll-component'] %>",
     "redux-mock-store": "<%= nodeDependencies['redux-mock-store'] %>",
     "rimraf": "<%= nodeDependencies['rimraf'] %>",

package/dist/generators/react/templates/src/main/webapp/app/config/icon-loader.ts.ejs

@@ -16,39 +16,41 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
-import { faBan } from '@fortawesome/free-solid-svg-icons/faBan';
-import { faAsterisk } from '@fortawesome/free-solid-svg-icons/faAsterisk';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faBell } from '@fortawesome/free-solid-svg-icons/faBell';
-import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
-import { faCloud } from '@fortawesome/free-solid-svg-icons/faCloud';
-import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
-import { faFlag } from '@fortawesome/free-solid-svg-icons/faFlag';
-import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
-import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
-import { faList } from '@fortawesome/free-solid-svg-icons/faList';
-import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
-import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
-import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
-import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';
-import { faSync } from '@fortawesome/free-solid-svg-icons/faSync';
-import { faRoad } from '@fortawesome/free-solid-svg-icons/faRoad';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons/faTachometerAlt';
-import { faTasks } from '@fortawesome/free-solid-svg-icons/faTasks';
-import { faThList } from '@fortawesome/free-solid-svg-icons/faThList';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
-import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
-import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
-import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
-import { faUsers } from '@fortawesome/free-solid-svg-icons/faUsers';
-import { faUsersCog } from '@fortawesome/free-solid-svg-icons/faUsersCog';
-import { faWrench } from '@fortawesome/free-solid-svg-icons/faWrench';
+import {
+  faCogs,
+  faBan,
+  faAsterisk,
+  faArrowLeft,
+  faBell,
+  faBook,
+  faCloud,
+  faDatabase,
+  faEye,
+  faFlag,
+  faHeart,
+  faHome,
+  faList,
+  faLock,
+  faPencilAlt,
+  faPlus,
+  faSave,
+  faSearch,
+  faSort,
+  faSync,
+  faRoad,
+  faSignInAlt,
+  faSignOutAlt,
+  faTachometerAlt,
+  faTasks,
+  faThList,
+  faTimesCircle,
+  faTrash,
+  faUser,
+  faUserPlus,
+  faUsers,
+  faUsersCog,
+  faWrench,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 

package/dist/generators/react/templates/src/main/webapp/app/config/notification-middleware.spec.ts.ejs

@@ -153,7 +153,7 @@ describe('Notification Middleware', () => {
     },
   };
 
-  const UNKNON_400_ERROR = {
+  const UNKNOWN_400_ERROR = {
     type: ERROR_TYPE,
     error: {
       isAxiosError: true,
@@ -163,7 +163,7 @@ describe('Notification Middleware', () => {
     },
   };
 
-  const UNKNON_ERROR = {
+  const UNKNOWN_ERROR = {
     type: ERROR_TYPE,
     error: {
       isAxiosError: true,
@@ -256,13 +256,13 @@ describe('Notification Middleware', () => {
   });
 
   it('should trigger an error toast message and return error for unknown 400 error', () => {
-    expect(store.dispatch(UNKNON_400_ERROR).error.response.status).toEqual(400);
+    expect(store.dispatch(UNKNOWN_400_ERROR).error.response.status).toEqual(400);
     const toastMsg = (toastify.toast as any).error.getCall(0).args[0];
     expect(toastMsg).toContain('Unknown error!');
   });
 
   it('should trigger an error toast message and return error for unknown error', () => {
-    expect(store.dispatch(UNKNON_ERROR).error.isAxiosError).toEqual(true);
+    expect(store.dispatch(UNKNOWN_ERROR).error.isAxiosError).toEqual(true);
     const toastMsg = (toastify.toast as any).error.getCall(0).args[0];
     expect(toastMsg).toContain('Unknown error!');
   });

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-detail.tsx.ejs

@@ -114,14 +114,13 @@ _%>
             </dd>
 <%_ } _%>
 <%_ for (relationship of relationships) {
-    const ownerSide = relationship.ownerSide;
     const relationshipName = relationship.relationshipName;
     const relationshipFieldName = relationship.relationshipFieldName;
     const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
     const relationshipNameHumanized = relationship.relationshipNameHumanized;
     const otherEntityPkName = relationship.otherEntity.primaryKey && relationship.otherEntity.primaryKey.name || 'id';
     const otherEntityField = relationship.otherEntityField; _%>
-  <%_ if (ownerSide) { _%>
+  <%_ if (relationship.persistableRelationship) { _%>
             <dt>
               <Translate contentKey="<%= i18nKeyPrefix %>.<%= relationshipName %>">
                 <%= relationshipNameHumanized %>

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.tsx.ejs

@@ -50,16 +50,16 @@ let uniqueRelationFields = new Set();
 
 Object.keys(differentRelationships).forEach(key => {
 
-  const hasAnyRelationshipQuery = differentRelationships[key].some(rel =>
-    (rel.relationshipOneToOne && rel.ownerSide && !rel.otherEntityUser)
-      || !rel.relationshipOneToMany);
+  const hasAnyRelationshipQuery = differentRelationships[key].some(rel => rel.persistableRelationship);
   if (hasAnyRelationshipQuery) {
     hasRelationshipQuery = true;
     differentRelationships[key].forEach(rel => {
-      if (rel.relationshipManyToMany && rel.ownerSide) {
-        manyToManyOwners.add(rel);
-      } else {
-        relFieldNames.add(rel);
+      if (rel.persistableRelationship) {
+        if (rel.relationshipManyToMany) {
+          manyToManyOwners.add(rel);
+        } else {
+          relFieldNames.add(rel);
+        }
       }
     });
   }
@@ -148,13 +148,18 @@ export const <%= entityReactName %>Update = () => {
     }
   }, [updateSuccess]);
 
+  // eslint-disable-next-line complexity
   const saveEntity = values => {
-<%_ for (field of fields.filter(field => !field.id)) {
+<%_ for (field of fields) {
     const fieldName = field.fieldName;
 _%>
   <%_ if (field.fieldTypeTimed)  { _%>
     values.<%= fieldName %> = convertDateTimeToServer(values.<%= fieldName %>);
-  <%_ } _%>
+  <%_ } else if (field.fieldTypeNumeric) { _%>
+    if (values.<%= fieldName %> !== undefined && typeof values.<%= fieldName %> !== 'number') {
+      values.<%= fieldName %> = Number(values.<%= fieldName %>);
+    }
+  <%_ } _%>  
 <%_ } _%>
 
     const entity = {
@@ -164,7 +169,7 @@ _%>
       <%= rel.relationshipFieldNamePlural %>: mapIdList(values.<%= rel.relationshipFieldNamePlural %>),
 <%_ }) _%>
 <%_ relFieldNames.forEach(rel => { _%>
-<%_ if (rel.relationshipManyToOne || (rel.ownerSide && rel.relationshipOneToOne))  { _%>
+<%_ if (rel.persistableRelationship && !rel.collection)  { _%>
         <%= rel.relationshipFieldName %>: <%= rel.otherEntityNamePlural %>.find(it => it.<%= rel.otherEntity.primaryKey.name %>.toString() === values.<%= rel.relationshipFieldName %>.toString()),
 <%_ } _%>
 <%_ }) _%>
@@ -208,9 +213,9 @@ _%>
     const otherEntityPkName = rel.otherEntity.primaryKey && rel.otherEntity.primaryKey.name || 'id';
     const relationshipFieldName = rel.relationshipFieldName;
     const relationshipFieldNamePlural = rel.relationshipFieldNamePlural;
-  if (rel.relationshipManyToOne || (rel.relationshipOneToOne && rel.ownerSide)) { _%>
+  if (rel.persistableRelationship && !rel.collection) { _%>
           <%= relationshipFieldName %>: <%= entityInstance %>Entity?.<%= relationshipFieldName %>?.<%= otherEntityPkName %>,
-  <%_ } else if (rel.relationshipManyToMany && rel.ownerSide) { _%>
+  <%_ } else if (rel.persistableRelationship) { _%>
           <%= relationshipFieldNamePlural %>: <%= entityInstance %>Entity?.<%= relationshipFieldNamePlural %>?.map(e => e.<%= otherEntityPkName %>.toString()),
   <%_ } _%>
 <%_ }) _%>
@@ -316,7 +321,6 @@ _%>
   <%_ } _%>
 <%_ } _%>
 <%_ relationships.forEach(rel => {
-    const ownerSide = rel.ownerSide;
     const otherEntityPkName = rel.otherEntity.primaryKey && rel.otherEntity.primaryKey.name || 'id';
     const otherEntityNamePlural = rel.otherEntityNamePlural;
     const relationshipName = rel.relationshipName;
@@ -326,7 +330,7 @@ _%>
     const otherEntityField = rel.otherEntityField;
     const relationshipRequired = rel.relationshipRequired;
     const translationKey = `${i18nKeyPrefix}.${relationshipName}`; _%>
-  <%_ if (rel.relationshipManyToOne || (rel.relationshipOneToOne && ownerSide)) { _%>
+  <%_ if (rel.persistableRelationship && !rel.collection) { _%>
           <ValidatedField
             id="<%= entityFileName %>-<%= relationshipName %>"
             name="<%= relationshipFieldName %>"
@@ -355,7 +359,7 @@ _%>
     <%_ if (relationshipRequired) { _%>
             <FormText><Translate contentKey="entity.validation.required">This field is required.</Translate></FormText>
     <%_ } _%>
-  <%_ } else if (rel.relationshipManyToMany && rel.ownerSide) { _%>
+  <%_ } else if (rel.persistableRelationship) { _%>
           <ValidatedField
         <%_ if (enableTranslation) { _%>
             label={translate('<%= i18nKeyPrefix %>.<%= relationshipName %>')}

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.reducer.ts.ejs

@@ -48,7 +48,7 @@ const initialState: EntityState<I<%= entityReactName %>> = {
 
 const apiUrl = '<%= entityApi %>api/<%= entityApiUrl %>';
 <%_ if (searchEngineAny) { _%>
-const apiSearchUrl = '<%= entityApi %>api/_search/<%= entityApiUrl %>';
+const apiSearchUrl = '<%= entityApi %>api/<%= entityApiUrl %>/_search';
 <%_ } _%>
 
 // Actions

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.tsx.ejs

@@ -376,9 +376,7 @@ export const <%= entityReactName %> = () => {
                   <th className="hand" onClick={sort('<%= field.fieldName %>')} ><Translate contentKey="<%= `${i18nKeyPrefix}.${field.fieldName}` %>"><%= field.fieldNameHumanized %></Translate> <FontAwesomeIcon icon={getSortIconByFieldName('<%= field.fieldName %>')} /></th>
 <%_ } _%>
 <%_ for (relationship of relationships) { _%>
-    <%_ if (relationship.relationshipManyToOne
-    || (relationship.relationshipOneToOne && relationship.ownerSide)
-    || (relationship.relationshipManyToMany && relationship.ownerSide && paginationNo)) { _%>
+    <%_ if (relationship.persistableRelationship && (paginationNo || !relationship.collection)) { _%>
                   <th><Translate contentKey="<%= `${i18nKeyPrefix}.${relationship.relationshipName}` %>"><%= relationship.relationshipNameHumanized %></Translate> <FontAwesomeIcon icon="sort" /></th>
     <%_ } _%>
 <%_ } _%>
@@ -442,14 +440,11 @@ _%>
 <%_ } _%>
 <%_ for (relationship of relationships) {
   const otherEntity = relationship.otherEntity;
-  const ownerSide = relationship.ownerSide;
   const relationshipFieldName = relationship.relationshipFieldName;
   const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
   const otherEntityPkName = relationship.otherEntity.primaryKey && relationship.otherEntity.primaryKey.name || 'id';
   const otherEntityField = relationship.otherEntityField; _%>
-  <%_ if (relationship.relationshipManyToOne
-  || (relationship.relationshipOneToOne && ownerSide)
-  || (relationship.relationshipManyToMany && ownerSide && paginationNo)) { _%>
+  <%_ if (relationship.persistableRelationship && (paginationNo || !relationship.collection)) { _%>
                     <td>
     <%_ if (relationship.otherEntityUser) { _%>
       <%_ if (relationship.relationshipManyToMany) { _%>
@@ -491,7 +486,7 @@ _%>
                           <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/edit<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="primary" size="sm" data-cy="entityEditButton">
                             <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
                           </Button>
-                          <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="danger" size="sm" data-cy="entityDeleteButton">
+                          <Button onClick={() => <% if (entityInstance !== 'window' ) { %>window.<% } %>location.href=`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="danger" size="sm" data-cy="entityDeleteButton">
                             <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.delete">Delete</Translate></span>
                           </Button>
 <%_ } _%>

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityModel_.model.ts.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <%
-const variablesWithTypes = this.generateEntityClientFields(primaryKey, fields, relationships, dto, 'string', embedded);
+const variablesWithTypes = this.generateEntityClientFields(primaryKey, fields, relationships, dto, customDateType = 'dayjs.Dayjs', embedded);
 const typeImports = this.generateEntityClientImports(relationships, dto);
 const defaultVariablesValues = this.generateEntityClientFieldDefaultValues(fields.filter(field => !field.id));
 const enumImports = this.generateEntityClientEnumImports(fields.filter(field => !field.id));

package/dist/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs

@@ -50,7 +50,7 @@ export const Home = () => {
         <span className="hipster rounded" />
       </Col>
       <Col md="9">
-        <h2><Translate contentKey="home.title">Welcome, <%= backendType %> Hipster!</Translate></h2>
+        <h1 className="display-4"><Translate contentKey="home.title">Welcome, <%= backendType %> Hipster!</Translate></h1>
         <p className="lead"><Translate contentKey="home.subtitle">This is your homepage</Translate></p>
         {
           (account?.login) ? (

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

@@ -19,6 +19,9 @@
 import React<% if (applicationTypeGateway && microfrontend) { %>, { Suspense }<% } %> from 'react';
 import { Route <% if (communicationSpringWebsocket) { %>, useLocation <% } %>} from 'react-router-dom';
 import Loadable from 'react-loadable';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 
 <%_ if (!authenticationTypeOauth2) { _%>
 import Login from 'app/modules/login/login';
@@ -59,10 +62,14 @@ const Admin = Loadable({
 <%_ if (applicationTypeGateway && microfrontend) { _%>
 
   <%_ for (const remote of microfrontends) { _%>
-const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => import('@<%= remote.lowercaseBaseName %>/entities-routes').catch(() => import('app/shared/error/error-loading')));
+const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => importRemote<any>({
+  url: `./services/<%= remote.lowercaseBaseName %>`,
+  scope: '<%= remote.lowercaseBaseName %>',
+  module: './entities-routes',
+}).catch(() => import('app/shared/error/error-loading')));
+
   <%_ } _%>
 <%_ } _%>
-
 const AppRoutes = () => {
 <%_ if (communicationSpringWebsocket) { _%>
   const pageLocation = useLocation();

package/dist/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs

@@ -36,7 +36,7 @@ export const Brand = () => (
 <NavbarBrand tag={Link} to="/" className="brand-logo">
   <BrandIcon />
   <span className="brand-title"><Translate contentKey="global.title"><%= capitalizedBaseName %></Translate></span>
-  <span className="navbar-version">{VERSION}</span>
+  <span className="navbar-version">{VERSION.toLowerCase().startsWith('v') ? VERSION : `v${VERSION}`}</span>
 </NavbarBrand>
 );
 

package/dist/generators/react/templates/src/main/webapp/app/shared/layout/header/header.scss.ejs

@@ -21,7 +21,7 @@ $header-color-secondary: #bbb;
 $header-color-hover: darken($header-color, 20%);
 
 /* ==========================================================================
-Developement Ribbon
+Development Ribbon
 ========================================================================== */
 .ribbon {
   background-color: rgba(170, 0, 0, 0.5);
@@ -33,7 +33,7 @@ Developement Ribbon
   transform: rotate(-45deg);
   overflow: hidden;
   position: absolute;
-  top: 30px;
+  top: 40px;
   white-space: nowrap;
   width: 15em;
   z-index: 99999;
@@ -105,7 +105,7 @@ Navbar styles
 }
 
 .navbar-version {
-  font-size: 10px;
+  font-size: 0.65em;
   color: $header-color-secondary;
   padding: 0 0 0 10px;
 }
@@ -119,13 +119,14 @@ Navbar styles
     width: auto;
     display: inline-block;
     img {
-      height: 45px;
+      width: 45px;
     }
   }
 }
 
 .brand-title {
-  font-size: 24px;
+  font-size: 1.25rem;
+  margin-left: .25rem;
   color: $header-color;
   &:hover {
     color: $header-color-hover;

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

@@ -19,12 +19,21 @@
 import React<% if (microfrontend) { %>, { Suspense }<% } %> from 'react';
 import { translate } from 'react-jhipster';
 import { NavDropdown } from './menu-components';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 <%_ if (microfrontend) { _%>
 
 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')));
+const <%= remote.capitalizedBaseName %>EntitiesMenuItems = React.lazy(async () => importRemote<any>({
+  url: `./services/<%= remote.lowercaseBaseName %>`,
+  scope: '<%= remote.lowercaseBaseName %>',
+  module: './entities-menu',
+}).catch(() => import('app/shared/error/error-loading')));
+
     <%_ } _%>
   <%_ } _%>
 <%_ } else { _%>

package/dist/generators/react/templates/src/main/webapp/app/shared/reducers/reducer.utils.ts.ejs

@@ -129,7 +129,7 @@ export const createEntitySlice = <T, Reducers extends SliceCaseReducers<EntitySt
       extraReducers(builder);
       /*
        * Common rejection logic is handled here.
-       * If you want to add your own rejcetion logic, pass `skipRejectionHandling: true`
+       * If you want to add your own rejection logic, pass `skipRejectionHandling: true`
        * while calling `createEntitySlice`
        * */
       if (!skipRejectionHandling) {

package/dist/generators/react/templates/src/main/webapp/app/shared/util/date-utils.ts.ejs

@@ -23,6 +23,6 @@ import { APP_LOCAL_DATETIME_FORMAT } from 'app/config/constants';
 export const convertDateTimeFromServer = date =>
   date ? dayjs(date).format(APP_LOCAL_DATETIME_FORMAT) : null;
 
-export const convertDateTimeToServer = date => date ? dayjs(date).toDate() : null;
+export const convertDateTimeToServer = (date?: string) : dayjs.Dayjs | null => (date ? dayjs(date) : null);
 
 export const displayDefaultDateTime = () => dayjs().startOf('day').format(APP_LOCAL_DATETIME_FORMAT);

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

@@ -18,7 +18,7 @@
 -%>
 {
   "extends": "./tsconfig",
-  "include": ["<%= this.relativeDir(clientRootDir, clientSrcDir) %>app", "<%= this.relativeDir(clientRootDir, clientSrcDir) %>microfrontend"],
+  "include": ["<%= this.relativeDir(clientRootDir, clientSrcDir) %>app", "<%= this.relativeDir(clientRootDir, clientSrcDir) %>microfrontends"],
   "exclude": [],
   "compilerOptions": {
     "paths": {