@civicactions/cmsds-open-data-components 0.20.0-alpha.2 → 1.1.0-alpha.1

package/lib/components/DatasetSearchFacets/index.js

@@ -7,8 +7,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelected = isSelected;
 exports["default"] = void 0;
+exports.isSelected = isSelected;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/lib/components/ResourceConditionField/ResourceConditionalField.test.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+/**
+ * @jest-environment jsdom
+ */
+describe('<ResourceConditionalField />', function () {
+  test('Placeholder', function () {
+    expect(true).toBeTruthy();
+  });
+});

package/lib/components/ResourceConditionField/index.js

@@ -9,15 +9,33 @@ exports["default"] = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _designSystem = require("@cmsgov/design-system");
 
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+
 var _close = _interopRequireDefault(require("../../assets/icons/close"));
 
+require("react-datepicker/dist/react-datepicker.css");
+
+function convertUTCToLocalDate(date) {
+  if (!date) {
+    return date;
+  }
+
+  date = new Date(date);
+  date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+  return date;
+}
+
 function buildOperatorOptions(type) {
   switch (type) {
-    case 'text':
+    case 'text': // Will change from text to string in future update
+
+    case 'string':
       return [{
         label: "Is",
         value: "="
@@ -32,8 +50,30 @@ function buildOperatorOptions(type) {
         value: "in"
       }];
 
+    case 'date':
+      return [{
+        label: "Is",
+        value: "="
+      }, {
+        label: "Is Not",
+        value: "<>"
+      }, {
+        label: "Greater Than",
+        value: ">"
+      }, {
+        label: "Less Than",
+        value: "<"
+      }];
+
     default:
-      return [];
+      // These 2 should be safe for all data types
+      return [{
+        label: "Is",
+        value: "="
+      }, {
+        label: "Is Not",
+        value: "<>"
+      }];
   }
 }
 
@@ -54,22 +94,87 @@ var ResourceConditionField = function ResourceConditionField(_ref) {
       schema = _ref.schema,
       update = _ref.update;
   var fields = schema.fields;
-  var operatorOptions = [];
-  var columnOptions = Object.keys(fields).map(function (key) {
+
+  var _React$useState = _react["default"].useState(data.value ? new Date(data.value) : new Date(Date.now())),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      startDate = _React$useState2[0],
+      setStartDate = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(Object.keys(fields).map(function (key) {
     return {
       label: fields[key].description ? fields[key].description : key,
       value: key
     };
-  });
-
-  if (data.property) {
-    operatorOptions = buildOperatorOptions(fields[data.property].type).map(function (opt) {
-      return {
-        label: opt.label,
-        value: opt.value
-      };
-    });
-  }
+  })),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      propertyOptions = _React$useState4[0],
+      setPropertyOptions = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(data.property),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      property = _React$useState6[0],
+      setProperty = _React$useState6[1];
+
+  var _React$useState7 = _react["default"].useState(data.operator),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      operator = _React$useState8[0],
+      setOperator = _React$useState8[1];
+
+  var _React$useState9 = _react["default"].useState([{
+    label: '--',
+    value: ''
+  }]),
+      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+      operatorOptions = _React$useState10[0],
+      setOperatorOptions = _React$useState10[1];
+
+  var _React$useState11 = _react["default"].useState(data.value),
+      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+      value = _React$useState12[0],
+      setValue = _React$useState12[1];
+
+  _react["default"].useEffect(function () {
+    if (property) {
+      var opOptions = buildOperatorOptions(fields[property].mysql_type ? fields[property].mysql_type : fields[property].type).map(function (opt) {
+        return {
+          label: opt.label,
+          value: opt.value
+        };
+      });
+      update(index, 'property', property);
+
+      if (!operator) {
+        setOperator(opOptions[0].value);
+      }
+
+      setOperatorOptions(opOptions);
+    } else {
+      update(index, 'property', property);
+      setOperator('');
+      setValue('');
+      setOperatorOptions([{
+        label: '--',
+        value: ''
+      }]);
+    }
+  }, [property, operator]);
+
+  _react["default"].useEffect(function () {
+    if (operator) {
+      update(index, 'operator', operator);
+    } else {
+      update(index, 'operator', '');
+    }
+  }, [operator]);
+
+  _react["default"].useEffect(function () {
+    if (value) {
+      console.log(value);
+      update(index, 'value', value);
+    } else {
+      update(index, 'value', '');
+    }
+  }, [value]);
 
   return /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-form-row"
@@ -77,38 +182,48 @@ var ResourceConditionField = function ResourceConditionField(_ref) {
     options: [{
       label: 'Select column',
       value: ''
-    }].concat((0, _toConsumableArray2["default"])(columnOptions)),
-    value: data.property,
+    }].concat((0, _toConsumableArray2["default"])(propertyOptions)),
+    value: property,
     onChange: function onChange(e) {
-      return update(index, 'property', e.target.value);
+      return setProperty(e.target.value);
     },
     label: "Filter column",
     labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
     name: "column_name_".concat(index),
     className: "ds-l-col--6"
   }), /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
