Template builder auto save data is messing content

[fmontes]

Problem Statement

In the layout editor, when a row is moved and autosaved, then another row is moved and "Content" is clicked right away, the content becomes disorganized.

Steps to Reproduce

1. Open the layout editor in dotCMS page.
2. Move a row and allow it to autosave.
3. Move another row and allow it to autosave.
4. Click on "Content."
5. Observe the content move to another containers.

https://github.com/dotCMS/core/assets/751424/58da8e4c-8e55-4217-ac1b-68cf828819b5

I was able to repro by just doing the requests myself, one after the other:

curl 'http://localhost:8080/api/v1/page/739885e5c62368bafb2abe97aa70fb9e/layout?variantName=DEFAULT' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: application/json' \
  -H 'Cookie: JSESSIONID=F070104DAD10E0BAD3B2E62DD1503098; access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI3MTgxNjdjOC1jN2ZmLTQyYzAtOWY1MC1mMjdlMjI4NWU2ZTMiLCJ4bW9kIjoxNzA4NjA1OTc2OTk4LCJzdWIiOiJkb3RjbXMub3JnLjEiLCJpYXQiOjE3MDg2MDU5NzcsImlzcyI6IjhjZTU1ZmI1NWUiLCJleHAiOjE3MDg2OTIzNzd9.43xnumRXFNbd5WT1yVPWLawNnjYbgT6jL22qxPk0SM4; DWRSESSIONID=bAVj1dcONYoHCx45scOMtdHSgTo' \
  -H 'DNT: 1' \
  -H 'Origin: http://localhost:8080' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://localhost:8080/dotAdmin/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Chromium";v="121", "Not A(Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  --data-raw '{"themeId":"SYSTEM_THEME","layout":{"width":"","title":"anonymouslayout1708557409935","header":true,"footer":true,"body":{"rows":[{"columns":[{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"4"}],"leftOffset":1,"width":6,"styleClass":""},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"5"}],"leftOffset":7,"width":6,"styleClass":""}],"styleClass":null},{"columns":[{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"1"}],"leftOffset":1,"width":4,"styleClass":"hello"},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"2"}],"leftOffset":5,"width":4,"styleClass":""},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"3"}],"leftOffset":9,"width":4,"styleClass":""}],"styleClass":null}]},"sidebar":null},"title":null}' \
  --compressed

and...

curl 'http://localhost:8080/api/v1/page/739885e5c62368bafb2abe97aa70fb9e/layout?variantName=DEFAULT' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: application/json' \
  -H 'Cookie: JSESSIONID=F070104DAD10E0BAD3B2E62DD1503098; access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI3MTgxNjdjOC1jN2ZmLTQyYzAtOWY1MC1mMjdlMjI4NWU2ZTMiLCJ4bW9kIjoxNzA4NjA1OTc2OTk4LCJzdWIiOiJkb3RjbXMub3JnLjEiLCJpYXQiOjE3MDg2MDU5NzcsImlzcyI6IjhjZTU1ZmI1NWUiLCJleHAiOjE3MDg2OTIzNzd9.43xnumRXFNbd5WT1yVPWLawNnjYbgT6jL22qxPk0SM4; DWRSESSIONID=bAVj1dcONYoHCx45scOMtdHSgTo' \
  -H 'DNT: 1' \
  -H 'Origin: http://localhost:8080' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://localhost:8080/dotAdmin/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Chromium";v="121", "Not A(Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  --data-raw '{"themeId":"SYSTEM_THEME","layout":{"width":"","title":"anonymouslayout1708557409935","header":true,"footer":true,"body":{"rows":[{"columns":[{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"1"}],"leftOffset":1,"width":4,"styleClass":"hello"},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"2"}],"leftOffset":5,"width":4,"styleClass":""},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"3"}],"leftOffset":9,"width":4,"styleClass":""}],"styleClass":null},{"columns":[{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"4"}],"leftOffset":1,"width":6,"styleClass":""},{"containers":[{"identifier":"SYSTEM_CONTAINER","uuid":"5"}],"leftOffset":7,"width":6,"styleClass":""}],"styleClass":null}]},"sidebar":null},"title":null}' \
  --compressed

