Issue #2968110 by tedbow, tim.plunkett, Kristen Pol, bkosborne, andrewmacpherson: Layout Builder's ConfigureBlockFormBase forms do not display validation errors on submit

core/lib/Drupal/Core/Ajax/AjaxFormHelperTrait.php

@@ -31,6 +31,7 @@ trait AjaxFormHelperTrait {
         '#type' => 'status_messages',
         '#weight' => -1000,
       ];
+      $form['#sorted'] = FALSE;
       $response = new AjaxResponse();
       $response->addCommand(new ReplaceCommand('[data-drupal-selector="' . $form['#attributes']['data-drupal-selector'] . '"]', $form));
     }

core/modules/layout_builder/src/Form/ConfigureBlockFormBase.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\layout_builder\Form;
 
+use Drupal\Component\Utility\Html;
 use Drupal\Component\Uuid\UuidInterface;
 use Drupal\Core\Ajax\AjaxFormHelperTrait;
 use Drupal\Core\Block\BlockManagerInterface;
@@ -179,6 +180,15 @@ abstract class ConfigureBlockFormBase extends FormBase implements BaseFormIdInte
     ];
     if ($this->isAjax()) {
       $form['actions']['submit']['#ajax']['callback'] = '::ajaxSubmit';
+      // @todo static::ajaxSubmit() requires data-drupal-selector to be the same
+      //   between the various Ajax requests. A bug in
+      //   \Drupal\Core\Form\FormBuilder prevents that from happening unless
+      //   $form['#id'] is also the same. Normally, #id is set to a unique HTML
+      //   ID via Html::getUniqueId(), but here we bypass that in order to work
+      //   around the data-drupal-selector bug. This is okay so long as we
+      //   assume that this form only ever occurs once on a page. Remove this
+      //   workaround in https://www.drupal.org/node/2897377.
+      $form['#id'] = Html::getId($form_state->getBuildInfo()['form_id']);
     }
 
     return $form;

core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFormMessagesTest.php

@@ -0,0 +1,151 @@
+<?php
+
+namespace Drupal\Tests\layout_builder\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\Tests\contextual\FunctionalJavascript\ContextualLinkClickTrait;
+use WebDriver\Exception\UnknownError;
+
+/**
+ * Tests that messages appear in the off-canvas dialog with configuring blocks.
+ *
+ * @group layout_builder
+ */
+class BlockFormMessagesTest extends WebDriverTestBase {
+
+  use ContextualLinkClickTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'layout_builder',
+    'block',
+    'node',
+    'contextual',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    // @todo The Layout Builder UI relies on local tasks; fix in
+    //   https://www.drupal.org/project/drupal/issues/2917777.
+    $this->drupalPlaceBlock('local_tasks_block');
+    $this->createContentType(['type' => 'bundle_with_section_field']);
+  }
+
+  /**
+   * Tests that validation messages are shown on the block form.
+   */
+  public function testValidationMessage() {
+    $assert_session = $this->assertSession();
+    $page = $this->getSession()->getPage();
+
+    $this->drupalLogin($this->drupalCreateUser([
+      'access contextual links',
+      'configure any layout',
+      'administer node display',
+      'administer node fields',
+    ]));
+    $field_ui_prefix = 'admin/structure/types/manage/bundle_with_section_field';
+    // Enable layout builder.
+    $this->drupalPostForm(
+      $field_ui_prefix . '/display/default',
+      ['layout[enabled]' => TRUE],
+      'Save'
+    );
+    $this->clickElementWhenClickable($page->findLink('Manage layout'));
+    $assert_session->addressEquals($field_ui_prefix . '/display/default/layout');
+    $this->clickElementWhenClickable($page->findLink('Add Block'));
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas .block-categories'));
+    $this->clickElementWhenClickable($page->findLink('Powered by Drupal'));
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas [name="settings[label]"]'));
+    $page->findField('Title')->setValue('');
+    $this->clickElementWhenClickable($page->findButton('Add Block'));
+    $this->assertMessagesDisplayed();
+    $page->findField('Title')->setValue('New title');
+    $page->pressButton('Add Block');
+    $block_css_locator = '#layout-builder .block-system-powered-by-block';
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', $block_css_locator));
+    $this->waitForNoElement('#drupal-off-canvas');
+    $assert_session->assertWaitOnAjaxRequest();
+    $this->drupalGet($this->getUrl());
+    $this->clickElementWhenClickable($page->findButton('Save layout'));
+    $this->assertNotEmpty($assert_session->waitForElement('css', 'div:contains("The layout has been saved")'));
+
+    // Ensure that message are displayed when configuring an existing block.
+    $this->drupalGet($field_ui_prefix . '/display/default/layout');
+    $assert_session->assertWaitOnAjaxRequest();
+    $this->clickContextualLink($block_css_locator, 'Configure', TRUE);
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas [name="settings[label]"]'));
+    $page->findField('Title')->setValue('');
+    $this->clickElementWhenClickable($page->findButton('Update'));
+    $this->assertMessagesDisplayed();
+  }
+
+  /**
+   * Waits for an element to be removed from the page.
+   *
+   * @param string $selector
+   *   CSS selector.
+   * @param int $timeout
+   *   (optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @todo Remove in https://www.drupal.org/node/2892440.
+   */
+  protected function waitForNoElement($selector, $timeout = 10000) {
+    $condition = "(typeof jQuery !== 'undefined' && jQuery('$selector').length === 0)";
+    $this->assertJsCondition($condition, $timeout);
+  }
+
+  /**
+   * Asserts that the validation messages are shown correctly.
+   */
+  protected function assertMessagesDisplayed() {
+    $assert_session = $this->assertSession();
+    $page = $this->getSession()->getPage();
+    $messages_locator = '#drupal-off-canvas .messages--error';
+    $assert_session->assertWaitOnAjaxRequest();
+    $this->assertNotEmpty($assert_session->waitForElement('css', $messages_locator));
+    $assert_session->elementTextContains('css', $messages_locator, 'Title field is required.');
+    /** @var \Behat\Mink\Element\NodeElement[] $top_form_elements */
+    $top_form_elements = $page->findAll('css', '#drupal-off-canvas form > *');
+    // Ensure the messages are the first top level element of the form.
+    $this->assertTrue(stristr($top_form_elements[0]->getText(), 'Title field is required.') !== FALSE);
+    $this->assertGreaterThan(4, count($top_form_elements));
+  }
+
+  /**
+   * Attempts to click an element until it is in a clickable state.
+   *
+   * @param \Behat\Mink\Element\NodeElement $element
+   *   The element to click.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @todo Replace this method with general solution for random click() test
+   *   failures in https://www.drupal.org/node/3032275.
+   */
+  protected function clickElementWhenClickable(NodeElement $element, $timeout = 10000) {
+    $page = $this->getSession()->getPage();
+
+    $result = $page->waitFor($timeout / 1000, function () use ($element) {
+      try {
+        $element->click();
+        return TRUE;
+      }
+      catch (UnknownError $exception) {
+        if (strstr($exception->getMessage(), 'not clickable') === FALSE) {
+          // Rethrow any unexpected UnknownError exceptions.
+          throw $exception;
+        }
+        return NULL;
+      }
+    });
+    $this->assertTrue($result);
+  }
+
+}