Generator-jhipster: react: Multiple issues on entity list page

[vishal423]

Overview of the issue

Few scenarios:

• [x] Delete a record. Post successful operation, you should see two backend calls being made to fetch list page records. Done in #11322
  
  
  
  • http://localhost:8080/api/operations?page=0&size=20&sort=id,asc&cacheBuster=1581786413254
  
  
  • http://localhost:8080/api/operations?page=0&size=20&sort=id,asc&cacheBuster=1581786413260
  
  
• [x] Update a record. Post successful operation, you should see two backend calls being made to fetch list page records Done in #11322
  
  
  
  • http://localhost:8080/api/operations?page=0&size=20&sort=id,asc&cacheBuster=1581786577562
  
  
  • http://localhost:8080/api/operations?page=0&size=20&sort=id,asc&cacheBuster=1581786577564
  
  
• [x] Search (elasticsearch) flow seems to be broken on UI.
  
  
  
  • If you enter any search criteria and click the search icon, no backend API call is being made. Instead, I always see entity equivalent No records found message.
  
  
  • If you try to clear the search criteria, you can see entity equivalent No records message.
  
  

There could be more flows with different combination and I think it would be appropriate to do proper manual testing of generated applications. Ideally, you should have only one useEffect per api call with variable parameters, however, that doesn't seems to be scenario in current code and causing these issues.

Motivation for or Use Case

Reproduce the error

Related issues

11222

Suggest a Fix

JHipster Version(s)

master

JHipster configuration

Refer #11222 for configurations and entity details

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

Browsers and Operating System

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

[qmonmert]

@vishal423 I try to fix the first two bullets points with #11322
It's not easy :(
If you have an idea for elasticsearch bug ...

[qmonmert]

@vishal423 I don't see the bug with elastisearch
On my PR #11322 there is call when I click search icon

I see the message "No records found" but it's the same on Angular

[vishal423]

@qmonmert, this is really strange. With Bank Accounts entity, I can also see the backend API call being made (on current master) and the correct response shown on the UI (you might be observing no records response due to non-indexing of faker records in the elastic search. To verify, you can manually create a new record and then search on that). However, on this entity (on current master), I noticed that with each character typed into the search box, an API call is made that doesn't seems correct:
http://localhost:8080/api/bank-accounts?cacheBuster=1581908454245

With other entities, like Test Infinite Scrolls and Operation, I don't see search API being invoked. It would be good to have a look at different generated entities code and see if the generated code looks appropriate and then manually verify these flows on different entities.

[qmonmert]

@vishal423 I fix the fact that _each character typed into the search box_
But for entities like Test Infinite Scrollsand Operation, I think that the behaviour is normal because when you compare the code of entity.tsx.ejs before and after hooks it's the same :

Before
<%_ if (searchEngine === 'elasticsearch') { _%> search = () => { if (this.state.search) { <%_ if (pagination === 'infinite-scroll') { _%> this.props.reset(); <%_ } _%> <%_ if (pagination !== 'no') { _%> this.setState({ activePage: 1 }, () => { const { activePage, itemsPerPage, sort, order, search } = this.state; this.props.getSearchEntities(search, activePage - 1, itemsPerPage,${sort},${order}); }); <%_ } else { _%> this.props.getSearchEntities(this.state.search); <%_ } _%> } };

After
<%_ if (searchEngine === 'elasticsearch') { _%> const startSearching = () => { if (search) { <%_ if (pagination === 'infinite-scroll') { _%> props.reset(); <%_ } _%> <%_ if (pagination !== 'no') { _%> setPaginationState({ ...paginationState, activePage: 1 }); <%_ } else { _%> props.getSearchEntities(search); <%_ } _%> } };

[vishal423]

@qmonmert, I am not sure if the issue is a regression with hooks, as I rarely use react. @deepu105 do you have an idea over issues identified in this ticket as I guess you originally implemented most of it.

[deepu105]

I don't remember having such issues before the migration to hooks. So seems like actions are being triggered from multiple rendering. Would need closer look and some debugging

[pascalgrimaud]

@vishal423 : just added a bounty on this, as you suggested it in other ticket. I'll let you lead this part :)
I'm becoming crazy by restarting React builds all the time

[vishal423]

thanks @pascalgrimaud I can try to help on the solution testing :bug: We now just need a motivated volunteer who can take it to closure.

[SudharakaP]

@pascalgrimaud @vishal423 : Just verifying; for this one the first two bullet points are already fixed by @qmonmert correct? Just confirming so I can concentrate on the Elasticsearch issue. :smile:

[vishal423]

@SudharakaP , My opinion is to fix all open issues on the entity list page in a single PR. It will help with code review of generated code and testing of all scenarios to reduce the chances of new regressions. Also, watch out for issues specified in the comments.

[qmonmert]

@SudharakaP yes I fixed the first two bullet points

[qmonmert]

@vishal423 @SudharakaP I fix the third bullet point (two calls were missing) I guess in my PR #11322 https://github.com/jhipster/generator-jhipster/pull/11322/commits/fd31e688b925ce42c4d168492b7a8a063c76d772
If you have time to look
cc @deepu105 @pascalgrimaud

[SudharakaP]

@qmonmert : Ah you beat me to it. I was testing the same fix yesterday. But thanks and hope this fixes the issue. Also I think your fix is fine; I've tested this with different flows yesterday. :smile:

There's another problem with the back end I was trying to fix which is the reason I didn't check this in yet. If you notice say Test Infinite Scrolls the columns User One To One or User One To Many is not populated when you search. I think this happens for every single field which is a json object itself. :thinking:

However for that I think we could open a new issue as it's not relevant to react.

[qmonmert]

@pascalgrimaud & @jdubois I claim my money 😄https://opencollective.com/generator-jhipster/expenses/14398

[pascalgrimaud]

@qmonmert : can this ticket be closed ?

[qmonmert]

@pascalgrimaud yes with the PR https://github.com/jhipster/generator-jhipster/pull/11322

[SudharakaP]

I think we'll need some time to see if there's any more problems with the react builds. Feel free to ping me if you see any further issues. :smile: