generator-jhipster 7.2.0 → 7.4.1

package/generators/client/templates/vue/package.json

@@ -2,80 +2,71 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "2.0.2",
-    "axios": "0.21.4",
-    "bootstrap": "4.6.0",
+    "@fortawesome/vue-fontawesome": "2.0.6",
+    "axios": "0.24.0",
+    "bootstrap": "4.6.1",
     "bootstrap-vue": "2.21.2",
-    "bootswatch": "5.1.1",
-    "swagger-ui-dist": "3.52.2",
+    "bootswatch": "5.1.3",
+    "swagger-ui-dist": "4.1.2",
     "vue": "2.6.14",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
-    "vue-router": "3.5.2",
-    "vue-i18n": "8.25.1",
+    "vue-router": "3.5.3",
+    "vue-i18n": "8.26.7",
     "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.6",
     "vuex": "3.6.2",
     "vue2-filters": "0.13.0"
   },
   "devDependencies": {
-    "@types/jest": "27.0.1",
-    "@types/node": "16.9.1",
-    "@types/sinon": "10.0.2",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.11",
+    "@types/sinon": "10.0.6",
     "@types/vuelidate": "0.7.15",
-    "@typescript-eslint/eslint-plugin": "4.31.1",
-    "@typescript-eslint/parser": "4.31.1",
+    "@typescript-eslint/eslint-plugin": "5.5.0",
+    "@typescript-eslint/parser": "5.5.0",
     "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "7.0.0",
-    "@vue/cli-plugin-eslint": "4.5.13",
-    "@vue/cli-plugin-typescript": "4.5.13",
-    "@vue/cli-service": "4.5.13",
-    "@vue/test-utils": "1.2.2",
+    "@vue/eslint-config-typescript": "9.1.0",
+    "@vue/vue2-jest": "27.0.0-alpha.3",
+    "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.3.4",
-    "babel-core": "7.0.0-bridge.0",
-    "browser-sync": "2.27.5",
+    "autoprefixer": "10.4.0",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "9.0.1",
-    "css-loader": "6.2.0",
-    "css-minimizer-webpack-plugin": "3.0.2",
-    "file-loader": "6.2.0",
+    "copy-webpack-plugin": "10.0.0",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.1",
-    "fork-ts-checker-webpack-plugin": "6.3.3",
-    "html-webpack-plugin": "5.3.2",
-    "jest": "27.2.0",
-    "jest-junit": "12.2.0",
+    "fork-ts-checker-webpack-plugin": "6.5.0",
+    "html-webpack-plugin": "5.5.0",
+    "jest": "27.4.3",
+    "jest-junit": "13.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
-    "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "2.3.0",
-    "node-notifier": "9.0.1",
+    "merge-jsons-webpack-plugin": "2.0.1",
+    "mini-css-extract-plugin": "2.4.5",
     "numeral": "2.0.6",
-    "portfinder": "1.0.28",
-    "postcss": "8.3.6",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.1.1",
+    "postcss-loader": "6.2.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.39.2",
-    "sass-loader": "12.1.0",
-    "sinon": "11.1.2",
-    "terser-webpack-plugin": "5.2.4",
-    "ts-jest": "27.0.5",
-    "ts-loader": "9.2.5",
-    "eslint": "6.8.0",
+    "sass": "1.44.0",
+    "sass-loader": "12.3.0",
+    "sinon": "12.0.1",
+    "terser-webpack-plugin": "5.2.5",
+    "ts-jest": "27.0.7",
+    "ts-loader": "9.2.6",
+    "eslint": "8.3.0",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-vue": "7.17.0",
-    "typescript": "4.4.3",
-    "url-loader": "4.1.1",
-    "webpack": "5.52.1",
-    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.8.0",
-    "webpack-dev-server": "4.2.1",
+    "eslint-plugin-vue": "8.1.1",
+    "typescript": "4.5.2",
+    "webpack": "5.64.4",
+    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "4.6.0",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.3.0",
+    "workbox-webpack-plugin": "6.4.1",
     "vue-jest": "3.0.7",
     "vue-loader": "15.9.8"
   }

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

