generator-jhipster 7.3.0 → 7.5.0

package/generators/client/templates/angular/webpack/webpack.microfrontend.js.ejs

@@ -28,16 +28,21 @@ module.exports = (config, options, targetOptions) => {
         name: '<%= lowercaseBaseName %>',
         filename: 'remoteEntry.js',
         exposes: {
-    <%_ for (entity of Object.values(this.configOptions.sharedEntities || {}).filter(e => e.microserviceName)) { _%>
+  <%_ if (enableTranslation) { _%>
+          './translation-module': 'app/shared/language/translation.module.ts',
+  <%_ } _%>
+          './entity-navbar-items': 'app/entities/entity-navbar-items.ts',
+          './entity-routing': 'app/entities/entity-routing.module.ts',
+  <%_ for (entity of Object.values(this.configOptions.sharedEntities || {}).filter(e => e.microserviceName)) { _%>
           './<%= entity.entityFileName %>': 'app/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>.module.ts',
-    <%_ } _%>
+  <%_ } _%>
         },
 <%_ } _%>
 <%_ if (applicationTypeGateway) { _%>
         remotes: {
-          <%_ for ([microserviceName, microserviceConfig] of Object.entries(jhipsterConfig.applications || {})) { _%>
-          '<%= microserviceName %>': `<%= microserviceName %>@${targetOptions.target !== 'serve' ? '/services/<%= microserviceName %>' : 'http://localhost:<%= microserviceConfig.applicationIndex + devServerBasePort %>'}/remoteEntry.js`,
-          <%_ } _%>
+  <%_ for (const remote of microfrontends) { _%>
+          '<%= remote.lowercaseBaseName %>': `<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js`,
+  <%_ } _%>
         },
 <%_ } _%>
         shared: {
@@ -141,6 +146,8 @@ module.exports = (config, options, targetOptions) => {
     ],
     output: {
       publicPath: 'auto',
+      uniqueName: '<%= lowercaseBaseName %>',
+      scriptType: 'text/javascript',
     },
     optimization: {
       runtimeChunk: false,

package/generators/client/templates/common/package.json

@@ -1,12 +1,12 @@
 {
   "devDependencies": {
-    "@cypress/code-coverage": "3.9.11",
-    "babel-loader": "8.2.2",
-    "babel-plugin-istanbul": "6.0.0",
-    "cypress": "8.5.0",
+    "@cypress/code-coverage": "3.9.12",
+    "babel-loader": "8.2.3",
+    "babel-plugin-istanbul": "6.1.1",
+    "cypress": "9.2.0",
     "eslint-plugin-cypress": "2.12.1",
-    "cypress-audit": "1.0.0",
-    "lighthouse": "8.5.1",
+    "cypress-audit": "1.1.0",
+    "lighthouse": "9.2.0",
     "nyc": "15.1.0"
   },
   "dependencies": {

package/generators/client/templates/common/src/main/webapp/robots.txt.ejs

@@ -27,5 +27,4 @@ Disallow: /api/account/sessions
 Disallow: /api/logs/
 Disallow: /api/users/
 Disallow: /management/
-Disallow: /v2/api-docs/
 Disallow: /v3/api-docs/

package/generators/client/templates/common/src/main/webapp/swagger-ui/index.html.ejs

@@ -48,7 +48,8 @@
           },
         };
       };
-      window.onload = function () {
+
+      window.onload = async function () {
 <%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>
         function getCSRF() {
           var name = 'XSRF-TOKEN=';
@@ -60,14 +61,66 @@
           }
           return '';
         }
+        const axiosConfig = { timeout: 5000 };
+<%_ } else { _%>
+        const getBearerToken = () => {
+          var authToken = localStorage.getItem('jhi-authenticationToken') || sessionStorage.getItem('jhi-authenticationToken');
+          if (authToken) {
+<%_ if (clientFrameworkAngular || clientFrameworkReact) { _%>
+            authToken = JSON.parse(authToken);
+<%_ } _%>
+            return `Bearer ${authToken}`;
+          }
+          return null;
+        };
+        const axiosConfig = {
+          headers: { timeout: 5000, Authorization: getBearerToken() },
+        };
 <%_ } _%>
 
-        var urls = [];
-        axios.get('/swagger-resources').then(function (response) {
-          response.data.forEach(function (resource) {
-            urls.push({ name: resource.name, url: resource.location });
-          });
+        const baseUrl = '/v3/api-docs';
+        let services;
+        try {
+          const response = await axios.get('/management/health/discoveryComposite', axiosConfig);
+          services = response.data?.components?.discoveryClient?.details?.services;
+          console.log(`Services`, services);
+        } catch (error) {
+          console.log(error);
+        }
+
+        let urls;
+        try {
+          if (services && services.length > 0) {
+            urls = (
+              await Promise.allSettled(
+                services.map(async service => {
+                  const response = await axios.get(`/services/${service}/management/jhiopenapigroups`, axiosConfig);
+                  if (Array.isArray(response.data)) {
+                    return response.data.map(({ group, description }) => ({
+                      name: description,
+                      url: `/services/${service}${baseUrl}/${group}`,
+                    }));
+                  }
+                  return undefined;
+                })
+              )
+            )
+              .filter(settled => settled.status === 'fulfilled')
+              .map(settled => settled.value)
+              .filter(Array.isArray)
+              .flat();
+          } else {
+            const response = await axios.get('/management/jhiopenapigroups', axiosConfig);
+            if (Array.isArray(response.data)) {
+              urls = response.data.map(({ group, description }) => ({ name: description, url: `${baseUrl}/${group}` }));
+            }
+          }
+          console.log(`Swagger urls`, urls);
+        } catch (error) {
+          console.log(error);
+        }
 
+        if (urls) {
           urls.sort(function (a, b) {
             var x = a.name.toLowerCase(),
               y = b.name.toLowerCase();
@@ -77,60 +130,37 @@
             if (y.includes('(management)')) return 1;
             return x < y ? -1 : x > y ? 1 : 0;
           });
+        }
 
-          // Build a system
-          var ui = SwaggerUIBundle({
-            urls: urls,
-            dom_id: '#swagger-ui',
-            deepLinking: true,
-            filter: true,
-            layout: 'StandaloneLayout',
-            withCredentials: true,
-            presets: [
-              SwaggerUIBundle.presets.apis,
-              SwaggerUIStandalonePreset
-            ],
-            plugins: [
-              SwaggerUIBundle.plugins.DownloadUrl,
-              AlwaysEnableTryItOutPlugin
-            ],
+        // Build a system
+        var ui = SwaggerUIBundle({
+          urls: urls,
+          url: baseUrl,
+          dom_id: '#swagger-ui',
+          deepLinking: true,
+          filter: true,
+          layout: 'StandaloneLayout',
+          withCredentials: true,
+          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+          plugins: [SwaggerUIBundle.plugins.DownloadUrl, AlwaysEnableTryItOutPlugin],
+          requestInterceptor: function (req) {
 <%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>
-            requestInterceptor: function(req) {
-              req.headers['X-XSRF-TOKEN'] = getCSRF();
-              // Remove the sample Swagger UI request body if present
-              if (
-                req.method === 'GET' &&
-                req.body === '{"additionalProp1":"string","additionalProp2":"string","additionalProp3":"string"}'
-              ) {
-                req.body = undefined;
-              }
-              return req;
-            },
-<%_ } _%>
-<%_ if (authenticationTypeJwt) { _%>
-            requestInterceptor: function (req) {
-              var authToken =
-                localStorage.getItem('<%= jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%= jhiPrefixDashed %>-authenticationToken');
-              if (authToken) {
-<%_ if (clientFrameworkAngular || clientFrameworkReact) { _%>
-                authToken = JSON.parse(authToken);
-<%_ } _%>
-                req.headers['Authorization'] = 'Bearer ' + authToken;
-              }
-              // Remove the sample Swagger UI request body if present
-              if (
-                req.method === 'GET' &&
-                req.body === '{"additionalProp1":"string","additionalProp2":"string","additionalProp3":"string"}'
-              ) {
-                req.body = undefined;
-              }
-              return req;
-            },
+            req.headers['X-XSRF-TOKEN'] = getCSRF();
+<%_ } else { _%>
+            req.headers['Authorization'] = getBearerToken();
 <%_ } _%>
-          });
-
-          window.ui = ui;
+            // Remove the sample Swagger UI request body if present
+            if (
+              req.method === 'GET' &&
+              req.body === '{"additionalProp1":"string","additionalProp2":"string","additionalProp3":"string"}'
+            ) {
+              req.body = undefined;
+            }
+            return req;
+          },
         });
+
+        window.ui = ui;
       };
     </script>
   </body>

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

@@ -0,0 +1,56 @@
+<%#
+ 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.
+-%>
+<&_
+ // Register sections and max allowed fragments, 0 for unlimited.
+ fragments.registerSections({
+   importsSection:0,
+   moduleFederationSection: 0,
+   pluginsSection: 0,
+ });
+_&>
+
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+<&- fragments.importsSection() &>
+const packageJson = require('../package.json');
+const appVersion = packageJson.version;
+
+module.exports = ({ serve }) => {
+  return {
+    optimization: {
+      moduleIds: 'named',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+<%_ if (applicationTypeMicroservice) { _%>
+        name: '<%= lowercaseBaseName %>',
+        filename: 'remoteEntry.js',
+<%_ } _%>
+        shareScope: 'default',
+<&- fragments.moduleFederationSection() &>
+      }),
+<&- fragments.pluginsSection() &>
+    ],
+    output: {
+      publicPath: 'auto',
+    },
+    optimization: {
+      runtimeChunk: false,
+    },
+  };
+};

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

