[Issue] Fix dynamic rows dnd array serializer in design config

[m2-assistant]

This issue is automatically created based on existing pull request: #38731: Fix dynamic rows dnd array serializer in design config

---

Description (*)

When using a dynamic rows component in design config, the save fails because when Magento tries to compare current value with the parent one, an error occurs:

TypeError: Magento\Theme\Model\Design\Config\ValueChecker::isEqualArrays(): Argument #2 ($defaultValue) must be of type array, bool given, called in /var/www/project/magento/vendor/magento/module-theme/Model/Design/Config/ValueChecker.php on line 87 and defined in /var/www/project/magento/vendor/magento/module-theme/Model/Design/Config/ValueChecker.php:100

It's because the argument types are array, but the default value is never caster while it could be null, an empty string or a boolean.

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

1. ...
2. ...

Questions or comments

Contribution 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)

[m2-assistant]

Hi @engcom-Hotel. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Hotel]

Hello @thomas-kl1,

Thanks for reporting the issue!

We have tried to reproduce the issue in the Magento 2.4-develop instance and it seems the issue is not reproducible for us. We are able to save the dynamic rows and fetch it successfully.

Please refer to the below custom module for reference and let us know if we missed anything:
Magz.zip

Thanks

[thomas-kl1]

Hello @engcom-Bravo

The problem occurs when you add a dynamic rows to the design config view, not the system config. Field must bee added to ui_component design_config_form.xml.

[thomas-kl1]

E.g:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="other_settings">
        <fieldset name="header">
            <field name="show_top_information" formElement="select">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Show Top Information</label>
                    <dataScope>header_translate_title</dataScope>
                </settings>
                <formElements>
                    <select>
                        <settings>
                            <options class="Magento\Config\Model\Config\Source\Yesno"/>
                        </settings>
                    </select>
                </formElements>
            </field>
            <dynamicRows name="top_information">
                <settings>
                    <addButtonLabel translate="true">Add Line</addButtonLabel>
                    <label translate="true">Top Information</label>
                    <componentType>dynamicRows</componentType>
                </settings>
                <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="isTemplate" xsi:type="boolean">true</item>
                            <item name="is_collection" xsi:type="boolean">true</item>
                            <item name="componentType" xsi:type="string">container</item>
                        </item>
                    </argument>
                    <field name="caption" formElement="input">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <validation>
                                <rule name="required-entry" xsi:type="boolean">true</rule>
                            </validation>
                            <dataType>text</dataType>
                            <label>Caption</label>
                        </settings>
                    </field>
                    <field name="details" formElement="input">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <dataType>text</dataType>
                            <label>Details</label>
                        </settings>
                    </field>
                    <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <dataType>text</dataType>
                            <label>Actions</label>
                            <componentType>actionDelete</componentType>
                        </settings>
                    </actionDelete>
                </container>
            </dynamicRows>
        </fieldset>
    </fieldset>
</form>

[engcom-Hotel]

Hello @thomas-kl1,

Thanks for the reply!

We have tried to reproduce the issue with the design config view, but it seems the issue is still not reproducible for us. I order to reproduce the issue, we have modified the below file:

magento2/app/code/Magento/Theme/view/adminhtml/ui_component/design_config_form.xml

Line 47 in 91cb4d4

<fieldset name="other_settings" sortOrder="30">

And add the below XML in the other_settings fieldset:

<field name="show_top_information" formElement="select">
                <settings>
                    <dataType>text</dataType>
                    <label translate="true">Show Top Information</label>
                    <dataScope>header_translate_title</dataScope>
                </settings>
                <formElements>
                    <select>
                        <settings>
                            <options class="Magento\Config\Model\Config\Source\Yesno"/>
                        </settings>
                    </select>
                </formElements>
            </field>
            <dynamicRows name="top_information">
                <settings>
                    <addButtonLabel translate="true">Add Line</addButtonLabel>
                    <label translate="true">Top Information</label>
                    <componentType>dynamicRows</componentType>
                </settings>
                <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="isTemplate" xsi:type="boolean">true</item>
                            <item name="is_collection" xsi:type="boolean">true</item>
                            <item name="componentType" xsi:type="string">container</item>
                        </item>
                    </argument>
                    <field name="caption" formElement="input">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <validation>
                                <rule name="required-entry" xsi:type="boolean">true</rule>
                            </validation>
                            <dataType>text</dataType>
                            <label>Caption</label>
                        </settings>
                    </field>
                    <field name="details" formElement="input">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <dataType>text</dataType>
                            <label>Details</label>
                        </settings>
                    </field>
                    <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="fit" xsi:type="boolean">false</item>
                            </item>
                        </argument>
                        <settings>
                            <dataType>text</dataType>
                            <label>Actions</label>
                            <componentType>actionDelete</componentType>
                        </settings>
                    </actionDelete>
                </container>
            </dynamicRows>

Please refer to the below-screenshot of the dynamic row field:

Below screenshot shows that we are able to successfully post the page, we are able to get the values:

Please let us know if we missed anything.

Thanks

[thomas-kl1]

How did you setup the di.xml part? Mine is:

I do use the Magento\Config\Model\Config\Backend\Serialized\ArraySerialized which is what we need to use for dynamic rows on system.xml

   <type name="Magento\Theme\Model\Design\Config\MetadataProvider">
      <arguments>
          <argument name="metadata" xsi:type="array">
              <item name="top_information" xsi:type="array">
                  <item name="path" xsi:type="string">design/header/top_information</item>
                  <item name="fieldset" xsi:type="string">other_settings/header</item>
                  <item name="backend_model" xsi:type="string">Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</item>
              </item>
          </argument>
      </arguments>
  </type>

[engcom-Hotel]

Yes @thomas-kl1,

We are using the below setup in the di.xml:

<type name="Magento\Theme\Model\Design\Config\MetadataProvider">
        <arguments>
            <argument name="data" xsi:type="array">
                <item name="top_information" xsi:type="array">
                    <item name="path" xsi:type="string">design/header/top_information</item>
                    <item name="fieldset" xsi:type="string">other_settings/header</item>
                    <item name="backend_model" xsi:type="string">Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</item>
                </item>
            </argument>
        </arguments>
    </type>

But still, the issue is not reproducible for us.

Thanks

[thomas-kl1]

I'm still facing the issue on the latest Magento version, could you send me the updated version of your module?