@k-int/stripes-kint-components 3.2.1 → 4.1.0

package/CHANGELOG.md

@@ -1,9 +1,8 @@
-## 3.2.1 2022-11-10
-  * Reverted generateKiwtQueryChanges, as they are breaking changes
-
+## 4.0.0 2022-11-10
+  * generateKiwtQuery now encodes each interior query chunk using `encodeURIComponent` instead of using `encodeURI` on the entire chunk. ie `filters=(checklist.definition.name%3D%3Dtest_1%26%26checklist.outcome.value%3D%3Dyes)` (Everything after `filters=` is encoded).
 ## 3.2.0 2022-11-10
   * RichSelect now passes `disabled` prop to Dropdown, so trigger will no longer be overriden by `disabled: undefined` from `getTriggerProps`.
-  * generateKiwtQuery now encodes each interior query chunk using `encodeURIComponent` instead of using `encodeURI` on the entire chunk. ie `filters=(checklist.definition.name%3D%3Dtest_1%26%26checklist.outcome.value%3D%3Dyes)` (Everything after `filters=` is encoded).
+
 ## 3.1.0 2022-11-03
   * Added `searchFieldAria label` and `searchFieldProps` to SASQLookupComponent 
   * Removed unnecessary validate prop on CustomPropertyField, fixed broken out of range validator

package/es/lib/utils/generateKiwtQuery.js

@@ -7,10 +7,9 @@ exports.default = void 0;
 var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var generateKiwtQuery = function generateKiwtQuery(options, nsValues) {
-  var paramsArray = (0, _generateKiwtQueryParams.default)(options, nsValues);
-  return paramsArray.length ? '?' + paramsArray.map(function (p) {
-    return encodeURI(p);
-  }).join('&') : '';
+  var encode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var paramsArray = (0, _generateKiwtQueryParams.default)(options, nsValues, encode);
+  return paramsArray.length ? '?' + paramsArray.join('&') : '';
 };
 var _default = generateKiwtQuery;
 exports.default = _default;

package/es/lib/utils/generateKiwtQueryParams.js

@@ -19,6 +19,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues) {
+  var encode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var qindex = nsValues.qindex,
     query = nsValues.query,
     filters = nsValues.filters,
@@ -36,13 +37,19 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
     optionsSort = options.sort,
     optionsFilters = options.filters,
     rest = _objectWithoutProperties(options, _excluded);
+  var conditionalEncodeURIComponent = function conditionalEncodeURIComponent(str) {
+    if (encode) {
+      return encodeURIComponent(str);
+    }
+    return str;
+  };
   var paramsArray = [];
   if (query) {
     var _split;
     paramsArray.push.apply(paramsArray, _toConsumableArray((_split = (qindex || searchKey).split(',')) === null || _split === void 0 ? void 0 : _split.map(function (m) {
-      return "match=".concat(m);
+      return "match=".concat(conditionalEncodeURIComponent(m));
     })));
-    paramsArray.push("term=".concat(query));
+    paramsArray.push("term=".concat(conditionalEncodeURIComponent(query)));
   }
   if (optionsFilters) {
     optionsFilters.forEach(function (opf) {
@@ -57,14 +64,15 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
             innerFilters.push(opfv);
           }
         });
-        paramsArray.push("filters=".concat(innerFilters.join('||')));
+        paramsArray.push("filters=".concat(conditionalEncodeURIComponent(innerFilters.join('||'))));
       } else if (opf !== null && opf !== void 0 && opf.value) {
         // If no value OR values, then ignore
         if (opf.path) {
           var _opf$comparator2;
-          paramsArray.push("filters=".concat(opf.path).concat((_opf$comparator2 = opf.comparator) !== null && _opf$comparator2 !== void 0 ? _opf$comparator2 : '==').concat(opf.value));
+          var filterString = "".concat(opf.path).concat((_opf$comparator2 = opf.comparator) !== null && _opf$comparator2 !== void 0 ? _opf$comparator2 : '==').concat(opf.value);
+          paramsArray.push("filters=".concat(conditionalEncodeURIComponent(filterString)));
         } else {
-          paramsArray.push("filters=".concat(opf.value));
+          paramsArray.push("filters=".concat(conditionalEncodeURIComponent(opf.value)));
         }
       }
     });
