@bigbinary/neeto-filters-frontend 3.0.0 → 3.0.2

package/README.md

@@ -52,15 +52,13 @@ Here is an example of `keyword` prop:
 
 ```js
 const [searchTerm, setSearchTerm] = useState("");
-const searchKeywordProps = {
-  key: "keyword",
+const searchTermProps = {
+  key: "search_term",
   node: "name",
-  value: searchTerm.trim(),
-  setValue: setSearchTerm,
 };
 ```
 
-This `searchKeywordProps` can be passed as the value to `keyword` prop.
+This `searchTermProps` can be passed as the value to `keyword` prop.
 
 > :memo: **Note:** If you wish to conduct a search for the keyword among
 > multiple columns spanning different tables in the DB, then you should pass the
@@ -224,7 +222,7 @@ instructions provided in the installation
 
 ```js
 const [filters, setFilters] = useState(() =>
-  buildFiltersFromURL([...SAMPLE_FILTER_COLUMNS, searchKeywordProps])
+  buildFiltersFromURL([...SAMPLE_FILTER_COLUMNS, searchTermProps])
 );
 ```
 
@@ -264,6 +262,8 @@ and selected field names.
   selected field names. Defaults to an empty array.
 - `showRuleSelector` (boolean, optional): A boolean value which specify whether
   to show the rule selector for each filter or not. It is `false` by default.
