[NEP-12670] Convert SavedSearch into ES query (#106)

* [NEP-12670] adds new way to save search with backward compability

* [NEP-12670] converts  new saved search to JSON string because Sinatra does not support array within parameters

* [NEP-12670] updates dist and example

* [NEP-12670] updates docs/API-V1.md to add saved search changes for get and post

* [NEP-12670] updates version number & removes TODO

* [NEP-12670] updates dist and example

* [NEP-12670] Updates version to 2.0.0 because the change is breaking

Author: krazedkrish

dist/react-filterbar.js

@@ -16951,13 +16951,21 @@ var FilterBarActor = /*#__PURE__*/function () {
   }, {
     key: "loadSavedSearch",
     value: function loadSavedSearch(searchId) {
+      var _this = this;
+
       this.disableAllFilters();
       var savedSearch = this.filterBarStore.getSavedSearch(searchId);
       var filters = JSON.parse(savedSearch.configuration);
 
       if (this.verifySavedFilters(filters)) {
-        for (var filter in filters) {
-          this.enableFilter(filter, filters[filter]);
+        if (filters instanceof Array) {
+          filters.forEach(function (filter) {
+            return _this.enableFilter(filter.uid, filter.value);
+          });
+        } else {
+          for (var filter in filters) {
+            this.enableFilter(filter, filters[filter]);
+          }
         }
 
         this.applyFilters();
@@ -16968,22 +16976,24 @@ var FilterBarActor = /*#__PURE__*/function () {
   }, {
     key: "verifySavedFilters",
     value: function verifySavedFilters(filters) {
-      var filtersArr = Object.keys(filters).map(function (name) {
-        return {
-          uid: name
-        };
-      });
+      var filtersArr;
+
+      if (filters instanceof Array) {
+        filtersArr = filters;
+      } else {
+        filtersArr = Object.keys(filters).map(function (name) {
+          return {
+            uid: name
+          };
+        });
+      }
+
       return new _FilterVerificator.FilterVerificator(this.filterBarStore.getFilters(), filtersArr).verify();
     }
   }, {
     key: "saveFilters",
     value: function saveFilters(name) {
-      var savedSearchPacket = {
-        saved_search: {
-          filters: {},
-          search_title: name
-        }
-      };
+      var filters = [];
 
       var _iterator = _createForOfIteratorHelper(this.filterBarStore.enabledFilters()),
           _step;
@@ -16994,14 +17004,26 @@ var FilterBarActor = /*#__PURE__*/function () {
               filterUid = _step$value[0],
               filter = _step$value[1];
 
-          savedSearchPacket.saved_search.filters[filterUid] = filter.value;
+          filters.push({
+            uid: filterUid,
+            type: filter.type,
+            field: filter.field,
+            value: filter.value
+          });
         }
       } catch (err) {
         _iterator.e(err);
       } finally {
         _iterator.f();
       }
 
+      var savedSearchPacket = {
+        saved_search: {
+          filters: JSON.stringify(filters),
+          search_title: name
+        }
+      };
+
       if (Object.keys(savedSearchPacket.saved_search.filters).length === 0) {
         return false;
       }

dist/react-filterbar.min.js

@@ -343,7 +343,9 @@ The saved search endpoint must be able to handle three actions, GET and POST and
 
 ### GET
 
-The endpoint GET action expects to be able to receive a JSON array of the following form:
+The endpoint GET action expects to be able to receive the save search and convert to Search API. It is backward compatible to version 1 format as well as the current version 2 format. It can receive a JSON array of the following forms:
+
+##### Version 1 format
 
 ```javascript
 [
@@ -358,6 +360,27 @@ The endpoint GET action expects to be able to receive a JSON array of the follow
 ]
 ```
 
+##### Version 2 format
+
+```javascript
+[
+  {
+    name: NAME,
+    configuration: [
+      {
+        uid: "dt.filterName",
+        type: "select",
+        field: "dt.field",
+        value: "User selected value",
+      },
+      ...,
+    ],
+    url: "/saved_searches/my_id",
+  },
+  ...,
+]
+```
+
 This is an array of objects, where each object has a key:value pair for a name label, and a configuration object of key:value pairs of a filterUid and a filterValue, where filterUid and Value are of the same form as in the [Search API](#search-api), and a key:value pair for delete url.
 
 ### POST
@@ -368,17 +391,31 @@ The endpoint POST action expects to be able to post a JSON payload of the follow
   {
     "saved_search": {
       "search_title": "user entered value",
-      "filters": {
-        "dt.filterName": "filterValue",
-        ...
-      },
+      "filters": '[{"uid":"dt.filterName","type":"select","field":"dt.field","value":"User selected value"},{"uid":"dt.filterName","type":"text","field":"dt.field","value":"User entered value"}]',
     }
   }
 ```
 
-This is an object where the saved_search object has two key:value pairs.
+This is an object where the saved_search object has search_title and.
 The search_title key:value pair is the user entered title for the search.
-The filters key:value pair is an object who's key:value pairs are the enabled filters uids and values at the time of saving.
+The filters key:value pair is an stringified JSON which when jsonified returns the array in the following format:
+
+```javascript
+[
+  {
+    uid: "dt.filterName",
+    type: "select",
+    field: "dt.field",
+    value: "User selected value",
+  },
+  {
+    uid: "dt.filterName",
+    type: "text",
+    field: "dt.field",
+    value: "User entered value",
+  },
+];
+```
 
 ### DELETE
 

docs/API-V1.md

@@ -51,7 +51,7 @@ class Server < Sinatra::Base
     saved_search = params[:saved_search]
     store = YAML::Store.new 'saved_search.yml'
     store.transaction do
-      store[saved_search[:search_title]] = saved_search[:filters].to_json
+      store[saved_search[:search_title]] = saved_search[:filters]
     end
   end
 

example/public/js/react-filterbar.js

@@ -1,6 +1,6 @@
 {
   "name": "react-filterbar",
-  "version": "1.26",
+  "version": "2.0",
   "description": "",
   "main": "dist/react-filterbar.js",
   "engines": {

example/server.rb

@@ -107,8 +107,14 @@ export class FilterBarActor {
     var filters = JSON.parse(savedSearch.configuration);
 
     if (this.verifySavedFilters(filters)) {
-      for (var filter in filters) {
-        this.enableFilter(filter, filters[filter]);
+      if (filters instanceof Array) {
+        filters.forEach((filter) =>
+          this.enableFilter(filter.uid, filter.value)
+        );
+      } else {
+        for (var filter in filters) {
+          this.enableFilter(filter, filters[filter]);
+        }
       }
 
       this.applyFilters();
@@ -118,25 +124,39 @@ export class FilterBarActor {
   }
 
   verifySavedFilters(filters) {
-    var filtersArr = Object.keys(filters)
-                      .map(function(name) {
-                        return { uid: name }
-                      });
+    var filtersArr;
+
+    if (filters instanceof Array) {
+      filtersArr = filters;
+    } else {
+      filtersArr = Object.keys(filters)
+        .map(function (name) {
+          return { uid: name }
+      });
+    }
+
     return new FilterVerificator(this.filterBarStore.getFilters(), filtersArr).verify();
   }
 
   saveFilters(name) {
+    var filters = [];
+    for (var [filterUid, filter] of this.filterBarStore.enabledFilters()) {
+      filters.push({
+        uid: filterUid,
+        type: filter.type,
+        field: filter.field,
+        value: filter.value,
+      });
+    }
+
     var savedSearchPacket = {
       saved_search: {
-        filters: {},
-        search_title: name
-      }
+        filters: JSON.stringify(filters),
+        search_title: name,
+      },
     };
 
-    for (var [filterUid, filter] of this.filterBarStore.enabledFilters()) {
-      savedSearchPacket.saved_search.filters[filterUid] = filter.value;
-    }
-    if(Object.keys(savedSearchPacket.saved_search.filters).length === 0) {
+    if (Object.keys(savedSearchPacket.saved_search.filters).length === 0) {
       return false;
     }