STSMACOM-697: Add a new 'browsePoint' parameter that will store the '…

…browse' offset when clicking on the '<Previous' link or the 'Next>' link. (#1276)

* STSMACOM-697: Add the ability to add a new parameter to the URL and synchronize it with the value of the search field.

* merge master

* update CHANGELOG

* change userQuery approach to browsePoint

* add a description of the new prop 'extraParamsToReset' to the readme file

* update CHANGELOG

* rename fetchByQeury method to fetchByBrowsePoint

* update CHANGELOG

lib/SearchAndSort/ConnectedSource/StripesConnectedSource.js

@@ -75,9 +75,9 @@ export default class StripesConnectedSource {
     // ... and stripes-connect notices this change and does the rest by magic
   }
 
-  fetchByQuery(query) {
+  fetchByBrowsePoint(browsePoint) {
     this.mutator.resultOffset.replace(0);
-    this.mutator.query.replace({ query });
+    this.mutator.query.replace({ browsePoint });
   }
 
   // fetch by offset which is passed in as index.

lib/SearchAndSort/SearchAndSort.js

@@ -97,6 +97,7 @@ class SearchAndSort extends React.Component {
     disableFilters: PropTypes.object,
     disableRecordCreation: PropTypes.bool,
     editRecordComponent: PropTypes.func,
+    extraParamsToReset: PropTypes.object,
     filterChangeCallback: PropTypes.func,
     filterConfig: PropTypes.arrayOf(
       PropTypes.shape({
@@ -190,6 +191,7 @@ class SearchAndSort extends React.Component {
           PropTypes.string,
           PropTypes.bool,
         ]),
+        browsePoint: PropTypes.string,
       }),
       records: PropTypes.shape({
         hasLoaded: PropTypes.bool.isRequired,
@@ -242,7 +244,6 @@ class SearchAndSort extends React.Component {
     viewRecordPathById: PropTypes.func,
     viewRecordPerms: PropTypes.string.isRequired,
     visibleColumns: PropTypes.arrayOf(PropTypes.string),
-    regExpForQuery: PropTypes.instanceOf(RegExp),
   };
 
   static defaultProps = {
@@ -253,6 +254,7 @@ class SearchAndSort extends React.Component {
     maxSortKeys: 2,
     onComponentWillUnmount: noop,
     onResetAll: noop,
+    extraParamsToReset: {},
     filterChangeCallback: noop,
     getHelperComponent: noop,
     massageNewRecord: noop,
@@ -261,7 +263,6 @@ class SearchAndSort extends React.Component {
     selectedIndex: '',
     syncQueryWithUrl: false,
     hasNewButton: true,
-    regExpForQuery: null,
     isCountHidden: false,
     resultRowIsSelected: ({ item, criteria }) => {
       if (criteria) {
@@ -321,7 +322,6 @@ class SearchAndSort extends React.Component {
         search: currentSearch,
       },
       syncQueryWithUrl,
-      regExpForQuery
     } = this.props;
     const oldState = makeConnectedSource(this.props, logger);
     const newState = makeConnectedSource(nextProps, logger);
@@ -376,7 +376,7 @@ class SearchAndSort extends React.Component {
     }
 
     if (syncQueryWithUrl && oldQuery !== newQuery) {
-      this.setState({ locallyChangedSearchTerm:  newQuery?.replace(regExpForQuery, '') });
+      this.setState({ locallyChangedSearchTerm: newQuery });
     }
   }
 
@@ -507,6 +507,7 @@ class SearchAndSort extends React.Component {
     const {
       onSubmitSearch,
       validateSearchOnSubmit,
+      extraParamsToReset,
     } = this.props;
     const {
       locallyChangedSearchTerm,
@@ -525,6 +526,7 @@ class SearchAndSort extends React.Component {
     this.performSearch({
       query: locallyChangedSearchTerm,
       qindex,
+      ...extraParamsToReset,
     });
   };
 
@@ -560,6 +562,9 @@ class SearchAndSort extends React.Component {
   }
 
   onClearSearchAndFilters = () => {
+    const {
+      extraParamsToReset,
+    } = this.props;
     this.log('action', 'cleared search and filters');
 
     this.resetLocallyChangedQuery();
@@ -568,16 +573,20 @@ class SearchAndSort extends React.Component {
       sort: this.initialSort || '',
       query: '',
       qindex: '',
+      ...extraParamsToReset,
     });
 
     this.props.filterChangeCallback({});
     this.props.onResetAll();
   };
 
   onClearSearchQuery = () => {
+    const {
+      extraParamsToReset,
+    } = this.props;
     this.log('action', 'cleared search query');
     this.setState({ locallyChangedSearchTerm: '' });
-    this.transitionToParams({ query: '' });
+    this.transitionToParams({ query: '', ...extraParamsToReset });
   };
 
   onCloseEdit = (e) => {

lib/SearchAndSort/readme.md

@@ -71,9 +71,9 @@ resultsCachedPosition | position object |  sets the `ItemToView` prop of the int
 resultsKey | string | Sets a `key` prop on the internally rendered `<MultiColumnList>`. Changing this value will re-initialize the MCL. If necessary, this can be used to refresh the component so that it resets/readjusts to updates in data. This should be used sparingly as it can cause multiple re-renders of the list.
 customPaneSubText | node | A component that will be rendered in PaneSubHeader instead of default.
 searchFieldButtonLabel | node | A component that will be rendered inside the SearchField button instead of default.
-`regExpForQuery`| string | A prop for replacing the value in SearchField from query. For example, we need to use this when we have a specific query like this `subjects > "query value"` and we want to remove everything except for query value.
 `isCountHidden` | bool | A prop that give us possibiblty to hide count of records in Pane.
 onSubmitSearch | function | An optional function to extend the form submission functionality.
+extraParamsToReset | object | An object with parameters to be removed from the URL after the search query is submitted and after the user's search query is cleared.
 
 
 See ui-users' top-level component [`<Users.js>`](https://github.com/folio-org/ui-users/blob/master/Users.js) for an example of how to use `<SearchAndSort>`.