generator-jhipster 8.5.0 → 8.7.0

package/dist/generators/react/templates/jest.conf.js.ejs

@@ -3,11 +3,14 @@ const tsconfig = require('./tsconfig.test.json');
 module.exports = {
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.tsx?$': ['ts-jest', {
-      tsconfig: './tsconfig.test.json',
-      compiler: 'typescript',
-      diagnostics: false,
-    }],
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: './tsconfig.test.json',
+        compiler: 'typescript',
+        diagnostics: false,
+      },
+    ],
   },
   testEnvironmentOptions: {
     url: 'http://localhost/',
@@ -16,21 +19,17 @@ module.exports = {
   coverageDirectory: '<rootDir>/<%= this.relativeDir(clientRootDir, temporaryDir) %>test-results/',
   testMatch: ['<rootDir>/<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/**/@(*.)@(spec.ts?(x))'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  coveragePathIgnorePatterns: [
-    '<rootDir>/<%= this.relativeDir(clientRootDir, clientTestDir) %>',
-  ],
+  coveragePathIgnorePatterns: ['<rootDir>/<%= this.relativeDir(clientRootDir, clientTestDir) %>'],
   moduleNameMapper: mapTypescriptAliasToJestAlias({
     '\\.(css|scss)$': 'identity-obj-proxy',
-    'sinon': require.resolve('sinon/pkg/sinon.js')
+    sinon: require.resolve('sinon/pkg/sinon.js'),
   }),
   reporters: [
     'default',
     ['jest-junit', { outputDirectory: './<%= this.relativeDir(clientRootDir, temporaryDir) %>test-results/', outputName: 'TESTS-results-jest.xml' }],
     ['jest-sonar', { outputDirectory: './<%= this.relativeDir(clientRootDir, temporaryDir) %>test-results/jest', outputName: 'TESTS-results-sonar.xml' }],
   ],
-  testPathIgnorePatterns: [
-    '<rootDir>/node_modules/'
-  ],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
   setupFiles: ['<rootDir>/<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/setup-tests.ts'],
   globals: {
 <%_ if (enableTranslation) { _%>
@@ -38,34 +37,34 @@ module.exports = {
 <%_ } _%>
     ...require('./webpack/environment'),
     DEVELOPMENT: false,
-  }
+  },
 };
 
 function mapTypescriptAliasToJestAlias(alias = {}) {
-    const jestAliases = { ...alias };
-    if (!tsconfig.compilerOptions.paths) {
-      return jestAliases;
-    }
-    Object.entries(tsconfig.compilerOptions.paths)
-      .filter(([key, value]) => {
-        // use Typescript alias in Jest only if this has value
-        if (value.length) {
-          return true;
-        }
-        return false;
-      })
-      .map(([key, value]) => {
-        // if Typescript alias ends with /* then in Jest:
-        // - alias key must end with /(.*)
-        // - alias value must end with /$1
-        const regexToReplace = /(.*)\/\*$/;
-        const aliasKey = key.replace(regexToReplace, '$1/(.*)');
-        const aliasValue = value[0].replace(regexToReplace, '$1/$$1');
-        return [aliasKey, `<rootDir>/${aliasValue}`];
-      })
-      .reduce((aliases, [key, value]) => {
-        aliases[key] = value;
-        return aliases;
-      }, jestAliases);
+  const jestAliases = { ...alias };
+  if (!tsconfig.compilerOptions.paths) {
     return jestAliases;
   }
+  Object.entries(tsconfig.compilerOptions.paths)
+    .filter(([_key, value]) => {
+      // use Typescript alias in Jest only if this has value
+      if (value.length) {
+        return true;
+      }
+      return false;
+    })
+    .map(([key, value]) => {
+      // if Typescript alias ends with /* then in Jest:
+      // - alias key must end with /(.*)
+      // - alias value must end with /$1
+      const regexToReplace = /(.*)\/\*$/;
+      const aliasKey = key.replace(regexToReplace, '$1/(.*)');
+      const aliasValue = value[0].replace(regexToReplace, '$1/$$1');
+      return [aliasKey, `<rootDir>/${aliasValue}`];
+    })
+    .reduce((aliases, [key, value]) => {
+      aliases[key] = value;
+      return aliases;
+    }, jestAliases);
+  return jestAliases;
+}

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

@@ -26,6 +26,7 @@
     "node_modules"
   ],
   "dependencies": {
+    "@eslint/js": null,
     "@fortawesome/fontawesome-svg-core": "<%= nodeDependencies['@fortawesome/fontawesome-svg-core'] %>",
     "@fortawesome/free-solid-svg-icons": "<%= nodeDependencies['@fortawesome/free-solid-svg-icons'] %>",
     "@fortawesome/react-fontawesome": "<%= nodeDependencies['@fortawesome/react-fontawesome'] %>",
@@ -70,8 +71,6 @@
     "@types/react-redux": "<%= nodeDependencies['@types/react-redux'] %>",
     "@types/redux": "<%= nodeDependencies['@types/redux'] %>",
     "@types/webpack-env": "<%= nodeDependencies['@types/webpack-env'] %>",
-    "@typescript-eslint/eslint-plugin": "<%= nodeDependencies['@typescript-eslint/eslint-plugin'] %>",
-    "@typescript-eslint/parser": "<%= nodeDependencies['@typescript-eslint/parser'] %>",
     "autoprefixer": "<%= nodeDependencies['autoprefixer'] %>",
     "browser-sync": "<%= nodeDependencies['browser-sync'] %>",
     "browser-sync-webpack-plugin": "<%= nodeDependencies['browser-sync-webpack-plugin'] %>",
@@ -82,6 +81,7 @@
     "css-minimizer-webpack-plugin": "<%= nodeDependencies['css-minimizer-webpack-plugin'] %>",
     "eslint": "<%= nodeDependencies['eslint'] %>",
     "eslint-config-prettier": "<%= nodeDependencies['eslint-config-prettier'] %>",
+    "eslint-plugin-prettier": "<%= nodeDependencies['eslint-plugin-prettier'] %>",
     "eslint-plugin-react": "<%= nodeDependencies['eslint-plugin-react'] %>",
     "eslint-webpack-plugin": "<%= nodeDependencies['eslint-webpack-plugin'] %>",
     "fork-ts-checker-webpack-plugin": "<%= nodeDependencies['fork-ts-checker-webpack-plugin'] %>",
@@ -120,6 +120,7 @@
     "cypress": "<%= nodeDependencies['cypress'] %>",
 <%_ } _%>
     "typescript": "<%= nodeDependencies['typescript'] %>",
+    "typescript-eslint": "<%= nodeDependencies['typescript-eslint'] %>",
     "webpack": "<%= nodeDependencies['webpack'] %>",
     "webpack-cli": "<%= nodeDependencies['webpack-cli'] %>",
     "webpack-dev-server": "<%= nodeDependencies['webpack-dev-server'] %>",
@@ -136,7 +137,7 @@
   "scripts": {
     "prettier:check": "prettier --check \"{,src/**/,webpack/,.blueprint/**/}*.{<%= prettierExtensions %>}\"",
     "prettier:format": "prettier --write \"{,src/**/,webpack/,.blueprint/**/}*.{<%= prettierExtensions %>}\"",
-    "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
+    "lint": "eslint .",
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= this.relativeDir(clientRootDir, temporaryDir) %>",
     "clean-www": "rimraf <%= this.relativeDir(clientRootDir, clientDistDir) %>",

package/dist/generators/react/templates/postcss.config.js.ejs

@@ -17,7 +17,5 @@
  limitations under the License.
 -%>
 module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
+  plugins: [require('autoprefixer')],
 };

package/dist/generators/react/templates/src/main/webapp/app/_bootstrap-variables.scss.ejs

@@ -26,23 +26,23 @@
 <%_ if (clientThemeNone) { _%>
 // Options:
 // Quickly modify global styling by enabling or disabling optional features.
-$enable-rounded:            true;
-$enable-shadows:            false;
-$enable-gradients:          false;
-$enable-transitions:        true;
-$enable-hover-media-query:  false;
-$enable-grid-classes:       true;
-$enable-print-styles:       true;
+$enable-rounded: true;
+$enable-shadows: false;
+$enable-gradients: false;
+$enable-transitions: true;
+$enable-hover-media-query: false;
+$enable-grid-classes: true;
+$enable-print-styles: true;
 
 // Components:
 // Define common padding and border radius sizes and more.
 
-$border-radius:          .15rem;
-$border-radius-lg:       .125rem;
-$border-radius-sm:       .1rem;
+$border-radius: 0.15rem;
+$border-radius-lg: 0.125rem;
+$border-radius-sm: 0.1rem;
 
 // Body:
 // Settings for the `<body>` element.
 
-$body-bg:                   #ffffff;
+$body-bg: #ffffff;
 <%_ } _%>

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

@@ -131,7 +131,9 @@ Generic styles
 }
 
 .shadow {
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  box-shadow:
+    rgba(0, 0, 0, 0.12) 0px 1px 6px,
+    rgba(0, 0, 0, 0.12) 0px 1px 4px;
   border-radius: 2px;
 }
 
