@urbanos/react-discovery-ui 2.1.43

package/lib/pages/dataset-detail-view/dataset-detail-view.test.js

@@ -0,0 +1,305 @@
+import { shallow } from 'enzyme'
+import DatasetView from './dataset-detail-view'
+import DatasetDetails from '../../components/dataset-details'
+import DatasetPreview from '../../components/dataset-preview'
+import StreamingApiDoc from '../../components/streaming-api-doc'
+import DatasetApiDoc from '../../components/dataset-api-doc'
+import DatasetQuality from '../../components/dataset-quality'
+import DatasetDictionary from '../../components/dataset-dictionary'
+import DatasetMetadata from '../../components/dataset-metadata'
+import GeoJSONVisualization from '../../components/visualizations/geojson'
+
+describe('dataset detail view', () => {
+  let subject
+  const routingProps = { params: { id: 1 } }
+  const dataset = {
+    id: '123',
+    name: 'COTA Streaming Busses',
+    description: '....',
+    sourceType: 'ingest',
+    fileTypes: ['csv'],
+    sourceUrl: 'http://example.com/sweet-data.csv',
+    completeness: {
+      recordCount: 50,
+      completeness: 0.5798
+    }
+  }
+
+  const createDatasetView = function (dataset, extraProps = {}) {
+    return shallow(
+      <DatasetView
+        dataset={dataset}
+        retrieveDatasetDetails={jest.fn()}
+        clearDatasetDetails={jest.fn()}
+        clearDatasetPreview={jest.fn()}
+        match={routingProps}
+        {...extraProps}
+      />
+    )
+  }
+
+  describe('required items with ingest dataset', () => {
+    let retrieveSpy, clearDatasetDetailsSpy, clearDatasetPreviewSpy
+
+    beforeEach(() => {
+      retrieveSpy = jest.fn()
+      clearDatasetDetailsSpy = jest.fn()
+      clearDatasetPreviewSpy = jest.fn()
+      subject = shallow(
+        <DatasetView
+          dataset={dataset}
+          retrieveDatasetDetails={retrieveSpy}
+          clearDatasetDetails={clearDatasetDetailsSpy}
+          clearDatasetPreview={clearDatasetPreviewSpy}
+          match={routingProps}
+          isIngest
+          isStreaming={false}
+        />
+      )
+    })
+
+    it('loads dataset details with dataset information', () => {
+      expect(subject.find(DatasetDetails).props().dataset).toEqual(
+        dataset
+      )
+    })
+
+    it('clears dataset when unmounted to prevent caching issues especially with back space', () => {
+      subject.unmount()
+
+      expect(clearDatasetDetailsSpy).toHaveBeenCalled()
+    })
+
+    it('clears out preview when unmounted to prevent issues', () => {
+      subject.unmount()
+
+      expect(clearDatasetPreviewSpy).toHaveBeenCalled()
+    })
+
+    it('includes the component for previewing dataset', () => {
+      expect(subject.find(DatasetPreview).props().datasetId).toEqual(
+        dataset.id
+      )
+    })
+
+    it('should NOT display streaming api doc component', () => {
+      expect(subject.find(StreamingApiDoc)).toHaveLength(0)
+    })
+
+    it('should display dataset quality component', () => {
+      expect(subject.find(DatasetQuality)).toHaveLength(1)
+    })
+  })
+
+  describe('visibility of children with different source types', () => {
+    it('should not show hosted explanation when dataset is not remote or hosted', () => {
+      const subject = createDatasetView(dataset, {
+        isRemote: false,
+        isHost: false,
+        isGeoJSON: false
+      })
+
+      expect(subject.find('.static-file-explanation')).toHaveLength(0)
+    })
+
+    it('should show hosted explanation when dataset is remote', () => {
+      const subject = createDatasetView(dataset, {
+        isRemote: true,
+        isGeoJSON: false
+      })
+
+      expect(subject.find('.static-file-explanation')).toHaveLength(1)
+    })
+
+    it('should not show preview when hosted', () => {
+      const subject = createDatasetView(dataset, {
+        isHost: true
+      })
+
+      expect(subject.find(DatasetPreview)).toHaveLength(0)
+    })
+
+    it('should not show preview when remote', () => {
+      const subject = createDatasetView(dataset, {
+        isRemote: true
+      })
+
+      expect(subject.find(DatasetPreview)).toHaveLength(0)
+    })
+
+    it('should show hosted explanation when dataset is hosted', () => {
+      const subject = createDatasetView(dataset, {
+        isHost: true
+      })
+
+      expect(subject.find('.static-file-explanation')).toHaveLength(1)
+    })
+
+    it('should NOT display streaming api doc component', () => {
+      const subject = createDatasetView(dataset, {
+        isStreaming: false
+      })
+      expect(subject.find(StreamingApiDoc)).toHaveLength(0)
+    })
+
+    it('should NOT display dataset quality component', () => {
+      const subject = createDatasetView(dataset, {
+        isRemote: true,
+        isIngest: false
+      })
+      expect(subject.find(DatasetQuality)).toHaveLength(0)
+    })
+  })
+
+  describe('streaming dataset', () => {
+    beforeEach(() => {
+      subject = createDatasetView(dataset, {
+        isIngest: true,
+        isCsv: true,
+        isStreaming: true
+      })
+    })
+
+    it('includes the component for previewing dataset', () => {
+      expect(subject.find(DatasetPreview).props().datasetId).toEqual(
+        dataset.id
+      )
+    })
+
+    it('should display streaming api doc component when dataset is streaming', () => {
+      expect(subject.find(StreamingApiDoc).props().dataset.id).toEqual(
+        dataset.id
+      )
+    })
+
+    it('should display dataset quality component', () => {
+      expect(subject.find(DatasetQuality)).toHaveLength(1)
+    })
+  })
+
+  describe('remote dataset', () => {
+    beforeEach(() => {
+      subject = createDatasetView(dataset, {
+        isRemote: true,
+        isIngest: false,
+        isCsv: true
+      })
+    })
+
+    it('does not include component for displaying data preview', () => {
+      expect(subject.find(DatasetPreview)).toHaveLength(0)
+    })
+
+    it('does not include component for displaying streaming api example', () => {
+      expect(subject.find(StreamingApiDoc)).toHaveLength(0)
+    })
+  })
+
+  describe('hosted dataset', () => {
+    beforeEach(() => {
+      subject = createDatasetView(dataset, {
+        isIngest: false,
+        isStreaming: false
+      })
+    })
+
+    it('does not include component for displaying data preview', () => {
+      expect(subject.find(DatasetPreview)).toHaveLength(0)
+    })
+
+    it('does not include component for displaying api documentation', () => {
+      expect(subject.find(DatasetApiDoc)).toHaveLength(0)
+    })
+
+    it('does not include component for displaying streaming api example', () => {
+      expect(subject.find(StreamingApiDoc)).toHaveLength(0)
+    })
+
+    it('does not include component for displaying quality component', () => {
+      expect(subject.find(DatasetQuality)).toHaveLength(0)
+    })
+  })
+
+  describe('streaming api doc', () => {
+    it('expanded when type is not csv', () => {
+      subject = createDatasetView(dataset, {
+        isCsv: false,
+        isStreaming: true
+      })
+      expect(subject.find(StreamingApiDoc).props().expanded).toEqual(true)
+    })
+
+    it('is collapsed when source is local csv', () => {
+      subject = createDatasetView(dataset, {
+        isCsv: true,
+        isStreaming: true
+      })
+      expect(subject.find(StreamingApiDoc).props().expanded).toEqual(false)
+    })
+  })
+
+  describe('api doc by default is', () => {
+    it('expanded when type is json and source is ingest', () => {
+      subject = createDatasetView(dataset, {
+        isStreaming: false,
+        isIngest: true,
+        isCsv: false
+      })
+      expect(subject.find(DatasetApiDoc).props().expanded).toEqual(true)
+    })
+
+    it('collapsed when type is csv and source is streaming', () => {
+      subject = createDatasetView(dataset, {
+        isCsv: true,
+        isIngest: true,
+        isStreaming: true
+      })
+      expect(subject.find(DatasetApiDoc).props().expanded).toEqual(false)
+    })
+  })
+
+  describe('geojson visualization', () => {
+    it('should not be displayed by default', () => {
+      subject = createDatasetView(dataset, {
+        isGeoJSON: false
+      })
+
+      expect(subject.find(GeoJSONVisualization)).toHaveLength(0)
+    })
+
+    it('should be displayed when the dataset is geojson', () => {
+      subject = createDatasetView(dataset, {
+        isGeoJSON: true
+      })
+
+      expect(subject.find(GeoJSONVisualization)).toHaveLength(1)
+      expect(subject.find(GeoJSONVisualization).props().datasetId).toEqual(
+        dataset.id
+      )
+    })
+  })
+
+  describe('dataset dictionary', () => {
+    it('has the provided dataset id and schema', () => {
+      const schema = { id: 'id' }
+      const dataset = Object.assign({}, dataset, { schema })
+
+      subject = createDatasetView(dataset)
+
+      const dictionary = subject.find(DatasetDictionary)
+      expect(dictionary).toHaveLength(1)
+      expect(dictionary.props().datasetId).toEqual(dataset.id)
+      expect(dictionary.props().schema).toEqual(schema)
+    })
+  })
+
+  describe('dataset metadata', () => {
+    it('has the provided dataset', () => {
+      subject = createDatasetView(dataset)
+
+      const metadata = subject.find(DatasetMetadata)
+      expect(metadata).toHaveLength(1)
+      expect(metadata.props().dataset).toEqual(dataset)
+    })
+  })
+})