@@ -100,28 +108,29 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
           })) === null || _filterConfigEntry$va2 === void 0 ? void 0 : _filterConfigEntry$va2.value;
           return "".concat(filterName, "==").concat(fceValue !== null && fceValue !== void 0 ? fceValue : v);
         }).join('||');
-        paramsArray.push("filters=".concat(filterString));
+        paramsArray.push("filters=".concat(conditionalEncodeURIComponent(filterString)));
       } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
         paramsArray.push.apply(paramsArray, _toConsumableArray(filterValues === null || filterValues === void 0 ? void 0 : filterValues.map(function (f) {
-          return "filters=".concat(f);
+          return "filters=".concat(conditionalEncodeURIComponent(f));
         })));
       } else {
         var _filterString = filterValues.map(function (v) {
           return "".concat(filterKey, "==").concat(v);
         }).join('||');
-        paramsArray.push("filters=".concat(_filterString));
+        paramsArray.push("filters=".concat(conditionalEncodeURIComponent(_filterString)));
       }
     });
   }
   if (optionsSort && optionsSort.length > 0) {
     optionsSort.forEach(function (os) {
       if (os.value) {
-        paramsArray.push("sort=".concat(os.value));
+        paramsArray.push("sort=".concat(conditionalEncodeURIComponent(os.value)));
       } else if (os.path) {
         var _os$direction;
         // If no path then ignore
-        paramsArray.push("sort=".concat(os.path, ";").concat((_os$direction = os.direction) !== null && _os$direction !== void 0 ? _os$direction : 'asc'));
+        var sortString = "".concat(os.path, ";").concat((_os$direction = os.direction) !== null && _os$direction !== void 0 ? _os$direction : 'asc');
+        paramsArray.push("sort=".concat(conditionalEncodeURIComponent(sortString)));
       }
     });
   }
@@ -133,7 +142,8 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
       if (term in sortKeys) {
         term = term.replace(term, sortKeys[term]);
       }
-      return "sort=".concat(term, ";").concat(descending ? 'desc' : 'asc');
+      var sortString = "".concat(term, ";").concat(descending ? 'desc' : 'asc');
+      return "sort=".concat(conditionalEncodeURIComponent(sortString));
     })));
   }
   if (stats) {
@@ -143,7 +153,7 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
     var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
       key = _Object$entries$_i[0],
       value = _Object$entries$_i[1];
-    paramsArray.push("".concat(key, "=").concat(value));
+    paramsArray.push("".concat(key, "=").concat(conditionalEncodeURIComponent(value)));
   }
   return paramsArray;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "3.2.1",
+  "version": "4.1.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/utils/README.md

@@ -31,6 +31,7 @@ Name | Type | Description | default | required
 --- | --- | --- | --- | ---
 options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
 nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+encode | boolean | A boolean prop which determines if each query param chunk will be encoded using encodeURIComponent or not | true | ✕ |
 
 ## generateKiwtQueryParams
 A util function for generating an array of "KIWT" (K-Int Web-Toolkit) style backend query parameters from a SASQ query object
@@ -68,4 +69,5 @@ import { generateKiwtQueryParams } from '@k-int/stripes-kint-components'
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
 options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to an KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
-nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+encode | boolean | A boolean prop which determines if each query param chunk will be encoded using encodeURIComponent or not | true | ✕ |

package/src/lib/utils/generateKiwtQuery.js

@@ -1,8 +1,8 @@
 import generateKiwtQueryParams from './generateKiwtQueryParams';
 