@@ -157,8 +159,8 @@ Generic styles
 /* padding helpers */
 
 @mixin pad($size, $side) {
-  @if $size== "" {
-    @if $side== "" {
+  @if $size== '' {
+    @if $side== '' {
       .pad {
         padding: 10px !important;
       }
@@ -168,7 +170,7 @@ Generic styles
       }
     }
   } @else {
-    @if $side== "" {
+    @if $side== '' {
       .pad-#{$size} {
         padding: #{$size}px !important;
       }
@@ -180,54 +182,54 @@ Generic styles
   }
 }
 
-@include pad("", "");
-@include pad("2", "");
-@include pad("3", "");
-@include pad("5", "");
-@include pad("10", "");
-@include pad("20", "");
-@include pad("25", "");
-@include pad("30", "");
-@include pad("50", "");
-@include pad("75", "");
-@include pad("100", "");
-@include pad("4", "top");
-@include pad("5", "top");
-@include pad("10", "top");
-@include pad("20", "top");
-@include pad("25", "top");
-@include pad("30", "top");
-@include pad("50", "top");
-@include pad("75", "top");
-@include pad("100", "top");
-@include pad("4", "bottom");
-@include pad("5", "bottom");
-@include pad("10", "bottom");
-@include pad("20", "bottom");
-@include pad("25", "bottom");
-@include pad("30", "bottom");
-@include pad("50", "bottom");
-@include pad("75", "bottom");
-@include pad("100", "bottom");
-@include pad("5", "right");
-@include pad("10", "right");
-@include pad("20", "right");
-@include pad("25", "right");
-@include pad("30", "right");
-@include pad("50", "right");
-@include pad("75", "right");
-@include pad("100", "right");
-@include pad("5", "left");
-@include pad("10", "left");
-@include pad("20", "left");
-@include pad("25", "left");
-@include pad("30", "left");
-@include pad("50", "left");
-@include pad("75", "left");
-@include pad("100", "left");
+@include pad('', '');
+@include pad('2', '');
+@include pad('3', '');
+@include pad('5', '');
+@include pad('10', '');
+@include pad('20', '');
+@include pad('25', '');
+@include pad('30', '');
+@include pad('50', '');
+@include pad('75', '');
+@include pad('100', '');
+@include pad('4', 'top');
+@include pad('5', 'top');
+@include pad('10', 'top');
+@include pad('20', 'top');
+@include pad('25', 'top');
+@include pad('30', 'top');
+@include pad('50', 'top');
+@include pad('75', 'top');
+@include pad('100', 'top');
+@include pad('4', 'bottom');
+@include pad('5', 'bottom');
+@include pad('10', 'bottom');
+@include pad('20', 'bottom');
+@include pad('25', 'bottom');
+@include pad('30', 'bottom');
+@include pad('50', 'bottom');
+@include pad('75', 'bottom');
+@include pad('100', 'bottom');
+@include pad('5', 'right');
+@include pad('10', 'right');
+@include pad('20', 'right');
+@include pad('25', 'right');
+@include pad('30', 'right');
+@include pad('50', 'right');
+@include pad('75', 'right');
+@include pad('100', 'right');
+@include pad('5', 'left');
+@include pad('10', 'left');
+@include pad('20', 'left');
+@include pad('25', 'left');
+@include pad('30', 'left');
+@include pad('50', 'left');
+@include pad('75', 'left');
+@include pad('100', 'left');
 
 @mixin no-padding($side) {
-  @if $side== "all" {
+  @if $side== 'all' {
     .no-padding {
       padding: 0 !important;
     }
@@ -238,11 +240,11 @@ Generic styles
   }
 }
 
-@include no-padding("left");
-@include no-padding("right");
-@include no-padding("top");
-@include no-padding("bottom");
-@include no-padding("all");
+@include no-padding('left');
+@include no-padding('right');
+@include no-padding('top');
+@include no-padding('bottom');
+@include no-padding('all');
 
 /* end of padding helpers */
 
@@ -250,7 +252,7 @@ Generic styles
   margin: 0px;
 }
 @mixin voffset($size) {
-  @if $size== "" {
+  @if $size== '' {
     .voffset {
       margin-top: 2px !important;
     }
@@ -261,16 +263,16 @@ Generic styles
   }
 }
 
-@include voffset("");
-@include voffset("5");
-@include voffset("10");
-@include voffset("15");
-@include voffset("30");
-@include voffset("40");
-@include voffset("60");
-@include voffset("80");
-@include voffset("100");
-@include voffset("150");
+@include voffset('');
+@include voffset('5');
+@include voffset('10');
+@include voffset('15');
+@include voffset('30');
+@include voffset('40');
+@include voffset('60');
+@include voffset('80');
+@include voffset('100');
+@include voffset('150');
 
 .readonly {
   background-color: #eee;

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

@@ -34,6 +34,9 @@ import { hasAnyAuthority } from 'app/shared/auth/private-route';
 import ErrorBoundary from 'app/shared/error/error-boundary';
 import { AUTHORITIES } from 'app/config/constants';
 import AppRoutes from 'app/routes';
+<%_ if (enableTranslation &&  enableI18nRTL) { _%>
+import { setTextDirection } from './config/translation';
+<%_ } _%>
 
 const baseHref = document.querySelector('base').getAttribute('href').replace(/\/$/, '');
 
@@ -54,11 +57,17 @@ export const App = () => {
   const isInProduction = useAppSelector(state => state.applicationProfile.inProduction);
   const isOpenAPIEnabled = useAppSelector(state => state.applicationProfile.isOpenAPIEnabled);
 
+<%_ if (enableTranslation && enableI18nRTL) { _%>
+  useEffect(() => {
+    setTextDirection(currentLocale);
+  }, [currentLocale]);
+<%_ } _%>
+
   const paddingTop = '60px';
   return (
     <BrowserRouter basename={baseHref}>
       <div className="app-container" style={{ paddingTop }}>
-        <ToastContainer position="top-left" className="toastify-container" toastClassName="toastify-toast"/>
+        <ToastContainer position="top-left" className="toastify-container" toastClassName="toastify-toast" />
         <ErrorBoundary>
           <Header
             isAuthenticated={isAuthenticated}
@@ -74,10 +83,10 @@ export const App = () => {
         <div className="container-fluid view-container" id="app-view-container">
           <Card className="jh-card">
             <ErrorBoundary>
-              <AppRoutes/>
+              <AppRoutes />
             </ErrorBoundary>
           </Card>
-          <Footer/>
+          <Footer />
         </div>
       </div>
     </BrowserRouter>

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

@@ -29,7 +29,7 @@ describe('Axios Interceptor', () => {
 
     it('onRequestSuccess is called on fulfilled request', () => {
       expect((client.interceptors.request as any).handlers[0].fulfilled({ data: 'foo', url: '/test' })).toMatchObject({
-        data: 'foo'
+        data: 'foo',
       });
     });
     it('onResponseSuccess is called on fulfilled response', () => {
@@ -40,12 +40,11 @@ describe('Axios Interceptor', () => {
         response: {
           statusText: 'NotFound',
           status: 401,
-          data: { message: 'Page not found' }
-        }
+          data: { message: 'Page not found' },
+        },
       };
       expect((client.interceptors.response as any).handlers[0].rejected(rejectError)).rejects.toEqual(rejectError);
       expect(onUnauthenticated.calledOnce).toBe(true);
     });
   });
 });
-

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

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import axios from 'axios';
+import axios, { type AxiosError } from 'axios';
 import { Storage } from 'react-jhipster';
 
 const TIMEOUT = 1 * 60 * 1000;
@@ -34,7 +34,7 @@ const setupAxiosInterceptors = onUnauthenticated => {
     return config;
   };
   const onResponseSuccess = response => response;
-  const onResponseError = err => {
+  const onResponseError = (err: AxiosError) => {
     const status = err.status || (err.response ? err.response.status : 0);
     if (status === 401) {
       onUnauthenticated();

package/dist/generators/react/templates/src/main/webapp/app/config/constants.ts.ejs

@@ -18,11 +18,11 @@
 -%>
 export const AUTHORITIES = {
   ADMIN: 'ROLE_ADMIN',
-  USER: 'ROLE_USER'
+  USER: 'ROLE_USER',
 };
 
 export const messages = {
-  DATA_ERROR_ALERT: 'Internal Error'
+  DATA_ERROR_ALERT: 'Internal Error',
 };
 
 export const APP_DATE_FORMAT = 'DD/MM/YY HH:mm';

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

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 const getErrorMessage = errorData => {
-  let message = errorData.message;
+  let { message } = errorData;
   if (errorData.fieldErrors) {
     errorData.fieldErrors.forEach(fErr => {
       message += `\nfield: ${fErr.field},  Object: ${fErr.objectName}, message: ${fErr.message}\n`;

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

@@ -35,14 +35,14 @@ describe('Notification Middleware', () => {
   // Default action for use in local tests
   const DEFAULT = {
     type: SUCCESS_TYPE,
-    payload: 'foo'
+    payload: 'foo',
   };
   const HEADER_SUCCESS = {
     type: SUCCESS_TYPE,
     payload: {
-        "status": 201,
-        "statusText": "Created",
-        "headers": {"app-alert": "foo.created", "app-params": "foo"}
+      status: 201,
+      statusText: 'Created',
+      headers: { 'app-alert': 'foo.created', 'app-params': 'foo' },
     },
   };
 
@@ -120,7 +120,7 @@ describe('Notification Middleware', () => {
       response: {
         data: '',
         config: {
-          url: 'api/authenticate'
+          url: 'api/authenticate',
         },
         status: 401,
       },

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

@@ -57,6 +57,7 @@ const getFieldErrorsTosts = (fieldErrors: FieldErrorVM[]): TostMessage[] =>
 <%_ } _%>
   });
 
+// eslint-disable-next-line complexity
 export default () => next => action => {
   const { error, payload } = action;
 
@@ -77,7 +78,7 @@ export default () => next => action => {
 
   if (isRejectedAction(action) && isAxiosError(error)) {
     if (error.response) {
-      const response = error.response;
+      const { response } = error;
       if (response.status === 401) {
         // Ignore, page will be redirected to login.
       } else if (error.config?.url?.endsWith('api/account') || error.config?.url?.endsWith('api/authenticate')) {
@@ -98,7 +99,7 @@ export default () => next => action => {
 <%_ } _%>
           });
       } else {
-        const data = response.data;
+        const { data } = response;
         const problem = isProblemWithMessage(data) ? data : null;
         if (problem?.fieldErrors) {
           getFieldErrorsTosts(problem.fieldErrors).forEach(message => addErrorAlert(message));

package/dist/generators/react/templates/src/main/webapp/app/config/store.ts.ejs

@@ -75,7 +75,7 @@ export function configureInjectableStore(storeToInject) {
       combineReducers({
         ...sharedReducers,
         ...injectableStore.asyncReducers,
-      })
+      }),
     );
   };
 

package/dist/generators/react/templates/src/main/webapp/app/config/translation.ts.ejs

@@ -34,6 +34,10 @@ export const locales = Object.keys(languages).sort();
 
 <%_ if (enableI18nRTL) { _%>
 export const isRTL = (lang: string): boolean => languages[lang] && languages[lang].rtl;
+
+export const setTextDirection = (lang: string) => {
+  document.querySelector('html').setAttribute('dir', isRTL(lang) ? 'rtl' : 'ltr');
+};
 <%_ } _%>
 
 export const registerLocale = store => {

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

@@ -126,7 +126,6 @@ export const <%= entityReactName %>Update = () => {
     }
   }, [updateSuccess]);
 
-  // eslint-disable-next-line complexity
   const saveEntity = values => {
 <%_ for (field of fields) {
     const fieldName = field.fieldName;

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

@@ -52,7 +52,7 @@ const render = Component =>
           <Component />
         </div>
       </Provider>
-    </ErrorBoundary>
+    </ErrorBoundary>,
   );
 
 render(AppComponent);

package/dist/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.reducer.spec.ts.ejs

@@ -16,7 +16,6 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-
 import axios from 'axios';
 import sinon from 'sinon';
 import { configureStore } from '@reduxjs/toolkit';
@@ -95,10 +94,7 @@ describe('Activate reducer tests', () => {
     });
     it('dispatches RESET actions', async () => {
       await store.dispatch(reset());
-      expect(store.getState()).toEqual([
-        expect.any(Object),
-        expect.objectContaining(reset()),
-      ]);
+      expect(store.getState()).toEqual([expect.any(Object), expect.objectContaining(reset())]);
     });
   });
 });

package/dist/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.reducer.ts.ejs

@@ -23,10 +23,10 @@ import { serializeAxiosError } from 'app/shared/reducers/reducer.utils';
 
 const initialState = {
   activationSuccess: false,
-  activationFailure: false
+  activationFailure: false,
 };
 
-export type ActivateState =  Readonly<typeof initialState>;
+export type ActivateState = Readonly<typeof initialState>;
 
 // Actions
 

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

@@ -31,7 +31,8 @@ const successAlert = (
     </Translate>
     <Link to="/login" className="alert-link">
       <Translate contentKey="global.messages.info.authenticated.link">sign in</Translate>
-    </Link>.
+    </Link>
+    .
   </Alert>
 );
 
@@ -49,7 +50,7 @@ export const ActivatePage = () => {
   const [searchParams] = useSearchParams();
 
   useEffect(() => {
-    const key = searchParams.get("key");
+    const key = searchParams.get('key');
 
     dispatch(activateAction(key));
     return () => {