ENH Keep State and show Search field if any keywords are presented.

client/src/legacy/GridField.js

@@ -19,9 +19,13 @@ $.entwine('ss', function($) {
         this.fixColumns();
         this.injectSearchButton(false);
       }
+
+      if (this.hasFilters()) {
+        this.injectSearchButton(true);
+      };
 
       if (this.is('.grid-field--lazy-loadable') && (
-        (this.closest('.ss-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
+        (this.closest('.ss-tabset, .cms-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
       ) {
         // If our GridField is not inside a tabset for an immidiate reload
         this.data('gridfield-lazy-load-state', 'ready');
@@ -142,6 +146,16 @@ $.entwine('ss', function($) {
       return JSON.parse(this.find(':input[name="' + this.data('name') + '[GridState]"]').val());
     },
 
+    /**
+     * @returns {Boolean}
+     */
+    hasFilters: function() {
+      if (this.getState().GridFieldFilterHeader) {
+        return true;
+      }
+      return false;
+    },
+
     needsColumnFix: function() {
       return (
         this.find('.grid-field__filter-header, .grid-field__search-holder').length &&
@@ -180,6 +194,19 @@ $.entwine('ss', function($) {
       if (hasLegacyFilterHeader) {
         this.find('.sortable-header th:last').html(content);
       }
+    },
+
+    keepStateInHistory: function() {
+      const newURLSceme = $(this).find('.gridfield-actionmenu__container').data('schema');
+      if (newURLSceme && newURLSceme.length > 0) {
+        newURLSceme.filter( e => {
+          if (e.type === 'link') {
+            const searchParam = e.url.includes('?') ? '?' + e.url.split('?')[1] : '';
+            const historyState = $.extend({}, {path: window.location.pathname + searchParam}, this.getState());
+            history.replaceState(historyState, '', window.location.pathname + searchParam);
+          }
+        })
+      }
     }
   });
 
@@ -370,17 +397,6 @@ $.entwine('ss', function($) {
         triggerChange = false;
       }
 
-      const successCallback = function(data, status, response) {
-        const messageText = response.getResponseHeader('X-Message-Text');
-        const messageType = response.getResponseHeader('X-Message-Type');
-        if (messageText && messageType) {
-          var formEditError = $("#Form_EditForm_error");
-          formEditError.addClass(messageType);
-          formEditError.html(messageText);
-          formEditError.show();
-        }
-      };
-
       var data = [
         {
           name: this.attr('name'),
@@ -398,10 +414,21 @@ $.entwine('ss', function($) {
         });
       }
 
-      this.getGridField().reload(
-        { data },
-        successCallback
-      );
+      const gridField =  $(this).getGridField();
+      const successCallback = function(data, status, response) {
+        gridField.keepStateInHistory();
+
+        const messageText = response.getResponseHeader('X-Message-Text');
+        const messageType = response.getResponseHeader('X-Message-Type');
+        if (messageText && messageType) {
+          var formEditError = $("#Form_EditForm_error");
+          formEditError.addClass(messageType);
+          formEditError.html(messageText);
+          formEditError.show();
+        }
+      };
+
+      gridField.reload({ data }, successCallback );
 
       e.preventDefault();
     },
@@ -646,7 +673,12 @@ $.entwine('ss', function($) {
         }
       }
 
-      this.getGridField().reload({ data: ajaxData });
+      const gridField =  $(this).getGridField();
+      const successCallback = function() {
+        gridField.keepStateInHistory();
+      };
+
+      gridField.reload({ data: ajaxData }, successCallback);
     },
 
     refresh() {
@@ -729,9 +761,13 @@ $.entwine('ss', function($) {
           });
         }
 
-        this.getGridField().reload({
-          data: ajaxData
-        });
+        const gridField =  $(this).getGridField();
+        const successCallback = function() {
+          gridField.keepStateInHistory();
+        };  
+
+        gridField.reload({ data: ajaxData }, successCallback);
+
         return false;
       }else{
         filterbtn.addClass('hover-alike');
@@ -783,7 +819,12 @@ $.entwine('ss', function($) {
 
         var gridfield = $(this).getGridField();
         gridfield.setState('GridFieldPaginator', {currentPage: newpage});
-        gridfield.reload();
+
+        const successCallback = function() {
+          gridfield.keepStateInHistory();
+        };
+
+        gridfield.reload({}, successCallback);
 
         return false;
       }

client/src/legacy/LeftAndMain.BatchActions.js

@@ -374,13 +374,39 @@ $.entwine('ss.tree', function($){
     onchange: function(e) {
       var form = $(e.target.form),
         btn = form.find(':submit'),
-        selected = $(e.target).val();
+        selected = $(e.target).val(),
+        actionUrlParts = selected.split('/'),
+        actionName = actionUrlParts[actionUrlParts.length - 1];
 
       // Refresh selected / enabled nodes
       $('#Form_BatchActionsForm').refreshSelected();
 
+      // Process action parameter fields
+      var parameterFields = $('#BatchActionParameters_' + actionName);
+      if (parameterFields.length) {
+        // Reset fields to default values before displaying them 
+        parameterFields.find(':input').each(function () {
+          var input = $(this)[0];
+          if (input.tagName === 'SELECT') {
+            input.selectedIndex = -1;
+            $(this).trigger('chosen:updated');
+          } else if (input.type === 'checkbox') {
+            input.checked = input.defaultChecked;
+          } else {
+            input.value = input.defaultValue;
+          }
+        });
+
+        // Hide / display action parameter fields
+        parameterFields.siblings().hide();
+        parameterFields.show();
+        $('#BatchActionParameters').slideDown();
+      } else {
+        $('#BatchActionParameters').slideUp();
+      }
+
       // TODO Should work by triggering change() along, but doesn't - entwine event bubbling?
-      this.trigger("chosen:updated");
+      this.trigger('chosen:updated');
 
       this._super(e);
     }

client/src/legacy/TabSet.js

@@ -18,6 +18,56 @@ $.entwine('ss', function($){
       this._super();
     },
 
+    onadd: function () {
+        this.on(
+            'tabsactivate',
+            function (event, { newPanel }) {
+                this.lazyLoadGridFields(newPanel);
+                this.triggerLazyLoad(newPanel);
+            }.bind(this)
+        );
+        this.on(
+            'tabscreate',
+            function (event, { panel }) {
+                this.lazyLoadGridFields(panel);
+                this.triggerLazyLoad(panel);
+            }.bind(this)
+        );
+        this._super();
+    },
+
+    /**
+     * @func triggerLazyLoad
+     * @desc Find all the lazy loadable fields in the panel and trigger their reload.
+     * @param {Object} panel
+     * @param {string} selector
+     */
+    triggerLazyLoad: function (panel, selector = '.lazy-loadable') {
+        panel.find(selector).each((idx, el) => {
+            var $el = $(el);
+            var lazyEvent = el.dataset.lazyEvent || 'lazyload';
+            if ($el.closest('.ss-tabset, .cms-tabset').is(this)) {
+                // This should be listened only once
+                el.dispatchEvent(new Event(lazyEvent));
+            }
+        });
+    },
+
+    /**
+     * @func lazyLoadGridFields
+     * @desc Find all the lazy loadable gridfield in the panel and trigger their reload.
+     * @param {Object} panel
+     */
+     lazyLoadGridFields: function(panel) {
+      panel.find('.grid-field--lazy-loadable').each((i, el) => {
+        const gridfield = $(el);
+        // Avoid triggering all gridfields when using nested tabs
+        if (gridfield.closest('.ss-tabset, .cms-tabset').is(this)) {
+          $(el).lazyload();
+        }
+      });
+    },
+
     /**
      * @func openTabFromURL
      * @param {string} hash
@@ -44,24 +94,17 @@ $.entwine('ss', function($){
       $(() => {
         $trigger.click();
       });
-    },
+    }
 
   }),
 
-    /**
+  /**
    * Lightweight wrapper around jQuery UI tabs for generic tab set-up
    */
   $('.ss-tabset').entwine({
     IgnoreTabState: false,
 
     onadd: function() {
-      this.on("tabsactivate", (function (event, {newPanel}) {
-        this.lazyLoadGridFields(newPanel);
-      }).bind(this));
-      this.on("tabscreate", (function(event, {panel}) {
-        this.lazyLoadGridFields(panel);
-      }).bind(this));
-
       // Can't name redraw() as it clashes with other CMS entwine classes
       this.redrawTabs();
       this._super();
@@ -95,21 +138,6 @@ $.entwine('ss', function($){
         if(!matches) return;
         $(this).attr('href', document.location.href.replace(/#.*/, '') + matches[0]);
       });
-    },
-
-    /**
-     * @func lazyLoadGridFields
-     * @desc Find all the lazy loadable gridfield in the panel and trigger their reload.
-     * @param {Object} panel
-     */
-    lazyLoadGridFields: function(panel) {
-      panel.find('.grid-field--lazy-loadable').each((i, el) => {
-        const gridfield = $(el);
-        // Avoid triggering all gridfields when using nested tabs
-        if (gridfield.closest('.ss-tabset, .cms-tabset').is(this)) {
-          $(el).lazyload();
-        }
-      });
     }
 
   });

client/src/styles/legacy/_style.scss

@@ -1318,6 +1318,25 @@ html, body {
     border-bottom-left-radius: 0;
     width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border
   }
+
+  // Action parameter fields
+  .action-parameters {
+    .form__field-description {
+      margin-bottom: 0;
+    }
+
+    .field {
+      height: auto;
+    }
+
+    .field:last-child {
+      margin-bottom: 0;
+    }
+
+    .form__field-holder--no-label {
+      padding-right: 0;
+    }
+  }
 }
 
 /** --------------------------------------------

tests/behat/features/gridfield-search.feature

@@ -4,9 +4,12 @@ Feature: Search in GridField
   So that I see proper result and don't see warning
 
   Background:
-    Given the "Company" "Walmart"
-    And the "Company" "ExxonMobil"
-    And the "Company" "Test"
+    Given the "Company" "Walmart" with "Category"="Retail"
+    And the "Employee" "Alen" with "Company"="1"
+    And the "Employee" "Bill" with "Company"="1"
+    And the "Employee" "Ford" with "Company"="1"
+    And the "Company" "ExxonMobil" with "Category"="Oil"
+    And the "Company" "Test" with "Category"="Other" 
     And I am logged in with "ADMIN" permissions
     And I go to "/admin/test"
 
@@ -22,3 +25,33 @@ Feature: Search in GridField
     And I click "Walmart" in the "#Form_EditForm" element
     Then I should see "Walmart"
     And I should see "Walmart" in the ".breadcrumbs-wrapper" element
+
+@run
+  Scenario: I can navigate back and forward through the GridField
+    When I press the "Open search and filter" button
+      And I press the "Advanced" button
+      And I fill in "Search__Category" with "Retail"
+      And I press the "Enter" key in the "Search__Category" field
+    Then I should see "Walmart" in the "#Form_EditForm" element
+      But I should not see "ExxonMobil" in the "#Form_EditForm" element
+      And I should not see "Test" in the "#Form_EditForm" element
+      And I click "Walmart" in the "#Form_EditForm" element
+    Then I should see "Walmart"
+    Then I click "Employees" in the ".ui-tabs-nav" element
+      And I press the "Open search and filter" button
+      And I press the "Advanced" button
+      And I fill in "Search__Name" with "Alen"
+      And I press the "Enter" key in the "Search__Category" field
+    Then I should see "Alen" in the "#Form_ItemEditForm_Employees" element
+      And I click "Alen" in the "#Form_ItemEditForm_Employees" element
+      And I click "Walmart" in the ".breadcrumbs-wrapper" element
+      And I click "Employees" in the ".ui-tabs-nav" element
+    Then I should see "Alen" in the "#Form_ItemEditForm_Employees" element
+      But I should not see "Bill" in the ".col-Name" element
+      And I should not see "Ford" in the ".col-Name" element
+      And I should see an "#EmployeesSearch_searchbox[value='Alen']" element
+    Then I click "Companies" in the ".breadcrumbs-wrapper" element
+      And I should see "Walmart" in the "#Form_EditForm" element
+      But I should not see "ExxonMobil" in the "#Form_EditForm" element
+      And I should not see "Test" in the "#Form_EditForm" element
+      And I should see an "#SilverStripe-FrameworkTest-Model-CompanySearch_searchbox" element