Merge branch '4' into 5.0

client/src/legacy/ElementEditor/entwine.js

@@ -64,20 +64,33 @@ jQuery.entwine('ss', ($) => {
     },
 
     onunmatch() {
-      resetStores();
+      // Reset the store if the user navigates to a different part of the CMS
+      // or after submission if there are no validation errors
+      if (!$('.cms-edit-form').data('hasValidationErrors')) {
+        resetStores();
+      }
       const root = this.getReactRoot();
       if (root) {
         root.unmount();
         this.setReactRoot(null);
       }
     },
 
-    /**
-     * Invalidate cache after the form is submitted to force apollo to re-fetch.
-     */
     'from .cms-edit-form': {
-      onaftersubmitform() {
-        resetStores();
+      onaftersubmitform(event, data) {
+        const validationResultPjax = JSON.parse(data.xhr.responseText).ValidationResult;
+        const validationResult = JSON.parse(validationResultPjax.replace(/<\/?script[^>]*?>/g, ''));
+
+        // Reset redux store if form is succesfully submitted so apollo to refetches element data
+        // Do not reset if there are any validation errors because we want redux to hydrate the
+        // form, rather than then refetching which will return a value from the database.
+        // Instead the user should still see any modfied value they just entered.
+        if (validationResult.isValid) {
+          $('.cms-edit-form').data('hasValidationErrors', false);
+          resetStores();
+        } else {
+          $('.cms-edit-form').data('hasValidationErrors', true);
+        }
       }
     },
   });

composer.json

@@ -21,7 +21,7 @@
         "php": "^8.1",
         "silverstripe/framework": "^5",
         "silverstripe/cms": "^5",
-        "silverstripe/admin": "^2",
+        "silverstripe/admin": "^2.0.1",
         "silverstripe/versioned": "^2",
         "silverstripe/versioned-admin": "^2",
         "silverstripe/graphql": "^5",

tests/Behat/Context/FeatureContext.php

@@ -240,19 +240,27 @@ public function stepIFillInForForBlock($value, $name, $blockNumber)
     public function theFieldForBlockShouldContain($field, $blockNumber, $negate, $content)
     {
         $block = $this->getSpecificBlock($blockNumber);
-        $field = $this->findFieldInBlock($block, $field);
-        $isTinyMCE = $field->getAttribute('data-editor') === 'tinyMCE';
+        $fieldElem = $this->findFieldInBlock($block, $field);
+        $isTinyMCE = $fieldElem->getAttribute('data-editor') === 'tinyMCE';
 
         if ($isTinyMCE) {
             $this->cmsContext->theHtmlFieldShouldContain(
-                $field->getAttribute('name'),
+                $fieldElem->getAttribute('name'),
                 $negate,
                 $content
             );
-        } elseif ($negate) {
-            $this->assertFieldNotContains($field, $content);
+            return;
+        }
+
+        $actual = (string) $fieldElem->getValue();
+        $regex = '/^' . preg_quote($content, '/') . '$/ui';
+
+        if ($negate) {
+            $message = sprintf('The field "%s" value is "%s", but "%s" expected.', $field, $actual, $content);
+            Assert::isTrue((bool) preg_match($regex, $actual), $message);
         } else {
-            $this->assertFieldContains($field, $content);
+            $message = sprintf('The field "%s" value is "%s", but it should not be.', $field, $actual);
+            Assert::isFalse((bool) preg_match($regex, $actual), $message);
         }
     }
 

tests/Behat/features/edit-block-element.feature

@@ -69,8 +69,12 @@ Feature: Edit elements in the CMS
     When I press the "Save" button in the actions menu for block 2
       And I wait 1 second
       Then I should see a "Saved 'Charlie's Block' successfully" success toast
+      And the "Content" field for block 2 should contain "New sample content"
+      And the "Title" field for block 2 should contain "Charlie's Block"
+    # The block is still expanded. Here we collapse it to see the summary.
     When I click on the caret button for block 2
       Then I should see "New sample content"