+- `groupName` (string, optional): A name to be given to the group of filters
+  built from fields.
 
 ```js
 const fields = [

package/dist/index.cjs.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var ramda = require('ramda');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var i18next = require('i18next');
 var dayjs = require('dayjs');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var yup = require('yup');
 var timezone = require('dayjs/plugin/timezone');
 var utc = require('dayjs/plugin/utc');
@@ -463,8 +463,8 @@ dayjs__default["default"].extend(timezone__default["default"]);
 dayjs__default["default"].extend(weekday__default["default"]);
 dayjs__default["default"].Ls.en.weekStart = 1;
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var groupByGroup = ramda.groupBy(function (_ref) {
   var group = _ref.group;
   return group || "individual";
@@ -628,9 +628,9 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       return ramda.mergeLeft({
         value: ""
       }, column);
-    } else if (ramda.isNil(value) || value === "") {
+    } else if (ramda.isNil(value) || value === "" || column.key === "keyword") {
       return null;
-    } else if (column.key === "keyword") {
+    } else if (column.key === "search_term") {
       return ramda.mergeLeft({
         value: value,
         type: "text",
@@ -757,7 +757,7 @@ var buildDatePayload = function buildDatePayload(value) {
 var buildSingleDatePayload = function buildSingleDatePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
+  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
     value: filterValue,
     type: "date"
   });
@@ -765,7 +765,7 @@ var buildSingleDatePayload = function buildSingleDatePayload(filter) {
 var buildSingleTimePayload = function buildSingleTimePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
+  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
     value: filterValue,
     type: "time"
   });
@@ -786,7 +786,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "keyword" && isMultiModelFilter(filter)) {
+    if (filter.key === "search_term" && isMultiModelFilter(filter)) {
       return splitFilter(filter);
     }
     var filterPayload = ramda.omit(["key", "label", "values", "setValue"], filter);
@@ -820,14 +820,14 @@ var buildSegmentsPayload = function buildSegmentsPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "keyword") {
+    if (filter.key === "search_term") {
       return false;
     }
     var filterPayload = ramda.omit(["label", "values", "setValue", "defaultValue"], filter);
     var _filterPayload$defaul2 = filterPayload.defaultType,
       defaultType = _filterPayload$defaul2 === void 0 ? filterPayload.type : _filterPayload$defaul2,
       value = filterPayload.value;
-    if (filter.key !== "keyword" && isMultiModelFilter(filterPayload)) {
+    if (filter.key !== "search_term" && isMultiModelFilter(filterPayload)) {
       throw i18next__default["default"].t("neetoFilters.errors.cannotPassMultipleModels");
     }
     if (isMulti(defaultType)) {
@@ -929,7 +929,7 @@ var createUrlParamString = function createUrlParamString(_ref15) {
     _filter$defaultType = filter.defaultType,
     defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
     rule = filter.rule;
-  if (key === "keyword") {
+  if (key === "search_term") {
     return value;
   } else if (isDigit(defaultType) || isText(defaultType)) {
     return "".concat(value, "+rule-").concat(rule);
@@ -967,7 +967,7 @@ var buildUrlFromFilters = function buildUrlFromFilters(_ref16) {
     delete searchParams["segmentId"];
   }
   var defaultFilters = buildDefaultFilters(columns, filters);
-  delete searchParams["keyword"];
+  delete searchParams["search_term"];
   ramda.concat(filters, defaultFilters).forEach(function (filter) {
     searchParams[filter.key] = createUrlParamString({
       filter: filter,
@@ -1004,9 +1004,9 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
     return !defaultValue && delete searchParams[key];
   });
   var defaultFilters = buildDefaultFilters(columns, filters);
-  delete searchParams["keyword"];
-  isNotEmpty(id) && (searchParams["segmentId"] = id);
+  delete searchParams["searchTerm"];
   ramda.concat(filters, defaultFilters).forEach(function (filter) {
+    isNotEmpty(id) && (searchParams["segmentId"] = id);
     searchParams[filter.key] = createUrlParamStringForSegments({
       filter: filter,
       columns: columns
@@ -1014,27 +1014,30 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
   });
   return new URLSearchParams(searchParams).toString();
 };
-var getKeywordValueFromUrl = function getKeywordValueFromUrl() {
-  return utils.getQueryParams()["keyword"] || "";
+var getSearchTermFromUrl = function getSearchTermFromUrl() {
+  return utils.getQueryParams()["search_term"] || "";
 };
 var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21) {
   var fields = _ref21.fields,
     _ref21$selectedFields = _ref21.selectedFields,
     selectedFields = _ref21$selectedFields === void 0 ? [] : _ref21$selectedFields,
     _ref21$showRuleSelect = _ref21.showRuleSelector,
-    showRuleSelector = _ref21$showRuleSelect === void 0 ? false : _ref21$showRuleSelect;
+    showRuleSelector = _ref21$showRuleSelect === void 0 ? false : _ref21$showRuleSelect,
+    groupName = _ref21.groupName;
   return fields.reduce(function (columns, field) {
     if (ramda.isEmpty(selectedFields) || selectedFields.includes(field.name)) {
       var id = field.id,
         name = field.name,
         kind = field.kind;
-      var column = {
+      var column = _objectSpread$4({
         key: ramda.toLower(name),
         node: "".concat(name, ":").concat(id),
         label: capitalize(name),
         type: "custom.".concat(kind),
         showRuleSelector: showRuleSelector
-      };
+      }, groupName && {
+        group: groupName
+      });
       if (kind === "single_option" || kind === "multi_option") {
         column.values = field.data.map(function (item) {
           return {
@@ -1050,7 +1053,7 @@ var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21)
 };
 var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(columns) {
   return columns.map(function (column) {
-    return _objectSpread$5(_objectSpread$5({}, column), {}, {
+    return _objectSpread$4(_objectSpread$4({}, column), {}, {
       type: standardizeColumnType(column.type)
     });
   });
@@ -1127,7 +1130,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
   return "";
 };
 var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
-  return filters.length === 1 && filters[0].key === "keyword";
+  return filters.length === 1 && filters[0].key === "search_term";
 };
 
 var Block = function Block(_ref) {
@@ -1271,8 +1274,8 @@ var QUERY_KEYS = {
 };
 var SEGMENTS_STALE_TIME = 900000; // 15 mins
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SEGMENTS_LIST = QUERY_KEYS.SEGMENTS_LIST;
 var useFetchSegments = function useFetchSegments(_ref) {
   var entity = _ref.entity,
@@ -1299,17 +1302,17 @@ var useShowSegment = function useShowSegment(id) {
   }, options));
 };
 var useCreateSegment = function useCreateSegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.create, _objectSpread$4({
+  return reactUtils.useMutationWithInvalidation(segmentsApi.create, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
 var useUpdateSegment = function useUpdateSegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.update, _objectSpread$4({
+  return reactUtils.useMutationWithInvalidation(segmentsApi.update, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
 var useDestroySegment = function useDestroySegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$4({
+  return reactUtils.useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$3({
     keysToInvalidate: [SEGMENTS_LIST]
   }, options));
 };
@@ -1459,8 +1462,8 @@ var Segment = function Segment(_ref) {
   }));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Bar = function Bar(_ref) {
   var entity = _ref.entity,
     className = _ref.className,
@@ -1479,14 +1482,17 @@ var Bar = function Bar(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var initialRenderRef = React.useRef(true);
-  var searchParams = new URLSearchParams(window.location.search);
-  var keywordFilter = _objectSpread$3({
-    key: "keyword",
+  var searchParams = reactUtils.useQueryParams();
+  var keywordValue = searchParams.search_term || "";
+  var keywordFilter = _objectSpread$2(_objectSpread$2({
     type: "text",
     rule: "contains",
-    label: t("neetoFilters.labels.keyword")
-  }, keyword);
-  var filters = buildFiltersFromSearchParams(keyword.value !== "" ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: "search_term",
+    value: keywordValue
+  });
+  var filters = buildFiltersFromSearchParams(isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
   var nonHiddenFilters = removeBy({
     hidden: true
   }, filters);
@@ -1502,11 +1508,11 @@ var Bar = function Bar(_ref) {
     return function () {
       return clearTimeout(handler);
     };
-  }, [keyword.value]);
+  }, [keywordValue]);
   var handleSubmit = function handleSubmit(newFilters, isClearAll) {
-    var params = buildUrlFromFilters(_objectSpread$3({
+    var params = buildUrlFromFilters(_objectSpread$2({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
     }, isClearAll && {
       isClearAll: true,
       childrenKeys: childrenKeys
@@ -1516,15 +1522,16 @@ var Bar = function Bar(_ref) {
     });
   };
   var handleDelete = function handleDelete(key) {
-    if (key === "keyword") {
-      keyword.setValue("");
-      keyword.value = "";
+    if (key === "search_term") {
+      var params = ramda.omit(["search_term"], utils.getQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils.buildUrl(pathname, params));
+      return;
     }
     if (childrenKeys.includes(key)) {
-      searchParams["delete"](key);
-      history.push({
-        search: searchParams.toString()
-      });
+      var _params = ramda.omit([key], utils.getQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils.buildUrl(_pathname, _params));
     }
     var newFilters = removeBy({
       key: key
@@ -1532,12 +1539,13 @@ var Bar = function Bar(_ref) {
     handleSubmit(newFilters);
   };
   var handleClearAll = function handleClearAll() {
-    keyword.setValue("");
-    keyword.value = "";
+    var params = ramda.omit(["search_term"], utils.getQueryParams());
+    var pathname = window.location.pathname;
+    history.push(utils.buildUrl(pathname, params));
     handleSubmit([], true);
   };
   var childrenFiltersApplied = childrenKeys.some(function (key) {
-    return searchParams.get(key);
+    return searchParams.has(key);
   });
   var hideClearButton = nonHiddenFilters.every(function (_ref2) {
     var defaultValue = _ref2.defaultValue,
@@ -1559,7 +1567,7 @@ var Bar = function Bar(_ref) {
       className: "neeto-filters-bar--separator"
     }));
   }), childrenKeys.filter(function (childKey) {
-    return searchParams.get(childKey);
+    return ramda.has(childKey, searchParams);
   }).map(function (childKey) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: childKey
@@ -4051,12 +4059,10 @@ Slider.Header = Header;
 Slider.Body = Body;
 Slider.Footer = Footer;
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFilters = function useFilters(_ref) {
   var onFiltersChange = _ref.onFiltersChange,
     columns = _ref.columns,
-    keyword = _ref.keyword,
+    keywordFilter = _ref.keywordFilter,
     onSelectorsChange = _ref.onSelectorsChange;
   var _useTransition = React.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2);
@@ -4068,16 +4074,10 @@ var useFilters = function useFilters(_ref) {
   var filters = buildFiltersFromSearchParams(columns, false);
   var history = reactRouterDom.useHistory();
   var defaultValuesOfColumns = JSON.stringify(ramda.pluck("defaultValue", columns));
-  var keywordFilter = _objectSpread$2({
-    key: "keyword",
-    type: "text",
-    rule: "contains",
-    label: "Keyword"
-  }, keyword);
   var handlePrecenseOfDefaultFilters = function handlePrecenseOfDefaultFilters(defaultFilters) {
     var params = buildUrlFromFilters({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
     });
     history.replace({
       search: params
@@ -4097,7 +4097,7 @@ var useFilters = function useFilters(_ref) {
       return;
     }
     var newFilters = buildFiltersFromSearchParams(columns);
-    var filtersPayload = keyword.value ? ramda.append(keywordFilter, newFilters) : newFilters;
+    var filtersPayload = isNotEmpty(getSearchTermFromUrl()) ? ramda.append(keywordFilter, newFilters) : newFilters;
     handleFiltersChange(filtersPayload);
     onSelectorsChange(buildSelectorsFromURL(columns));
   };
@@ -4115,14 +4115,12 @@ var useFilters = function useFilters(_ref) {
         })
       });
       filters = buildFiltersFromSearchParams(columns, false);
-      ramda.isNil(searchParams["keyword"]) && keyword.setValue("");
     }
   };
   React.useEffect(function () {
     if (initialRender.current) {
       initialRender.current = false;
-      var keywordValue = getKeywordValueFromUrl();
-      keyword.setValue(keywordValue);
+      var keywordValue = getSearchTermFromUrl();
       var defaultFilters = buildDefaultFilters(columns, filters);
       isNotEmpty(defaultFilters) && handlePrecenseOfDefaultFilters(defaultFilters);
       prevFilters.current = ramda.append(ramda.mergeRight(keywordFilter, {
@@ -4834,7 +4832,7 @@ var Pane = function Pane(_ref) {
     childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
     children = _ref.children,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var searchParams = utils.getQueryParams();
+  var searchParams = reactUtils.useQueryParams();
   var _useState = React.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -4857,7 +4855,7 @@ var Pane = function Pane(_ref) {
     var isClearAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var params = buildUrlFromFilters(_objectSpread$1({
       columns: columns,
-      filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+      filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
     }, isClearAll && {
       isClearAll: true,
       childrenKeys: childrenKeys
@@ -4866,21 +4864,24 @@ var Pane = function Pane(_ref) {
       search: params
     });
   };
+  var keywordFilter = _objectSpread$1(_objectSpread$1({
+    type: "text",
+    rule: "contains",
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: "search_term",
+    value: searchParams.search_term || ""
+  });
   var filters = useFilters({
     onFiltersChange: onChange,
     columns: columns,
-    keyword: keyword,
+    keywordFilter: keywordFilter,
     onSelectorsChange: onSelectorsChange
   });
-  var keywordFilter = _objectSpread$1({
-    key: "keyword",
-    type: "text",
-    rule: "contains",
-    label: t("neetoFilters.labels.keyword")
-  }, keyword);
   var handleClearAll = function handleClearAll() {
-    keyword.setValue("");
-    keyword.value = "";
+    var params = ramda.omit(["search_term"], utils.getQueryParams());
+    var pathname = window.location.pathname;
+    history.push(utils.buildUrl(pathname, params));
     handleChange([], true);
   };
   var handleClose = function handleClose() {