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

[sabina-talipova]

Description

• Add a check for the presence of a filter in the state that is stored in the URL. If exist, keep Search field open.
• Keep state in URL when new filter was applied or GridField was sorted

Parent issue

• GridField. Create Unique URLs for Gridfield state. #1314

[sabina-talipova]

Open instead of #1322

[GuySartorelli]

This PR should target the 1 branch - it doesn't make any sense to release this separately from silverstripe/silverstripe-framework#10331

The UX advice we received indicated the following behaviour for the history state:

• If you navigate to a ModelAdmin or page that has a gridfield and then immediately click 'back' in your browser, you should go back to the previous page you were on.
• If you navigate to a ModelAdmin or page that has a gridfield and then change the state of that gridfield (either one time or many times e.g. sort, filter, paginate a couple of times), when you click 'back' in your browser you should go back to the initial default state of the gridfield. Pressing 'back' again will then take you back to the page you were previously on.

The first of those is met, but the second is not.

[GuySartorelli]

Please also add behat tests for navigating back/forward in the browser.
This can be done with When I move backward one page and When I move forward one page

Also, have you addressed my earlier comment about the UX advice not being implemented correctly?

[sabina-talipova]

#1326 (review)
Could I clarify behavior for "Forward" button in browser? What is your expectations?

[GuySartorelli]

Could I clarify behavior for "Forward" button in browser? What is your expectations?

If you click the "back" button in the browser, and then click the "forward" button in the browser, you should be looking at the exact same page with the same state as you had before you clicked "back".

[sabina-talipova]

If you click the "back" button in the browser, and then click the "forward" button in the browser, you should be looking at the exact same page with the same state as you had before you clicked "back".Z

Sorry, Guy, but I completely disagree with this approach.
We don't have any navigation tools for GridField list of items.
Just imagine, user sorted and filtered list and now he is on some page of results. Then he accidentally or somehow clicked "Back" button and lost his results. Then he decided to use "Forward" button to come back to his previous state, but he stay on the same page.
If you test Google, how it works. It keeps each step in the history to provide users with ability to navigate back and forward.
Probably, better solution to provide "Clear" button for sorting and filtering.

[GuySartorelli]

Just putting this here for the sake of anyone coming across this PR in the future:
We had a follow-up UX session and the following advice came out of it (note that "page" here should not be interpreted to mean pagination):

• Clicking back in the browser should take you to the previous page you were on
• Clicking forward in the browser should take you forward one page

i.e:

1. I am at /admin/pages
2. I navigated to some model admin which has a gridfield
3. I paginate through, sort, or filter the gridfield
4. I click back - this takes me back to /admin/pages
5. I click forward - this takes me to the model admin gridfield with whatever sort/pagination/filtering I had applied before step 4.

[GuySartorelli]

One very minor change to make.

[GuySartorelli]

Suggested change

	const historyState = $.extend({}, { page: window.location.pathname + searchParam }, this.getState());
	history.replaceState(historyState, '', window.location.pathname + searchParam);
	window.ss.router.replace(window.location.pathname + searchParam, undefined, undefined, false);

Turns out we have to use the special custom page router that Silverstripe admin uses... see https://github.com/visionmedia/page.js/blob/master/page.js#L678 for what this is actually doing.

[GuySartorelli]

This is what's causing the behat failures.

Suggested change

	$(window).on('popstate', function (e) {
	if (e.originalEvent.state === null) { return; }
	location.reload();
	});