[PAGES-1391] Front end helper can't generate greenbar correctly for nested areas Created: 20/Sep/23  Updated: 23/Oct/23  Resolved: 03/Oct/23

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: None
Fix Version/s: 6.3.0, 6.2.32

Type: Bug Priority: Critical
Reporter: Oanh Thai Hoang Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: 0d
Σ Time Spent: 4d 5.5h Time Spent: 2d 7.5h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File footer show in correctly in front-end helper.png     PNG File freemarker.png     PNG File showing+footer.png    
Sub-Tasks:
Key
Summary
Type
Status
Assignee
PAGES-1392 Implement Sub-task Closed Oanh Thai Hoang  
PAGES-1393 Review Sub-task Completed Canh Nguyen  
PAGES-1394 piQA Sub-task Closed Anh Vu  
PAGES-1395 QA Sub-task Completed Canh Nguyen  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Date of First Response:
Epic Link: SPA Maintenance
Sprint: DevX 47
Story Points: 3
Team: DeveloperX
Work Started:
Approved:
Yes

 Description   

Step to reproduce:

Use spa of react-minimal from https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/45/overview

 

Ensure Basic.js have footer areas and list1, list2 areas

      <div className="footer">

        <div className="hint">[footer]</div>

        {footer &&<EditableArea key="footer" content=\{footer}>

          {footer.list1 && <EditableArea key="footer.list1" className="Area" content=\{footer.list1} />}  

          {footer.list2 && <EditableArea key="footer.list2" className="Area" content=\{footer.list2} />}  

        </EditableArea>}

      </div>

Expectation: footer area contain nested area list1, list2 can show correctly, even they are must show correctly after refreshing browser

 

Here is sample of correct greenbar of footer, list1, list2 in freemarker, you can find sample of freemarker in https://git.magnolia-cms.com/users/czimmermann/repos/inheritance-tests/browse/magnolia/light-modules/inherit-lm

 

Here is headless greenbar, you may need to click refresh browser and see the problem

 



 Comments   
Comment by Christopher Zimmermann [ 20/Sep/23 ]

What about - does the SPA rendering look OK when there are nested areas - but component inheriance is not turned on? Does this scenario supplly any clues?

Comment by Oanh Thai Hoang [ 25/Sep/23 ]

Unfortunately, I did try both `customView` or `CustomArea` like https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/samples/react-sample/src/app/pages/Standard.js#62,69 but no luck for nested areas. The problem seem come from gwt (magnolia-pages-editor-external module) to me. 

 

I already prepared simple case of nested area in react-minimal: https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/45/overview

 

 

Comment by Robert Šiška [ 26/Sep/23 ]

Seems that each call to `window.mgnlRefresh()` multiplies the bars. I vaguely remember that we had a similar issue before, but can't find it now...

Generated at Mon Feb 12 06:27:47 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.