Unable to edit entity with relationship on monolith

[luisRubiera]

Overview of the issue

If i click on the "Edit" button of some entities i get the following error in the chrome console:

Motivation for or Use Case

this is a blocking problem that does not allow the edition of records in the app :( . at least there is a turn around by going to view and then clicking on edit

Reproduce the error

• go the the webapp ( so start your backend/frontend)
• add a new "entity"
• in the listing, click on "edit" the added entity

JHipster Version(s)

5.8.2

JHipster configuration

##### **JHipster Version(s)**

eyesr@0.0.0 /home/luis/Projects/eyesr/eyesr-webapp └── generator-jhipster@5.8.2

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.eyesr.webapp",
      "nativeLanguage": "fr"
    },
    "jhipsterVersion": "5.8.2",
    "applicationType": "monolith",
    "baseName": "eyesr",
    "packageName": "com.eyesr.webapp",
    "packageFolder": "com/eyesr/webapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "bXktc2VjcmV0LXRva2VuLXRvLWNoYW5nZS1pbi1wcm9kdWN0aW9uLWFuZC10by1rZWVwLWluLWEtc2VjdXJlLXBsYWNl",
    "clientFramework": "react",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": true,
    "nativeLanguage": "fr",
    "languages": ["fr", "en"]
  }
}

</pre>
</details>

##### **JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory**

<details>
<summary>JDL entity definitions</summary>

<pre>
entity VideoTag {
  name String required,
  createdAt LocalDate required,
  frame Float required min(0)
}
entity VideoStream {
  awsKinesisName String required,
  awsRegion String required,
  awsUrl String,
  type StreamType
}
entity CameraStream {
  name String required,
  area String,
  rtspUrl String required,
  remoteId String required unique
}
entity StreamGateway {
  name String required,
  area String,
  isActive Boolean,
  createdAt Instant,
  macAddress String required unique
}
entity GatewayCredential {
  accessKey String,
  secretKey String,
  credentialType CredentialType required
}
entity UserEyesr
entity TagEyesr {
  key String required,
  value String
}
entity DangerCriteria {
  name String
}
entity Danger {
  ref String,
  name String,
  icon AnyBlob
}
entity Alert {
  riskLevel RiskLevel,
  comment String,
  createdAt Instant,
  updateAt Instant,
  frame AnyBlob,
  alertStatus AlertStatus,
  viewedAt Instant,
  processedAt Instant,
  processedMessage TextBlob
}

enum StreamType {
  S3_VIDEO,
  KINESIS_STREAM
}

enum CredentialType {
  AWS,
  GCE,
  AZ,
  CUSTOM
}

enum RiskLevel {
  MINOR,
  MODERATE,
  IMPORTANT,
  CRITICAL
}

enum AlertStatus {
  CREATED,
  VIEWED,
  PROCESSED
}

relationship OneToOne {
  StreamGateway{gatewayCredential} to GatewayCredential,
  UserEyesr{user(login) required} to User
}
relationship OneToMany {
  StreamGateway{cameraStream} to CameraStream{streamGateway required},
  StreamGateway{tagEyesr} to TagEyesr{streamGateway},
  UserEyesr{tagEyesr} to TagEyesr{userEyesr},
  CameraStream{tagEyesr} to TagEyesr{cameraStream},
  DangerCriteria{danger} to Danger{dangerCriteria}
}
relationship ManyToOne {
  VideoTag{videoStream} to VideoStream,
  Alert{cameraStream} to CameraStream,
  Alert{userEyesr} to UserEyesr,
  Alert{viewedBy} to UserEyesr,
  Alert{processedBy} to UserEyesr
}
relationship ManyToMany {
  Danger{cameraStream} to CameraStream{possibleDanger},
  Alert{danger} to Danger{alert}
}

paginate VideoTag, VideoStream, CameraStream, StreamGateway, GatewayCredential, UserEyesr, TagEyesr, DangerCriteria, Danger, Alert with pagination
service VideoTag, VideoStream, CameraStream, StreamGateway, GatewayCredential, UserEyesr, TagEyesr, DangerCriteria, Danger, Alert with serviceClass

</pre>
</details>

##### **Environment and Tools**

openjdk version "1.8.0_212"
OpenJDK Runtime Environment (build 1.8.0_212-8u212-b03-0ubuntu1.18.04.1-b03)
OpenJDK 64-Bit Server VM (build 25.212-b03, mixed mode)

git version 2.17.1

node: v10.15.0

npm: 6.4.1

yeoman: 2.0.5

yarn: 1.12.3

Docker version 18.09.2, build 6247962

Entity configuration(s) entityName.json files generated in the .jhipster directory

{
    "name": "CameraStream",
    "fields": [
        {
            "fieldName": "name",
            "fieldType": "String",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "area",
            "fieldType": "String"
        },
        {
            "fieldName": "rtspUrl",
            "fieldType": "String",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "remoteId",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "unique"
            ]
        }
    ],
    "relationships": [
        {
            "relationshipType": "one-to-many",
            "otherEntityName": "tagEyesr",
            "otherEntityRelationshipName": "cameraStream",
            "relationshipName": "tagEyesr"
        },
        {
            "relationshipType": "many-to-one",
            "otherEntityName": "streamGateway",
            "otherEntityRelationshipName": "cameraStream",
            "relationshipValidateRules": "required",
            "relationshipName": "streamGateway",
            "otherEntityField": "id"
        },
        {
            "relationshipType": "many-to-many",
            "otherEntityName": "danger",
            "otherEntityRelationshipName": "cameraStream",
            "relationshipName": "possibleDanger",
            "otherEntityField": "id",
            "ownerSide": false
        }
    ],
    "changelogDate": "20190419131700",
    "entityTableName": "camera_stream",
    "dto": "no",
    "pagination": "pagination",
    "service": "serviceClass",
    "jpaMetamodelFiltering": false,
    "fluentMethods": true,
    "clientRootFolder": "",
    "applications": "*"
}

