[PAGES-1314] Component inheritance not working for nested areas Created: 30/Aug/23  Updated: 20/Nov/23  Resolved: 28/Sep/23

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

Type: Bug Priority: Neutral
Reporter: Riste Drangovski Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: 0d
Σ Time Spent: 5d 6.75h Time Spent: 1d 7.75h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File child-2-another-result.png     PNG File child-2-result-1.png     PNG File child-2-result.png     PNG File image-2023-09-14-13-46-06-084.png     PNG File image-2023-09-18-09-38-50-292.png     PNG File image-2023-09-18-09-39-44-495.png     PNG File jcr-storage.png     PNG File parent.png     PNG File rest-pages.png     PNG File solution-2.png     PNG File spa-filter.png    
Issue Links:
causality
is causing PAGES-1514 Should only rename inherited componen... Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
PAGES-1317 Implement Sub-task Completed Oanh Thai Hoang  
PAGES-1318 Review Sub-task Completed Dai Ha  
PAGES-1319 piQA Sub-task Closed Anh Vu  
PAGES-1320 QA Sub-task Completed Dai Ha  
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
Release notes required:
Yes
Date of First Response:
Epic Link: Support
Sprint: DevX 46, DevX 47
Story Points: 5
Team: DeveloperX
Work Started:
Approved:
Yes

 Description   

Steps to reproduce

  1. Define nested areas in page definition (for example footer area that contains footerNavigation area)
  2. Enable inheritance for the nested area (footerNavigation)
  3. Add components to footerNavigation are of the root page
  4. Call delivery endpoint and try to render child page

.. Logs, screenshots, gifs...

Expected results

Returned json to include inherited components from nested area (footerNavigation)

Actual results

Returned json doesn't include inherited components

Workaround

Development notes



 Comments   
Comment by Christopher Zimmermann [ 31/Aug/23 ]

To clarify, the bug is that the inheritance feature should work on an area that is nested, and is configured for inheritance.

The above works properly on Freemarker - see the  footer of the "Travel Home" template of the Travel demo for an example. 

It does not work properly on the REST endpoint, the inherited components are not included in the response.

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

Discovery output:

inherited components in nested areas footerNavigation ( in above example) did not included in response due to missing detected nested area inside area.

 

Solution: 

Creating missing nested areas nodes and continue wrapping areas nodes contain nested areas. PR is provided

Comment by Riste Drangovski [ 14/Sep/23 ]

When nested area is inherited currently new area node is returned in the json. This is not how standard magnolia works!
We should get same area node containing inherited and non-inherited components!

Comment by Riste Drangovski [ 14/Sep/23 ]

I'll try to add a bit of clarification of the problem and context:

