Skip to content

Commit

Permalink
feature #19339 [WebProfilerBundle][Form][DX] To expand the form nodes…
Browse files Browse the repository at this point in the history
… that contains children with errors (yceruto)

This PR was squashed before being merged into the 3.2-dev branch (closes #19339).

Discussion
----------

[WebProfilerBundle][Form][DX] To expand the form nodes that contains children with errors

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | -
| License       | MIT
| Doc PR        | -

Currently when we use nested forms and an error occurs into one of them, it's not displayed "easily" in the form panel profiler:

![first](https://cloud.githubusercontent.com/assets/2028198/17125622/1fd15142-52c3-11e6-830e-17b3e341ba60.png)

This happen because only the root form is expanded and the children are shown collapsed "by default".

**The main problem is to search where is the form with error**.

The purpose of this PR is to show expanded all forms that contains children with error, reducing a little bit the developer's time when debugging.

PR result when we access to the form panel profiler:

![form-error-result](https://cloud.githubusercontent.com/assets/2028198/17125447/83eb9c0c-52c1-11e6-94bc-a2a7492eea43.png)

In red the full path to the error.

![form-error-result2](https://cloud.githubusercontent.com/assets/2028198/17125459/a04de95e-52c1-11e6-8980-84a5dcd0914a.png)

Commits
-------

d626b28 [WebProfilerBundle][Form][DX] To expand the form nodes that contains children with errors
  • Loading branch information
fabpot committed Aug 22, 2016
2 parents 703db1e + d626b28 commit d64bcda
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 4 deletions.
Expand Up @@ -164,6 +164,9 @@
font-weight: bold;
vertical-align: middle;
}
.has-error {
color: #B0413E;
}
.errors h3 {
color: #B0413E;
}
Expand Down Expand Up @@ -423,11 +426,12 @@
</script>
{% endblock %}

{% macro form_tree_entry(name, data, expanded) %}
{% macro form_tree_entry(name, data, is_root) %}
{% import _self as tree %}
{% set has_error = data.errors is defined and data.errors|length > 0 %}
<li>
<div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
{% if data.errors is defined and data.errors|length > 0 %}
{% if has_error %}
<div class="badge-error">{{ data.errors|length }}</div>
{% endif %}

Expand All @@ -437,11 +441,13 @@
<div class="toggle-icon empty"></div>
{% endif %}

{{ name|default('(no name)') }} {% if data.type_class is defined %}[<abbr title="{{ data.type_class }}">{{ data.type_class|split('\\')|last }}</abbr>]{% endif %}
<span {% if has_error or data.has_children_error|default(false) %}class="has-error"{% endif %}>
{{ name|default('(no name)') }} {% if data.type_class is defined %}[<abbr title="{{ data.type_class }}">{{ data.type_class|split('\\')|last }}</abbr>]{% endif %}
</span>
</div>

{% if data.children is not empty %}
<ul id="{{ data.id }}-children" {% if not expanded %}class="hidden"{% endif %}>
<ul id="{{ data.id }}-children" {% if not is_root and not data.has_children_error|default(false) %}class="hidden"{% endif %}>
{% for childName, childData in data.children %}
{{ tree.form_tree_entry(childName, childData, false) }}
{% endfor %}
Expand Down
Expand Up @@ -155,6 +155,12 @@ public function collectSubmittedData(FormInterface $form)

foreach ($form as $child) {
$this->collectSubmittedData($child);

// Expand current form if there are children with errors
if (empty($this->dataByForm[$hash]['has_children_error'])) {
$childData = $this->dataByForm[spl_object_hash($child)];
$this->dataByForm[$hash]['has_children_error'] = !empty($childData['has_children_error']) || !empty($childData['errors']);
}
}
}

Expand Down
Expand Up @@ -123,6 +123,7 @@ public function testBuildPreliminaryFormTree()
'config' => 'foo',
'default_data' => 'foo',
'submitted_data' => 'foo',
'has_children_error' => false,
'children' => array(
'child' => $childFormData,
),
Expand Down Expand Up @@ -323,6 +324,7 @@ public function testBuildFinalFormTree()
'config' => 'foo',
'default_data' => 'foo',
'submitted_data' => 'foo',
'has_children_error' => false,
'children' => array(
'child' => $childFormData,
),
Expand Down Expand Up @@ -528,6 +530,62 @@ public function testCollectSubmittedDataCountsErrors()
$this->assertSame(4, $data['nb_errors']);
}

public function testCollectSubmittedDataExpandedFormsErrors()
{
$child1Form = $this->createForm('child1');
$child11Form = $this->createForm('child11');
$child2Form = $this->createForm('child2');
$child21Form = $this->createForm('child21');

$child1Form->add($child11Form);
$child2Form->add($child21Form);
$this->form->add($child1Form);
$this->form->add($child2Form);

$this->dataExtractor
->method('extractConfiguration')
->will($this->returnValue(array()));
$this->dataExtractor
->method('extractDefaultData')
->will($this->returnValue(array()));
$this->dataExtractor->expects($this->at(10))
->method('extractSubmittedData')
->with($this->form)
->will($this->returnValue(array('errors' => array())));
$this->dataExtractor->expects($this->at(11))
->method('extractSubmittedData')
->with($child1Form)
->will($this->returnValue(array('errors' => array())));
$this->dataExtractor->expects($this->at(12))
->method('extractSubmittedData')
->with($child11Form)
->will($this->returnValue(array('errors' => array('foo'))));
$this->dataExtractor->expects($this->at(13))
->method('extractSubmittedData')
->with($child2Form)
->will($this->returnValue(array('errors' => array())));
$this->dataExtractor->expects($this->at(14))
->method('extractSubmittedData')
->with($child21Form)
->will($this->returnValue(array('errors' => array())));

$this->dataCollector->collectSubmittedData($this->form);
$this->dataCollector->buildPreliminaryFormTree($this->form);

$data = $this->dataCollector->getData();
$formData = $data['forms']['name'];
$child1Data = $formData['children']['child1'];
$child11Data = $child1Data['children']['child11'];
$child2Data = $formData['children']['child2'];
$child21Data = $child2Data['children']['child21'];

$this->assertTrue($formData['has_children_error']);
$this->assertTrue($child1Data['has_children_error']);
$this->assertFalse(isset($child11Data['has_children_error']), 'The leaf data does not contains "has_children_error" property.');
$this->assertFalse($child2Data['has_children_error']);
$this->assertFalse(isset($child21Data['has_children_error']), 'The leaf data does not contains "has_children_error" property.');
}

private function createForm($name)
{
$builder = new FormBuilder($name, null, $this->dispatcher, $this->factory);
Expand Down

0 comments on commit d64bcda

Please sign in to comment.