@urbanos/react-discovery-ui 2.1.43

package/lib/pages/visualization-view/visualization-view.js

@@ -0,0 +1,128 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactTabs = require("react-tabs");
+var _reactRouter = require("react-router");
+require("./visualization-view.scss");
+var _chartIcon = _interopRequireDefault(require("../../components/generic-elements/chart-icon"));
+var _sqlIcon = _interopRequireDefault(require("../../components/generic-elements/sql-icon"));
+var _errorComponent = _interopRequireDefault(require("../../components/generic-elements/error-component"));
+var _visualizationSaveMenuItem = _interopRequireDefault(require("../../components/visualization-save-menu-item"));
+var _chartView = _interopRequireDefault(require("../chart-view"));
+var _queryView = _interopRequireDefault(require("../query-view"));
+var _routes = _interopRequireDefault(require("../../routes"));
+var _visualizationListMenuItem = _interopRequireDefault(require("../../components/visualization-list-menu-item"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var VisualizationView = function VisualizationView(props) {
+  var reset = props.reset,
+    load = props.load,
+    save = props.save,
+    idFromState = props.id,
+    query = props.query,
+    title = props.title,
+    allowedActions = props.allowedActions,
+    isLoadFailure = props.isLoadFailure,
+    isSaveSuccess = props.isSaveSuccess,
+    isSaveFailure = props.isSaveFailure,
+    isSaveable = props.isSaveable,
+    idFromUrl = props.match.params.id,
+    history = props.history,
+    isAuthenticated = props.auth.isAuthenticated;
+  var linkUrl = idFromState && (0, _reactRouter.generatePath)(_routes.default.visualizationView, {
+    id: idFromState
+  });
+  var _useState = (0, _react.useState)(title || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    localTitle = _useState2[0],
+    setLocalTitle = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    index = _useState4[0],
+    setIndex = _useState4[1];
+  _react.default.useEffect(function () {
+    return function cleanup() {
+      reset();
+    };
+  }, []);
+  _react.default.useEffect(function () {
+    if (idFromUrl && idFromUrl !== idFromState) load(idFromUrl);
+  }, [idFromUrl]);
+  _react.default.useEffect(function () {
+    if (idFromState && idFromUrl !== idFromState) history.push(linkUrl);
+  }, [idFromState]);
+  _react.default.useEffect(function () {
+    setLocalTitle(title);
+  }, [title]);
+  var handleTitleChange = function handleTitleChange(event) {
+    if (event.target.value !== localTitle) {
+      setLocalTitle(event.target.value);
+    }
+  };
+  var handleSaveOrUpdate = function handleSaveOrUpdate(_ref) {
+    var shouldCreateCopy = _ref.shouldCreateCopy;
+    save({
+      id: idFromState,
+      title: localTitle,
+      query: query,
+      shouldCreateCopy: shouldCreateCopy
+    });
+  };
+  var isVisualizationEnabled = function isVisualizationEnabled() {
+    return window.DISABLE_VISUALIZATIONS === 'false';
+  };
+  if (isLoadFailure) {
+    return /*#__PURE__*/_react.default.createElement("visualization-view", null, /*#__PURE__*/_react.default.createElement(_errorComponent.default, {
+      errorText: "We were unable to load the requested visualization"
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement("visualization-view", null, /*#__PURE__*/_react.default.createElement(_reactTabs.Tabs, {
+    selectedIndex: index,
+    onSelect: function onSelect(tabIndex) {
+      return setIndex(tabIndex);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
+    className: "header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "tab-area"
+  }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+    className: "header-item tab",
+    selectedClassName: "selected"
+  }, "Write SQL ", /*#__PURE__*/_react.default.createElement(_sqlIcon.default, {
+    className: "sql-icon"
+  })), isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+    className: "header-item tab",
+    selectedClassName: "selected"
+  }, "Visualize ", /*#__PURE__*/_react.default.createElement(_chartIcon.default, {
+    className: "chart-icon"
+  }))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "action-area"
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_visualizationListMenuItem.default, {
+    isAuthenticated: isAuthenticated
+  }), /*#__PURE__*/_react.default.createElement(_visualizationSaveMenuItem.default, {
+    isSaveable: isSaveable,
+    handleTitleChange: handleTitleChange,
+    handleSaveOrUpdate: handleSaveOrUpdate,
+    linkUrl: linkUrl,
+    isSaveFailure: isSaveFailure,
+    isSaveSuccess: isSaveSuccess,
+    title: localTitle,
+    allowedActions: allowedActions,
+    isAuthenticated: isAuthenticated
+  })))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_queryView.default, null)), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, {
+    className: "visualization",
+    selectedClassName: "visualization--selected"
+  }, /*#__PURE__*/_react.default.createElement(_chartView.default, null))));
+};
+var _default = exports.default = VisualizationView;

