generator-jhipster 7.1.0 → 7.4.0

package/generators/entity-client/templates/common/src/test/javascript/cypress/integration/entity/entity.spec.ts.ejs

@@ -18,16 +18,38 @@ const baseApi = (applicationTypeGateway && locals.microserviceName) ? 'services/
 
 const entityFakeData = generateFakeData('cypress');
 const requiredRelationships = relationships.filter(rel => rel.relationshipRequired || rel.id);
-// We cannot generate a required entity with required relationship.
-const skipCreateTest = (requiredRelationships.length > 0 || !entityFakeData) ? '.skip' : '';
+const requiredOtherEntities = _.uniq(requiredRelationships.map(rel => rel.otherEntity));
+const otherEntities = _.uniq(Object.values(differentRelationships).map(rels => rels[0].otherEntity));
+// We cannot generate a required entity with relationship with required relationships.
+const skipCreateTest =
+  (
+    !cypressBootstrapEntities ||
+    requiredRelationships.some(rel => rel.otherEntity.builtInUser || rel.otherEntity === this.entity) ||
+    requiredRelationships.map(rel => rel.otherEntity.relationships).flat().some(rel => rel.relationshipRequired) ||
+    !entityFakeData
+  ) ? '.skip' : '';
+
+const sampleFields = fields.filter(f => !f.autoGenerate && !f.nullable);
+
+if (workaroundRelationshipReactivePostgress && sampleFields.length === 0) {
+  sampleFields.push(fields.find(f => !f.autoGenerate));
+} else if (workaroundInstantReactiveMariaDB) {
+  sampleFields.push(...fields.filter(f => !f.autoGenerate && f.nullable && f.fieldType === 'Instant'));
+}
 _%>
 
 describe('<%= entityClass %> e2e test', () => {
 
-  const <%= entityInstance %>PageUrl = '/<%= entityUrl %>';
-  const <%= entityInstance %>PageUrlPattern = new RegExp('/<%= entityUrl %>(\\?.*)?$');
+  const <%= entityInstance %>PageUrl = '/<%= entityPage %>';
+  const <%= entityInstance %>PageUrlPattern = new RegExp('/<%= entityPage %>(\\?.*)?$');
   const username = Cypress.env('E2E_USERNAME') ?? 'admin';
   const password = Cypress.env('E2E_PASSWORD') ?? 'admin';
+  const <%= entityInstance %>Sample = <%- JSON.stringify(generateTestEntity(sampleFields.map(field => field.reference))) %>;
+
+  let <%= entityInstance %>: any;
+<%_ for (otherEntity of requiredOtherEntities) { _%>
+  <%_ if (skipCreateTest) { _%>// <%_ } _%>let <%= otherEntity.entityInstance %>: any;
+<%_ } _%>
 
 <%_ if (authenticationTypeOauth2) { _%>
   beforeEach(() => {
@@ -40,12 +62,9 @@ describe('<%= entityClass %> e2e test', () => {
     cy.get(entityItemSelector).should('exist');
   });
 
-  afterEach(() => {
-    cy.get('@oauth2Data').then(oauth2Data => {
-      cy.oauthLogout(oauth2Data);
-    });
-    cy.clearCache();
-  });
+  beforeEach(() => {
+    Cypress.Cookies.preserveOnce('XSRF-TOKEN', 'JSESSIONID');
+  })
 <%_ } else { _%>
   before(() => {
     cy.window().then((win) => {
@@ -57,17 +76,97 @@ describe('<%= entityClass %> e2e test', () => {
   });
 <%_ } _%>
 
+<%_ if (requiredOtherEntities.length > 0) { _%>
+  <%_ if (skipCreateTest) { _%>
+  /* Disabled due to incompatibility
+  <%_ } _%>
+  beforeEach(() => {
+  <%_ for (otherEntity of requiredOtherEntities) { _%>
+    // create an instance at the required relationship entity:
+    cy.authenticatedRequest({
+      method: 'POST',
+      url: '/<%= baseApi + otherEntity.entityApiUrl %>',
+      body: <%- JSON.stringify(generateTestEntity(otherEntity.fields.filter(f => !f.autoGenerate).map(field => field.reference))) %>,
+    }).then(({ body }) => {
+      <%= otherEntity.entityInstance %> = body;
+    });
+  <%_ } _%>
+  });
+  <%_ if (skipCreateTest) { _%>
+   */
+  <%_ } _%>
+
+<%_ } _%>
   beforeEach(() => {
     cy.intercept('GET', '/<%= baseApi + entityApiUrl %>+(?*|)').as('entitiesRequest');
     cy.intercept('POST', '/<%= baseApi + entityApiUrl %>').as('postEntityRequest');
     cy.intercept('DELETE', '/<%= baseApi + entityApiUrl %>/*').as('deleteEntityRequest');
   });
 
-  it('should load <%= entityClassPlural %>', () => {
+<%_ if (requiredOtherEntities.length > 0) { _%>
+  <%_ if (skipCreateTest) { _%>
+  /* Disabled due to incompatibility
+  <%_ } _%>
+  beforeEach(() => {
+    // Simulate relationships api for better performance and reproducibility.
+  <%_ for (otherEntity of otherEntities) { _%>
+    cy.intercept('GET', '/<%= baseApi + otherEntity.entityApiUrl %>', {
+      statusCode: 200,
+      body: [<%= requiredOtherEntities.includes(otherEntity) ? otherEntity.entityInstance : '' %>],
+    });
+
+  <%_ } _%>
+  });
+  <%_ if (skipCreateTest) { _%>
+   */
+  <%_ } _%>
+
+<%_ } _%>
+  afterEach(() => {
+    if (<%= entityInstance %>) {
+      cy.authenticatedRequest({
+        method: 'DELETE',
+        url: `/<%= baseApi + entityApiUrl %>/${<%= entityInstance %>.<%= primaryKey.name %>}`,
+      }).then(() => {
+        <%= entityInstance %> = undefined;
+      });
+    }
+  });
+
+<%_ if (requiredOtherEntities.length > 0) { _%>
+  <%_ if (skipCreateTest) { _%>
+  /* Disabled due to incompatibility
+  <%_ } _%>
+  afterEach(() => {
+  <%_ for (otherEntity of requiredOtherEntities) { _%>
+    if (<%= otherEntity.entityInstance %>) {
+      cy.authenticatedRequest({
+        method: 'DELETE',
+        url: `/<%= baseApi + otherEntity.entityApiUrl %>/${<%= otherEntity.entityInstance %>.<%= otherEntity.primaryKey.name %>}`,
+      }).then(() => {
+        <%= otherEntity.entityInstance %> = undefined;
+      });
+    }
+  <%_ } _%>
+  });
+  <%_ if (skipCreateTest) { _%>
+   */
+  <%_ } _%>
+
+<%_ } _%>
+<%_ if (authenticationTypeOauth2) { _%>
+
+  afterEach(() => {
+    cy.oauthLogout();
+    cy.clearCache();
+  });
+<%_ } _%>
+
+  it('<%= entityClassPlural %> menu should load <%= entityClassPlural %> page', () => {
     cy.visit('/');
-    cy.clickOnEntityMenuItem('<%= entityStateName %>');
+    cy.clickOnEntityMenuItem('<%= entityPage %>');
     cy.wait('@entitiesRequest').then(({ response }) => {
-      if (response.body.length === 0) {
+      if (response!.body.length === 0) {
         cy.get(entityTableSelector).should('not.exist');
       } else {
         cy.get(entityTableSelector).should('exist');
@@ -77,57 +176,140 @@ describe('<%= entityClass %> e2e test', () => {
     cy.url().should('match', <%= entityInstance %>PageUrlPattern);
   });
 
-  it('should load details <%= entityClass %> page', function() {
-    cy.visit(<%= entityInstance %>PageUrl);
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      if (response.body.length === 0) {
-        this.skip();
-      }
-    });;
-    cy.get(entityDetailsButtonSelector).first().click({force: true});
-    cy.getEntityDetailsHeading('<%= entityInstance %>');
-    cy.get(entityDetailsBackButtonSelector).click({force: true});
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      expect(response.statusCode).to.equal(200);
+  describe('<%= entityClass %> page', () => {
+<%_ if (!readOnly) { _%>
+    describe('create button click', () => {
+      beforeEach(() => {
+        cy.visit(<%= entityInstance %>PageUrl);
+        cy.wait('@entitiesRequest');
+      });
+
+      it('should load create <%= entityClass %> page', () => {
+        cy.get(entityCreateButtonSelector).click({force: true});
+        cy.url().should('match', new RegExp('/<%= entityPage %>/new$'));
+        cy.getEntityCreateUpdateHeading('<%= entityClass %>');
+        cy.get(entityCreateSaveButtonSelector).should('exist');
+        cy.get(entityCreateCancelButtonSelector).click({force: true});
+        cy.wait('@entitiesRequest').then(({ response }) => {
+          expect(response!.statusCode).to.equal(200);
+        });
+        cy.url().should('match', <%= entityInstance %>PageUrlPattern);
+      });
     });
-    cy.url().should('match', <%= entityInstance %>PageUrlPattern);
-  });
+
+<%_ } _%>
+    describe('with existing value', () => {
+<% if (!readOnly) { %>
+  <%_ if (skipCreateTest) { _%>
+      /* Disabled due to incompatibility
+  <%_ } _%>
+      beforeEach(() => {
+        cy.authenticatedRequest({
+          method: 'POST',
+          url: '/<%= baseApi + entityApiUrl %>',
+  <% if (requiredRelationships.length > 0) { %>
+          body: {
+            ...<%= entityInstance %>Sample,
+    <%_ for (relationship of requiredRelationships) { _%>
+            <%= relationship.relationshipName %>: <%= relationship.otherEntity.entityInstance %>,
+    <%_ } _%>
+          },
+  <%_ } else { _%>
+          body: <%= entityInstance %>Sample,
+  <%_ } _%>
+        }).then(({ body }) => {
+          <%= entityInstance %> = body;
+
+          cy.intercept(
+            {
+              method: 'GET',
+              url: '/<%= baseApi + entityApiUrl %>+(?*|)',
+              times: 1,
+            },
+            {
+              statusCode: 200,
+              body: [<%= entityInstance %>],
+            }
+          ).as('entitiesRequestInternal');
+        });
+
+        cy.visit(<%= entityInstance %>PageUrl);
+
+        cy.wait('@entitiesRequestInternal');
+      });
+  <%_ if (skipCreateTest) { _%>
+       */
+
+  <%_ } _%>
+<%_ } _%>
+<%_ if (readOnly || skipCreateTest) { _%>
+      beforeEach(function () {
+        cy.visit(<%= entityInstance %>PageUrl);
+
+        cy.wait('@entitiesRequest').then(({ response }) => {
+          if (response!.body.length === 0) {
+            this.skip();
+          }
+        });
+      });
+<%_ } _%>
+
+      it('detail button click should load details <%= entityClass %> page', () => {
+        cy.get(entityDetailsButtonSelector).first().click();
+        cy.getEntityDetailsHeading('<%= entityInstance %>');
+        cy.get(entityDetailsBackButtonSelector).click({force: true});
+        cy.wait('@entitiesRequest').then(({ response }) => {
+          expect(response!.statusCode).to.equal(200);
+        });
+        cy.url().should('match', <%= entityInstance %>PageUrlPattern);
+      });
 
 <%_ if (!readOnly) { _%>
-  it('should load create <%= entityClass %> page', () => {
-    cy.visit(<%= entityInstance %>PageUrl);
-    cy.wait('@entitiesRequest');
-    cy.get(entityCreateButtonSelector).click({force: true});
-    cy.getEntityCreateUpdateHeading('<%= entityClass %>');
-    cy.get(entityCreateSaveButtonSelector).should('exist');
-    cy.get(entityCreateCancelButtonSelector).click({force: true});
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      expect(response.statusCode).to.equal(200);
+      it('edit button click should load edit <%= entityClass %> page', () => {
+        cy.get(entityEditButtonSelector).first().click();
+        cy.getEntityCreateUpdateHeading('<%= entityClass %>');
+        cy.get(entityCreateSaveButtonSelector).should('exist');
+        cy.get(entityCreateCancelButtonSelector).click({force: true});
+        cy.wait('@entitiesRequest').then(({ response }) => {
+          expect(response!.statusCode).to.equal(200);
+        });
+        cy.url().should('match', <%= entityInstance %>PageUrlPattern);
+      });
+
+      it<%= skipCreateTest %>('last delete button click should delete instance of <%= entityClass %>', () => {
+  <%_ if (clientFrameworkReact) { _%>
+        cy.intercept('GET', '/<%= baseApi + entityApiUrl %>/*').as('dialogDeleteRequest');
+  <%_ } _%>
+        cy.get(entityDeleteButtonSelector).last().click();
+  <%_ if (clientFrameworkReact) { _%>
+        cy.wait('@dialogDeleteRequest');
+  <%_ } _%>
+        cy.getEntityDeleteDialogHeading('<%= entityInstance %>').should('exist');
+        cy.get(entityConfirmDeleteButtonSelector).click({force: true});
+        cy.wait('@deleteEntityRequest').then(({ response }) => {
+          expect(response!.statusCode).to.equal(204);
+        });
+        cy.wait('@entitiesRequest').then(({ response }) => {
+          expect(response!.statusCode).to.equal(200);
+        });
+        cy.url().should('match', <%= entityInstance %>PageUrlPattern);
+  <% if (cypressBootstrapEntities) { %>
+        <%= entityInstance %> = undefined;
+  <%_ } _%>
+      });
+<%_ } _%>
     });
-    cy.url().should('match', <%= entityInstance %>PageUrlPattern);
   });
+<%_ if (!readOnly) { _%>
 
-  it('should load edit <%= entityClass %> page', function() {
-    cy.visit(<%= entityInstance %>PageUrl);
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      if (response.body.length === 0) {
-        this.skip();
-      }
-    });;
-    cy.get(entityEditButtonSelector).first().click({force: true});
-    cy.getEntityCreateUpdateHeading('<%= entityClass %>');
-    cy.get(entityCreateSaveButtonSelector).should('exist');
-    cy.get(entityCreateCancelButtonSelector).click({force: true});
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      expect(response.statusCode).to.equal(200);
+  describe('new <%= entityClass %> page', () => {
+    beforeEach(() => {
+      cy.visit(`${<%= entityInstance %>PageUrl}`);
+      cy.get(entityCreateButtonSelector).click({force: true});
+      cy.getEntityCreateUpdateHeading('<%= entityClass %>');
     });
-    cy.url().should('match', <%= entityInstance %>PageUrlPattern);
-  });
 
-  it<%= skipCreateTest %>('should create an instance of <%= entityClass %>', () => {
-    cy.visit(<%= entityInstance %>PageUrl);
-    cy.get(entityCreateButtonSelector).click({force: true});
-    cy.getEntityCreateUpdateHeading('<%= entityClass %>');
+    it<%= skipCreateTest %>('should create an instance of <%= entityClass %>', () => {
   <%_ fields.filter(field => (!field.id || !field.autoGenerate) && !field.hidden && !field.readonly).forEach((field) => {
     const fieldName = field.fieldName;
     const fieldIsEnum = field.fieldIsEnum;
@@ -139,75 +321,45 @@ describe('<%= entityClass %> e2e test', () => {
   _%>
 
     <%_ if (field.fieldTypeBoolean) { _%>
-    cy.get(`[data-cy="<%= fieldName %>"]`).should('not.be.checked');
-    cy.get(`[data-cy="<%= fieldName %>"]`).click().should('be.checked');
+      cy.get(`[data-cy="<%= fieldName %>"]`).should('not.be.checked');
+      cy.get(`[data-cy="<%= fieldName %>"]`).click().should('be.checked');
 
     <%_ } else if (field.fieldTypeBinary && !field.blobContentTypeText) { _%>
-    cy.setFieldImageAsBytesOfEntity('<%= fieldName %>', 'integration-test.png', 'image/png');
+      cy.setFieldImageAsBytesOfEntity('<%= fieldName %>', 'integration-test.png', 'image/png');
 
     <%_ } else if (fieldIsEnum) { _%>
-    cy.get(`[data-cy="<%= fieldName %>"]`).select('<%= fieldValue %>');
+      cy.get(`[data-cy="<%= fieldName %>"]`).select('<%= fieldValue %>');
 
     <%_ } else if (field.fieldTypeString || field.fieldTypeNumeric || field.fieldTypeLocalDate || field.fieldTypeTimed || field.fieldTypeDuration) { _%>
-    cy.get(`[data-cy="<%= fieldName %>"]`).type('<%= fieldValue %>').should('have.value', '<%= fieldValue %>');
+      cy.get(`[data-cy="<%= fieldName %>"]`).type('<%= fieldValue %>').should('have.value', '<%= fieldValue %>');
 
     <%_ } else { _%>
-    cy.get(`[data-cy="<%= fieldName %>"]`).type('<%= fieldValue %>').invoke('val').should('match', new RegExp('<%= fieldValue %>'));
+      cy.get(`[data-cy="<%= fieldName %>"]`).type('<%= fieldValue %>').invoke('val').should('match', new RegExp('<%= fieldValue %>'));
 
     <%_ } _%>
   <%_ }); _%>
-  <%_ relationships.forEach((relationship) => {
+  <%_ for (relationship of requiredRelationships) {
     const ownerSide = relationship.ownerSide;
-    const relationshipName = relationship.relationshipName; _%>
-    <%_ if (relationship.relationshipManyToOne || (relationship.relationshipOneToOne && ownerSide)) { _%>
-    cy.setFieldSelectToLastOfEntity('<%= relationshipName %>');
-
-    <%_ } else if (relationship.relationshipManyToMany && ownerSide) { _%>
-    cy.setFieldSelectToLastOfEntity('<%= relationshipName %>');
+    const relationshipName = relationship.relationshipName;
+  _%>
+       cy.get(`[data-cy="<%= relationship.relationshipFieldName %>"]`).select(<%= relationship.collection ? '[0]' : '1' %>);
+  <%_ } _%>
 
-    <%_ } _%>
-  <%_ }); _%>
   <%_ if (fieldsContainBlobOrImage) { _%>
-    // since cypress clicks submit too fast before the blob fields are validated
-    cy.wait(200); // eslint-disable-line cypress/no-unnecessary-waiting
-  <%_ } _%>
-    cy.get(entityCreateSaveButtonSelector).click({force: true});
-    cy.scrollTo('top', {ensureScrollable: false});
-    cy.get(entityCreateSaveButtonSelector).should('not.exist');
-    cy.wait('@postEntityRequest').then(({ response }) => {
-      expect(response.statusCode).to.equal(201);
-    });
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      expect(response.statusCode).to.equal(200);
-    });
-    cy.url().should('match', <%= entityInstance %>PageUrlPattern);
-  });
-
-  it<%= skipCreateTest %>('should delete last instance of <%= entityClass %>', function() {
-    <%_ if (clientFrameworkReact) { _%>
-    cy.intercept('GET', '/<%= baseApi + entityApiUrl %>/*').as('dialogDeleteRequest');
-    <%_ } _%>
-    cy.visit(<%= entityInstance %>PageUrl);
-    cy.wait('@entitiesRequest').then(({ response }) => {
-      if (response.body.length > 0) {
-        cy.get(entityTableSelector).should('have.lengthOf', response.body.length);
-        cy.get(entityDeleteButtonSelector).last().click({force: true});
-  <%_ if (clientFrameworkReact) { _%>
-        cy.wait('@dialogDeleteRequest');
+      // since cypress clicks submit too fast before the blob fields are validated
+      cy.wait(200); // eslint-disable-line cypress/no-unnecessary-waiting
   <%_ } _%>
-        cy.getEntityDeleteDialogHeading('<%= entityInstance %>').should('exist');
-        cy.get(entityConfirmDeleteButtonSelector).click({force: true});
-        cy.wait('@deleteEntityRequest').then(({ response }) => {
-          expect(response.statusCode).to.equal(204);
-        });
-        cy.wait('@entitiesRequest').then(({ response }) => {
-          expect(response.statusCode).to.equal(200);
-        });
-        cy.url().should('match', <%= entityInstance %>PageUrlPattern);
-      } else {
-        this.skip();
-      }
+      cy.get(entityCreateSaveButtonSelector).click();
+
+      cy.wait('@postEntityRequest').then(({ response }) => {
+        expect(response!.statusCode).to.equal(201);
+        <%= entityInstance %> = response!.body;
+      });
+      cy.wait('@entitiesRequest').then(({ response }) => {
+        expect(response!.statusCode).to.equal(200);
+      });
+      cy.url().should('match', <%= entityInstance %>PageUrlPattern);
     });
   });
-  <%_ } _%>
+<%_ } _%>
 });

package/generators/entity-client/templates/react/src/main/webapp/app/entities/entity-delete-dialog.tsx.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { Translate } from 'react-jhipster';
@@ -26,10 +26,12 @@ import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { getEntity, deleteEntity } from './<%= entityFileName %>.reducer';
 
 export const <%= entityReactName %>DeleteDialog = (props: RouteComponentProps<{ id: string }>) => {
+  const [loadModal, setLoadModal] = useState(false);
   const dispatch = useAppDispatch();
 
   useEffect(() => {
     dispatch(getEntity(props.match.params.id));
+    setLoadModal(true);
   }, []);
 
   const <%= entityInstance %>Entity = useAppSelector(state => state.<%= entityInstance %>.entity);
@@ -40,8 +42,9 @@ export const <%= entityReactName %>DeleteDialog = (props: RouteComponentProps<{
   };
 
   useEffect(() => {
-    if (updateSuccess) {
+    if (updateSuccess && loadModal) {
       handleClose();
+      setLoadModal(false);
     }
   }, [updateSuccess]);
 

package/generators/entity-client/templates/react/src/main/webapp/app/entities/entity-update.tsx.ejs

@@ -102,6 +102,10 @@ import { convertDateTimeFromServer, convertDateTimeToServer, displayDefaultDateT
 import { mapIdList } from 'app/shared/util/entity-utils';
 <%_ } _%>
 import { useAppDispatch, useAppSelector } from 'app/config/store';
+<%_ const enumImports = generateEntityClientEnumImports(fields); _%>
+<%_ enumImports.forEach( (importedPath, importedType) => { _%>
+import { <%- importedType %> } from '<%- importedPath %>';
+<%_ }); _%>
 
 export const <%= entityReactName %>Update = (props: RouteComponentProps<{id: string}>) => {
   const dispatch = useAppDispatch();
@@ -115,7 +119,9 @@ export const <%= entityReactName %>Update = (props: RouteComponentProps<{id: str
   const loading = useAppSelector(state => state.<%= entityInstance %>.loading);
   const updating = useAppSelector(state => state.<%= entityInstance %>.updating);
   const updateSuccess = useAppSelector(state => state.<%= entityInstance %>.updateSuccess);
-
+  <%_ enumImports.forEach( (importedPath, importedType) => { _%>
+  const <%- _.lowerFirst(importedType) %>Values = Object.keys(<%- importedType %>);
+  <%_ }); _%>
   const handleClose = () => {
     props.history.push('/<%= entityFileName %>'<%_ if (paginationPagination) { _%> + props.location.search<%_ } _%>);
   }
@@ -161,7 +167,7 @@ _%>
 <%_ }) _%>
 <%_ relFieldNames.forEach(rel => { _%>
 <%_ if (rel.relationshipManyToOne || (rel.ownerSide && rel.relationshipOneToOne))  { _%>
-        <%= rel.relationshipFieldName %>: <%= rel.otherEntityNamePlural %>.find(it => it.<%= rel.otherEntity.primaryKey.name %>.toString() === values.<%= rel.relationshipFieldName %>Id.toString()),
+        <%= rel.relationshipFieldName %>: <%= rel.otherEntityNamePlural %>.find(it => it.<%= rel.otherEntity.primaryKey.name %>.toString() === values.<%= rel.relationshipFieldName %>.toString()),
 <%_ } _%>
 <%_ }) _%>
     }
@@ -186,26 +192,26 @@ _%>
 <%_ } _%>
         }
       : {
+<%_ for (field of fields.filter(field => !field.id)) {
+    const fieldName = field.fieldName;
+  if (field.fieldIsEnum) {
+    const enumValues = field.enumValues;_%>
+<%= fieldName %>: '<%= enumValues[0].name %>',
+  <%_ } _%>
+<%_ } _%>
           ...<%= entityInstance %>Entity,
 <%_ for (field of fields.filter(field => !field.id)) {
-    const fieldType = field.fieldType;
     const fieldName = field.fieldName;
-    const fieldNameHumanized = field.fieldNameHumanized;
-
-    if (field.fieldTypeTimed) { _%>
+  if (field.fieldTypeTimed) { _%>
           <%= fieldName %>: convertDateTimeFromServer(<%= entityInstance %>Entity.<%= fieldName %>),
-  <%_ } else if (field.fieldIsEnum) {
-      const enumValues = field.enumValues;
-  _%>
-          <%= fieldName %>: '<%= enumValues[0].name %>',
   <%_ } _%>
 <%_ } _%>
 <%_ relationships.forEach(rel => {
     const otherEntityPkName = rel.otherEntity.primaryKey && rel.otherEntity.primaryKey.name || 'id';
     const relationshipFieldName = rel.relationshipFieldName;
     const relationshipFieldNamePlural = rel.relationshipFieldNamePlural;
-    if (rel.relationshipManyToOne || (rel.relationshipOneToOne && rel.ownerSide)) { _%>
-          <%= relationshipFieldName %>Id: <%= entityInstance %>Entity?.<%= relationshipFieldName %>?.id,
+  if (rel.relationshipManyToOne || (rel.relationshipOneToOne && rel.ownerSide)) { _%>
+          <%= relationshipFieldName %>: <%= entityInstance %>Entity?.<%= relationshipFieldName %>?.id,
   <%_ } else if (rel.relationshipManyToMany && rel.ownerSide) { _%>
           <%= relationshipFieldNamePlural %>: <%= entityInstance %>Entity?.<%= relationshipFieldNamePlural %>?.map(e => e.<%= otherEntityPkName %>.toString()),
   <%_ } _%>
@@ -265,21 +271,18 @@ _%>
             type="date"
             <%- include('react_validators'); %>
           />
-  <%_ } else if (field.fieldIsEnum) {
-      const enumValues = field.enumValues;
-  _%>
+  <%_ } else if (field.fieldIsEnum) {_%>
             type="select"
           >
-    <%_ const enumPrefix = frontendAppName + '.'+ fieldType;
-      enumValues.forEach(enumValue => { _%>
-              <option value="<%= enumValue.name %>">
+          <%_ const enumPrefix = frontendAppName + '.'+ fieldType; _%>
+          {<%= _.lowerFirst(fieldType) %>Values.map(<%= _.lowerFirst(fieldType) %> => (
+              <option value={<%= _.lowerFirst(fieldType) %>} key={<%= _.lowerFirst(fieldType) %>}>
       <%_ if (enableTranslation) { _%>
-                {translate("<%= enumPrefix %>.<%= enumValue.name %>")}
+                {translate("<%= enumPrefix %>."+<%= _.lowerFirst(fieldType) %>)}
       <%_ } else { _%>
-                <%= enumValue.value %>
+                {<%= _.lowerFirst(fieldType) %>}
       <%_ } _%>
-              </option>
-    <%_ }); _%>
+              </option>))}
           </ValidatedField>
   <%_ } else if (field.fieldTypeNumeric) { _%>
             type="text"
@@ -328,7 +331,7 @@ _%>
   <%_ if (rel.relationshipManyToOne || (rel.relationshipOneToOne && ownerSide)) { _%>
           <ValidatedField
             id="<%= entityFileName %>-<%= relationshipName %>"
-            name="<%= relationshipFieldName %>Id"
+            name="<%= relationshipFieldName %>"
             data-cy="<%= relationshipFieldName %>"
       <%_ if (enableTranslation) { _%>
             label={translate('<%= translationKey %>')}

package/generators/entity-client/templates/react/src/main/webapp/app/entities/entity.tsx.ejs

@@ -21,7 +21,7 @@ import React, { useState, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 <%_ } _%>
 import { Link, RouteComponentProps } from 'react-router-dom';
-import { Button, <% if (searchEngine) { %>Input, InputGroup, FormGroup, Form,<% } %>Col, Row, Table } from 'reactstrap';
+import { Button, <% if (searchEngine) { %>Input, InputGroup, FormGroup, Form, Row, Col, <% } %>Table } from 'reactstrap';
 import {
   <%_ if (blobFields.length > 0) { _%>
     <%_ if (fieldsContainBlobOrImage) { _%>
@@ -289,7 +289,7 @@ export const <%= entityReactName %> = (props: RouteComponentProps<{url: string}>
       <h2 id="<%= entityFileName %>-heading" data-cy="<%= entityClass %>Heading">
         <Translate contentKey="<%= i18nKeyPrefix %>.home.title"><%= entityClassPluralHumanized %></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="<%= i18nKeyPrefix %>.home.refreshListLabel">Refresh List</Translate>
           </Button>
 <%_ if (!readOnly) { _%>
@@ -446,7 +446,7 @@ _%>
                       </td>
   <%_ } _%>
 <%_ } _%>
-                      <td className="text-right">
+                      <td className="text-end">
                         <div className="btn-group flex-btn-group-container">
                           <Button tag={Link} to={`${match.url}/${<%= entityInstance %>.<%= primaryKey.name %>}`} color="info" size="sm" data-cy="entityDetailsButton">
                             <FontAwesomeIcon icon="eye" /> <span className="d-none d-md-inline" ><Translate contentKey="entity.action.view">View</Translate></span>
@@ -481,15 +481,15 @@ _%>
 <%_ if (!databaseTypeCassandra) { _%>
   <%_ if (paginationPagination) { _%>
         { totalItems ? (<div className={ <%= entityInstance %>List && <%= entityInstance %>List.length > 0 ? '' : 'd-none' }>
-          <Row className="justify-content-center">
+          <div className="justify-content-center d-flex">
             <JhiItemCount
               page={paginationState.activePage}
               total={totalItems}
               itemsPerPage={paginationState.itemsPerPage}
               <% { if (enableTranslation) { %>i18nEnabled<% }} %>
             />
-          </Row>
-          <Row className="justify-content-center">
+          </div>
+          <div className="justify-content-center d-flex">
             <JhiPagination
               activePage={paginationState.activePage}
               onSelect={handlePagination}
@@ -497,7 +497,7 @@ _%>
               itemsPerPage={paginationState.itemsPerPage}
               totalItems={totalItems}
             />
-          </Row>
+          </div>
         </div>) : '' }
   <% } _%>
 <%_ } _%>

package/generators/entity-client/templates/vue/src/main/webapp/app/entities/entity-details.component.ts.ejs

@@ -5,10 +5,13 @@ import JhiDataUtils from '@/shared/data/data-utils.service';
 <% } %>
 import { I<%= entityAngularName %> } from '@/shared/model/<%= entityModelFileName %>.model';
 import <%= entityAngularName %>Service from './<%= entityFileName %>.service';
+import AlertService from '@/shared/alert/alert.service';
 
 @Component
 export default class <%= entityAngularName %>Details extends <% if (fieldsContainBlob) { %>mixins(JhiDataUtils)<% } else { %>Vue<% } %> {
   @Inject('<%= entityInstance %>Service') private <%= entityInstance %>Service: () => <%= entityAngularName %>Service;
+  @Inject('alertService') private alertService: () => AlertService;
+
   public <%= entityInstance %>: I<%= entityAngularName %> = {};
 
   beforeRouteEnter(to, from, next) {
@@ -22,6 +25,8 @@ export default class <%= entityAngularName %>Details extends <% if (fieldsContai
   public retrieve<%= entityAngularName %>(<%= entityInstance %>Id) {
     this.<%= entityInstance %>Service().find(<%= entityInstance %>Id).then((res) => {
       this.<%= entityInstance %> = res;
+    }).catch(error => {
+      this.alertService().showHttpError(this,error.response);
     });
   }