Fix finding child content-type elements in stage-builder

[orukusaki]

Description (*)

Fixes a bug whereby child content-type elements will not be found, where other types of elements also exist at the same level.

Manual testing scenarios (*)

1. Create a content type, where child content elements are mixed in with other elements. For example:
   master.html:

<div data-bind="attr: data.main.attributes, style: data.main.style">
    <div class="swiper">
        <ul class="swiper-wrapper" each="contentType.getChildren()">
            <li class="swiper-slide">
                <render args="{ name: content.template, data: content }"></render>
            </li>
        </ul>
        <div class="swiper-scrollbar"></div>
    </div>
</div>

preview.html:

<div data-bind="attr: data.main.attributes, style: data.main.style"
     event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
    <render args="getOptions().template"></render>
    <div class="swiper">
        <ul class="swiper-wrapper element-children content-type-container"
            each="contentType.getChildren()" css="getChildrenCss()" attr="{id: contentType.id + '-children'}"
            data-bind="sortable: getSortableOptions()"
            afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
            <li class="pagebuilder-content-type-wrapper swiper-slide">
                <if args="$parent.isContainer()">
                    <div class="pagebuilder-drop-indicator"></div>
                </if>
                <div
                    template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }"
                    attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}">
                </div>
                <if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
                    <div class="pagebuilder-drop-indicator"></div>
                </if>
            </li>
        </ul>
        <div class="swiper-scrollbar"></div>
    </div>
</div>

It is possible to create this content type in Pagebuilder, and the correct result is rendered into the database and on the frontend. However, Pagebuilder cannot then load up the content back into the stage - the presence of the <li> element causes only the last item to be found, and <div class="swiper-scrollbar"> causes even that to be forgotten.

This small fix corrects this, and all types of content can now be loaded into the stage correctly.

Checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Fix finding child content-type elements in stage-builder #875: Fix finding child content-type elements in stage-builder

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

@magento create issue

[engcom-Hotel]

Hello @orukusaki,

❌ QA not Passed

We have tried reproducing the issue by following the Manual Testing Scenarios mentioned above. But it seems for us the issue is not reproducible.

Please refer to the below custom module we have made to reproduce the issue:
Magz.zip

Please let us know if we missed anything.

Thanks

[engcom-Hotel]

Hello @orukusaki,

We are still waiting for your reply on this PR.

Thanks

[orukusaki]

Hi,
I've attached a more complete example module, which you can use to see the issue.
Prpb869-updated.zip
When you first add the new content-type, you can add images to it as child items. They save correctly, and can be viewed on the frontend site, but the page then does not load up correctly into the Pagebuilder Preview.
With the fix in place, loading the saved content works fine
thanks

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @orukusaki,

Thanks for the update on this PR!

✔️ QA Passed

Manual testing scenario:

1. Create a content type, where child content elements are mixed in with other elements
2. It is possible to create this content type in Pagebuilder, and the correct result is rendered into the database and on the frontend. However, Pagebuilder cannot then load up the content back into the stage - the presence of the <li> element causes only the last item to be found, and
   causes even that to be forgotten.

After: ✔️

Before: ✖️

Tested all the manual scenarios, no impact on regression testing.

Meanwhile the tests are running on this PR, moving it to Extended testing.

Thanks

[engcom-Hotel]

@magento run Functional Tests CE, Functional Tests EE, Functional Tests B2B, Performance Acceptance Tests

[engcom-Hotel]

@magento run Functional Tests B2B

[engcom-Hotel]

Failed tests seem flaky to me. The failures are different in last 2 builds. Please refer to the below screenshots:

Failure 1

Failure 2

Hence moving the PR to Merge in progress.

Thanks

[engcom-Hotel]

@magento run Functional Tests B2B