@@ -19,7 +19,7 @@
 {
   "name": "<%= dasherizedBaseName %>",
   "version": "0.0.0",
-  "description": "Description for <%= baseName  %>",
+  "description": "<%= projectDescription %>",
   "private": true,
   "license": "UNLICENSED",
   "cacheDirectories": [
@@ -66,27 +66,21 @@
     "ts-node": "8.10.1",
     "webdriver-manager": "12.1.8",
 <%_ } _%>
-    "babel-core": "<%= dependabotPackageJson.devDependencies['babel-core'] %>",
     "@types/jest": "<%= dependabotPackageJson.devDependencies['@types/jest'] %>",
     "@types/node": "<%= dependabotPackageJson.devDependencies['@types/node'] %>",
     "@types/sinon": "<%= dependabotPackageJson.devDependencies['@types/sinon'] %>",
     "@types/vuelidate": "<%= dependabotPackageJson.devDependencies['@types/vuelidate'] %>",
     "@typescript-eslint/eslint-plugin": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/eslint-plugin'] %>",
     "@typescript-eslint/parser": "<%= dependabotPackageJson.devDependencies['@typescript-eslint/parser'] %>",
-    "@vue/cli-plugin-eslint": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-eslint'] %>",
-    "@vue/cli-plugin-typescript": "<%= dependabotPackageJson.devDependencies['@vue/cli-plugin-typescript'] %>",
-    "@vue/cli-service": "<%= dependabotPackageJson.devDependencies['@vue/cli-service'] %>",
     "@vue/eslint-config-prettier": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-prettier'] %>",
     "@vue/eslint-config-typescript": "<%= dependabotPackageJson.devDependencies['@vue/eslint-config-typescript'] %>",
     "@vue/test-utils": "<%= dependabotPackageJson.devDependencies['@vue/test-utils'] %>",
     "axios-mock-adapter": "<%= dependabotPackageJson.devDependencies['axios-mock-adapter'] %>",
     "autoprefixer": "<%= dependabotPackageJson.devDependencies['autoprefixer'] %>",
-    "browser-sync": "<%= dependabotPackageJson.devDependencies['browser-sync'] %>",
     "browser-sync-webpack-plugin": "<%= dependabotPackageJson.devDependencies['browser-sync-webpack-plugin'] %>",
     "copy-webpack-plugin": "<%= dependabotPackageJson.devDependencies['copy-webpack-plugin'] %>",
     "css-loader": "<%= dependabotPackageJson.devDependencies['css-loader'] %>",
     "css-minimizer-webpack-plugin": "<%= dependabotPackageJson.devDependencies['css-minimizer-webpack-plugin'] %>",
-    "file-loader": "<%= dependabotPackageJson.devDependencies['file-loader'] %>",
     "fork-ts-checker-webpack-plugin": "<%= dependabotPackageJson.devDependencies['fork-ts-checker-webpack-plugin'] %>",
 <%_ if (!skipJhipsterDependencies) { _%>
     "generator-jhipster": "<%= packagejs.version %>",
@@ -105,10 +99,7 @@
     "merge-jsons-webpack-plugin": "<%= dependabotPackageJson.devDependencies['merge-jsons-webpack-plugin'] %>",
 <%_ } _%>
     "mini-css-extract-plugin": "<%= dependabotPackageJson.devDependencies['mini-css-extract-plugin'] %>",
-    "node-notifier": "<%= dependabotPackageJson.devDependencies['node-notifier'] %>",
     "numeral": "<%= dependabotPackageJson.devDependencies['numeral'] %>",
-    "portfinder": "<%= dependabotPackageJson.devDependencies['portfinder'] %>",
-    "postcss": "<%= dependabotPackageJson.devDependencies['postcss'] %>",
     "postcss-import": "<%= dependabotPackageJson.devDependencies['postcss-import'] %>",
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
     "postcss-url": "<%= dependabotPackageJson.devDependencies['postcss-url'] %>",
@@ -131,8 +122,11 @@
     "eslint-plugin-prettier": "<%= dependabotPackageJson.devDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-vue": "<%= dependabotPackageJson.devDependencies['eslint-plugin-vue'] %>",
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
-    "url-loader": "<%= dependabotPackageJson.devDependencies['url-loader'] %>",
+<%_ if (microfrontend) { _%>
+    "@vue/vue2-jest": "<%= dependabotPackageJson.devDependencies['@vue/vue2-jest'] %>",
+<%_ } else { _%>
     "vue-jest": "<%= dependabotPackageJson.devDependencies['vue-jest'] %>",
+<%_ } _%>
     "vue-loader": "<%= dependabotPackageJson.devDependencies['vue-loader'] %>",
     "vue-template-compiler": "<%= dependabotPackageJson.dependencies['vue'] %>",
     "webpack": "<%= dependabotPackageJson.devDependencies['webpack'] %>",
@@ -152,14 +146,15 @@
   "scripts": {
     "prettier:check": "prettier --check \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
     "prettier:format": "prettier --write \"{,src/**/,webpack/}*.{<%= getPrettierExtensions() %>}\"",
-    "lint": "vue-cli-service lint --no-fix",
-    "lint:fix": "vue-cli-service lint",
+    "lint": "eslint . --ext .ts,.vue ",
+    "lint:fix": "eslint . --ext .ts,.vue --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
     "start": "<%= clientPackageManager %> run webapp:dev --",
     "start-tls": "<%= clientPackageManager %> run webapp:dev -- --env.tls",
     "serve": "<%= clientPackageManager %> run start --",
     "build": "<%= clientPackageManager %> run webapp:prod --",
+    "build-watch": "concurrently 'npm run webapp:build:dev -- --watch'<% if(!skipServer) { %> npm:backend:start<% } %>",
 <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor --",
     "e2e:headless": "<%= clientPackageManager %> run e2e:protractor:headless --",
@@ -186,14 +181,15 @@
     "test": "<%= clientPackageManager %> run jest --",
     "test-ci": "<%= clientPackageManager %> run lint && <%= clientPackageManager %> run jest:update --",
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
+    "watch": "concurrently npm:start<% if(!skipServer) { %> npm:backend:start<% } %>",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
-    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.dev.js --progress=profile --env stats=minimal",
-    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.prod.js --progress=profile --env stats=minimal",
-    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --config webpack/webpack.dev.js --progress=profile --env stats=normal",
+    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --progress=profile --env stats=minimal",
+    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --progress=profile --env stats=minimal",
+    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --progress=profile --env stats=normal",
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",
     "webapp:test": "<%= clientPackageManager %> run test --",
-    "webpack-dev-server": "webpack serve",
-    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
+    "webpack-dev-server": "webpack serve --config webpack/webpack.common.js",
+    "webpack": "webpack --config webpack/webpack.common.js"
   },
   "jestSonar": {
     "reportPath": "<%= BUILD_DIR %>test-results/jest",

package/generators/client/templates/vue/src/main/webapp/app/account/account.service.ts.ejs

@@ -33,7 +33,7 @@ export default class AccountService {
 
   public retrieveProfiles(): Promise<boolean> {
     return new Promise(resolve => {
-      axios.get('management/info').then(res => {
+      axios.get<any>('management/info').then(res => {
         if (res.data && res.data.activeProfiles) {
           this.store.commit('setRibbonOnProfiles', res.data['display-ribbon-on-profiles']);
           this.store.commit('setActiveProfiles', res.data['activeProfiles']);
@@ -46,7 +46,7 @@ export default class AccountService {
   public retrieveAccount(): Promise<boolean> {
     return new Promise(resolve => {
       axios
-        .get('api/account').then((response) => {
+        .get<any>('api/account').then((response) => {
         this.store.commit('authenticate');
         const account = response.data;
         if (account) {
@@ -65,7 +65,9 @@ export default class AccountService {
 <%_ } _%>
         } else {
           this.store.commit('logout');
-          this.router.push('/');
+          if (this.router.currentRoute.path !== '/') {
+            this.router.push('/');
+          }
           sessionStorage.removeItem("requested-url");
         }
 <%_ if (enableTranslation) { _%>
@@ -88,9 +90,8 @@ export default class AccountService {
       const token = <%_ if (authenticationTypeJwt) { _%> localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken'); <%_ } else { _%> this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'); <%_ } _%>
       if (!this.store.getters.account && !this.store.getters.logon && token) {
         return this.retrieveAccount();
-      } else {
-        return Promise.resolve(false);
       }
+      return Promise.resolve(false);
     }
 
     for (const authority of authorities) {

package/generators/client/templates/vue/src/main/webapp/app/account/settings/settings.vue.ejs

@@ -3,7 +3,13 @@
     <div class="row justify-content-center">
       <div class="col-md-8 toastify-container">
         <h2 v-if="username" id="settings-title">
-          <span v-html="$t('settings.title', { 'username': username })">User settings for [<strong>{{username}}</strong>]</span>
+          <span v-html="$t('settings.title', { 'username': username })">
+            User settings for [
+            <strong>
+              {{username}}
+            </strong>
+            ]
+          </span>
         </h2>
 
         <div class="alert alert-success" role="alert" v-if="success" v-html="$t('settings.messages.success')">

package/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.service.ts.ejs

@@ -23,7 +23,7 @@ export default class ConfigurationService {
 
   public loadEnvConfiguration(): Promise<any> {
     return new Promise(resolve => {
-      axios.get('management/env').then(res => {
+      axios.get<any>('management/env').then(res => {
         const properties = {};
         const propertySources = res.data['propertySources'];
 

package/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.vue.ejs

@@ -17,7 +17,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse === true ? 1 : -1)"
+          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse ? 1 : -1)"
             :key="entry.prefix">
             <td>
               <span>{{ entry.prefix }}</span>

package/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.component.ts.ejs

@@ -107,7 +107,7 @@ export default class <%=jhiPrefixCapitalized%>Metrics extends Vue {
         } else {
           plural = '';
         }
-        time_string += Math.floor(ms / times[key]).toString() + ' ' + key.toString() + plural + ' ';
+        time_string += `${Math.floor(ms / times[key])} ${key}${plural} `;
         ms = ms - times[key] * Math.floor(ms / times[key]);
       }
     }

package/generators/client/templates/vue/src/main/webapp/app/admin/tracker/tracker.service.ts.ejs

@@ -15,7 +15,7 @@ export default class TrackerService {
 
   private router: VueRouter;
 
-  constructor(router: VueRouter) {
+  constructor(router: VueRouter<%_ if (authenticationTypeSession) { _%>, private cookie: any<%_ } _%>) {
     this.router = router;
     this.connection = this.createConnection();
     this.listener = this.createListener();
@@ -28,19 +28,20 @@ export default class TrackerService {
     // building absolute path so that websocket doesn't fail when deploying with a context path
     const loc = window.location;
     const baseHref = document.querySelector('base').getAttribute('href');
-    let url;
-    url = '//' + loc.host + baseHref + 'websocket/tracker';
 <%_ if (authenticationTypeJwt) { _%>
+    let url = '//' + loc.host + baseHref + 'websocket/tracker';
     const authToken = localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken');
     if (authToken) {
       url += '?access_token=' + authToken;
     }
+<%_ } else { _%>
+    const url = '//' + loc.host + baseHref + 'websocket/tracker';
 <%_ } _%>
     const socket = new SockJS(url);
     this.stompClient = Stomp.over(socket, { protocols: ['v12.stomp'] });
     const headers = {};
 <%_ if (authenticationTypeSession) { _%>
-    headers['X-XSRF-TOKEN'] = (<any>this).$cookie.get('JSESSIONID') || (<any>this).$cookie.get('XSRF-TOKEN');
+    headers['X-XSRF-TOKEN'] = this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN');
 <%_ } _%>
     this.stompClient.connect(headers, () => this.afterConnect());
   }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-edit.component.ts.ejs

@@ -2,6 +2,7 @@ import { email, maxLength, minLength, required } from 'vuelidate/lib/validators'
 import { Component, Inject, Vue } from 'vue-property-decorator';
 import UserManagementService from './user-management.service';
 import { IUser, User } from '@/shared/model/user.model';
+import AlertService from '@/shared/alert/alert.service';
 
 const loginValidator = (value: string) => {
   if (!value) {
@@ -37,6 +38,8 @@ const validations: any = {
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public userAccount: IUser;
   public isSaving = false;
   public authorities: any[] = [];
@@ -87,6 +90,9 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
           solid: true,
           autoHideDelay: 5000,
         });
+      }).catch(error => {
+        this.isSaving = true;
+        this.alertService().showHttpError(this,error.response);
       });
     } else {
 <%_ if (!enableTranslation) { _%>
@@ -101,6 +107,9 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
           solid: true,
           autoHideDelay: 5000,
         });
+      }).catch(error => {
+        this.isSaving = true;
+        this.alertService().showHttpError(this,error.response);
       });
     }
   }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-view.component.ts.ejs

@@ -1,10 +1,13 @@
 import Vue from 'vue';
 import { Component, Inject } from 'vue-property-decorator';
 import UserManagementService from './user-management.service';
+import AlertService from '@/shared/alert/alert.service';
 
 @Component
 export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public user: any = null;
 
   beforeRouteEnter(to, from, next) {
@@ -17,6 +20,8 @@ export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
   public init(userId: <% if (userPrimaryKeyTypeString || userPrimaryKeyTypeUUID) { %>string<% } else { %>number<% } %>): void {
     this.userManagementService().get(userId).then(res => {
       this.user = res.data;
+    }).catch(error => {
+      this.alertService().showHttpError(this,error.response);
     });
   }
 }

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -1,12 +1,15 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
 import Vue2Filters from 'vue2-filters';
 import UserManagementService from './user-management.service';
+import AlertService from '@/shared/alert/alert.service';
 
 @Component({
   mixins: [Vue2Filters.mixin]
 })
 export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends Vue {
   @Inject('userService') private userManagementService: () => UserManagementService;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public error = '';
   public success = '';
   public users: any[] = [];
@@ -110,6 +113,8 @@ _%>
       this.removeId = null;
       this.loadAll();
       this.closeDialog();
+    }).catch(error => {
+      this.alertService().showHttpError(this,error.response);
     });
   }
 

package/generators/client/templates/vue/src/main/webapp/app/constants.ts.ejs

@@ -1,11 +1,21 @@
-// These constants are injected via webpack environment variables.
-// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
-// If you change the values in the webpack config files, you need to re run webpack to update the application
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
 
-export const VERSION = process.env.VERSION;
-// export const DEBUG_INFO_ENABLED: boolean = !!process.env.DEBUG_INFO_ENABLED;
-export const SERVER_API_URL = process.env.SERVER_API_URL;
+ 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.
+-%>
 // Errors
 export const PROBLEM_BASE_URL = 'https://www.jhipster.tech/problem';
 export const EMAIL_ALREADY_USED_TYPE = `${PROBLEM_BASE_URL}/email-already-used`;

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -1,12 +1,22 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
-import { VERSION } from '@/constants';
 import LoginService from '@/account/login.service';
 import AccountService from '@/account/account.service';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
 <%_ } %>
 
-@Component
+import EntitiesMenu from '@/entities/entities-menu.vue';
+
+@Component({
+  components: {
+    'entities-menu': EntitiesMenu,
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+    '<%= remote.lowercaseBaseName %>-menu': () => import('@<%= remote.lowercaseBaseName %>/entities-menu'),
+  <%_ } _%>
+<%_ } _%>
+  },
+})
 export default class JhiNavbar extends Vue {
   @Inject('loginService')
   private loginService: () => LoginService;
@@ -14,7 +24,7 @@ export default class JhiNavbar extends Vue {
   @Inject('translationService') private translationService: () => TranslationService;
 <%_ } %>
   @Inject('accountService') private accountService: () => AccountService;
-  public version = VERSION ? 'v' + VERSION : '';
+  public version = 'v' + VERSION;
   private currentLanguage = this.$store.getters.currentLanguage;
   private languages: any = this.$store.getters.languages;
   private hasAnyAuthorityValue = false;
@@ -43,21 +53,30 @@ export default class JhiNavbar extends Vue {
   }
 <%_ } _%>
 
-  public logout() : void {
+  public logout() : Promise<any> {
 <%_ if (!authenticationTypeJwt) { _%>
-    this.loginService().logout().then(response => {
+    return this.loginService().logout().then(response => {
       this.$store.commit('logout');
-      this.$router.push('/');
   <%_ if (authenticationTypeOauth2) { _%>
-      window.location.href = response.data.logoutUrl;
+      const next = response.data?.logoutUrl ?? '/';
+      if (this.$route.path !== next) {
+        return this.$router.push(next);
+      }
+  <%_ } else { _%>
+      if (this.$route.path !== '/') {
+        return this.$router.push('/');
+      }
   <%_ } _%>
     });
 <%_ } else { _%>
     localStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     sessionStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     this.$store.commit('logout');
-    this.$router.push('/');
+    if (this.$route.path !== '/') {
+      return this.$router.push('/');
+    }
 <%_ } _%>
+    return Promise.resolve(this.$router.currentRoute);
   }
 
   public openLogin() : void {

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -33,6 +33,12 @@
             <font-awesome-icon icon="th-list" />
             <span class="no-bold" v-text="$t('global.menu.entities.main')">Entities</span>
           </span>
+          <entities-menu></entities-menu>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+          <<%= remote.lowercaseBaseName %>-menu></<%= remote.lowercaseBaseName %>-menu>
+  <%_ } _%>
+<%_ } _%>
           <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
         </b-nav-item-dropdown>
         <b-nav-item-dropdown

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

@@ -0,0 +1,41 @@
+<%#
+ 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.
+-%>
+// These constants are injected via webpack environment variables.
+// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
+// If you change the values in the webpack config files, you need to re run webpack to update the application
+
+declare const SERVER_API_URL: string;
+declare const VERSION: string;
+<%_ if (enableTranslation) { _%>
+declare const I18N_HASH: string;
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-router' {
+  const _default: unknown;
+  export default _default;
+}
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-menu' {
+  const _default: unknown;
+  export default _default;
+}
+  <%_ } _%>
+<%_ } _%>

package/generators/client/templates/vue/src/main/webapp/app/entities/entities-menu.component.ts.ejs

@@ -0,0 +1,34 @@
+import {
+  Component,
+  Inject,
+  Vue,
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  Watch,
+<%_ } _%>
+} from 'vue-property-decorator';
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+import TranslationService from '@/locale/translation.service';
+<%_ } _%>
+
+@Component
+export default class EntitiesMenu extends Vue {
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  @Inject({ default: true }) private readonly microfrontendI18n!: boolean;
+  @Inject('translationService') private translationService: () => TranslationService;
+
+  @Watch('$i18n.locale')
+  onLocaleChanged() {
+    this.loadLanguage();
+  }
+
+  created(): void {
+    this.loadLanguage();
+  }
+
+  private loadLanguage() {
+    if (this.microfrontendI18n) {
+      this.translationService().loadTranslations('<%= frontendAppName %>', '<%= endpointPrefix %>/', I18N_HASH);
+    }
+  }
+<%_ } _%>
+}

package/generators/client/templates/vue/src/main/webapp/app/entities/entities-menu.vue.ejs

@@ -0,0 +1,13 @@
+<template>
+  <div>
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+    <b-dropdown-item to="/<%= entity.entityPage %>">
+      <font-awesome-icon icon="asterisk" />
+      <span v-text="$t('global.menu.entities.<%= entity.entityTranslationKeyMenu %>')"><%= entity.entityClassHumanized %></span>
+    </b-dropdown-item>
+<%_ } _%>
+    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
+  </div>
+</template>
+
+<script lang="ts" src="./entities-menu.component.ts"></script>