On the frontend templates (let's say react spa), we include area on the page by adding "Editable Area Component":
<EditableArea content={footer} />
For content of the component we are passing area node (in the above example footer node).
This template is same for pages with inherited areas.
The problem is that in the json for page that contains inherited footer area, footer node is empty and there is additional node named "footer_inherited_depth_xx" which contains inherited components.
But this node will not get rendered because on the template we are not passing this node. And also we can't know the name of the inherited node.
In the json we need "footer" node which will contain all components and inherited properties, so that inherited components get rendered on the page. 

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

Hi rdrangovski . Unfortunately, I couldn't reproduce your bug that you found. I may miss some thing. Here is what I tried so far

 

I have a footer area that contained nested areas as below:

 

footer:
    areas:
      list1:
        availableComponents:
          text:
            id: spa-lm:components/headline
        inheritance:
          enabled: true
          components: all
      list2:
        availableComponents:
          text:
            id: spa-lm:components/headline
        inheritance:
          enabled: true
          components: all 

then I tried to create 3 pages react-minimal-prototype-nested-area-autogenration-inheritance/child-1/child-2 as below:

I did prepare non-empty footer with list1 and list2 as below and expected to get all inheritanced components from child-2's parents

And then run rest for child-2. and still see inherited component under list1 as my expectation

Even I tried with a case list1 has non-inherited component. I see both inherited and non-inherited component below list1

Would be nice if you can elaborate a bit use case or your simple config footer so I can reproduce a bug easily. Thank you

Comment by Riste Drangovski [ 15/Sep/23 ]

Hi Oanh Thai Hoang,

please enable inheritance on footer area too!

So you should have:

  • footer area (enabled inheritance)
      - list1 area (enabled inheritance)
      - list2 area (enabled inheritance)

This is how you should be able to reproduce above the problem.

You should also check scenario

  • footer area (enabled inheritance)
       - footer area properties
       - footer component
          - footer component properties
          - list1 area (enabled inheritance)
          - list2 area (enabled inheritance)

This scenario was also not working for me.
  

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

Hi rdrangovski  Regarding your first usecase:

footer area (enabled inheritance)
  - list1 area (enabled inheritance)
  - list2 area (enabled inheritance) 

Currently, in freemarker as czimmermann point out in above comment

https://jira.magnolia-cms.com/browse/PAGES-1314?focusedId=374145&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-374145

 

Freemarker supported for enabling inheritance for nested areas only. So my suggestion is 

footer area
  - list1 area (enabled inheritance)
  - list2 area (enabled inheritance) 
Comment by Riste Drangovski [ 15/Sep/23 ]

Sorry, I don't get it! 
You want to tell me that magnolia supports only one level of inheritance?
If this is the case, can you please point me where is this documented so I can forward it to the client ?

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

Sorry to make you confused, rdrangovski . We are trying to support your 2 use cases in a next PR

And could you tell me your expectation about your use case 2 in above comment

footer area (enabled inheritance)
   - footer area properties
   - footer component
      - footer component properties
      - list1 area (enabled inheritance)
      - list2 area (enabled inheritance)

 

Here is my anotherFooter template I tried:

anotherFooter:
  title: Footer contains component with nested area
  dialog: spa-lm:components/headline
  availableComponents:
    component-with-area:
      id: react-minimal-lm-prototype-nested-area-autogenration-inheritance:components/component-with-area-nested
  inheritance:
    enabled: true
    components: all 

and here is template of component-with-area-nested component

 

dialog: spa-lm:components/headline
areas:
  list1:
    availableComponents:
      text:
        id: spa-lm:components/headline
    inheritance:
      enabled: true
      components: all
      
  list2:
    availableComponents:
      text:
        id: spa-lm:components/headline
    inheritance:
      enabled: true
      components: all 

 

 

I have parent page has 2 components as below:

 

And here is output of child page (child page has 1 non-inherited component) and include 2 inherited components from parent.

Just to mention that inside non-inherited component also contains list1 includes inherited component from list1 of it's paren't 

 

Would be nice to get your feedback before we have a final PR. Thank you so much

Comment by Riste Drangovski [ 18/Sep/23 ]

Hi Oanh,
this second scenario looks fine with me.

I also want to point out that you should also try third scenario:

  • footer area (NOT enabled inheritance)
       - footer component
          - list1 area (enabled inheritance)
             - list component

For this scenario standard freemarker magnolia implementation will inherit list component to child pages, like this:

This is parent page:


      
This is child page with inherit components:

Thanks,
Riste

Comment by Oanh Thai Hoang [ 13/Nov/23 ]

Hello rdrangovski , cc jsimak 

 

We understand that you have one request for us is supporting your third scenario above 

  • footer area (NOT enabled inheritance)
       - footer component
          - list1 area (enabled inheritance)
             - list component

 

And this message we wanna confirm that your third use case was added to our component-inheritance-examples.   and was tested before

 

Another proposal from you is that not rename mgnl:contentNode under component. 

Could you elaborate a bit that use case. What nodeTypes of inheritance configure that you configure in your area definition.

Here is my example :

 inheritance:
  enabled: true
  components: all
  nodeTypes:
    - mgnl:component
    - mgnl:contentNode

 
If `mgnl:contentNode` has been configured as above. I think this case is understandable. Our Pages rest delivery need to use unique name to distinguish 2 same name property in parent and child node.

So response with difference name to show inherited node is understandable .

And in spa code, we can just filter parent's content node via below code without directly use node name property. Ex:

 

All in all, propose one property config to by pass rename special node types is quite useful in your case so I create another ticket https://jira.magnolia-cms.com/browse/PAGES-1499, so that user can decide what node types can by pass. WDUT?

 

Thank you so much.

 

 

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