feat(react): upgrade to React 19 and replace reactstrap with react-bo…

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

@@ -36,11 +36,18 @@ const apiVersion = '0.0.1';
 const sharedDefaults = { singleton: true, strictVersion: true, requiredVersion: apiVersion };
 const shareMappings = (...mappings) => Object.fromEntries(mappings.map(map => [map, { ...sharedDefaults, version: apiVersion }]));
 
+const isValidSemver = version => /^\d/.test(version) || version.startsWith('^') || version.startsWith('~');
+
 const shareDependencies = ({ skipList = [] } = {}) =>
   Object.fromEntries(
     Object.entries(packageJson.dependencies)
       .filter(([dependency]) => !skipList.includes(dependency))
-      .map(([dependency, version]) => [dependency, { ...sharedDefaults, version, requiredVersion: version }]),
+      .map(([dependency, version]) => [
+        dependency,
+        isValidSemver(version)
+          ? { ...sharedDefaults, version, requiredVersion: version }
+          : { ...sharedDefaults, version: apiVersion, requiredVersion: apiVersion },
+      ]),
   );
 <%_ } _%>
 

generators/react/__snapshots__/generator.spec.ts.snap

@@ -786,6 +786,10 @@ exports[`generator - react gateway-jwt-skipUserManagement(true)-withAdminUi(fals
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
   ],
@@ -1601,6 +1605,10 @@ exports[`generator - react gateway-oauth2-withAdminUi(true)-skipJhipsterDependen
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
   ],
