Skip to content

Resolve "Repeat element: improve the element menu to support multiple hierarchy levels."

Peter Evans requested to merge 2528-repeat-element-improve-the-element-menu-to-support-multiple-hierarchy-levels into 2519-repeat-element-implement-the-new-element-2

What is in this MR

Currently in develop the elements context will list all root elements (those with no parent), and then nested the immediate children of those root elements, and no further in the root element's descendants.

This is a problem for our new repeat element in #2485, as it can contain a container element, which in turn can have its own child. Like so:

  • Repeat
    • Container (form / column)
      • Child of container

In 2519-repeat-element-implement-the-new-element-2 (!2284 (merged)) that currently looks like so:

elements-before

This MR tries to refactor the elements context so that it recurses through the root element's descendants, adding ul (ElementsList) when a ElementsListItem finds that its element has children. The hierarchy above now looks like this:

elements-after

Additionally, the element search has been overhauled. In my 'element list display name' MR I missed that the search was still searching against the element type name, and not the 'display name' we now show. We now search against that, and it will correctly search the full hierarchy. For example, given a hierarchy like so:

  • Repeat
    • Column
      • Heading 1
      • Repeat
        • Image
      • Heading 2

With a search query of "heading" would result in:

  • Repeat
    • Column
      • Heading 1
      • Heading 2

With a search query of "image" would result in:

  • Repeat
    • Column
      • Repeat
        • Image

element-search

How to test this MR

  • Experiment with different elements and hierarchies.
  • To see the Grandparent > Parent > Child relationship above, add those exact elements.
  • If you want to (infinitely until the UI breaks) keep going deeper, change ColumnElementType.childElementTypesForbidden so that it returns an empty array. You can then add another RepeatElement and see the elements list nest further.

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #2528

Edited by Peter Evans

Merge request reports