package/lib/pages/visualization-view/visualization-view.scss

@@ -0,0 +1,115 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+
+visualization-view {
+  .header {
+    border-bottom: 0;
+    box-shadow: 0px 1px 3px $light-grey;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .tab-area,
+  .action-area {
+    display: flex;
+    align-items: center;
+  }
+
+  .link-disabled {
+    pointer-events: none;
+  }
+
+  .new-visualization-form {
+    margin: 0.5rem;
+  }
+
+  .header-item {
+    display: block;
+    border: 0;
+    position: relative;
+    list-style: initial;
+    cursor: pointer;
+    color: $dark-grey;
+  }
+
+  .tab {
+    padding: 12px 24px;
+
+    &:hover {
+      color: $almost-black;
+
+      .sql-icon {
+        padding-left: 5px;
+        fill: $almost-black;
+      }
+
+      .chart-icon {
+        path {
+          fill: $almost-black;
+        }
+      }
+    }
+
+    &.selected {
+      background: transparent;
+      border-bottom: 5px solid;
+      border-color: $light-blue;
+      color: $almost-black;
+
+      .sql-icon {
+        padding-left: 5px;
+        fill: $almost-black;
+      }
+
+
+      .chart-icon {
+        path {
+          fill: $almost-black;
+        }
+      }
+    }
+  }
+
+  .chart-icon {
+    padding-left: 5px;
+    path {
+      fill: $medium-grey;
+    }
+  }
+
+  .sql-icon {
+    padding-left: 5px;
+    fill: $medium-grey;
+  }
+
+  .loading-spinner {
+    @include default-loading-icon();
+  }
+}
+
+/* popover that needs to be tightly coupled */
+
+visualization-view {
+  position: relative;
+
+  .popover-root {
+    z-index: 900 !important;
+  }
+
+  .visualization {
+    height: 85vh;
+    width: 100vw;
+    display: none;
+  }
+
+  .visualization--selected {
+    display: flex;
+  }
+  @media only screen and (max-width: 600px) {
+    .header {
+      display:none;
+    } 
+  } 
+}

package/lib/pages/visualization-view/visualization-view.test.js

@@ -0,0 +1,188 @@
+import { shallow } from 'enzyme'
+import { Tab, Tabs, TabPanel } from 'react-tabs'
+
+import VisualizationView from './visualization-view'
+import QueryView from '../query-view'
+import ChartView from '../chart-view'
+import ErrorComponent from '../../components/generic-elements/error-component'
+import VisualizationSaveMenuItem from '../../components/visualization-save-menu-item'
+import VisualizationListMenuItem from '../../components/visualization-list-menu-item'
+import ChartIcon from '../../components/generic-elements/chart-icon'
+
+const runUseEffect = () => {
+  const useEffect = jest.spyOn(React, 'useEffect')
+  useEffect.mockImplementationOnce(f => f())
+  useEffect.mockImplementationOnce(f => f())
+  useEffect.mockImplementationOnce(f => f())
+  useEffect.mockImplementationOnce(f => f())
+}
+
+describe('visualization view', () => {
+  let subject, resetHandler, loadHandler
+
+  const id = '123456'
+
+  beforeEach(() => {
+    resetHandler = jest.fn()
+    loadHandler = jest.fn()
+  })
+
+  describe('when visualization id is not provided in the URL', () => {
+    beforeEach(() => {
+      resetHandler.mockImplementation(() => true)
+      runUseEffect()
+      subject = createSubject({ match: { params: {} }, reset: resetHandler, load: loadHandler })
+    })
+
+    it('does not call the load function', () => {
+      expect(loadHandler).not.toHaveBeenCalled()
+    })
+
+    it('lands on the query view page', () => {
+      expect(subject.find(Tabs).props().selectedIndex).toEqual(0)
+    })
+  })
+
+  describe('when visualization id from state is provided', () => {
+    it('pushes a path with the new id into history', () => {
+      const history = { push: jest.fn() }
+
+      runUseEffect()
+      subject = createSubject({ history, id })
+
+      expect(history.push).toHaveBeenCalledWith(`/visualization/${id}`)
+    })
+  })
+
+  describe('when visualization id is provided in the URL and nothing else', () => {
+    beforeEach(() => {
+      runUseEffect()
+      subject = createSubject({ match: { params: { id } }, reset: resetHandler, load: loadHandler })
+    })
+
+    it('calls the load function', () => {
+      expect(loadHandler).toHaveBeenCalledWith(id)
+    })
+  })
+
+  describe('when visualization id from URL matches visualization id from state', () => {
+    let history
+    beforeEach(() => {
+      runUseEffect()
+      history = { push: jest.fn() }
+      subject = createSubject({ history, match: { params: { id } }, load: loadHandler, id })
+    })
+
+    it('does not call the load function', () => {
+      expect(loadHandler).not.toHaveBeenCalled()
+    })
+
+    it('does not push the id onto the URL', () => {
+      expect(history.push).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when visualization is loaded with no errors', () => {
+    beforeEach(() => {
+      window.DISABLE_VISUALIZATIONS = 'false'
+      subject = createSubject()
+    })
+
+    it('has two tabs', () => {
+      expect(subject.find(Tab).length).toEqual(2)
+    })
+
+    it('has two tab panels', () => {
+      expect(subject.find(TabPanel).length).toEqual(2)
+    })
+
+    it('has a chart view component', () => {
+      expect(subject.find(ChartView).length).toEqual(1)
+    })
+
+    it('does not instruct the chart view to auto execute the query', () => {
+      expect(subject.find(ChartView).props().shouldAutoExecuteQuery).toBeFalsy()
+    })
+
+    it('has a query view component', () => {
+      expect(subject.find(QueryView).length).toEqual(1)
+    })
+
+    it('does not instruct the query view to auto execute the query', () => {
+      expect(subject.find(QueryView).props().shouldAutoExecuteQuery).toBeFalsy()
+    })
+  })
+
+  describe('when visualization has failed to load', () => {
+    beforeEach(() => {
+      subject = createSubject({ isLoadFailure: true })
+    })
+
+    it('shows an error element', () => {
+      expect(subject.find(ErrorComponent)).toHaveLength(1)
+    })
+
+    it('does not have a visualization view component', () => {
+      expect(subject.find(ChartView).length).toEqual(0)
+    })
+
+    it('does not have a query view component', () => {
+      expect(subject.find(QueryView).length).toEqual(0)
+    })
+  })
+
+  describe('visualization view has save and user page icon in the tabs header', () => {
+    beforeEach(() => {
+      subject = createSubject({ auth: { isAuthenticated: true } })
+    })
+
+    it('displays the save icon in the header with expected props', () => {
+      expect(subject.find(VisualizationSaveMenuItem)).toHaveLength(1)
+      expect(subject.find(VisualizationSaveMenuItem).props().isAuthenticated).toBe(true)
+    })
+
+    it('displays the user page icon in the header with expected props', () => {
+      expect(subject.find(VisualizationListMenuItem)).toHaveLength(1)
+      expect(subject.find(VisualizationListMenuItem).props().isAuthenticated).toBe(true)
+    })
+  })
+
+  describe('when disable visualizations env flag is enabled', () => {
+    beforeEach(() => {
+      window.DISABLE_VISUALIZATIONS = 'true'
+      subject = createSubject()
+    })
+
+    afterEach(() => {
+      window.DISABLE_VISUALIZATIONS = 'false'
+    })
+
+    it('Does not display a visualization tab', () => {
+      expect(subject.find(ChartIcon).length).toEqual(0)
+    })
+  })
+})
+
+const createSubject = (props = {}) => {
+  const defaultProps = {
+    reset: jest.fn(),
+    load: jest.fn(),
+    save: jest.fn(),
+    update: jest.fn(),
+    id: undefined,
+    query: undefined,
+    title: undefined,
+    isLoadFailure: false,
+    isSaving: false,
+    isSaveSuccess: false,
+    isSaveFailure: false,
+    isSaveable: false,
+    match: { params: {} },
+    history: { push: jest.fn() },
+    chart: {},
+    auth: { isAuthenticated: false }
+  }
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+
+  return shallow(<VisualizationView {...propsWithDefaults} />)
+}

package/lib/routes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  root: '/',
+  datasetView: '/dataset/:organizationName/:datasetName',
+  datasetVisualizationView: '/dataset/:organizationName/:datasetName/visualization',
+  visualizationView: '/visualization/:id?',
+  userProfile: '/user',
+  apiKey: '/apiKey',
+  healthCheck: '/healthcheck',
+  login: '/login',
+  oauth: '/oauth',
+  oauthError: '/oauth/error'
+};

package/lib/search-params/search-params-manager.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaults = exports.default = exports.SearchParamsManager = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _qs = _interopRequireDefault(require("qs"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _actions = require("../store/actions.js");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var defaults = exports.defaults = {
+  apiAccessible: true,
+  sortOrder: 'start',
+  page: 1,
+  searchText: '',
+  facets: {}
+};
+var SearchParamsManager = exports.SearchParamsManager = /*#__PURE__*/function () {
+  function SearchParamsManager(history) {
+    _classCallCheck(this, SearchParamsManager);
+    this.pushHistory = history.push;
+    this.params = _qs.default.parse(history.location.search, {
+      ignoreQueryPrefix: true
+    });
+    this.getParam = this.getParam.bind(this);
+    this.getParams = this.getParams.bind(this);
+    this.toggleApiAccessible = this.toggleApiAccessible.bind(this);
+    this.toggleFacet = this.toggleFacet.bind(this);
+    this.updateSearchText = this.updateSearchText.bind(this);
+    this.updateSortOrder = this.updateSortOrder.bind(this);
+    this.updatePage = this.updatePage.bind(this);
+    this.updateParams = this.updateParams.bind(this);
+    this.apiAccessible = this.getParam('apiAccessible') !== 'false';
+    this.sortOrder = this.getParam('sort') || defaults.sortOrder;
+    this.page = Number.parseInt(this.getParam('page')) || defaults.page;
+    this.searchText = this.getParam('q') || defaults.searchText;
+    this.facets = this.getParam('facets') || defaults.facets;
+  }
+  return _createClass(SearchParamsManager, [{
+    key: "getParam",
+    value: function getParam(name) {
+      return this.params[name];
+    }
+  }, {
+    key: "getParams",
+    value: function getParams() {
+      return {
+        apiAccessible: this.apiAccessible,
+        page: this.page,
+        facets: this.facets,
+        searchText: this.searchText,
+        sortOrder: this.sortOrder
+      };
+    }
+  }, {
+    key: "toggleApiAccessible",
+    value: function toggleApiAccessible() {
+      var updatedApiAccessibleFlag = !this.apiAccessible;
+      this.updateParams({
+        apiAccessible: updatedApiAccessibleFlag,
+        page: 1
+      });
+    }
+  }, {
+    key: "toggleFacet",
+    value: function toggleFacet(name, value) {
+      var facetValues = this.facets[name];
+      var updatedFacets = Object.assign({}, this.facets, _defineProperty({}, name, _lodash.default.xor(facetValues, [value])));
+      this.updateParams({
+        facets: updatedFacets,
+        page: 1
+      });
+    }
+  }, {
+    key: "updateSortOrder",
+    value: function updateSortOrder(sort) {
+      this.updateParams({
+        sort: sort
+      });
+    }
+  }, {
+    key: "updateSearchText",
+    value: function updateSearchText(searchText) {
+      var sort = this.sortOrder === 'start' ? 'relevance' : this.sortOrder;
+      this.updateParams({
+        q: searchText,
+        page: 1,
+        sort: sort
+      });
+    }
+  }, {
+    key: "updatePage",
+    value: function updatePage(page) {
+      this.updateParams({
+        page: page
+      });
+    }
+  }, {
+    key: "updateParams",
+    value: function updateParams(params) {
+      this.cacheFocusedElement();
+      var updatedSearch = Object.assign({}, this.params, params);
+      var updatedSearchEncoded = _qs.default.stringify(updatedSearch, {
+        arrayFormat: 'brackets',
+        addQueryPrefix: false
+      });
+      this.pushHistory({
+        search: updatedSearchEncoded
+      });
+    }
+  }, {
+    key: "cacheFocusedElement",
+    value: function cacheFocusedElement() {
+      var focusedElement = document.activeElement;
+      var focusedID = null;
+      if (focusedElement !== null && focusedElement !== document.body) {
+        focusedID = focusedElement.id;
+      }
+      sessionStorage.setItem("cachedFocusedElement", focusedID);
+    }
+  }]);
+}();
+SearchParamsManager.propTypes = {
+  apiAccessible: _propTypes.default.bool.isRequired,
+  sortOrder: _propTypes.default.string.isRequired,
+  page: _propTypes.default.number.isRequired,
+  searchText: _propTypes.default.string.isRequired,
+  facets: _propTypes.default.object.isRequired,
+  toggleApiAccessible: _propTypes.default.func.isRequired,
+  updateSortOrder: _propTypes.default.func.isRequired,
+  updateSearchText: _propTypes.default.func.isRequired,
+  updatePage: _propTypes.default.func.isRequired
+};
+var withSearchParamsManager = exports.default = function withSearchParamsManager(WrappedComponent) {
+  var SearchParamsWrapper = function SearchParamsWrapper(props) {
+    var history = props.history;
+    var dispatch = (0, _reactRedux.useDispatch)();
+    var searchParamsManager = new SearchParamsManager(history);
+    var dispatchDatasetSearch = function dispatchDatasetSearch() {
+      try {
+        var cachedElementID = sessionStorage.getItem("cachedFocusedElement");
+        sessionStorage.removeItem("cachedFocusedElement");
+        var cachedElement = document.getElementById(cachedElementID);
+        cachedElement.focus();
+      } catch (e) {}
+      var updatedParams = searchParamsManager.getParams();
+      dispatch((0, _actions.datasetSearch)(updatedParams));
+    };
+    (0, _react.useEffect)(dispatchDatasetSearch, [history.location.search]);
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({
+      searchParamsManager: searchParamsManager
+    }, props));
+  };
+  return SearchParamsWrapper;
+};
+withSearchParamsManager.propTypes = {
+  history: _propTypes.default.object.isRequired,
+  disptch: _propTypes.default.func.isRequired
+};