Browsers and Operating System

uname -a
Linux luis-GL62M-7RDX 4.15.0-54-generic #58-Ubuntu SMP Mon Jun 24 10:55:24 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

about chrome:
Version 72.0.3626.119 (Official Build) (64-bit)

• [X] Checking this box is mandatory (this is just to show you read everything)

[pmverma]

Thanks, @luisRubiera for reporting the issue. Did you try with the latest JHipster version?

[clementdessoude]

I was not able to reproduce the issue, either with 6.1.2 or 5.8.2 versions (I created a record for every entity and was able to edit each one).

Did you modify something in the code that could have led to this error ? Or if you have more specific details on the steps to reproduce (others than those already provided)

[pascalgrimaud]

as we didn't manage to reproduce, I'm closing this ticket. Don't hesitate to try the last version and provide more steps to reproduce.

[gregu]

Bug is still present with "jhipsterVersion": "6.4.1" and react. Try this example:

entity Offer { name String required description String }

entity Category { name String required description String }

relationship ManyToOne {

Offer{user required} to User
Offer{category required} to Category  

}

[pascalgrimaud]

@gregu : plz, try the last version v6.6.0 and tell us if you can reproduce the issue. If it's the case, open a new ticket with all information

[gregu]

My initial jdl:

application {
    config {
        baseName example,
        applicationType monolith,
        packageName com.example,
        authenticationType jwt,
        prodDatabaseType mysql,
        cacheProvider hazelcast,
        buildTool gradle,
        clientFramework react,
        testFrameworks [protractor],
        languages [en, pl],
        nativeLanguage  pl,
        useSass true,
        serverPort 8080
    }
    entities *
}
entity Offer {
    name String required
    description String
}
entity Category {
    name String required
    description String
}
relationship ManyToOne { 
    Offer{user required} to User
    Offer{category required} to Category  
}

From js console:

``

offer-update.tsx:110 Uncaught TypeError: Cannot read property 'id' of undefined
    at OfferUpdate (offer-update.tsx:110)
    at OfferUpdate (react-hot-loader.development.js:827)
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
OfferUpdate @ offer-update.tsx:110
OfferUpdate @ react-hot-loader.development.js:827
renderWithHooks @ react-dom.development.js:16260
mountIndeterminateComponent @ react-dom.development.js:18794
beginWork$1 @ react-dom.development.js:20162
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
beginWork$$1 @ react-dom.development.js:25780
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
dispatch @ instrument.js:632
(anonymous) @ logger-middleware.ts:12
(anonymous) @ loading_bar_middleware.js:44
(anonymous) @ index.js:87
(anonymous) @ notification-middleware.ts:11
(anonymous) @ error-middleware.ts:16
(anonymous) @ index.js:11
dispatch @ redux.js:636
handleFulfill @ index.js:176
Promise.then (async)
(anonymous) @ index.js:196
(anonymous) @ notification-middleware.ts:19
(anonymous) @ error-middleware.ts:27
(anonymous) @ index.js:11
dispatch @ redux.js:636
(anonymous) @ authentication.ts:103
(anonymous) @ tslib.es6.js:73
__awaiter @ tslib.es6.js:69
(anonymous) @ authentication.ts:102
(anonymous) @ index.js:8
(anonymous) @ redux.js:475
(anonymous) @ app.tsx:31
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
unbatchedUpdates @ react-dom.development.js:24439
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
render @ index.tsx:29
./src/main/webapp/app/index.tsx @ index.tsx:42
__webpack_require__ @ bootstrap:790
fn @ bootstrap:150
1 @ jhipster_family_member_3.svg:1
__webpack_require__ @ bootstrap:790
checkDeferredModules @ bootstrap:45
(anonymous) @ bootstrap:930
(anonymous) @ bootstrap:930
Show 39 more frames
react-dom.development.js:21843 The above error occurred in the <OfferUpdate> component:
    in OfferUpdate (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in Route (created by ErrorBoundaryRoute)
    in ErrorBoundaryRoute (created by Routes)
    in Switch (created by Routes)
    in Routes (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in Route (created by ErrorBoundaryRoute)
    in ErrorBoundaryRoute (created by Routes)
    in Switch (created by Routes)
    in div (created by Routes)
    in Routes (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in Route (created by PrivateRouteComponent)
    in PrivateRouteComponent (created by Connect(PrivateRouteComponent))
    in Connect(PrivateRouteComponent) (created by Routes)
    in Switch (created by Routes)
    in div (created by Routes)
    in Routes (created by App)
    in ErrorBoundary (created by App)
    in div (created by Card)
    in Card (created by App)
    in div (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp (created by ConnectFunction)
    in ConnectFunction
    in div
    in Provider
    in ErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

``

[gregu]

I added code below to jdl and problem disappeared dto * with mapstruct service * with serviceClass paginate * with pagination filter *

Now offer-update.tsx source code changed:

+ <AvInput id="offer-user" type="select" className="form-control" name="userId" required>
-  <AvInput id="offer-user" type="select" className="form-control" name="user.id" value={isNew ? users[0] && users[0].id : offerEntity.user.id} required>