+      And I should see "Charlie's Block"
 
   @unsavedChanges
   Scenario: I can edit inline-editable blocks and save the page as a whole
@@ -90,5 +94,6 @@ Feature: Edit elements in the CMS
     When I wait 1 second
       And I click on block 2
       Then the "Content" field for block 2 should contain "<p>Alternate HTML within element 2</p>"
+      And the "Title" field for block 2 should contain "Alice's Much Improved Block"
 
 

tests/Behat/features/validation-failure.feature

@@ -0,0 +1,52 @@
+@javascript
+Feature: Don't lose content when page or block is invalid
+  As a CMS user
+  I want to retain my unsaved content when a validation error occurs
+  So that I can fix the content and save it without recreating content
+
+  Background:
+    Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class
+      And a "page" "Blocks Page" with a "Alice's Block" content element with "original content" content
+      And the "group" "EDITOR" has permissions "Access to 'Pages' section"
+      And I am logged in as a member of "EDITOR" group
+
+  # The "unsaved changes" dialog causes errors unless this is tagged with "@unsavedChanges"
+  @unsavedChanges
+  Scenario: If a page is invalid, changes aren't lost
+    Given I add an extension "DNADesign\Elemental\Tests\Src\ValidationFailedExtension" to the "Page" class
+      And I go to "/admin/pages"
+      And I left click on "Blocks Page" in the tree
+    Then I should see a list of blocks
+      And I should see "Alice's Block"
+      And I should not see the ".element-editor-header__version-state--unsaved" element
+    When I click on the caret button for block 1
+      And I fill in "<p>New sample content</p>" for "Content" for block 1
+      And I fill in "Charlie's Block" for "Title" for block 1
+      And I press the "Save" button
+    Then I should see a "Validation error" error toast
+      And I should see "Page is invalid"
+      And I should see the ".element-editor-header__version-state--unsaved" element
+    When I click on the caret button for block 1
+    Then the "Content" field for block 1 should contain "New sample content"
+      And the "Title" field for block 1 should contain "Charlie's Block"
+      And I should see the ".element-editor-header__version-state--unsaved" element
+
+  @unsavedChanges
+  Scenario: If a block is invalid, changes aren't lost
+    Given I add an extension "DNADesign\Elemental\Tests\Src\ValidationFailedExtension" to the "DNADesign\Elemental\Models\BaseElement" class
+      And I go to "/admin/pages"
+      And I left click on "Blocks Page" in the tree
+    Then I should see a list of blocks
+      And I should see "Alice's Block"
+      And I should not see the ".element-editor-header__version-state--unsaved" element
+    When I click on the caret button for block 1
+      And I fill in "<p>New sample content</p>" for "Content" for block 1
+      And I fill in "Charlie's Block" for "Title" for block 1
+      And I press the "Save" button
+    Then I should see a "Validation error" error toast
+      And I should see "ElementContent is invalid"
+      And I should see the ".element-editor-header__version-state--unsaved" element
+    When I click on the caret button for block 1
+    Then the "Content" field for block 1 should contain "New sample content"
+      And the "Title" field for block 1 should contain "Charlie's Block"
+      And I should see the ".element-editor-header__version-state--unsaved" element

tests/Src/ValidationFailedExtension.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace DNADesign\Elemental\Tests\Src;
+
+use SilverStripe\Core\ClassInfo;
+use SilverStripe\Core\Extension;
+use SilverStripe\Dev\TestOnly;
+use SilverStripe\ORM\ValidationResult;
+
+class ValidationFailedExtension extends Extension implements TestOnly
+{
+    public const INVALID_TITLE_MESSAGE = '%s is invalid';
+
+    public function validate(ValidationResult $result)
+    {
+        $result->addFieldError('Title', sprintf(static::INVALID_TITLE_MESSAGE, ClassInfo::shortName($this->owner)));
+    }
+}