Frontend: Collapsible log sub-sections don't work

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Summary

It was reported by a customer sub-sections don't collapse/expand when clicked.

Nested sections are not fully supported in %12.0 but we planned to do so as it's a very useful feature.

Steps to reproduce

Click on sub-section with header Invalid/duplicate entries in expected failures JSON in this example log https://gitlab.com/openid/conformance-suite/-/jobs/241939885. Current behavior is that the section doesn't collapse/expand the inner content.

Example Project

Example: https://gitlab.com/openid/conformance-suite/-/jobs/241939885 (search for Invalid/duplicate entries in expected failures JSON)

What is the current bug behavior?

Sub-section does not collapse/expand.

What is the expected correct behavior?

Sub-section should expand/collapse its own content and nothing else.

Output of checks

This bug happens on GitLab.com

Possible fixes

The log https://gitlab.com/openid/conformance-suite/-/jobs/241939885 seems to generate a sub-section with data-section="build-scrip invalid-duplicate-expected".

<div class="js-section-start fa append-right-8 cursor-pointer fa-caret-right" data-timestamp="1561722621" data-section="build-script invalid-duplicate-expected" role="button"></div>

I suspect the problem is that we have 2 values in the data-section while the sub-section should only control the last one (invalid-duplicate-expected) in this scenario.

Essentially this should be the expected output:

<div class="js-section-start fa append-right-8 cursor-pointer fa-caret-right" data-timestamp="1561722500" data-section="build-script" role="button"></div>
...
<div class="js-section-start fa append-right-8 cursor-pointer fa-caret-right" data-timestamp="1561722621" data-section="invalid-duplicate-expected" role="button"></div>
...
<div class="section-end" data-section="invalid-duplicate-expected"></div>
...
<div class="section-end" data-section="build-script"></div>

The parent section correctly collapses/expands all the inner sections. The problem is with the sub-section.

Remaining work

In order to unblock this we need the following issue addressed

Backend: Gaps from backend in job log traces

The aforementioned issue needs to be worked on as currently there's no way to know which runner version is running in the background. This makes adding or in this case fixing certain features difficult on the frontend as any job log format changes could potentially break the job log feature such as the job logs no longer showing bug that occurred during the rollout of the infinitelly_collapsible_sections feature flag.

What's the current path forward?

• We should remove all of the infinitely_collapsible_sections feature flag code until the above issue is addressed, we can't have multiple job log parser functions in the codebase, ideally we should only have one that has features activated or deactivated depending on the runner features.

• Keep the infinitely_collapsible_sections feature flag until we can enable it after the above issue is addressed, setting this issue as workflowblocked until further notice which is not ideal as we want to signal we're either supporting multiple nested collapsible sections or just signal we only support one level deep.