Add visual hints that Layout Builder work is in tempstore and will not be lost, or take effect until saved

Does a layout in progress go into a tempstore like Views?
Yes it does, verified by testing using the following steps:

• Enable layout builder modules
• Enable the ability to use layout builder for a content type
• Modify a layout by adding a section, and some additional content, do not click 'Save Layout'
• Navigate away from the layout configuration to a new page
• Go back to the layout configuration page and refresh
• Verify that the unsaved configuration changes are present

Views uses both a message of "You have unsaved changes.", and a state change of adding an asterisk on the display button that is modified and not saved to indicate unsaved configuration changes.

Applying that same idea to the layout builder using the message, and adding an asterisk to the title would like this:

Adding some CSS to adjust spacing.

Adds rtl CSS for the message.

Adds the inline /* LTR */ comment for the initial CSS change. The 8px value applied for left and right margin alignment styling mimics styling that Seven theme applies to the messages class. The 30px margin bottom value is adopted from the margin bottom of .block-help.

Great improvement!

1. +++ b/core/modules/layout_builder/css/layout-builder.css
   @@ -85,3 +85,11 @@
   +[dir="rtl"] .messages {
   +  margin: 0 8px 30px 0;
   +}
   

   This will affect all messages on the page not just layout builder. Maybe add .layout-builder--changed. I think the only thing we target is the #layout-builder which I know we are not supposed to use. Could we put a class on the same element as that id?

   This will be more important after our ancestors commit #77245: Provide a common API for displaying JavaScript messages as there might other messages on other parts of the page we don't want to affect.

2. +++ b/core/modules/layout_builder/src/Controller/LayoutBuilderController.php
   @@ -90,6 +90,21 @@ public function layout(SectionStorageInterface $section_storage, $is_rebuilding
   +      $output[] = [
   +        '#type' => 'container',
   +        '#attributes' => [
   +          'class' => [
   +            'layout-builder--changed',
   +            'messages',
   +            'messages--warning',
   +          ],
   +        ],
   +        '#children' => $this->t('You have unsaved changes.'),
   +      ];
   

   Why can't we do this

   $this->messenger->addWarning('You have unsaved changes.');
   $output['status_messages'] = [
     '#type' => 'status_messages',
   ];

   This seemed to work

And we don't even need to manually add it to the markup, it will be duplicated.

If we don't add the markup you don't get the message until you reload the page or come back to it because the layout builder is loaded with an ajax replace which doesn't show messages.

If we have the mark up I don't see it duplicated. We need test for this message because right now it doesn't display after you add a block unless you reload the page.

This part of the UI always fascinates me. :D The patch looks ready to me. Screenshots can be seen in #9.

The patch does what it says on the tin. :) (Well, the yellow message anyway, which I think is sufficient... we don't "asterisk" the title of e.g. nodes or other places, so it would look out of place here.) Thanks for the screenshots and steps to reproduce in #9. SUPER helpful. Test coverage appears to be intact.

Committed and pushed to 8.7.x. Thanks!

Reverting this because unfortunately this caused random fails in Drupal\Tests\layout_builder\FunctionalJavascript\LayoutBuilderUiTest

Drupal\Tests\layout_builder\FunctionalJavascript\LayoutBuilderUiTest::testUnsavedChangesMessage
WebDriver\Exception\UnknownError: unknown error: Element ... is not clickable at point (60, 571). Other element would receive the click: ...
  (Session info: headless chrome=62.0.3202.94)
  (Driver info: chromedriver=2.33.506092 (733a02544d189eeb751fe0d7ddca79a0ee28cce4),platform=Linux 4.9.0-0.bpo.6-amd64 x86_64)

/var/www/html/vendor/instaclick/php-webdriver/lib/WebDriver/Exception.php:155
/var/www/html/vendor/instaclick/php-webdriver/lib/WebDriver/AbstractWebDriver.php:157
/var/www/html/vendor/instaclick/php-webdriver/lib/WebDriver/AbstractWebDriver.php:218
/var/www/html/vendor/instaclick/php-webdriver/lib/WebDriver/Container.php:224
/var/www/html/vendor/behat/mink-selenium2-driver/src/Selenium2Driver.php:775
/var/www/html/vendor/behat/mink-selenium2-driver/src/Selenium2Driver.php:763
/var/www/html/vendor/behat/mink/src/Element/NodeElement.php:153
/var/www/html/vendor/behat/mink/src/Element/TraversableElement.php:73
/var/www/html/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php:88

See https://www.drupal.org/pift-ci-job/1086096 and https://www.drupal.org/pift-ci-job/1086188

1. +++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php
   @@ -0,0 +1,93 @@
   +    $assert_session->assertWaitOnAjaxRequest();
   +    $assert_session->pageTextContainsOnce('You have unsaved changes.');
   +
   +    // Save the changes.
   +    $page->clickLink('Save Layout');
   

   This where it fails. We already do assertWaitOnAjaxRequest() by guess is somehow the off-canvas is still on the page and it is in the way of the "Save layout" link.

   Adding a wait for the link to be gone.

2. Also adding the no_transitions_css module to avoid these types of problem.
   but also fix that module because it was actually attaching the settings_tray_test_css/drupal.css_fix library. Just a copy and paste error.

Ok this is the same random failure problem I was running into in #2957425: Allow the inline creation of non-reusable Custom Blocks in the layout builder

I found this before it was committed and actually working on this random problem here #2977515: [ignore] Test Package manager core merge because the issue was already super long.

For some reason clicking "Save Layout" seem to have no effect.

I made a solution in \Drupal\Tests\layout_builder\FunctionalJavascript\InlineBlockTestBase::assertSaveLayout() with a @todo that we should really redo these tests in nightwatch #2984161: Convert Layout Builder Javascript tests to NightWatch

Here is that same fix.

Lets see if it works.

Ok I don't think we actually need waitForNoElement().

Also if we are going to use assertSaveLayout() here which should only have a instance of this method so making LayoutBuilderTestBase

1. +++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php
   @@ -0,0 +1,96 @@
   +use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
   

   Can remove this

2. +++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php
   @@ -0,0 +1,96 @@
   +    $this->waitForNoElement('#drupal-off-canvas');
   

   Forgot to remove this call.

   Also forgot to test locally, whoops

This look like a better solution to be. RTBC. Assuming will pass tests since x30 patch passed.

Ok, hopefully second time's a charm ;)

Committed and pushed to 8.7.x. Thanks!

Sorry; backported to 8.6.x as well.