@@ -62,6 +62,7 @@
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-member-access":"off",
     "@typescript-eslint/no-unsafe-call": "off",

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

@@ -2,87 +2,88 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
-    "@reduxjs/toolkit": "1.6.2",
-    "axios": "0.21.4",
-    "bootstrap": "4.6.0",
-    "bootswatch": "5.1.2",
+    "@fortawesome/react-fontawesome": "0.1.16",
+    "@reduxjs/toolkit": "1.7.1",
+    "axios": "0.24.0",
+    "bootstrap": "5.1.3",
+    "bootswatch": "5.1.3",
     "lodash": "4.17.21",
     "path-browserify": "1.0.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-hook-form": "7.17.1",
-    "react-jhipster": "0.17.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-hook-form": "7.22.5",
+    "react-jhipster": "0.18.0",
     "react-loadable": "5.5.0",
-    "react-redux": "7.2.5",
+    "react-redux": "7.2.6",
     "react-redux-loading-bar": "5.0.2",
     "react-router-dom": "5.3.0",
-    "react-toastify": "8.0.3",
+    "react-toastify": "8.1.0",
     "react-transition-group": "4.4.2",
-    "reactstrap": "8.10.0",
-    "redux": "4.1.1",
-    "redux-thunk": "2.3.0",
+    "reactstrap": "9.0.1",
+    "redux": "4.1.2",
+    "redux-thunk": "2.4.1",
     "sonar-scanner": "3.1.0",
     "tslib": "2.3.1",
     "uuid": "8.3.2"
   },
   "devDependencies": {
     "@testing-library/react": "12.1.2",
-    "@types/jest": "27.0.2",
-    "@types/lodash": "4.14.175",
-    "@types/node": "16.10.3",
-    "@types/react": "17.0.27",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.18",
-    "@types/react-router-dom": "5.3.0",
+    "@types/jest": "27.4.0",
+    "@types/lodash": "4.14.178",
+    "@types/node": "16.11.17",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.21",
+    "@types/react-router-dom": "5.3.2",
     "@types/redux": "3.6.31",
-    "@types/webpack-env": "1.16.2",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "autoprefixer": "10.3.7",
-    "browser-sync": "2.27.5",
+    "@types/webpack-env": "1.16.3",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
+    "autoprefixer": "10.4.1",
+    "browser-sync": "2.27.7",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.18.2",
+    "copy-webpack-plugin": "10.2.0",
+    "core-js": "3.20.1",
     "cross-env": "7.0.3",
-    "css-loader": "6.3.0",
-    "css-minimizer-webpack-plugin": "3.1.1",
-    "eslint": "7.32.0",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.3.1",
+    "eslint": "8.5.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-webpack-plugin": "3.0.1",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-webpack-plugin": "3.1.1",
     "folder-hash": "4.0.1",
-    "fork-ts-checker-webpack-plugin": "6.3.3",
-    "html-webpack-plugin": "5.3.2",
+    "fork-ts-checker-webpack-plugin": "6.5.0",
+    "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.2.4",
+    "jest": "27.4.5",
     "jest-junit": "13.0.0",
     "jest-sonar-reporter": "2.0.0",
     "json-loader": "0.5.7",
-    "merge-jsons-webpack-plugin": "1.0.21",
-    "mini-css-extract-plugin": "2.4.1",
-    "postcss-loader": "6.1.1",
-    "react-infinite-scroller": "1.2.4",
+    "merge-jsons-webpack-plugin": "2.0.1",
+    "mini-css-extract-plugin": "2.4.5",
+    "postcss-loader": "6.2.1",
+    "postcss-rtlcss": "3.5.1",
+    "react-infinite-scroll-component": "6.1.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
-    "sass": "1.42.1",
-    "sass-loader": "12.1.0",
+    "sass": "1.45.2",
+    "sass-loader": "12.4.0",
     "simple-progress-webpack-plugin": "2.0.0",
-    "sinon": "11.1.2",
+    "sinon": "12.0.1",
     "source-map-loader": "3.0.0",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
-    "style-loader": "3.3.0",
-    "swagger-ui-dist": "3.52.3",
-    "terser-webpack-plugin": "5.2.4",
+    "style-loader": "3.3.1",
+    "swagger-ui-dist": "4.1.3",
+    "terser-webpack-plugin": "5.3.0",
     "thread-loader": "3.0.4",
-    "ts-jest": "27.0.5",
+    "ts-jest": "27.1.2",
     "ts-loader": "9.2.6",
-    "typescript": "4.4.3",
-    "webpack": "5.57.1",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "4.3.1",
+    "typescript": "4.5.4",
+    "webpack": "5.65.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "4.7.2",
     "webpack-merge": "5.8.0",
-    "webpack-notifier": "1.14.0",
-    "workbox-webpack-plugin": "6.3.0"
+    "webpack-notifier": "1.15.0",
+    "workbox-webpack-plugin": "6.4.2"
   }
 }

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