package/lib/pages/dataset-detail-view/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _connector = _interopRequireDefault(require("./connector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _connector.default;

package/lib/pages/dataset-list-view/connector.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _datasetListView = _interopRequireDefault(require("./dataset-list-view"));
+var _actions = require("../../store/actions");
+var _searchParamsManager = _interopRequireDefault(require("../../search-params/search-params-manager"));
+var _selectors = require("../../store/selectors");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    searchResults: (0, _selectors.getSearchResults)(state),
+    searchMetadata: (0, _selectors.getSearchMetadata)(state),
+    numberOfPages: (0, _selectors.getNumberOfPages)(state),
+    isSearchLoading: (0, _selectors.isSearchLoading)(state),
+    isGlobalError: (0, _selectors.getGlobalErrorState)(state),
+    globalErrorMessage: (0, _selectors.getGlobalErrorMessage)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    dismissGlobalError: function dismissGlobalError() {
+      return dispatch((0, _actions.setGlobalErrorState)(false, ''));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _searchParamsManager.default)(_datasetListView.default));

package/lib/pages/dataset-list-view/dataset-list-view.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./dataset-list-view.scss");
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _alertComponent = _interopRequireDefault(require("../../components/generic-elements/alert-component"));
+var _datasetList = _interopRequireDefault(require("../../components/dataset-list"));
+var _paginator = _interopRequireDefault(require("../../components/generic-elements/paginator"));
+var _select = _interopRequireDefault(require("../../components/generic-elements/select"));
+var _search = _interopRequireDefault(require("../../components/generic-elements/search"));
+var _facetSidebar = _interopRequireDefault(require("../../components/facet-sidebar"));
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+var _checkbox = _interopRequireDefault(require("../../components/generic-elements/checkbox"));
+var _searchParamsManager = require("../../search-params/search-params-manager");
+var _auth0LoginZone = _interopRequireDefault(require("../../components/auth0-login-zone"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DatasetListView = function DatasetListView(props) {
+  var searchParamsManager = props.searchParamsManager,
+    searchResults = props.searchResults,
+    searchMetadata = props.searchMetadata,
+    numberOfPages = props.numberOfPages,
+    isSearchLoading = props.isSearchLoading,
+    isGlobalError = props.isGlobalError,
+    globalErrorMessage = props.globalErrorMessage,
+    dismissGlobalError = props.dismissGlobalError;
+  var createSortOptions = function createSortOptions() {
+    return [{
+      value: 'name_asc',
+      label: 'Name Ascending',
+      default: searchParamsManager.sortOrder === 'name_asc' || searchParamsManager.sortOrder === 'start'
+    }, {
+      value: 'name_desc',
+      label: 'Name Descending',
+      default: searchParamsManager.sortOrder === 'name_desc'
+    }, {
+      value: 'last_mod',
+      label: 'Last Modified',
+      default: searchParamsManager.sortOrder === 'last_mod'
+    }, {
+      value: 'relevance',
+      label: 'Relevance',
+      default: searchParamsManager.sortOrder === 'relevance'
+    }];
+  };
+  var renderDatasetList = function renderDatasetList() {
+    if (isSearchLoading) {
+      return /*#__PURE__*/React.createElement(_loadingElement.default, null);
+    } else {
+      document.body.className = 'body-dataset-lists';
+      return /*#__PURE__*/React.createElement(_datasetList.default, {
+        datasets: searchResults
+      });
+    }
+  };
+  var renderResultsCountText = function renderResultsCountText() {
+    var resultCountText = isSearchLoading ? '' : "".concat(searchMetadata.totalDatasets || 'No', " datasets found");
+    var resultCountQueryText = searchParamsManager.searchText ? " for \"".concat(searchParamsManager.searchText, "\"") : '';
+    if (searchMetadata.totalDatasets === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "result-count",
+        className: "result-count"
+      }, /*#__PURE__*/React.createElement("h1", null, "".concat(resultCountText).concat(resultCountQueryText)), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+        id: "home",
+        to: "/"
+      }, "Click here to return home"));
+    } else {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "result-count",
+        className: "result-count"
+      }, /*#__PURE__*/React.createElement("h1", null, "".concat(resultCountText).concat(resultCountQueryText)));
+    }
+  };
+  return /*#__PURE__*/React.createElement("dataset-list-view", null, /*#__PURE__*/React.createElement(_search.default, {
+    className: "search",
+    defaultText: searchParamsManager.searchText,
+    placeholder: "Search datasets",
+    callback: searchParamsManager.updateSearchText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "left-section"
+  }, /*#__PURE__*/React.createElement(_auth0LoginZone.default, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '0.5rem'
+    }
+  }, /*#__PURE__*/React.createElement(_checkbox.default, {
+    id: "toggleAPIDatasets",
+    clickHandler: searchParamsManager.toggleApiAccessible,
+    text: "Only Show API Accessible Datasets",
+    selected: searchParamsManager.apiAccessible
+  })), /*#__PURE__*/React.createElement(_facetSidebar.default, {
+    availableFacets: searchMetadata.facets,
+    appliedFacets: searchParamsManager.facets,
+    clickHandler: searchParamsManager.toggleFacet
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "right-section"
+  }, /*#__PURE__*/React.createElement(_alertComponent.default, {
+    errorMessage: globalErrorMessage,
+    closeFunction: dismissGlobalError,
+    showAlert: isGlobalError
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "list-header"
+  }, renderResultsCountText(), /*#__PURE__*/React.createElement("div", {
+    className: "sort-by"
+  }, /*#__PURE__*/React.createElement(_select.default, {
+    className: "searchParamsManager.sortOrder-select",
+    label: "order by",
+    options: createSortOptions(),
+    selectChangeCallback: searchParamsManager.updateSortOrder,
+    testId: "sort-select"
+  }))), renderDatasetList(), /*#__PURE__*/React.createElement("div", {
+    className: "paginator-container"
+  }, /*#__PURE__*/React.createElement(_paginator.default, {
+    className: "paginator",
+    numberOfPages: numberOfPages,
+    currentPage: searchParamsManager.page,
+    pageChangeCallback: searchParamsManager.updatePage
+  }))));
+};
+DatasetListView.propTypes = {
+  searchParamsManager: _propTypes.default.shape(_searchParamsManager.SearchParamsManager.propTypes),
+  searchResults: _propTypes.default.array.isRequired,
+  searchMetadata: _propTypes.default.object.isRequired,
+  numberOfPages: _propTypes.default.number.isRequired,
+  isSearchLoading: _propTypes.default.bool.isRequired,
+  isGlobalError: _propTypes.default.bool,
+  globalErrorMessage: _propTypes.default.string,
+  dismissGlobalError: _propTypes.default.func
+};
+var _default = exports.default = DatasetListView;