Fix table components when is used via layout builder as block has paragraph reference entity field

Created on 18 September 2023, over 1 year ago
Updated 17 October 2023, about 1 year ago

Problem/Motivation

I'm receiving the following ajax error when I try to add a block that has a paragraph entity reference

 The website encountered an unexpected error. Please try again later.<br>
<br>
<em class="placeholder">JsonSchema\Exception\InvalidArgumentException</em>
: Unable to encode schema array as JSON: Recursion detected in <em class="placeholder">JsonSchema\Constraints\BaseConstraint::arrayToObjectRecursive()</em>
(line <em class="placeholder">143</em>
of <em class="placeholder">/app/vendor/justinrainbow/json-schema/src/JsonSchema/Constraints/BaseConstraint.php</em>
). <pre class="backtrace">Drupal\sdc\Component\ComponentValidator-&gt;validateProps(Array, Object) (Line: 132)
Drupal\sdc\Twig\TwigExtension-&gt;doValidateProps(Array, &#039;varbase_components:table &#039;) (Line: 112)
Drupal\sdc\Twig\TwigExtension-&gt;validateProps(Array, &#039;varbase_components:table &#039;) (Line: 42)
__TwigTemplate_c12f6d6d6bb9f98675a96cebd4a96534-&gt;doDisplay(Array, Array) (Line: 394)
Twig\Template-&gt;displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template-&gt;display(Array) (Line: 40)
__TwigTemplate_163f770b573fbf1f2578e8cbfdf49e2b-&gt;doDisplay(Array, Array) (Line: 394)
Twig\Template-&gt;displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template-&gt;display(Array) (Line: 379)
Twig\Template-&gt;render(Array, Array) (Line: 40)
Twig\TemplateWrapper-&gt;render(Array) (Line: 53)
twig_render_template(&#039;themes/custom/he4hc/templates/dataset/table.html.twig &#039;, Array) (Line: 372)
Drupal\Core\Theme\ThemeManager-&gt;render(&#039;table &#039;, Array) (Line: 445)
Drupal\Core\Render\Renderer-&gt;doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer-&gt;render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension-&gt;escapeFilter(Object, Array, &#039;html &#039;, NULL, 1) (Line: 39)
__TwigTemplate_b2e8418ad0ec96fce78c2250254f670c-&gt;doDisplay(Array, Array) (Line: 394)
Twig\Template-&gt;displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template-&gt;display(Array) (Line: 379)
Twig\Template-&gt;render(Array, Array) (Line: 40)
Twig\TemplateWrapper-&gt;render(Array) (Line: 53)
twig_render_template(&#039;modules/contrib/inline_entity_form/templates/inline-entity-form-entity-table.html.twig &#039;, Array) (Line: 372)
Drupal\Core\Theme\ThemeManager-&gt;render(&#039;inline_entity_form_entity_table &#039;, Array) (Line: 445)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer-&gt;doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer-&gt;render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer-&gt;Drupal\Core\Render\{closure}() (Line: 592)
Drupal\Core\Render\Renderer-&gt;executeInRenderContext(Object, Object) (Line: 149)
Drupal\Core\Render\Renderer-&gt;renderRoot(Array) (Line: 52)
Drupal\Core\Render\MainContent\DialogRenderer-&gt;renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber-&gt;onViewRenderArray(Object, &#039;kernel.view &#039;, Object)
call_user_func(Array, Object, &#039;kernel.view &#039;, Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher-&gt;dispatch(Object, &#039;kernel.view &#039;) (Line: 187)
Symfony\Component\HttpKernel\HttpKernel-&gt;handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel-&gt;handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session-&gt;handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle-&gt;handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache-&gt;pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache-&gt;handle(Object, 1, 1) (Line: 53)
Asm89\Stack\Cors-&gt;handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware-&gt;handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware-&gt;handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel-&gt;handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel-&gt;handle(Object) (Line: 19)
</pre>

Steps to reproduce

Given
When
Then

Proposed resolution

Remaining tasks

  • ✅ File an issue about this project
  • ❌ Addition/Change/Update/Fix to this project
  • ❌ Testing to ensure no regression
  • ❌ Automated unit/functional testing coverage
  • ❌ Developer Documentation support on feature change/addition
  • ❌ User Guide Documentation support on feature change/addition
  • ❌ Accessibility and Readability
  • ❌ Code review from 1 Varbase core team member
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes and Update Helper on new feature change/addition
  • ❌ Release

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
🐛 Bug report
Status

Needs work

Version

3.0

Component

Code

Created by

🇯🇴Jordan Ahmad Khader

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Ahmad Khader
  • 🇯🇴Jordan Rajab Natshah Jordan

    Tested that with fresh Varbase 10 build
    I did not face the issue

    Please, could you provide the Steps to reproduce with fresh Varbase 10 build
    This could be related to custom code in the project

  • 🇯🇴Jordan ahmad abbad Jordan

    I confirmed the issue
    The main issue is the inline-entity-form module is using its own template "inline-entity-form-entity-table.html.twig" for the table and it's not working with the table component and we override it using table.html.twig template.

  • Status changed to Needs work about 1 year ago
  • 🇯🇴Jordan Rajab Natshah Jordan

    Noted;
    Thanks, Ahmad, for following up.

    Please, let us have the fix for "inline-entity-form-entity-table.html.twig" in Vartheme BS5
    In the same way you had it fixed.

    Happy to test more and commit any MR

  • 🇯🇴Jordan ahmad abbad Jordan

    Thank you, Rajab
    I moved it to the custom theme and made it use {% include 'varbase_components:table' %} not {{ table }} it's working but the table items are not shown, there's something weird here.

  • 🇯🇴Jordan Rajab Natshah Jordan

    Got that,
    Let us move the issue to Vartheme BS5
    Then try to manage passing the needed items.
    We maybe need to pass the needed props.
    And custom for the Inline Entity Form module

    You can find the story at 🐛 Fix Unexpected slot that is not declared: table, caption, colgroup, header, body, footer Fixed
    I had some time researching how Drupal Core do all pre-processed variables
    and researched how other themes are doing the template for that.

    For sure we need to add more template mapping.

    Available properties:
    • responsive: Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports.
    • color: Table Background Color - Set a background contextual classes to color tables.
    • striped_rows: Use to add zebra-striping to any table row within the `<tbody>`. Works with `no_striping` is false.
    • striped_columns: Use to add zebra-striping to any table column. Works with `no_striping` is false.
    • hover: Enable a hover state on table rows within a `<tbody>`.
    • bordered: Add borders on all sides of the table and cells.
    • border_color: Use the border color utility to change border colors.
    • borderless: Add `.table-borderless` for a table without borders.
    • size: Use sm for small to make any table more compact by cutting all cell padding in half.
    • caption: A localized string for the `<caption>` tag.
    • colgroups: Column groups which contains attributes
    • header: Table header cells which contains (tag, attributes, content, field, sort)
    • sticky: A flag indicating whether to use a sticky table header. ( set `responsive` to false for sticky to work)
    • rows: Table rows, which each row contains (attributes, data, no_striping, cells). Each cell contains (tag, attributes, content, active_table_sort)
    • footer: Table footer rows, in the same format as the rows variable.
    • empty: The message to display in an extra row if table does not have any rows.
    • no_striping: A boolean indicating that the row should receive no striping.
    • header_columns: The number of columns in the header.
    • utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the table element.
    • thead_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the head of the table element.
    • tbody_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the body of the table element.
    • tfoot_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the footer of the table element.

    Available attributes:

    • attributes: HTML attributes to apply to the `<table>` tag.
    • thead_attributes: HTML attributes to apply to the `<thead>` tag.
    • tbody_attributes: HTML attributes to apply to the `<tbody>` tag.
    • tfoot_attributes: HTML attributes to apply to the `<tfoot>` tag.

    Available slots:

    • N/A
  • 🇯🇴Jordan ahmad abbad Jordan

    Any update on this issue?
    We are using inline entity form for a lot of blocks and we should fix this issue ASAP

  • 🇯🇴Jordan Rajab Natshah Jordan

    Please, fix this in the Custom Theme in your project first.
    They we could help having it for next project.

Production build 0.71.5 2024