update import

generators/react/files-react.mjs

@@ -210,6 +210,7 @@ export const files = {
         'shared/layout/menus/menu-components.tsx',
         'shared/layout/menus/menu-item.tsx',
         'shared/layout/password/password-strength-bar.tsx',
+        'shared/layout/sider/sider.tsx',
         // util
         'shared/util/date-utils.ts',
         'shared/util/pagination.constants.ts',

generators/react/templates/package.json.ejs

@@ -33,6 +33,7 @@
     "@reduxjs/toolkit": "<%= nodeDependencies['@reduxjs/toolkit'] %>",
     "axios": "<%= nodeDependencies['axios'] %>",
     "antd": "5.10.2",
+    "bootstrap": "<%= nodeDependencies['bootstrap'] %>",
 <%_ if (!clientThemeNone) { _%>
     "bootswatch": "<%= nodeDependencies['bootswatch'] %>",
 <%_ } _%>
@@ -50,6 +51,7 @@
     "react-router-dom": "<%= nodeDependencies['react-router-dom'] %>",
     "react-toastify": "<%= nodeDependencies['react-toastify'] %>",
     "react-transition-group": "<%= nodeDependencies['react-transition-group'] %>",
+    "reactstrap": "<%= nodeDependencies['reactstrap'] %>",
     "redux": "<%= nodeDependencies['redux'] %>",
     "redux-thunk": "<%= nodeDependencies['redux-thunk'] %>",
 <%_ if (communicationSpringWebsocket) { _%>

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

@@ -29,12 +29,10 @@ import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { getSession } from 'app/shared/reducers/authentication';
 import { getProfile } from 'app/shared/reducers/application-profile';
 import Header from 'app/shared/layout/header/header';
-import Footer from 'app/shared/layout/footer/footer';
 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';
-import 'antd/dist/antd.css';
 import Sider from 'app/shared/layout/sider/sider';
 
 const baseHref = document.querySelector('base').getAttribute('href').replace(/\/$/, '');
@@ -47,17 +45,17 @@ export const App = () => {
     dispatch(getProfile());
   }, []);
 
-<%_ if (enableTranslation) { _%>
-  const currentLocale = useAppSelector(state => state.locale.currentLocale);
-<%_ } _%>
+  <%_ if (enableTranslation) { _%>
+    const currentLocale = useAppSelector(state => state.locale.currentLocale);
+  <%_ } _%>
   const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated);
   const isAdmin = useAppSelector(state => hasAnyAuthority(state.authentication.account.authorities, [AUTHORITIES.ADMIN]));
   const ribbonEnv = useAppSelector(state => state.applicationProfile.ribbonEnv);
   const isInProduction = useAppSelector(state => state.applicationProfile.inProduction);
   const isOpenAPIEnabled = useAppSelector(state => state.applicationProfile.isOpenAPIEnabled);
 
   return (
-    <Router basename={baseHref}>
+    <BrowserRouter basename={baseHref}>
       <Layout className="app-container">
         <ToastContainer position={toast.POSITION.TOP_LEFT} className="toastify-container" toastClassName="toastify-toast"/>
         {isAdmin ? (
@@ -72,7 +70,9 @@ export const App = () => {
             <Sider
               isAuthenticated={isAuthenticated}
               isAdmin={isAdmin}
-              currentLocale={currentLocale}
+              <%_ if (enableTranslation) { _%>
+                currentLocale={currentLocale}
+              <%_ } _%>
               ribbonEnv={ribbonEnv}
               isInProduction={isInProduction}
               isOpenAPIEnabled={isOpenAPIEnabled}
@@ -85,7 +85,7 @@ export const App = () => {
           </Layout.Content>
         </Layout>
       </Layout>
-    </Router>
+    </BrowserRouter>
   );
 };
 

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

@@ -1,23 +1,5 @@
-<%#
- Copyright 2013-2023 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.
--%>
 import React, { useEffect } from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { Row, Col, Button, Result } from 'antd';
 import { Translate, getUrlParameter } from 'react-jhipster';
 
@@ -28,9 +10,7 @@ const successAlert = (
   <Result
     status="success"
     title={
-      <Translate contentKey="activate.messages.success">
-        <strong>Your user account has been activated.</strong> Please
-      </Translate>
+        <strong>Your user account has been activated.</strong>
     }
     extra={[
       <Button key={'signin'} type={'primary'}>
@@ -46,16 +26,13 @@ const failureAlert = (
   <Result
     status="warning"
     title={
-      <Translate contentKey="activate.messages.error">
-        <strong>Your user could not be activated.</strong> Please use the registration form to sign up.
-      </Translate>
+        <strong>Your user could not be activated. Please use the registration form to sign up.</strong>
     }
   />
 );
 
 export const ActivatePage = () => {
   const dispatch = useAppDispatch();
-
   const [searchParams] = useSearchParams();
 
   useEffect(() => {

generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs

@@ -19,19 +19,21 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Form, Input, Typography, Row, Col } from 'antd';
 import { Translate, translate, getUrlParameter } from 'react-jhipster';
-import { RouteComponentProps } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { handlePasswordResetFinish, reset } from '../password-reset.reducer';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 
 const { Title } = Typography;
-export const PasswordResetFinishPage = (props: RouteComponentProps<{ key: string }>) => {
+export const PasswordResetFinishPage = () => {
   const [password, setPassword] = useState('');
-  const [key] = useState(getUrlParameter('key', props.location.search));
   const dispatch = useAppDispatch();
 
+  const [searchParams] = useSearchParams();
+  const key = searchParams.get('key');
+
   useEffect(
     () => () => {
       dispatch(reset());

generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs

@@ -61,7 +61,7 @@ export const PasswordResetInit = () => {
             <Space direction={'vertical'}>
               <Alert
                 type="warning"
-                message={<Translate contentKey="reset.request.messages.info">Enter the email address you used to register</Translate>}
+                message={translate('reset.request.messages.info')}
               />
               <Form onFinish={handleValidSubmit}>
                 <Form.Item

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

@@ -93,7 +93,7 @@ export const PasswordPage = () => {
             >
               <Input.Password placeholder={translate('global.form.newpassword.placeholder')}/>
           </Form.Item>
-          <Form.Item label={<Translate contentKey="global.messages.validate.newpassword.strength">Password strength:</Translate>}>
+          <Form.Item label={translate('global.messages.validate.newpassword.strength')}>
             <PasswordStrengthBar password={password} />
           </Form.Item>
           <Form.Item

generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs

@@ -59,13 +59,14 @@ export const SettingsPage = () => {
       })
     );
   };
-
+  <%_ if (enableTranslation) { _%>
   const options = locales.map(locale => {
     return {
       label: languages[locale].name,
       value: locale,
     };
   });
+  <%_ } _%>
 
   return (
     <div>
@@ -143,9 +144,11 @@ export const SettingsPage = () => {
             >
               <Input placeholder={translate('global.form.email.placeholder')} />
             </Form.Item>
+            <%_ if (enableTranslation) { _%>
             <Form.Item id="langKey" name="langKey" label={translate('settings.form.language')} data-cy="langKey">
               <Select id="langKey" options={options} />
             </Form.Item>
+            <%_ } _%>
             <Form.Item>
               <Button type="primary" htmlType="submit">
                 <Translate contentKey="settings.form.button">Save</Translate>

generators/react/templates/src/main/webapp/app/modules/administration/health/health-modal.tsx.ejs

@@ -17,8 +17,7 @@
  limitations under the License.
 -%>
 import React from 'react';
-import { Table, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { Translate } from 'react-jhipster';
+import { Table, Modal, Button } from 'antd';
 
 const formatDiskSpaceOutput = rawValue => {
   // Should display storage space in an human readable unit
@@ -33,32 +32,34 @@ const formatDiskSpaceOutput = rawValue => {
 const HealthModal = ({ handleClose, healthObject, showModal }) => {
   const data = healthObject.details || {};
   return (
-    <Modal isOpen={showModal} modalTransition={{ timeout: 20 }} backdropTransition={{ timeout: 10 }} toggle={handleClose}>
-      <ModalHeader toggle={handleClose}>{healthObject.name}</ModalHeader>
-      <ModalBody>
+    <Modal
+        title={healthObject.name}
+        open={showModal}
+        footer={[
+          <Button color="primary" onClick={handleClose}>
+            Close
+          </Button>
+        ]}
+        onCancel={handleClose}>
         <Table bordered>
           <thead>
             <tr>
-              <th><Translate contentKey="health.details.name">Name</Translate></th>
-              <th><Translate contentKey="health.details.value">Value</Translate></th>
+              <th>Name</th>
+              <th>Value</th>
             </tr>
           </thead>
           <tbody>
             {Object.keys(data).map((key, index) => (
               <tr key={index}>
                 <td>{key}</td>
-                <td>{(healthObject.name === 'diskSpace') ? formatDiskSpaceOutput(data[key]) : JSON.stringify(data[key]) }</td>
+                <td>{healthObject.name === 'diskSpace' ? formatDiskSpaceOutput(data[key]) : JSON.stringify(data[key])}</td>
               </tr>
             ))}
           </tbody>
         </Table>
-      </ModalBody>
-      <ModalFooter>
-        <Button color="primary" onClick={handleClose}>
-          Close
-        </Button>
-      </ModalFooter>
     </Modal>
-)};
+  );
+};
 
 export default HealthModal;
+

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

@@ -48,22 +48,21 @@ export const UserManagementDeleteDialog = () => {
   };
 
   return (
-    <Modal isOpen toggle={handleClose}>
-      <ModalHeader toggle={handleClose}><Translate contentKey="entity.delete.title">Confirm delete operation</Translate></ModalHeader>
-      <ModalBody>
+      <Modal open={true}
+             title={translate('entity.delete.title')}
+             footer={[
+               <Button color="secondary" onClick={handleClose}>
+                 <FontAwesomeIcon icon="ban"/>&nbsp;
+                 <Translate contentKey="entity.action.cancel">Cancel</Translate>
+               </Button>,
+               <Button color="danger" onClick={confirmDelete}>
+                 <FontAwesomeIcon icon="trash" />&nbsp;
+                 <Translate contentKey="entity.action.delete">Delete</Translate>
+               </Button>
+             ]}
+             onCancel={handleClose}>
         <Translate contentKey="userManagement.delete.question" interpolate={{ login: user.login }}>Are you sure you want to delete this User?</Translate>
-      </ModalBody>
-      <ModalFooter>
-        <Button color="secondary" onClick={handleClose}>
-          <FontAwesomeIcon icon="ban"/>&nbsp;
-          <Translate contentKey="entity.action.cancel">Cancel</Translate>
-        </Button>
-        <Button color="danger" onClick={confirmDelete}>
-          <FontAwesomeIcon icon="trash" />&nbsp;
-          <Translate contentKey="entity.action.delete">Delete</Translate>
-        </Button>
-      </ModalFooter>
-    </Modal>
+      </Modal>
   );
 };
 

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

@@ -43,16 +43,16 @@ export const UserManagementDetail = () => {
       <h2>
         <Translate contentKey="userManagement.detail.title">User</Translate> [<strong>{user.login}</strong>]
       </h2>
-      <Row size="md">
+      <Row>
         <dl className="jh-entity-details">
           <dt><Translate contentKey="userManagement.login">Login</Translate></dt>
           <dd>
             <span>{user.login}</span>&nbsp;
             {
               user.activated ? (
-              <Badge color="success"><Translate contentKey="userManagement.activated">Activated</Translate></Badge>
+              <Tag color="success"><Translate contentKey="userManagement.activated">Activated</Translate></Tag>
               ) : (
-              <Badge color="danger"><Translate contentKey="userManagement.deactivated">Deactivated</Translate></Badge>
+              <Tag color="danger"><Translate contentKey="userManagement.deactivated">Deactivated</Translate></Tag>
               )
             }
           </dd>
@@ -81,19 +81,18 @@ export const UserManagementDetail = () => {
                 user.authorities ? (
                 user.authorities.map((authority, i) => (
                     <li key={`user-auth-${i}`}>
-                      <Badge color="info">{authority}</Badge>
+                      <Tag color="info">{authority}</Tag>
                     </li>
                 ))) : null
               }
             </ul>
           </dd>
         </dl>
       </Row>
-      <Button
-        tag={Link} to="/admin/user-management" replace
-        color="info"
-      >
-        <FontAwesomeIcon icon="arrow-left" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.back">Back</Translate></span>
+      <Button type="link">
+        <Link to={"/admin/user-management"} replace color="info">
+        <FontAwesomeIcon icon="arrow-left" /> <span className="d-none d-md-inline">Back</span>
+        </Link>
       </Button>
     </div>
   );