-    options: [{
-      label: '--',
-      value: ''
-    }].concat((0, _toConsumableArray2["default"])(operatorOptions)),
-    value: data.operator,
-    disabled: !data.property ? true : false,
+    options: (0, _toConsumableArray2["default"])(operatorOptions),
+    value: operator,
+    disabled: !property ? true : false,
     onChange: function onChange(e) {
-      return update(index, 'operator', e.target.value);
+      return setOperator(e.target.value);
     },
     labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
     size: "small",
-    label: "Filter Operator",
+    label: "Filter operator",
     name: "filter_operator_".concat(index),
     className: "ds-l-col--3"
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-form-row"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
-    hint: data.operator.toLowerCase() === 'in' ? "Separate values with a comma." : '',
-    value: cleanText(data.value, data.operator),
-    disabled: !data.property || !data.operator ? true : false,
+  }, property && (fields[property].mysql_type === 'date' || fields[property].type === 'date') ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-clearfix ds-l-col--11"
+  }, /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
+    selected: convertUTCToLocalDate(startDate),
+    onChange: function onChange(date) {
+      console.log(date);
+      setStartDate(date);
+      setValue(date.toJSON().slice(0, 10));
+    },
+    showMonthDropdown: true,
+    showYearDropdown: true,
+    dropdownMode: "select",
+    className: "ds-c-field"
+  })) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
+    hint: operator.toLowerCase() === 'in' ? "Separate values with a comma." : '',
+    value: cleanText(value, operator),
+    disabled: !property ? true : false,
     onChange: function onChange(e) {
-      return update(index, 'value', e.target.value);
+      return setValue(e.target.value);
     },
     label: "Filter value",
     labelClassName: "ds-u-margin-top--0",