@@ -2403,6 +2411,10 @@ exports[`generator - react microservice-jwt-skipUserManagement(false)-withAdminU
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
     {
@@ -3215,6 +3227,10 @@ exports[`generator - react microservice-oauth2-withAdminUi(true)-skipJhipsterDep
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
     {
@@ -4093,6 +4109,10 @@ exports[`generator - react monolith-jwt-skipUserManagement(false)-withAdminUi(tr
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
   ],
@@ -4884,6 +4904,10 @@ exports[`generator - react monolith-oauth2-withAdminUi(false)-skipJhipsterDepend
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
   ],
@@ -5670,6 +5694,10 @@ exports[`generator - react monolith-session-skipUserManagement(true)-withAdminUi
     {
       "overrides": {
         "browser-sync": "BROWSER_SYNC_VERSION",
+        "react-redux-loading-bar": {
+          "react": "$react",
+          "react-dom": "$react-dom",
+        },
       },
     },
   ],

generators/react/generator.ts

@@ -279,12 +279,20 @@ ${comment}
         source.mergeClientPackageJson!({
           overrides: {
             'browser-sync': nodeDependencies['browser-sync'],
+            'react-redux-loading-bar': {
+              react: '$react',
+              'react-dom': '$react-dom',
+            },
           },
         });
         if (application.clientRootDir) {
           this.packageJson.merge({
             overrides: {
               'browser-sync': application.nodeDependencies['browser-sync'],
+              'react-redux-loading-bar': {
+                react: '$react',
+                'react-dom': '$react-dom',
+              },
             },
           });
         }

generators/react/resources/package.json

@@ -8,15 +8,15 @@
     "bootstrap": "5.3.8",
     "bootswatch": "5.3.8",
     "path-browserify": "1.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-bootstrap": "2.10.9",
+    "react-dom": "19.1.0",
     "react-hook-form": "7.71.2",
-    "react-jhipster": "0.25.3",
+    "react-jhipster": "github:jhipster/react-jhipster#main",
     "react-redux": "9.2.0",
     "react-redux-loading-bar": "5.0.8",
     "react-router": "7.13.1",
     "react-toastify": "11.0.5",
-    "reactstrap": "9.2.3",
     "redux": "5.0.1",
     "rxjs": "7.8.2",
     "sockjs-client": "1.6.1",
@@ -31,8 +31,8 @@
     "@testing-library/react": "16.3.2",
     "@types/jest": "30.0.0",
     "@types/node": "22.19.13",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.6",
+    "@types/react-dom": "19.1.6",
     "@types/webpack-env": "1.18.8",
     "autoprefixer": "10.4.27",
     "browser-sync": "3.0.4",

generators/react/support/translate-react.spec.ts

@@ -120,7 +120,7 @@ translate('global', { min:20, max: 50, pattern: '^[a-zA-Z0-9]*$',
 import React from 'react';
 import { Link } from 'react-router';
 import { Translate } from 'react-jhipster';
-import { Row, Col, Alert } from 'reactstrap';
+import { Row, Col, Alert } from 'react-bootstrap';
 
 import { useAppSelector } from 'app/config/store';
 
@@ -212,7 +212,7 @@ export default Home;
 import React from 'react';
 import { Link } from 'react-router';
 
-import { Row, Col, Alert } from 'reactstrap';
+import { Row, Col, Alert } from 'react-bootstrap';
 
 import { useAppSelector } from 'app/config/store';
 

generators/react/templates/package.json.ejs

@@ -43,7 +43,7 @@
     "react-redux-loading-bar": "<%= nodeDependencies['react-redux-loading-bar'] %>",
     "react-router": "<%= nodeDependencies['react-router'] %>",
     "react-toastify": "<%= nodeDependencies['react-toastify'] %>",
-    "reactstrap": "<%= nodeDependencies['reactstrap'] %>",
+    "react-bootstrap": "<%= nodeDependencies['react-bootstrap'] %>",
     "redux": "<%= nodeDependencies['redux'] %>",
 <%_ if (skipServer) { _%>
     "sonar-scanner": "<%= nodeDependencies['sonar-scanner'] %>",

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

@@ -113,7 +113,7 @@ Custom button styles
 Generic styles
 ========================================================================== */
 
-/* Temporary workaround for availity-reactstrap-validation */
+/* Temporary workaround for react-bootstrap validation */
 .invalid-feedback {
   display: inline;
 }

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

@@ -21,7 +21,7 @@ import './app.scss';
 import 'app/config/dayjs';
 
 import React, { useEffect } from 'react';
-import { Card } from 'reactstrap';
+import { Card } from 'react-bootstrap';
 import { BrowserRouter } from 'react-router';
 import { ToastContainer, toast } from 'react-toastify';
 

generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-delete-dialog.tsx.ejs

@@ -18,7 +18,7 @@
 -%>
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'react-bootstrap';
 import { Translate } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -59,19 +59,19 @@ export const <%= entityReactName %>DeleteDialog = () => {
   }
 
   return (
-    <Modal isOpen toggle={handleClose}>
-    <ModalHeader toggle={handleClose} data-cy="<%= entityInstance %>DeleteDialogHeading"><Translate contentKey="entity.delete.title">Confirm delete operation</Translate></ModalHeader>
+    <Modal show onHide={handleClose}>
+    <ModalHeader data-cy="<%= entityInstance %>DeleteDialogHeading" closeButton><Translate contentKey="entity.delete.title">Confirm delete operation</Translate></ModalHeader>
     <ModalBody id="<%= i18nKeyPrefix %>.delete.question">
       <Translate contentKey="<%= i18nKeyPrefix %>.delete.question" interpolate={{ id: <%= entityInstance %>Entity.<%= primaryKey.name %> }}>
           Are you sure you want to delete this <%- entityNameCapitalized %>?
       </Translate>
     </ModalBody>
     <ModalFooter>
-      <Button color="secondary" onClick={handleClose}>
+      <Button variant="secondary" onClick={handleClose}>
         <FontAwesomeIcon icon="ban" />&nbsp;
         <Translate contentKey="entity.action.cancel">Cancel</Translate>
       </Button>
-      <Button id="<%= jhiPrefixDashed %>-confirm-delete-<%= entityInstance %>" data-cy="entityConfirmDeleteButton" color="danger" onClick={confirmDelete}>
+      <Button id="<%= jhiPrefixDashed %>-confirm-delete-<%= entityInstance %>" data-cy="entityConfirmDeleteButton" variant="danger" onClick={confirmDelete}>
         <FontAwesomeIcon icon="trash" />&nbsp;
         <Translate contentKey="entity.action.delete">Delete</Translate>
       </Button>

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

@@ -18,7 +18,7 @@
 -%>
 import React, { useEffect } from 'react';
 import { Link, useParams } from 'react-router';
-import { Button, <% if (anyFieldHasDocumentation) { %>UncontrolledTooltip, <% } %>Row, Col } from 'reactstrap';
+import { Button, <% if (anyFieldHasDocumentation) { %>OverlayTrigger, Tooltip, <% } %>Row, Col } from 'react-bootstrap';
 import {
   Translate,
 <%_ if (anyFieldIsBlobDerived) { _%>
@@ -71,13 +71,15 @@ _%>
                 </Translate>
               </span>
   <%_ if (field.documentation) { _%>
-              <UncontrolledTooltip target="<%= fieldName %>">
+              <OverlayTrigger overlay={<Tooltip>
     <%_ if (enableTranslation) { _%>
                 <Translate contentKey="<%= i18nKeyPrefix %>.help.<%= fieldName %>"/>
     <%_ } else { _%>
                 <%= field.documentation %>
     <%_ } _%>
-              </UncontrolledTooltip>
+              </Tooltip>}>
+                <span id="<%= fieldName %>" className="d-inline-block">?</span>
+              </OverlayTrigger>
   <%_ } _%>
             </dt>
             <dd>
@@ -156,10 +158,10 @@ _%>
   <%_ } _%>
 <%_ } _%>
           </dl>
-        <Button tag={Link} to="/<%= entityPage %>" replace color="info" data-cy="entityDetailsBackButton">
+        <Button as={Link as any} to="/<%= entityPage %>" replace variant="info" data-cy="entityDetailsBackButton">
           <FontAwesomeIcon icon="arrow-left" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.back">Back</Translate></span>
         </Button>&nbsp;
-        <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>Entity.<%= primaryKey.name %>}/edit`} replace color="primary">
+        <Button as={Link as any} to={`/<%= entityPage %>/${<%= entityInstance %>Entity.<%= primaryKey.name %>}/edit`} replace variant="primary">
           <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
         </Button>
       </Col>

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

@@ -23,8 +23,8 @@ import {
   Row,
   Col,
   FormText,
-  <% if (anyFieldHasDocumentation) { %>UncontrolledTooltip,<% } %>
-} from 'reactstrap';
+  <% if (anyFieldHasDocumentation) { %>OverlayTrigger, Tooltip,<% } %>
+} from 'react-bootstrap';
 import {
   isNumber,
   Translate,
@@ -289,13 +289,15 @@ _%>
         />
   <%_ } _%>
   <%_ if (field.documentation) { _%>
-          <UncontrolledTooltip target="<%= fieldName %>Label">
+          <OverlayTrigger overlay={<Tooltip>
     <%_ if (enableTranslation) { _%>
             <Translate contentKey="<%= i18nKeyPrefix %>.help.<%= fieldName %>"/>
     <%_ } else { _%>
             <%= field.documentation %>
     <%_ } _%>
-          </UncontrolledTooltip>
+          </Tooltip>}>
+            <span id="<%= fieldName %>Label" className="d-inline-block">?</span>
+          </OverlayTrigger>
   <%_ } _%>
 <%_ } _%>
 <%_ for (const rel of persistableRelationships.filter(rel => !rel.otherEntity.embedded)) {
@@ -362,12 +364,12 @@ _%>
           </ValidatedField>
   <%_ } _%>
 <%_ } _%>