-const generateKiwtQuery = (options, nsValues) => {
-  const paramsArray = generateKiwtQueryParams(options, nsValues);
-  return paramsArray.length ? '?' + paramsArray.map(p => encodeURI(p)).join('&') : '';
+const generateKiwtQuery = (options, nsValues, encode = true) => {
+  const paramsArray = generateKiwtQueryParams(options, nsValues, encode);
+  return paramsArray.length ? '?' + paramsArray.join('&') : '';
 };
 
 export default generateKiwtQuery;

package/src/lib/utils/generateKiwtQueryParams.js

@@ -1,4 +1,4 @@
-const generateKiwtQueryParams = (options, nsValues) => {
+const generateKiwtQueryParams = (options, nsValues, encode = true) => {
   const { qindex, query, filters, sort } = nsValues;
   const {
     searchKey = '',
@@ -33,11 +33,20 @@ const generateKiwtQueryParams = (options, nsValues) => {
     ...rest
   } = options;
 
+  const conditionalEncodeURIComponent = (str) => {
+    if (encode) {
+      return encodeURIComponent(str);
+    }
+
+    return str;
+  };
+
+
   const paramsArray = [];
 
   if (query) {
-    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${m}`));
-    paramsArray.push(`term=${query}`);
+    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${conditionalEncodeURIComponent(m)}`));
+    paramsArray.push(`term=${conditionalEncodeURIComponent(query)}`);
   }
 
   if (optionsFilters) {
@@ -52,12 +61,14 @@ const generateKiwtQueryParams = (options, nsValues) => {
             innerFilters.push(opfv);
           }
         });
-        paramsArray.push(`filters=${innerFilters.join('||')}`);
+
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(innerFilters.join('||'))}`);
       } else if (opf?.value) { // If no value OR values, then ignore
         if (opf.path) {
-          paramsArray.push(`filters=${opf.path}${opf.comparator ?? '=='}${opf.value}`);
+          const filterString = `${opf.path}${opf.comparator ?? '=='}${opf.value}`;
+          paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
         } else {
-          paramsArray.push(`filters=${opf.value}`);
+          paramsArray.push(`filters=${conditionalEncodeURIComponent(opf.value)}`);
         }
       }
     });
@@ -84,13 +95,13 @@ const generateKiwtQueryParams = (options, nsValues) => {
           return `${filterName}==${fceValue ?? v}`;
         }).join('||');
 
-        paramsArray.push(`filters=${filterString}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
       } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
-        paramsArray.push(...filterValues?.map(f => `filters=${f}`));
+        paramsArray.push(...filterValues?.map(f => `filters=${conditionalEncodeURIComponent(f)}`));
       } else {
         const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${filterString}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
       }
     });
   }
@@ -98,9 +109,10 @@ const generateKiwtQueryParams = (options, nsValues) => {
   if (optionsSort && optionsSort.length > 0) {
     optionsSort.forEach(os => {
       if (os.value) {
-        paramsArray.push(`sort=${os.value}`);
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(os.value)}`);
       } else if (os.path) { // If no path then ignore
-        paramsArray.push(`sort=${os.path};${os.direction ?? 'asc'}`);
+        const sortString = `${os.path};${os.direction ?? 'asc'}`;
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(sortString)}`);
       }
     });
   }
@@ -114,7 +126,9 @@ const generateKiwtQueryParams = (options, nsValues) => {
         term = term.replace(term, sortKeys[term]);
       }
 
-      return `sort=${term};${descending ? 'desc' : 'asc'}`;
+      const sortString = `${term};${descending ? 'desc' : 'asc'}`;
+
+      return `sort=${conditionalEncodeURIComponent(sortString)}`;
     }));
   }
 
@@ -123,7 +137,7 @@ const generateKiwtQueryParams = (options, nsValues) => {
   }
 
   for (const [key, value] of Object.entries(rest)) {
-    paramsArray.push(`${key}=${value}`);
+    paramsArray.push(`${key}=${conditionalEncodeURIComponent(value)}`);
   }
 
   return paramsArray;