@@ -117,6 +232,7 @@ var ResourceConditionField = function ResourceConditionField(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
     className: "ds-l-col--1",
     variation: "transparent",
+    "aria-label": "Remove filter",
     onClick: function onClick(e) {
       e.preventDefault();
       remove(index);

package/lib/components/ResourceFilter/index.js

@@ -63,23 +63,41 @@ var ResourceFilter = function ResourceFilter(_ref) {
     setConditions(newConditions);
   }
 
-  function removeAll() {
-    setFormConditions([_objectSpread({}, defaultCondition)]);
-    setConditions([]);
-  }
-
   function updateByIndex(index, key, value) {
     var newConditions = (0, _toConsumableArray2["default"])(formConditions);
     newConditions[index][key] = value;
     setFormConditions(newConditions);
   }
 
+  function removeAll() {
+    setFormConditions([]);
+    setConditions([]);
+  }
+
   function submitFilters(e) {
     e.preventDefault();
 
     if (formConditions.length) {
-      var updatedConditions = formConditions.map(function (cond) {
+      var updatedConditions = formConditions.filter(function (cond) {
+        if (cond.property) {
+          return cond;
+        }
+
+        return false;
+      }).map(function (cond) {
+        if (cond.operator === '=' || cond.operator === '<>') {
+          if (Array.isArray(cond.value)) {
+            cond.value = cond.value.join();
+          }
+
+          cond.value = cond.value.replace(/(^\%+|\%+$)/mg, '');
+        }
+
         if (cond.operator.toLowerCase() === 'like') {
+          if (Array.isArray(cond.value)) {
+            cond.value = cond.value.join();
+          }
+
           var cleanedValue = cond.value.replace(/(^\%+|\%+$)/mg, '');
           cond.value = "%".concat(cleanedValue, "%");
         }
@@ -92,10 +110,8 @@ var ResourceFilter = function ResourceFilter(_ref) {
 
         if (Array.isArray(cond.value)) {
           cond.value = cond.value.map(function (v) {
-            return v.trim();
+            return v.trim().replace(/(^\%+|\%+$)/mg, '');
           });
-        } else {
-          cond.value = cond.value.trim();
         }
 
         return cond;
@@ -105,7 +121,7 @@ var ResourceFilter = function ResourceFilter(_ref) {
   }
 
   return /*#__PURE__*/_react["default"].createElement(_designSystem.HelpDrawer, {
-    footerTitle: "Update Actions",
+    footerTitle: "Update actions",
     footerBody: /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
       className: "ds-u-margin-right--1",
       onClick: function onClick(e) {

package/lib/components/ResourceFilter/resourcefilter.test.js

@@ -0,0 +1,440 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+/**
+ * @jest-environment jsdom
+ */
+// import { act } from 'react-dom/test-utils';
+var columns = ["column_1", "column_2", "column_3"];
+var sampleDefaultCondition = {
+  operator: '',
+  property: '',
+  value: ''
+};
+var sampleSchema = {
+  "1234-abcd": {
+    fields: {
+      column_1: {
+        description: "",
+        type: "text"
+      },
+      column_2: {
+        description: "",
+        type: "text"
+      },
+      column_3: {
+        description: "",
+        type: "text"
+      }
+    }
+  }
+};
+var sampleResource = {
+  columns: columns,
+  conditions: [],
+  properties: undefined,
+  schema: sampleSchema,
+  setConditions: function setConditions() {
+    return {};
+  }
+};
+var sampleResource2 = {
+  columns: columns,
+  conditions: [{
+    operator: 'like',
+    property: 'column_2',
+    value: 'dkan'
+  }],
+  properties: undefined,
+  schema: sampleSchema,
+  setConditions: function setConditions() {
+    return {};
+  }
+};
+
+var BasicFilter = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+  id: "1234-abcd",
+  filterOpen: true,
+  setFilterOpen: function setFilterOpen() {
+    return !filterOpen;
+  },
+  defaultCondition: sampleDefaultCondition,
+  resource: sampleResource,
+  includeSearchParams: true
+});
+
+var PreFilledFilter = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+  id: "1234-abcd",
+  filterOpen: true,
+  setFilterOpen: function setFilterOpen() {
+    return !filterOpen;
+  },
+  defaultCondition: sampleDefaultCondition,
+  resource: sampleResource2,
+  includeSearchParams: true
+});
+
+var WrapperComponent = function WrapperComponent() {
+  var _React$useState = _react["default"].useState([]),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      conditions = _React$useState2[0],
+      setConditions = _React$useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    id: "1234-abcd",
+    filterOpen: true,
+    setFilterOpen: function setFilterOpen() {
+      return !filterOpen;
+    },
+    defaultCondition: sampleDefaultCondition,
+    resource: {
+      columns: columns,
+      conditions: conditions,
+      properties: undefined,
+      schema: sampleSchema,
+      setConditions: setConditions
+    },
+    includeSearchParams: true
+  });
+};
+
+describe('Resource Filter Functions', function () {
+  test('renders with header and close button', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            (0, _react2.render)(BasicFilter);
+            expect(_react2.screen.getByRole('heading', {
+              level: 3,
+              name: "Add filters"
+            })).toBeInTheDocument();
+            expect(_react2.screen.getByRole('button', {
+              name: "Close help drawer"
+            })).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders with footer', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            (0, _react2.render)(BasicFilter);
+            expect(_react2.screen.getByRole('heading', {
+              level: 4,
+              name: "Update actions"
+            })).toBeInTheDocument();
+            expect(_react2.screen.getByRole('button', {
+              name: "Update table"
+            })).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('does not render Remove all filters button with less than 2 filters', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            (0, _react2.render)(BasicFilter);
+            expect(_react2.screen.queryByRole('button', {
+              name: "Remove all filters"
+            })).not.toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('renders an empty field on clean start', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            (0, _react2.render)(BasicFilter);
+            expect(_react2.screen.getByLabelText('Filter column')).toBeInTheDocument();
+            expect(_react2.screen.getByLabelText('Filter operator')).toBeInTheDocument();
+            expect(_react2.screen.getByLabelText('Filter value')).toBeInTheDocument();
+            expect(_react2.screen.getByDisplayValue('Select column')).toBeInTheDocument();
+            expect(_react2.screen.getByDisplayValue('--')).toBeInTheDocument();
+            expect(_react2.screen.getByRole('button', {
+              name: "Remove filter"
+            })).toBeInTheDocument();
+            expect(_react2.screen.getByRole('button', {
+              name: "+ Add another filter"
+            })).toBeInTheDocument();
+
+          case 8:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  test('test basic filter', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            (0, _react2.render)(BasicFilter);
+            expect(_react2.screen.getByDisplayValue('Select column')).toBeInTheDocument();
+            expect(_react2.screen.getByRole('option', {
+              name: 'Select column'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByRole('option', {
+              name: 'column_1'
+            }).selected).toBe(false);
+            expect(_react2.screen.getByRole('option', {
+              name: '--'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByLabelText('Filter value')).toBeDisabled();
+            _context7.next = 8;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+              return _regenerator["default"].wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      _userEvent["default"].selectOptions(_react2.screen.getByRole('combobox', {
+                        name: 'Filter column'
+                      }), ['column_1']);
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 8:
+            expect(_react2.screen.getByRole('option', {
+              name: 'Select column'
+            }).selected).toBe(false);
+            expect(_react2.screen.getByRole('option', {
+              name: 'column_1'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByRole('option', {
+              name: 'Is'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByLabelText('Filter value')).not.toBeDisabled();
+            _context7.next = 14;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+              return _regenerator["default"].wrap(function _callee6$(_context6) {
+                while (1) {
+                  switch (_context6.prev = _context6.next) {
+                    case 0:
+                      _userEvent["default"].selectOptions(_react2.screen.getByRole('combobox', {
+                        name: 'Filter column'
+                      }), ['Select column']);
+
+                    case 1:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }
+              }, _callee6);
+            })));
+
+          case 14:
+            expect(_react2.screen.getByRole('option', {
+              name: 'Select column'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByRole('option', {
+              name: 'column_1'
+            }).selected).toBe(false);
+            expect(_react2.screen.getByRole('option', {
+              name: '--'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByLabelText('Filter value')).toBeDisabled();
+
+          case 18:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  test('opens pre-filled', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            (0, _react2.render)(PreFilledFilter);
+            expect(_react2.screen.getByDisplayValue('column_2')).toBeInTheDocument();
+            expect(_react2.screen.getByRole('option', {
+              name: 'column_2'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByRole('option', {
+              name: 'Contains'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByLabelText('Filter value')).not.toBeDisabled();
+            expect(_react2.screen.getByDisplayValue('dkan')).toBeInTheDocument();
+
+          case 6:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  test('remove all works', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            (0, _react2.render)(PreFilledFilter);
+            expect(_react2.screen.getByRole('option', {
+              name: 'column_2'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByRole('option', {
+              name: 'Contains'
+            }).selected).toBe(true);
+            expect(_react2.screen.getByDisplayValue('dkan')).toBeInTheDocument();
+            expect(_react2.screen.queryAllByLabelText('Filter value').length).toBe(1);
+            expect(_react2.screen.getByRole('button', {
+              name: '+ Add another filter'
+            })).toBeInTheDocument();
+            expect(_react2.screen.queryByRole('button', {
+              name: 'Remove all filters'
+            })).not.toBeInTheDocument();
+            _context11.next = 9;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+              return _regenerator["default"].wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      _userEvent["default"].click(_react2.screen.getByRole('button', {
+                        name: '+ Add another filter'
+                      }));
+
+                    case 1:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 9:
+            expect(_react2.screen.queryAllByLabelText('Filter value').length).toBe(2);
+            expect(_react2.screen.getByRole('button', {
+              name: 'Remove all filters'
+            })).toBeInTheDocument();
+            _context11.next = 13;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+              return _regenerator["default"].wrap(function _callee10$(_context10) {
+                while (1) {
+                  switch (_context10.prev = _context10.next) {
+                    case 0:
+                      _userEvent["default"].click(_react2.screen.getByRole('button', {
+                        name: 'Remove all filters'
+                      }));
+
+                    case 1:
+                    case "end":
+                      return _context10.stop();
+                  }
+                }
+              }, _callee10);
+            })));
+
+          case 13:
+            expect(_react2.screen.queryAllByLabelText('Filter value').length).toBe(0);
+
+          case 14:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee11);
+  })));
+  test('url updates correctly', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(WrapperComponent, null));
+
+            _userEvent["default"].selectOptions(_react2.screen.getByRole('combobox', {
+              name: 'Filter column'
+            }), ['column_1']);
+
+            _context14.next = 4;
+            return _userEvent["default"].type(_react2.screen.getByLabelText('Filter value'), 'dkan', {
+              delay: 1
+            });
+
+          case 4:
+            _context14.next = 6;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+              return _regenerator["default"].wrap(function _callee12$(_context12) {
+                while (1) {
+                  switch (_context12.prev = _context12.next) {
+                    case 0:
+                    case "end":
+                      return _context12.stop();
+                  }
+                }
+              }, _callee12);
+            })));
+
+          case 6:
+            _userEvent["default"].click(_react2.screen.getByRole('button', {
+              name: 'Update table'
+            }, {}));
+
+            _context14.next = 9;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+              return _regenerator["default"].wrap(function _callee13$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+
+          case 9:
+            expect(window.location.search).toBe('?conditions[0][operator]=%3D&conditions[0][property]=column_1&conditions[0][value]=dkan');
+
+          case 10:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee14);
+  })));
+});

package/lib/components/ResourcePreview/index.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareColumns = prepareColumns;
 exports["default"] = void 0;
+exports.prepareColumns = prepareColumns;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/index.js

@@ -5,46 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "NavLink", {
-  enumerable: true,
-  get: function get() {
-    return _NavLink["default"];
-  }
-});
-Object.defineProperty(exports, "DatasetTags", {
+Object.defineProperty(exports, "APIPage", {
   enumerable: true,
   get: function get() {
-    return _DatasetTags["default"];
+    return _APIPage["default"];
   }
 });
-Object.defineProperty(exports, "DatasetDownloads", {
+Object.defineProperty(exports, "ApiDocumentation", {
   enumerable: true,
   get: function get() {
-    return _DatasetDownloads["default"];
+    return _ApiDocumentation["default"];
   }
 });
-Object.defineProperty(exports, "Pagination", {
+Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function get() {
-    return _Pagination["default"];
+    return _Breadcrumb["default"];
   }
 });
-Object.defineProperty(exports, "Hero", {
+Object.defineProperty(exports, "Dataset", {
   enumerable: true,
   get: function get() {
-    return _Hero["default"];
+    return _Dataset["default"];
   }
 });
-Object.defineProperty(exports, "NavBar", {
+Object.defineProperty(exports, "DatasetDownloads", {
   enumerable: true,
   get: function get() {
-    return _NavBar["default"];
+    return _DatasetDownloads["default"];
   }
 });
-Object.defineProperty(exports, "SearchModal", {
+Object.defineProperty(exports, "DatasetSearch", {
   enumerable: true,
   get: function get() {
-    return _SearchModal["default"];
+    return _DatasetSearch["default"];
   }
 });
 Object.defineProperty(exports, "DatasetSearchListItem", {
@@ -53,58 +47,58 @@ Object.defineProperty(exports, "DatasetSearchListItem", {
     return _DatasetSearchListItem["default"];
   }
 });
-Object.defineProperty(exports, "SubMenu", {
+Object.defineProperty(exports, "DatasetTags", {
   enumerable: true,
   get: function get() {
-    return _SubMenu["default"];
+    return _DatasetTags["default"];
   }
 });
-Object.defineProperty(exports, "ApiDocumentation", {
+Object.defineProperty(exports, "DrupalPage", {
   enumerable: true,
   get: function get() {
-    return _ApiDocumentation["default"];
+    return _DrupalPage["default"];
   }
 });
-Object.defineProperty(exports, "ResourceConditionField", {
+Object.defineProperty(exports, "FilteredResource", {
   enumerable: true,
   get: function get() {
-    return _ResourceConditionField["default"];
+    return _FilteredResource["default"];
   }
 });
-Object.defineProperty(exports, "ResourceFilter", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _ResourceFilter["default"];
+    return _Footer["default"];
   }
 });
-Object.defineProperty(exports, "ResourceHeader", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _ResourceHeader["default"];
+    return _header["default"];
   }
 });
-Object.defineProperty(exports, "ResourcePreview", {
+Object.defineProperty(exports, "Hero", {
   enumerable: true,
   get: function get() {
-    return _ResourcePreview["default"];
+    return _Hero["default"];
   }
 });
-Object.defineProperty(exports, "ResourceFooter", {
+Object.defineProperty(exports, "MobileHeader", {
   enumerable: true,
   get: function get() {
-    return _ResourceFooter["default"];
+    return _mobile_header["default"];
   }
 });
-Object.defineProperty(exports, "Breadcrumb", {
+Object.defineProperty(exports, "NavBar", {
   enumerable: true,
   get: function get() {
-    return _Breadcrumb["default"];
+    return _NavBar["default"];
   }
 });
-Object.defineProperty(exports, "TransformedDate", {
+Object.defineProperty(exports, "NavLink", {
   enumerable: true,
   get: function get() {
-    return _TransformedDate["default"];
+    return _NavLink["default"];
   }
 });
 Object.defineProperty(exports, "PageNotFound", {
@@ -113,52 +107,58 @@ Object.defineProperty(exports, "PageNotFound", {
     return _PageNotFound["default"];
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {
-    return _Footer["default"];
+    return _Pagination["default"];
   }
 });
-Object.defineProperty(exports, "Dataset", {
+Object.defineProperty(exports, "ResourceConditionField", {
   enumerable: true,
   get: function get() {
-    return _Dataset["default"];
+    return _ResourceConditionField["default"];
   }
 });
-Object.defineProperty(exports, "DatasetSearch", {
+Object.defineProperty(exports, "ResourceFilter", {
   enumerable: true,
   get: function get() {
-    return _DatasetSearch["default"];
+    return _ResourceFilter["default"];
   }
 });
-Object.defineProperty(exports, "DrupalPage", {
+Object.defineProperty(exports, "ResourceFooter", {
   enumerable: true,
   get: function get() {
-    return _DrupalPage["default"];
+    return _ResourceFooter["default"];
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "ResourceHeader", {
   enumerable: true,
   get: function get() {
-    return _header["default"];
+    return _ResourceHeader["default"];
   }
 });
-Object.defineProperty(exports, "MobileHeader", {
+Object.defineProperty(exports, "ResourcePreview", {
   enumerable: true,
   get: function get() {
-    return _mobile_header["default"];
+    return _ResourcePreview["default"];
   }
 });
-Object.defineProperty(exports, "FilteredResource", {
+Object.defineProperty(exports, "SearchModal", {
   enumerable: true,
   get: function get() {
-    return _FilteredResource["default"];
+    return _SearchModal["default"];
   }
 });
-Object.defineProperty(exports, "APIPage", {
+Object.defineProperty(exports, "SubMenu", {
   enumerable: true,
   get: function get() {
-    return _APIPage["default"];
+    return _SubMenu["default"];
+  }
+});
+Object.defineProperty(exports, "TransformedDate", {
+  enumerable: true,
+  get: function get() {
+    return _TransformedDate["default"];
   }
 });
 Object.defineProperty(exports, "useAddLoginLink", {

package/lib/templates/APIPage/index.js

@@ -18,12 +18,13 @@ var APIPage = function APIPage(_ref) {
     className: "ds-l-container"
   }, /*#__PURE__*/_react["default"].createElement(_swaggerUiReact["default"], {
     url: "".concat(process.env.REACT_APP_ROOT_URL, "?").concat(hideAuth ? 'authentication=false&' : '').concat(additionalParams && additionalParams.ACA ? 'ACA=' + additionalParams.ACA + '&redirect=false' : ''),
-    docExpansion: 'list'
+    docExpansion: 'list',
+    defaultModelsExpandDepth: -1
   }));
 };
 
 APIPage.defaultProps = {
-  hideAuth: false
+  hideAuth: true
 };
 var _default = APIPage;
 exports["default"] = _default;

package/lib/templates/Dataset/DatasetBody.js

@@ -37,6 +37,8 @@ var _ResourceFooter = _interopRequireDefault(require("../../components/ResourceF
 
 var _ResourceInformation = _interopRequireDefault(require("../../components/ResourceInformation"));
 
+var _functions = require("../FilteredResource/functions");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -44,7 +46,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DatasetBody = function DatasetBody(_ref) {
   var id = _ref.id,
       dataset = _ref.dataset,
-      additionalParams = _ref.additionalParams;
+      additionalParams = _ref.additionalParams,
+      customColumns = _ref.customColumns;
   var apiDocs = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)('ds-u-padding-y--1'),
@@ -125,7 +128,8 @@ var DatasetBody = function DatasetBody(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_ResourcePreview["default"], {
     id: distribution.identifier,
     tablePadding: tablePadding,
-    resource: resource
+    resource: resource,
+    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[0].identifier])
   }), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
     resource: resource
   }), /*#__PURE__*/_react["default"].createElement(_ResourceInformation["default"], {
@@ -136,7 +140,8 @@ var DatasetBody = function DatasetBody(_ref) {
     ref: apiDocs
   }, /*#__PURE__*/_react["default"].createElement("h2", null, "Try the API"), /*#__PURE__*/_react["default"].createElement(_swaggerUiReact["default"], {
     url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? '?ACA=' + additionalParams.ACA + '&redirect=false' : ''),
-    docExpansion: 'list'
+    docExpansion: 'list',
+    defaultModelsExpandDepth: -1
   })) : ''), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-md-col--3 ds-l-sm-col--12"
   }, Object.keys(distribution).length ? /*#__PURE__*/_react["default"].createElement(_DatasetDownloads["default"], {

package/lib/templates/Dataset/index.js

@@ -20,7 +20,8 @@ var _PageNotFound = _interopRequireDefault(require("../PageNotFound"));
 var Dataset = function Dataset(_ref) {
   var id = _ref.id,
       rootUrl = _ref.rootUrl,
-      additionalParams = _ref.additionalParams;
+      additionalParams = _ref.additionalParams,
+      customColumns = _ref.customColumns;
   var metastore = (0, _dataCatalogServices.useMetastoreDataset)(id, rootUrl, additionalParams);
   var dataset = metastore.dataset;
 
@@ -33,7 +34,8 @@ var Dataset = function Dataset(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement(_DatasetBody["default"], {
     id: id,
     dataset: dataset,
-    additionalParams: additionalParams
+    additionalParams: additionalParams,
+    customColumns: customColumns ? customColumns : []
   }));
 };
 

package/lib/templates/DatasetSearch/index.js

@@ -7,9 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 exports.selectedFacetsMessage = selectedFacetsMessage;
 exports.transformUrlParamsToSearchObject = transformUrlParamsToSearchObject;
-exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/lib/templates/FilteredResource/FilteredResourceBody.js

@@ -33,6 +33,8 @@ var _ResourcePreview = _interopRequireDefault(require("../../components/Resource
 
 var _ResourceFooter = _interopRequireDefault(require("../../components/ResourceFooter"));
 
+var _functions = require("./functions");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -47,7 +49,8 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
       distIndex = _ref.distIndex,
       location = _ref.location,
       apiDocPage = _ref.apiDocPage,
-      additionalParams = _ref.additionalParams;
+      additionalParams = _ref.additionalParams,
+      customColumns = _ref.customColumns;
 
   var _React$useState = _react["default"].useState('ds-u-padding-y--1'),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -158,7 +161,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
     onClick: function onClick() {
       return (0, _router.navigate)(apiDocPage);
     }
-  }, "View API documentation")))), resource.columns ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
+  }, "View API documentation")))), resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
     includeDensity: true,
     setTablePadding: setTablePadding,
     distribution: distribution,
@@ -167,7 +170,8 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_ResourcePreview["default"], {
     id: distribution.identifier,
     tablePadding: tablePadding,
-    resource: resource
+    resource: resource,
+    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[distIndex].identifier])
   }), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
     resource: resource
   }), filtersOpen && /*#__PURE__*/_react["default"].createElement(_ResourceFilter["default"], {
@@ -180,7 +184,8 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
     ref: apiDocs
   }, /*#__PURE__*/_react["default"].createElement("h2", null, "Try the API"), /*#__PURE__*/_react["default"].createElement(_swaggerUiReact["default"], {
     url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? '?ACA=' + additionalParams.ACA + '&redirect=false' : ''),
-    docExpansion: 'list'
+    docExpansion: 'list',
+    defaultModelsExpandDepth: -1
   }))));
 };
 

package/lib/templates/FilteredResource/functions.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildCustomColHeaders = buildCustomColHeaders;
+
+function buildCustomColHeaders(customHeaders, columns, schema) {
+  return columns.map(function (column) {
+    var customHeaderIndex = customHeaders.findIndex(function (header) {
+      return header.id === column;
+    });
+
+    if (customHeaderIndex > -1) {
+      return customHeaders[customHeaderIndex];
+    }
+
+    return {
+      Header: schema && schema.fields[column].description ? schema.fields[column].description : column,
+      accessor: column
+    };
+  });
+}

package/lib/templates/FilteredResource/index.js

@@ -28,7 +28,8 @@ var FilteredResource = function FilteredResource(_ref) {
       dist_id = _ref.dist_id,
       location = _ref.location,
       apiDocPage = _ref.apiDocPage,
-      additionalParams = _ref.additionalParams;
+      additionalParams = _ref.additionalParams,
+      customColumns = _ref.customColumns;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -70,7 +71,8 @@ var FilteredResource = function FilteredResource(_ref) {
     distIndex: distIndex,
     location: location,
     apiDocPage: apiDocPage,
-    additionalParams: additionalParams
+    additionalParams: additionalParams,
+    customColumns: customColumns ? customColumns : []
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "0.20.0-alpha.2",
+  "version": "1.1.0-alpha.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {
@@ -20,13 +20,14 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@civicactions/data-catalog-components": "^2.0.0-alpha.10",
-    "@civicactions/data-catalog-services": "^1.0.0-alpha.13",
+    "@civicactions/data-catalog-services": "^1.0.0",
     "@cmsgov/design-system": "^2.7.0",
     "@reach/router": "^1.3.3",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
+    "react-datepicker": "^4.2.1",
     "react-table": "^7.6.2",
     "react-text-truncate": "^0.16.0",
     "react-truncate": "^2.4.0",