-          <Button tag={Link} id="cancel-save" data-cy="entityCreateCancelButton" to="/<%= entityPage %>" replace color="info">
+          <Button as={Link as any} id="cancel-save" data-cy="entityCreateCancelButton" to="/<%= entityPage %>" replace variant="info">
             <FontAwesomeIcon icon="arrow-left" />&nbsp;
             <span className="d-none d-md-inline" ><Translate contentKey="entity.action.back">Back</Translate></span>
           </Button>
           &nbsp;
-          <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" disabled={updating}>
+          <Button variant="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" disabled={updating}>
             <FontAwesomeIcon icon="save" />&nbsp;
             <Translate contentKey="entity.action.save">Save</Translate>
           </Button>

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

@@ -21,7 +21,7 @@ import React, { useState, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 <%_ } _%>
 import { Link, useLocation, useNavigate } from 'react-router';
-import { Button, <% if (searchEngineAny) { %>Input, InputGroup, FormGroup, Form, Row, Col, <% } %>Table } from 'reactstrap';
+import { Button, <% if (searchEngineAny) { %>FormControl, InputGroup, Form, Row, Col, <% } %>Table } from 'react-bootstrap';
 import {
 <%_ if (anyFieldIsBlobDerived) { _%>
   <%_ if (anyFieldHasFileBasedContentType) { _%>
@@ -327,7 +327,7 @@ export const <%= entityReactName %> = () => {
       <h2 id="<%= entityFileName %>-heading" data-cy="<%- entityNameCapitalized %>Heading">
         <Translate contentKey="<%= i18nKeyPrefix %>.home.title"><%= entityNamePluralHumanized %></Translate>
         <div className="d-flex justify-content-end">
-          <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
+          <Button className="me-2" variant="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="<%= i18nKeyPrefix %>.home.refreshListLabel">Refresh List</Translate>
           </Button>
 <%_ if (!readOnly) { _%>
@@ -343,10 +343,9 @@ export const <%= entityReactName %> = () => {
 <%_ if (searchEngineAny) { _%>
       <Row>
         <Col sm="12">
-          <Form onSubmit={startSearching}>
-            <FormGroup>
+           <Form onSubmit={startSearching}>
               <InputGroup>
-                <Input type="text" name="search" defaultValue={search} onChange={handleSearch}
+                <FormControl type="text" name="search" defaultValue={search} onChange={handleSearch}
               placeholder=<% if (enableTranslation) { %>{translate('<%= i18nKeyPrefix %>.home.search')}<% } else { %>"Search"<% } %>/>
                 <Button className="input-group-addon">
                   <FontAwesomeIcon icon="search" />
@@ -355,8 +354,7 @@ export const <%= entityReactName %> = () => {
                   <FontAwesomeIcon icon="trash" />
                 </Button>
               </InputGroup>
-            </FormGroup>
-          </Form>
+           </Form>
         </Col>
       </Row>
 <%_ } _%>
@@ -388,7 +386,7 @@ export const <%= entityReactName %> = () => {
                   <%= entityInstance %>List.map(<%= entityInstance %> => (
                   <tr key={`entity-${<%= entityInstance %>.<%= primaryKey.name %>}`} data-cy="entityTable">
                     <td>
-                      <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}`} color="link" size="sm">
+                      <Button as={Link as any} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}`} variant="link" size="sm">
                         {<%= entityInstance %>.<%= primaryKey.name %>}
                       </Button>
                     </td>
@@ -479,14 +477,14 @@ _%>
 <%_ } _%>
                       <td className="text-end">
                         <div className="btn-group flex-btn-group-container">
-                          <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}`} color="info" size="sm" data-cy="entityDetailsButton">
+                          <Button as={Link as any} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}`} variant="info" size="sm" data-cy="entityDetailsButton">
                             <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.view">View</Translate></span>
                           </Button>
 <%_ if (!readOnly) { _%>
-                          <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/edit<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="primary" size="sm" data-cy="entityEditButton">
+                          <Button as={Link as any} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/edit<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} variant="primary" size="sm" data-cy="entityEditButton">
                             <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
                           </Button>
-                          <Button onClick={() => <% if (entityInstance !== 'window' ) { %>window.<% } %>location.href=`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="danger" size="sm" data-cy="entityDeleteButton">
+                          <Button onClick={() => <% if (entityInstance !== 'window' ) { %>window.<% } %>location.href=`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} variant="danger" size="sm" data-cy="entityDeleteButton">
                             <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.delete">Delete</Translate></span>
                           </Button>
 <%_ } _%>