generator-jhipster 7.8.1 → 7.9.2

package/generators/client/templates/react/src/main/webapp/app/shared/auth/private-route.tsx.ejs

@@ -1,54 +1,54 @@
 import React from 'react';
-import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { RouteProps, useLocation, Navigate } from 'react-router-dom';
 import { Translate } from 'react-jhipster';
+
 import { useAppSelector } from 'app/config/store';
 import ErrorBoundary from 'app/shared/error/error-boundary';
 
 interface IOwnProps extends RouteProps {
   hasAnyAuthorities?: string[];
+  children: React.ReactNode;
 }
 
-export const PrivateRouteComponent = ({ component: Component, hasAnyAuthorities = [], ...rest }: IOwnProps) => {
+export const PrivateRoute = ({ children, hasAnyAuthorities = [], ...rest }: IOwnProps) => {
   const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated);
   const sessionHasBeenFetched = useAppSelector(state => state.authentication.sessionHasBeenFetched);
   const account = useAppSelector(state => state.authentication.account);
   const isAuthorized = hasAnyAuthority(account.authorities, hasAnyAuthorities);
+  const location = useLocation();
+
+  if (!children) {
+    throw new Error(`A component needs to be specified for private route for path ${(rest as any).path}`);
+  }
 
-  const checkAuthorities = props =>
-    isAuthorized ? (
-      <ErrorBoundary>
-        <Component {...props} />
-      </ErrorBoundary>
-    ) : (
+  if (!sessionHasBeenFetched) {
+    return <div></div>;
+  }
+
+  if (isAuthenticated) {
+    if (isAuthorized) {
+      return <ErrorBoundary>{children}</ErrorBoundary>;
+    }
+
+    return (
       <div className="insufficient-authority">
         <div className="alert alert-danger">
           <Translate contentKey="error.http.403">You are not authorized to access this page.</Translate>
         </div>
       </div>
     );
+  }
 
-    const renderRedirect = props => {
-      if (!sessionHasBeenFetched) {
-        return (<div></div>);
-      } else {
-        return isAuthenticated ? (
-          checkAuthorities(props)
-        ) : (
-          <Redirect
-            to={{
-              pathname: '<%_ if (authenticationTypeOauth2) { _%>/oauth2/authorization/oidc<%_ } else {_%>/login<%_ } _%>',
-              search: props.location.search,
-              state: { from: props.location }
-            }}
-          />
-        );
-      }
-    };
-
-
-  if (!Component) throw new Error(`A component needs to be specified for private route for path ${(rest as any).path}`);
-
-  return <Route {...rest} render={renderRedirect} />;
+  return (
+    <Navigate
+      to={{
+        pathname: '<%_ if (authenticationTypeOauth2) { _%>/oauth2/authorization/oidc<%_ } else {_%>/login<%_ } _%>',
+        search: location.search,
+      }}
+      replace
+      state={{ from: location }}
+    />
+  );
 };
 
 export const hasAnyAuthority = (authorities: string[], hasAnyAuthorities: string[]) => {
@@ -62,8 +62,9 @@ export const hasAnyAuthority = (authorities: string[], hasAnyAuthorities: string
 };
 
 /**
- * A route wrapped in an authentication check so that routing happens only when you are authenticated.
- * Accepts same props as React router Route.
- * The route also checks for authorization if hasAnyAuthorities is specified.
+ * Checks authentication before showing the children and redirects to the
+ * login page if the user is not authenticated.
+ * If hasAnyAuthorities is provided the authorization status is also
+ * checked and an error message is shown if the user is not authorized.
  */
-export default PrivateRouteComponent;
+export default PrivateRoute;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+import ErrorBoundaryRoutes from './error-boundary-routes';
+
+const ErrorComp = (): JSX.Element => {
+  throw new Error('test');
+};
+
+const NoErrorComp = (): JSX.Element => {
+  return <div>No error</div>;
+};
+
+describe('error-boundary-routes component', () => {
+  beforeEach(() => {
+    // ignore console and jsdom errors
+    jest.spyOn((window as any)._virtualConsole, 'emit').mockImplementation(() => false);
+    jest.spyOn((window as any).console, 'error').mockImplementation(() => false);
+  });
+
+  it('Should render fallback component when an uncaught error is thrown in route', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <ErrorBoundaryRoutes>
+          <Route path="*" element={<ErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div><h2 class="error">An unexpected error has occurred.</h2></div>');
+  });
+
+  it('Should not render fallback component when route with uncaught error is not matched', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/path']}>
+        <ErrorBoundaryRoutes>
+          <Route path="/path" element={<NoErrorComp />} />
+          <Route path="*" element={<ErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div>No error</div>');
+  });
+
+  it('Should not render fallback component when no uncaught error is thrown', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <ErrorBoundaryRoutes>
+          <Route path="*" element={<NoErrorComp />} />
+        </ErrorBoundaryRoutes>
+      </MemoryRouter>
+    );
+    expect(container.innerHTML).toEqual('<div>No error</div>');
+  });
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Outlet, Route, Routes, RoutesProps } from 'react-router-dom';
+import ErrorBoundary from 'app/shared/error/error-boundary';
+
+const ErrorBoundaryRoutes = ({ children }: RoutesProps) => {
+  return (
+    <Routes>
+      <Route
+        element={
+          <ErrorBoundary>
+            <Outlet />
+          </ErrorBoundary>
+        }
+      >
+        {children}
+      </Route>
+    </Routes>
+  );
+};
+
+export default ErrorBoundaryRoutes;

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

@@ -16,7 +16,7 @@ describe('error component', () => {
     jest.spyOn((window as any).console, 'error').mockImplementation(() => false);
   });
 
-  it('Should throw an error when componnet is not enclosed in Error Boundary', () => {
+  it('Should throw an error when component is not enclosed in Error Boundary', () => {
     expect(() => render(<ErrorComp />)).toThrow(Error);
   });
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface IErrorBoundaryProps {
-  readonly children: JSX.Element | JSX.Element[];
+  readonly children: React.ReactNode;
 }
 
 interface IErrorBoundaryState {

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

@@ -2,14 +2,12 @@ import React from 'react';
 import { Translate } from 'react-jhipster';
 import { Alert } from 'reactstrap';
 
-class ErrorLoading extends React.Component {
-  render() {
-    return (
-      <div>
-        <Alert color="danger">Error loading component</Alert>
-      </div>
-    );
-  }
-}
+const ErrorLoading = () => {
+  return (
+    <div>
+      <Alert color="danger">Error loading component</Alert>
+    </div>
+  );
+};
 
-export default ErrorLoading as React.ComponentType<any>;
+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

@@ -31,7 +31,7 @@ const <%= remote.capitalizedBaseName %>EntitiesMenuItems = React.lazy(() => impo
 import EntitiesMenuItems from 'app/entities/menu';
 <%_ } _%>
 
-export const EntitiesMenu = props => (
+export const EntitiesMenu = () => (
   <NavDropdown
     icon="th-list"
     name={translate('global.menu.entities.main')}

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/typings.d.ts.ejs

@@ -32,12 +32,12 @@ declare module '*.json' {
   <%_ for (const remote of microfrontends) { _%>
 
 declare module '@<%= remote.lowercaseBaseName %>/entities-routes' {
-  const _default: React.ComponentType<any>;
+  const _default: () => JSX.Element;
   export default _default;
 }
 
 declare module '@<%= remote.lowercaseBaseName %>/entities-menu' {
-  const _default: React.ComponentType<any>;
+  const _default: () => JSX.Element;
   export default _default;
 }
   <%_ } _%>

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

@@ -30,7 +30,7 @@
     "suppressImplicitAnyIndexErrors": true,
     "outDir": "<%= DIST_DIR %>app",
     "lib": ["dom", "es2015", "es2016", "es2017", "es2019", "es2020"],
-    "types": ["jest", "webpack-env"],
+    "types": ["webpack-env"],
     "allowJs": true,
     "checkJs": false,
     "baseUrl": "./",
@@ -42,7 +42,5 @@
     "allowSyntheticDefaultImports": true
   },
   "include": ["<%= MAIN_SRC_DIR %>app"],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
 }

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

@@ -19,6 +19,7 @@
 {
   "extends": "./tsconfig",
   "include": ["<%= MAIN_SRC_DIR %>app", "<%= MAIN_SRC_DIR %>microfrontend"],
+  "exclude": [],
   "compilerOptions": {
     "paths": {
 <%_ if (microfrontend && applicationTypeGateway) { _%>

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?$/,
@@ -127,7 +127,11 @@ 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({
@@ -141,7 +145,7 @@ return merge(
           globOptions: { ignore: ['**/index.html'] },
         },
         {
-          from: require.resolve('axios/dist/axios.min.js'), 
+          from: require.resolve('axios/dist/axios.min.js'),
           to: 'swagger-ui/',
         },
         { from: './<%= MAIN_SRC_DIR %>swagger-ui/', to: 'swagger-ui/' },

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

@@ -24,8 +24,8 @@ const { DefinePlugin } = require('webpack');
 <&_ if (fragment.moduleFederationSection) { -&>
 <%_ if (applicationTypeGateway) { _%>
         remotes: {
-  <%_ for (const remote of remotes) { _%>
-          '@<%= remote.lowercaseBaseName %>': `<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js`,
+  <%_ for (const microfrontend of microfrontends) { _%>
+          '@<%= microfrontend.lowercaseBaseName %>': `<%= microfrontend.lowercaseBaseName %>@/<%= microfrontend.endpointPrefix %>/remoteEntry.js`,
   <%_ } _%>
         },
 <%_ } _%>
@@ -47,9 +47,9 @@ const { DefinePlugin } = require('webpack');
             import: 'app/config/store',
             requiredVersion: appVersion,
           },
-          'app/shared/error/error-boundary-route': {
+          'app/shared/error/error-boundary-routes': {
             singleton: true,
-            import: 'app/shared/error/error-boundary-route',
+            import: 'app/shared/error/error-boundary-routes',
             requiredVersion: appVersion,
           },
           'app/shared/layout/menus/menu-components': {

package/generators/client/templates/vue/.eslintrc.js.ejs

@@ -30,7 +30,16 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 2020,
-    project: ['./tsconfig.spec.json'],
+    project: [
+      './tsconfig.json',
+      './tsconfig.spec.json',
+<%_ if (cypressTests) { _%>
+      './<%= CLIENT_TEST_SRC_DIR %>cypress/tsconfig.json',
+<%_ } _%>
+<%_ if (protractorTests) { _%>
+      './tsconfig.e2e.json',
+<%_ } _%>
+    ]
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

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

@@ -1,71 +1,72 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/vue-fontawesome": "2.0.6",
-    "axios": "0.26.1",
-    "bootstrap": "4.6.1",
-    "bootstrap-vue": "2.21.2",
-    "bootswatch": "5.1.3",
-    "vue": "2.6.14",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
+    "@fortawesome/vue-fontawesome": "2.0.8",
+    "axios": "0.27.2",
+    "bootstrap": "4.6.2",
+    "bootstrap-vue": "2.22.0",
+    "bootswatch": "5.2.0",
+    "vue": "2.7.5",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
-    "vue-router": "3.5.3",
-    "vue-i18n": "8.27.1",
+    "vue-router": "3.5.4",
+    "vue-i18n": "8.27.2",
     "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.7",
     "vuex": "3.6.2",
     "vue2-filters": "0.14.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "1.1.1",
-    "@types/jest": "27.4.1",
-    "@types/node": "16.11.26",
-    "@types/sinon": "10.0.11",
+    "@rushstack/eslint-patch": "1.1.4",
+    "@types/jest": "28.1.6",
+    "@types/node": "16.11.47",
+    "@types/sinon": "10.0.13",
     "@types/vuelidate": "0.7.15",
     "@vue/eslint-config-prettier": "7.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/vue2-jest": "27.0.0-alpha.3",
+    "@vue/vue2-jest": "28.0.1",
     "@vue/test-utils": "1.3.0",
-    "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.4.4",
+    "axios-mock-adapter": "1.21.1",
+    "autoprefixer": "10.4.8",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.4",
+    "copy-webpack-plugin": "11.0.0",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "3.4.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
     "folder-hash": "4.0.2",
-    "fork-ts-checker-webpack-plugin": "7.2.3",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
     "html-webpack-plugin": "5.5.0",
-    "jest": "27.5.1",
-    "jest-junit": "13.1.0",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-junit": "14.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.6.0",
+    "mini-css-extract-plugin": "2.6.1",
     "numeral": "2.0.6",
     "postcss-import": "14.1.0",
-    "postcss-loader": "6.2.1",
+    "postcss-loader": "7.0.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.49.11",
-    "sass-loader": "12.6.0",
-    "sinon": "13.0.1",
-    "terser-webpack-plugin": "5.3.1",
-    "ts-jest": "27.1.4",
-    "ts-loader": "9.2.8",
-    "eslint": "8.12.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-vue": "8.5.0",
-    "typescript": "4.6.3",
-    "webpack": "5.71.0",
+    "sass": "1.54.1",
+    "sass-loader": "13.0.2",
+    "sinon": "14.0.0",
+    "terser-webpack-plugin": "5.3.3",
+    "ts-jest": "28.0.7",
+    "ts-loader": "9.3.1",
+    "eslint": "8.21.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "8.7.1",
+    "typescript": "4.7.4",
+    "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.8.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.5.2",
+    "workbox-webpack-plugin": "6.5.4",
     "vue-jest": "3.0.7",
-    "vue-loader": "15.9.8"
+    "vue-loader": "15.10.0"
   }
 }

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

@@ -89,10 +89,10 @@
 } _%>
     "html-webpack-plugin": "<%= dependabotPackageJson.devDependencies['html-webpack-plugin'] %>",
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
+    "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest-environment-jsdom'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",
     "jest-serializer-vue": "<%= dependabotPackageJson.devDependencies['jest-serializer-vue'] %>",
     "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
-    "jest-vue-preprocessor": "<%= dependabotPackageJson.devDependencies['jest-vue-preprocessor'] %>",
 <%_ if (enableTranslation) { _%>
     "folder-hash": "<%= dependabotPackageJson.devDependencies['folder-hash'] %>",
     "merge-jsons-webpack-plugin": "<%= dependabotPackageJson.devDependencies['merge-jsons-webpack-plugin'] %>",
@@ -168,8 +168,8 @@
 <%_ } _%>
 <%_ if (cypressTests) { _%>
     "e2e:cypress:headed": "<%= clientPackageManager %> run e2e:cypress -- --headed",
-    "e2e:cypress": "cypress run --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
-    "cypress": "cypress open",
+    "e2e:cypress": "cypress run --e2e --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
+    "cypress": "cypress open --e2e",
 <%_ } _%>
 <%_ if (protractorTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",

package/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.component.ts.ejs

@@ -5,7 +5,7 @@ import AccountService from '@/account/account.service';
 @Component({
   watch: {
     $route() {
-      this.$root.$emit('bv::hide::modal', 'login-page');
+      (this.$root as any).$emit('bv::hide::modal', 'login-page');
     }
   }
 })
@@ -51,7 +51,7 @@ export default class LoginForm extends Vue {
       }).then(() => {
 <%_ } _%>
         this.authenticationError = false;
-        this.$root.$emit('bv::hide::modal','login-page');
+        (this.$root as any).$emit('bv::hide::modal','login-page');
         this.accountService().retrieveAccount();
       }).catch(()=> {
         this.authenticationError = true;

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

@@ -78,7 +78,7 @@
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-4">Start time</div>
-          <div class="col-md-8 text-right">{{ metrics.processMetrics['process.start.time'] | formatMillis }}</div>
+          <div class="col-md-8 text-right">{{ metrics.processMetrics['process.start.time'] | formatDate }}</div>
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-9">Process CPU usage</div>