ENH Add UnsavedChangesIndicator to edit form

Author: emteknetnz

client/dist/js/bundle.js

@@ -314,7 +314,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
         </Toolbar>
         <FormBuilderLoaderComponent
           fieldHolder={{ className: 'panel panel--padded panel--scrollable flexbox-area-grow form--inline' }}
-          actionHolder={{ className: 'toolbar--south' }}
+          actionHolder={{ className: 'toolbar--south btn-toolbar' }}
           onSubmit={handleCreateCampaignSubmit}
           onAction={handleFormAction}
           schemaUrl={schemaUrl}
@@ -343,7 +343,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
 
         <FormBuilderLoaderComponent
           fieldHolder={{ className: 'panel panel--padded panel--scrollable flexbox-area-grow form--inline' }}
-          actionHolder={{ className: 'toolbar--south' }}
+          actionHolder={{ className: 'toolbar--south btn-toolbar' }}
           onAction={handleFormAction}
           schemaUrl={schemaUrl}
           identifier="Campaign.EditView"

client/src/containers/CampaignAdmin/CampaignAdmin.js

@@ -378,7 +378,7 @@ const CampaignAdminList = ({
         <div className={bodyClass}>
           {body}
         </div>
-        <div className="toolbar toolbar--south">
+        <div className="toolbar toolbar--south btn-toolbar">
           {renderButtonToolbar()}
         </div>
       </div>

client/src/containers/CampaignAdmin/CampaignAdminList.js

@@ -3,6 +3,7 @@
 namespace SilverStripe\CampaignAdmin;
 
 use LogicException;
+use SilverStripe\Admin\Forms\UnsavedChangesIndicator;
 use SilverStripe\Admin\LeftAndMain;
 use SilverStripe\Admin\LeftAndMainFormRequestHandler;
 use SilverStripe\Control\Controller;
@@ -658,7 +659,8 @@ public function getCampaignEditForm($id)
                         ],
                     ]),
                 FormAction::create('cancel', _t(__CLASS__.'.CANCEL', 'Cancel'))
-                    ->setUseButtonTag(true)
+                    ->setUseButtonTag(true),
+                UnsavedChangesIndicator::create('UnsavedChangesIndicator')
             ),
             RequiredFieldsValidator::create('Name')
         );
@@ -722,7 +724,8 @@ public function getCampaignCreateForm()
                 FormAction::create('save', _t(__CLASS__.'.CREATE', 'Create'))
                     ->setIcon('plus'),
                 FormAction::create('cancel', _t(__CLASS__.'.CANCEL', 'Cancel'))
-                    ->setUseButtonTag(true)
+                    ->setUseButtonTag(true),
+                UnsavedChangesIndicator::create('UnsavedChangesIndicator')
             ),
             RequiredFieldsValidator::create('Name')
         );

src/CampaignAdmin.php

@@ -5,7 +5,10 @@ Feature: Manage campaigns
   So that I can control bulk publication of content efficiently
 
   Background:
+  
     Given a "ChangeSet" "Test Campaign" with "Description"="this is a test"
+      # Config will put ~2 second delay until the unsaved changes notice shows
+      And I have a config file "unsaved-changes-indicator-campaign-admin.yml"
       And the "group" "EDITOR" has permissions "Access to 'Pages' section" and "Access to 'Campaigns' section" and "Access to 'Files' section" and "FILE_EDIT_ALL"
       And the "group" "CAMPAIGNS_EDITOR" has permissions "Access to 'Campaigns' section"
 
@@ -14,7 +17,13 @@ Feature: Manage campaigns
       And I go to "/admin/campaigns"
     When I press the "Add new campaign" button
       Then I should see the "Form_campaignCreateForm" form
-    When I fill in "Name" with "newcampaign"
+    When I fill in "Name" with "something"
+      Then I should not see the ".unsaved-changes-indicator" element
+      When I wait for 3 seconds
+      Then I should see the ".unsaved-changes-indicator" element
+      # Not testing reverting the name to "" to see if .unsaved-changes-indicator no longer shows
+      # because `When I fill in "Name" with ""` i.e. a blank value, does not work in react context
+      # We do test the 'no longer shows' functionality below in "I can edit campaign"
       And I fill in "Description" with "awesome campaign"
       And I press the "Create" button
     Then the "p.alert" element should contain "Nice one! You have successfully created a campaign."
@@ -30,6 +39,12 @@ Feature: Manage campaigns
       And the "State" field should contain "open"
       And I should see a "button[name=action_save] .font-icon-tick" element
     When I fill in "Name" with "changed"
+      Then I should not see the ".unsaved-changes-indicator" element
+      When I wait for 3 seconds
+      Then I should see the ".unsaved-changes-indicator" element
+      When I fill in "Name" with "Test Campaign"
+      Then I should not see the ".unsaved-changes-indicator" element
+      And I fill in "Name" with "changed"
     Then I should see a "button[name=action_save] .font-icon-save" element
     When I fill in "Name" with "Test Campaign"
     Then I should see a "button[name=action_save] .font-icon-tick" element

tests/behat/features/manage-campaigns.feature

@@ -0,0 +1,11 @@
+---
+Name: unsaved-changes-indicator-campaign-admin
+---
+SilverStripe\Admin\Forms\UnsavedChangesIndicator:
+  minutes:
+    # 0.03 is about 2 seconds
+    notice: 0.03
+    # Not testing the warning level because that is covered by
+    # silverstripe/admin UnsavedChangesIndicatorTimer-test.js and do not want to:
+    # a) slow down behat tests unnecessarily, and
+    # b) introduce potentional flakiness in behat tests due to timing issues