Editable template and responsive grid nested in parsys issue

[Jondar3]

I think something is broken when using the responsive grid component (layout component) in an editable template. Everything seems to work fine if you only use a responsive grid in a root element which is also a responsive grid. But if you create an editable template with a normal parsys as the root, things go sour. If you open any page based on that template, you’ll see that the responsive grid is rendered as a list of allowed components instead of the drop zone.

It makes sense, the responsive grid component (/libs/wcm/foundation/components/responsivegrid/responsivegrid.html) is set to render the list of allowed component when the isApplicable method from com.day.cq.wcm.foundation.AllowedComponentList returns true.

I did some digging around and found the source of that component on the web:  

 public boolean isApplicable () {
        Page page = this.getCurrentPage();
        // Is this resource parent an authored template structure resource
        // And is it set as editable
        if (page != null) {
            Template template = page.getTemplate();
            if (template != null && template.hasStructureSupport()) {
                ValueMap valueMap = getResource().getValueMap();
                if (valueMap != null &&valueMap.containsKey(TemplatedResource.PN_EDITABLE)) {
                    return valueMap.get(TemplatedResource.PN_EDITABLE, Boolean.class);
                }
            }
        }
        return false;
    }

So it checks if this is a page based on an editable template, that seems logical. I’m guessing the next piece of code checks if the resource in the editable template has the ‘editable={Boolean}true’ configuration, which makes sense as that means that component can be edited by an author.

So we will always render the responsive grid as the allowed list component in a page when it’s unlocked (=editable) in the template on which the page is based? That makes no sense right?

What’s even stranger is I think that when you have a responsive grid within a responsive grid, it seems like the getResource().getValueMap() hits the upper responsive grid instead of the one that is editable, resulting in this check to return false so we can actually use the responsive grid. Is this working by accident or am I mistaken?

We’re on AEM 6.3.2.2 by the way. Did anyone else face this issue?

Is it an issue with the getResource() function? Do we need to cast the resource to TemplatedResource like in com.day.cq.wcm.foundation.ResponsiveGrid?