@@ -123,6 +123,9 @@
     "mocha": "7.1.2",
 <%_ } _%>
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
+<%_ if (enableI18nRTL) { _%>
+    "postcss-rtlcss": "<%= dependabotPackageJson.devDependencies['postcss-rtlcss'] %>",
+<%_ } _%>
     "prettier": "<%= dependabotPackageJson.devDependencies['prettier'] %>",
 <%_ if (!skipServer) { _%>
     "prettier-plugin-java": "<%= dependabotPackageJson.devDependencies['prettier-plugin-java'] %>",
@@ -131,7 +134,7 @@
 <%_ if (protractorTests) { _%>
     "protractor": "7.0.0",
 <%_ } _%>
-    "react-infinite-scroller": "<%= dependabotPackageJson.devDependencies['react-infinite-scroller'] %>",
+    "react-infinite-scroll-component": "<%= dependabotPackageJson.devDependencies['react-infinite-scroll-component'] %>",
     "redux-mock-store": "<%= dependabotPackageJson.devDependencies['redux-mock-store'] %>",
     "rimraf": "<%= dependabotPackageJson.devDependencies['rimraf'] %>",
     "sass": "<%= dependabotPackageJson.devDependencies['sass'] %>",
@@ -176,6 +179,8 @@
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
+    "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 --",

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

@@ -25,9 +25,6 @@
 <%_ if (!clientThemeNone) { _%>
 @import "~bootswatch/dist/<%= clientTheme %>/bootswatch";
 <%_ } _%>
-<%_ if (enableI18nRTL) { _%>
-@import '../content/scss/rtl.scss';
-<%_ } _%>
 body {
 <%_ if (clientThemeNone) { _%>
   background: #fafafa;

package/generators/client/templates/react/src/main/webapp/app/config/axios-interceptor.spec.ts.ejs

@@ -36,13 +36,14 @@ describe('Axios Interceptor', () => {
       expect((client.interceptors.response as any).handlers[0].fulfilled({ data: 'foo' })).toEqual({ data: 'foo' });
     });
     it('onResponseError is called on rejected response', () => {
-      (client.interceptors.response as any).handlers[0].rejected({
+      const rejectError = {
         response: {
           statusText: 'NotFound',
           status: 403,
           data: { message: 'Page not found' }
         }
-      });
+      };
+      expect((client.interceptors.response as any).handlers[0].rejected(rejectError)).rejects.toEqual(rejectError);
       expect(onUnauthenticated.calledOnce).toBe(true);
     });
   });

package/generators/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs

@@ -53,11 +53,11 @@ export const PasswordPage = () => {
 <%_ if (enableTranslation) { _%>
       toast.success(translate(successMessage));
     } else if (errorMessage) {
-      toast.success(translate(errorMessage));
+      toast.error(translate(errorMessage));
 <%_ } else { _%>
       toast.success(successMessage);
     } else if (errorMessage) {
-      toast.success(errorMessage);
+      toast.error(errorMessage);
 <%_ } _%>
     }
   }, [successMessage, errorMessage]);