Acceptance Criteria

The content should stay consistent in its respective containers, no matter how we save the page layout.

External Links

N/A

Assumptions & Initiation Needs

• The issue is related to data synchronization after autosave.
• Development team needs access to the layout editor code to make changes.

[jcastro-dotcms]

After inspecting the current behavior of the Template Layout saving process with the provided scenario, I was able to identify two main behaviors:

1. If you only move the second row up -- as Freddy showed in his video -- AND go back to the CONTENT view, you'll never experience the issue. You can go back and bring the row back down, go back to the CONTENT view again, and the Layout will keep its contents in the right position.
2. If you follow exactly the steps Freddy showed -- i.e., DO NOT go back to the CONTENT view at all -- you WILL experience the issue.

When debugging the code, I was able to see that by the time the back-end receives the second update, the Container instance IDs -- UUIDs -- actually belong to the Template Layout when no change was made at all, instead of the one where the change was just made. This is causing the back-end to receive incorrect readings on the previous Container instance IDs, making the update process fail as those IDs are not valid. This is causing the contents in the HTML Page to move around.

So, the front-end layer needs to update its Container Instance IDs in the existing HTML elements before sending the new information back to the Java API.

[fmontes]

We found a solution, but it will require some refactor in the way we handle the templates in the old editor.

Save Page

PAGE: POST > http://localhost:4200/api/v1/page/902f839a441232cd7e278788c098b42f/layout?variantName=DEFAULT

Save Template

TEMPLATE: PUT > http://localhost:4200/api/v1/templates/

We have a branch partially working in the new edit mode: issue-27689-layout-uuid-miss

We need to bring this to the old edit mode and the template builder.

[m27iu4]

https://dotcms.zendesk.com/agent/tickets/115372 -> Another customer raised the same issue (content disappearing when changing layout)

[fmontes]

I think this one is the same problem: https://github.com/dotCMS/core/issues/27646

[rjvelazco]

EDIT

In this case, we are modifying the template, not the page layout. Once the page is created, the template changes should not affect the page layout.

Failed Internal QA

• Tested on master: [dotcms:master_84d170e]

Steps to Reproduce

https://github.com/dotCMS/core/assets/72418962/91f5ff17-47b3-41b5-ad32-4cc17b75f71c

[rjvelazco]

Failed Internal QA

• Tested on master: [dotcms:master_84d170e]

Steps to Reproduce

iqa-fix-uuid-template-issue-27689.mov

Do we want to take care of that case in this ticket, @fmontes @zJaaal ?

[fmontes]

Another issue raised on top of this one: https://github.com/dotCMS/core/issues/27816

[rjvelazco]

Passed Internal QA

• Tested on master: [dotcms:master_84d170e]

[josemejias11]

Approved: Tested on master_ed06491, Docker, macOS 13.0, FF v121.0.1

[weiyiwang-dotcms]

Hi team,

I was still able to reproduce the issue in v24.05.20, which I believe should have the fix for this.

I recorded the below screen recording.

I made a page with 5 pieces of content, arranged in two rows Using the layout tab, I added two additional rows and added boxes in each of those rows Once I switched back to the content tab, the content was missing The content was still missing also in the edit mode of the page.

https://github.com/dotCMS/core/assets/136110669/ea592eb2-0975-4f5e-a13f-c51051d9c5ee

[weiyiwang-dotcms]

Hi, another user is reporting this issue

Case: https://dotcms.zendesk.com/agent/tickets/116779 Version: 23.01.17

[fmontes]

Reopening because is not working.

[fmontes]

@nollymar this issue was approved by QA and has the whole process but support and maintenance are saying is still happening, we need to check.

[KevinDavilaDotCMS]

IQ Failed

Tested in master 0a261ce

https://github.com/user-attachments/assets/c16e9694-ae8b-47a5-9423-8d2b877ff866

[fabrizzio-dotCMS]

Tested with the latest trunk

https://github.com/user-attachments/assets/701c7dae-ca27-473b-ae81-0dc46d87d461

It looks good to me

[bryanboza]

Fixed, testes on the latest trunk and now I'm unable to reproduce the reported problem. It is working as expected!