package/generators/client/templates/react/src/main/webapp/app/modules/administration/configuration/configuration.tsx.ejs

@@ -88,7 +88,7 @@ export const ConfigurationPage = () => {
                         <Row key={index}>
                           <Col md="4">{propKey}</Col>
                           <Col md="8">
-                            <Badge className="float-right badge-secondary break">{JSON.stringify(property['properties'][propKey])}</Badge>
+                            <Badge className="float-end bg-secondary break">{JSON.stringify(property['properties'][propKey])}</Badge>
                           </Col>
                         </Row>
                       ))}
@@ -118,7 +118,7 @@ export const ConfigurationPage = () => {
                       <tr key={propIndex}>
                         <td className="break">{propKey}</td>
                         <td className="break">
-                          <span className="float-right badge badge-secondary break">{envKey.properties[propKey].value}</span>
+                          <span className="float-end badge bg-secondary break">{envKey.properties[propKey].value}</span>
                         </td>
                       </tr>
                     ))}

package/generators/client/templates/react/src/main/webapp/app/modules/administration/gateway/gateway.tsx.ejs

@@ -38,8 +38,8 @@ export const GatewayPage = () => {
     Object.keys(instance).map((key, index) => {
       spans.push((
         <span key={key.toString() + 'value'}>
-          <Badge key={key.toString() + '-containerbadge'} className="font-weight-normal">
-            <Badge key={key.toString() + '-badge'} color="info" className="font-weight-normal" pill>{key}</Badge>
+          <Badge key={key.toString() + '-containerbadge'} className="fw-normal">
+            <Badge key={key.toString() + '-badge'} color="info" className="fw-normal" pill>{key}</Badge>
             {instance[key]}
           </Badge>
         </span>

package/generators/client/templates/react/src/main/webapp/app/modules/administration/metrics/metrics.tsx.ejs

@@ -74,11 +74,11 @@ export const MetricsPage = () => {
           <h3>JVM Metrics</h3>
           <Row>
             <Col md="4">
-              {metrics && metrics.jvm ? <JvmMemory jvmMetrics={metrics.jvm} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}
+              {metrics?.jvm ? <JvmMemory jvmMetrics={metrics.jvm} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}
             </Col>
             <Col md="4">{threadDump ? <JvmThreads jvmThreads={threadDump} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} /> : ''}</Col>
             <Col md="4">
-              {metrics && metrics.processMetrics ? (
+              {metrics?.processMetrics ? (
                 <SystemMetrics
                   systemMetrics={metrics.processMetrics}
                   wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT}
@@ -92,7 +92,7 @@ export const MetricsPage = () => {
         </Col>
       </Row>
 
-      {metrics && metrics.garbageCollector ? (
+      {metrics?.garbageCollector ? (
         <GarbageCollectorMetrics garbageCollectorMetrics={metrics.garbageCollector} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} />
       ) : (
         ''
@@ -106,13 +106,13 @@ export const MetricsPage = () => {
       ) : (
         ''
       )}
-      {metrics && metrics.services ? (
+      {metrics?.services ? (
         <EndpointsRequestsMetrics endpointsRequestsMetrics={metrics.services} wholeNumberFormat={APP_WHOLE_NUMBER_FORMAT} />
       ) : (
         ''
       )}
 
-      {metrics.cache ? (
+      {metrics?.cache ? (
         <Row>
           <Col sm="12">
             <CacheMetrics cacheMetrics={metrics.cache} twoDigitAfterPointFormat={APP_TWO_DIGITS_AFTER_POINT_NUMBER_FORMAT} />
@@ -122,7 +122,7 @@ export const MetricsPage = () => {
         ''
       )}
 
-      {metrics.databases && JSON.stringify(metrics.databases) !== '{}' ? (
+      {metrics?.databases && JSON.stringify(metrics.databases) !== '{}' ? (
         <Row>
           <Col sm="12">
             <DatasourceMetrics datasourceMetrics={metrics.databases} twoDigitAfterPointFormat={APP_TWO_DIGITS_AFTER_POINT_NUMBER_FORMAT} />

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs

@@ -18,7 +18,7 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
-import { Button, Table, Row, Badge } from 'reactstrap';
+import { Button, Table, Badge } from 'reactstrap';
 import {
   Translate,
   TextFormat,
@@ -108,7 +108,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
       <h2 id="user-management-page-heading" data-cy="userManagementPageHeading">
         <Translate contentKey="userManagement.home.title">Users</Translate>
         <div className="d-flex justify-content-end">
-          <Button className="mr-2" color="info" onClick={handleSyncList} disabled={loading}>
+          <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="userManagement.home.refreshListLabel">Refresh List</Translate>
           </Button>
           <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity">
@@ -188,7 +188,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
                 ) : null}
               </td>
 <%_ } _%>
-              <td className="text-right">
+              <td className="text-end">
                 <div className="btn-group flex-btn-group-container">
                   <Button
                     tag={Link} to={`${match.url}/${user.login}`}
@@ -216,11 +216,11 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
         </tbody>
       </Table>
 <%_ if (!databaseTypeCassandra) { _%>
-        { totalItems ? (<div className={ users && users.length > 0 ? '' : 'd-none' }>
-          <Row className="justify-content-center">
+        { totalItems ? (<div className={ users?.length > 0 ? '' : 'd-none' }>
+          <div className="justify-content-center d-flex">
             <JhiItemCount page={pagination.activePage} total={totalItems} itemsPerPage={pagination.itemsPerPage} i18nEnabled />
-          </Row>
-          <Row className="justify-content-center">
+          </div>
+          <div className="justify-content-center d-flex">
             <JhiPagination
               activePage={pagination.activePage}
               onSelect={handlePagination}
@@ -228,7 +228,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
               itemsPerPage={pagination.itemsPerPage}
               totalItems={totalItems}
             />
-          </Row>
+          </div>
         </div>) : '' }
 <%_ } _%>
     </div>