@urbanos/react-discovery-ui 2.1.43

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

@@ -0,0 +1,242 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+dataset-list-view {
+  @include page-with-left-bar();
+
+  main-app-element {
+    overflow-x: hidden;
+  }
+
+  .paginator {
+    // margin-top: 2rem;
+    //width:100%;
+    min-width: 322px;
+    margin: 0px auto;
+    display: block;
+    text-align: center;
+    padding-top: 20px;
+  }
+
+  .paginator-container {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+    display: block;
+    float: left;
+  }
+
+  .list-header {
+    @include flex-row();
+    justify-content: space-between;
+    width: 100%;
+    border-bottom: 2px dotted $medium-grey;
+    padding: 2rem 0;
+    overflow: hidden;
+
+    .sort-by {
+      float: right;
+    }
+
+    .result-count {
+      font-weight: bold;
+      font-size: 1.25rem;
+      float: left;
+
+      h1 {
+        font-size: 1.25rem;
+      }
+
+      #home {
+        display: block;
+        margin-top: 15px;
+        font-size: 14px;
+        color: $dark-blue;
+      }
+
+      #home:visited {
+        color: $dark-blue;
+      }
+    }
+
+    .sort-select {
+      height: 2.25rem;
+      width: 18rem;
+    }
+
+    select-element .selector {
+      border-radius: 4px;
+      border: 1px solid #d2d4d6;
+      outline: 0;
+      color: $dark-gray;
+
+      &:focus {
+        color: $almost-black;
+        border: 1px solid $almost-black;
+      }
+    }
+  }
+
+  .search {
+    height: 2.75rem;
+    width: 100%;
+    clear: both;
+    float: left;
+    display: block;
+    margin-bottom: 24px;
+  }
+
+
+  loading-element {
+    @include default-loading-icon();
+  }
+}
+
+.login-section {
+  width: 100%;
+  float: left;
+  clear: both;
+  display: block;
+  margin-top: 25px;
+}
+
+.api-checkbox {
+  margin: 20px 0;
+}
+
+.api-checkbox .checkbox {
+  float: left;
+}
+
+error-component {
+  text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+  data-card .logo {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+
+  dataset-list-view {
+    // min-width:360px;
+    // padding:4%;  
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    /* optional */
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+  }
+
+  login-zone {
+    float: left;
+    margin-bottom: 0 !important;
+  }
+
+  .login-section {
+    margin-top: 10px;
+  }
+
+  .user-icon {
+    margin-left: -5px;
+  }
+
+  dataset-list-view .list-header,
+  dataset-list {
+    display: block;
+    float: left;
+    clear: both;
+  }
+
+  dataset-list-view .list-header .result-count {
+    width: 100%;
+    display: block;
+    float: left;
+    clear: both;
+    margin: 0 0 14px 0;
+  }
+
+  .list-header {
+    padding-top: 10px !important;
+  }
+
+  .list-header select-element {
+    width: 100%;
+    display: block;
+    float: left;
+    clear: both;
+  }
+
+  .sort-by {
+    float: left;
+    width: 100%;
+  }
+
+  dataset-list-view .left-section,
+  dataset-list-view .right-section {
+    width: 100%;
+    clear: both;
+    float: left;
+  }
+
+  select-element .selector {
+    padding: 10px;
+    width: 75%;
+    border-radius: 4px;
+    border: 1px solid #d2d4d6 !important;
+    outline: none !important;
+    background-image: url(../../assets/down.png);
+    background-repeat: no-repeat;
+    background-position: 96% 50%;
+    background-size: 20px 20px;
+    color: $dark-gray;
+  }
+
+  dataset-list-view .left-section,
+  dataset-list-view .right-section {
+    display: block;
+
+  }
+
+  dataset-list-view .left-section {
+    float: left;
+    clear: both;
+    margin-top: 10px;
+  }
+
+  dataset-list-view .right-section {
+
+    clear: both;
+    float: right;
+  }
+
+  dataset-list-view .search {
+    margin: 10px 0 20px 0;
+    clear: both;
+  }
+
+  data-card .logo {
+    display: none;
+  }
+
+  data-card .details {
+    width: 100%;
+  }
+
+  main-app-element {
+    overflow-x: hidden;
+  }
+}

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

@@ -0,0 +1,162 @@
+import { shallow } from 'enzyme'
+import DatasetListView from './dataset-list-view'
+import Paginator from '../../components/generic-elements/paginator'
+import Select from '../../components/generic-elements/select'
+import Search from '../../components/generic-elements/search'
+import LoadingElement from '../../components/generic-elements/loading-element'
+import FacetSidebar from '../../components/facet-sidebar'
+import Checkbox from '../../components/generic-elements/checkbox'
+import AlertComponent from '../../components/generic-elements/alert-component'
+
+let subject
+
+describe('dataset list view', () => {
+  describe('action dispatches', () => {
+    it('searches datasets with provided search text', () => {
+      const updateSearchText = jest.fn()
+
+      subject = createSubject({ searchParamsManager: { updateSearchText } })
+      subject
+        .find(Search)
+        .props()
+        .callback('my search term')
+
+      expect(updateSearchText).toHaveBeenCalledWith('my search term')
+    })
+
+    it('sorts datasets with provided sort field', () => {
+      const updateSortOrder = jest.fn()
+
+      subject = createSubject({ searchParamsManager: { updateSortOrder } })
+      subject
+        .find(Select)
+        .props()
+        .selectChangeCallback('stuff')
+
+      expect(updateSortOrder).toHaveBeenCalledWith('stuff')
+    })
+
+    it('filters datasets with the provided facets', () => {
+      const toggleFacet = jest.fn()
+
+      subject = createSubject({ searchParamsManager: { toggleFacet } })
+      subject
+        .find(FacetSidebar)
+        .props()
+        .clickHandler('organization', 'stuff')
+
+      expect(toggleFacet).toHaveBeenCalledWith('organization', 'stuff')
+    })
+
+    it('update search results when api accessible toggle is clicked', () => {
+      const toggleApiAccessible = jest.fn()
+
+      subject = createSubject({ searchParamsManager: { toggleApiAccessible } })
+
+      subject
+        .find(Checkbox)
+        .props()
+        .clickHandler()
+
+      expect(toggleApiAccessible).toHaveBeenCalled()
+    })
+
+    it('update search results when page is changed', () => {
+      const updatePage = jest.fn()
+
+      subject = createSubject({ searchParamsManager: { updatePage } })
+      subject
+        .find(Paginator)
+        .props()
+        .pageChangeCallback(9000)
+
+      expect(updatePage).toHaveBeenCalledWith(9000)
+    })
+
+    it('closes the alert dialog', () => {
+      const dismissFn = jest.fn()
+
+      subject = createSubject({ isGlobalError: true, globalErrorMessage: 'oops!', dismissGlobalError: dismissFn })
+      subject
+        .find(AlertComponent)
+        .props()
+        .closeFunction()
+
+      expect(dismissFn).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('renders correctly', () => {
+    it('sets the paginator total count based on the props', () => {
+      const expectedNumberOfPages = 4
+      subject = createSubject({ numberOfPages: expectedNumberOfPages })
+      expect(subject.find(Paginator).props().numberOfPages).toEqual(
+        expectedNumberOfPages
+      )
+    })
+
+    it('shows a loading spinner when the loading property is true', () => {
+      subject = createSubject({ isSearchLoading: true })
+      expect(subject.find(LoadingElement)).toHaveLength(1)
+    })
+
+    it('does not show a loading spinner when the loading property is false', () => {
+      subject = createSubject({ isSearchLoading: false })
+      expect(subject.find(LoadingElement)).toHaveLength(0)
+    })
+
+    it('apiAccessible is checked when supplied property is true', () => {
+      subject = createSubject({ searchParamsManager: { apiAccessible: true } })
+      expect(subject.find(Checkbox).props().selected).toBeTruthy()
+    })
+
+    it('apiAccessible is not checked when supplied property is false', () => {
+      subject = createSubject({ searchParamsManager: { apiAccessible: false } })
+      expect(subject.find(Checkbox).props().selected).toBeFalsy()
+    })
+
+    it('search component is given search text from the query params manager', () => {
+      subject = createSubject({ searchParamsManager: { searchText: 'hullo' } })
+      expect(subject.find(Search).props().defaultText).toEqual('hullo')
+    })
+
+    it('sort order dropdown is given the sort order from the query params manager', () => {
+      subject = createSubject({ searchParamsManager: { sortOrder: 'last_mod' } })
+      expect(subject.find(Select).props().options).toContainEqual(
+        expect.objectContaining({
+          value: 'last_mod',
+          default: true
+        })
+      )
+    })
+  })
+})
+
+function createSubject (props, queryString = '') {
+  const defaultProps = {
+    isSearchLoading: false,
+    searchMetadata: {},
+    searchResults: [],
+    numberOfPages: 2,
+    searchParamsManager: {},
+    dismissGlobalError: jest.fn()
+  }
+
+  const defaultSearchParams = {
+    apiAccessible: true,
+    sortOrder: 'name_asc',
+    page: 1,
+    searchText: '',
+    facets: {},
+
+    toggleApiAccessible: jest.fn(),
+    updateSortOrder: jest.fn(),
+    updateSearchText: jest.fn(),
+    updatePage: jest.fn()
+  }
+
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+  propsWithDefaults.searchParamsManager = Object.assign({}, defaultSearchParams, props.searchParamsManager)
+
+  return shallow(<DatasetListView {...propsWithDefaults} />)
+}

package/lib/pages/dataset-list-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-view/connector.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _datasetView = _interopRequireDefault(require("./dataset-view"));
+var _actions = require("../../store/actions");
+var _datasetSelectors = require("../../store/dataset-selectors");
+var _querySelectors = require("../../store/query-selectors");
+var _visualizationSelectors = require("../../store/visualization-selectors");
+var _auth0Wrapper = _interopRequireDefault(require("../../auth/auth0-wrapper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    visualizationId: (0, _visualizationSelectors.visualizationID)(state),
+    query: (0, _querySelectors.getFreestyleQueryText)(state),
+    title: (0, _visualizationSelectors.visualizationTitle)(state),
+    allowedActions: (0, _visualizationSelectors.visualizationAllowedActions)(state),
+    dataset: (0, _datasetSelectors.getDataset)(state),
+    isDatasetLoaded: (0, _datasetSelectors.isDatasetLoaded)(state),
+    isRemoteDataset: (0, _datasetSelectors.isRemoteDataset)(state),
+    isHostDataset: (0, _datasetSelectors.isHostDataset)(state),
+    shouldAutoExecuteQuery: (0, _querySelectors.shouldAutoExecuteQuery)(state),
+    isSaveable: (0, _visualizationSelectors.isVisualizationSaveable)(state),
+    isSaveFailure: (0, _visualizationSelectors.visualizationSaveFailure)(state),
+    isSaveSuccess: (0, _visualizationSelectors.visualizationSaveSuccess)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    save: function save(_ref) {
+      var id = _ref.id,
+        title = _ref.title,
+        query = _ref.query,
+        shouldCreateCopy = _ref.shouldCreateCopy;
+      return dispatch((0, _actions.visualizationSave)({
+        id: id,
+        title: title,
+        query: query,
+        shouldCreateCopy: shouldCreateCopy
+      }));
+    },
+    retrieveDatasetDetails: function retrieveDatasetDetails(org_name, dataset_name) {
+      return dispatch((0, _actions.retrieveDatasetDetails)(org_name, dataset_name));
+    },
+    reset: function reset() {
+      dispatch((0, _actions.visualizationReset)());
+      dispatch((0, _actions.resetQuery)());
+      dispatch((0, _actions.resetDatasetReferences)());
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _auth0Wrapper.default)(_datasetView.default));

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

@@ -0,0 +1,78 @@
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import { Router } from 'react-router'
+import { createMemoryHistory } from 'history'
+import ConnectedDatasetView from '.'
+import DatasetView from './dataset-view'
+import VisualizationSaveMenuItem from '../../components/visualization-save-menu-item'
+import { visualizationSave } from '../../store/actions'
+import Auth0Client from '../../auth/auth0-client-provider'
+
+const fakeAuth0Client = {
+  isAuthenticated: () => Promise.resolve(false)
+}
+
+describe('visualization view', () => {
+  let storeMocker, state, store, subject
+
+  const id = 'id'
+  const tableName = 'table_name'
+  const query = 'SELECT * FROM table_name\nLIMIT 200'
+  const title = 'title'
+  const chart = { data: [], layout: {}, frames: [] }
+
+  beforeEach(() => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: true
+      }))
+    })
+    Auth0Client.get = jest.fn(() => Promise.resolve(fakeAuth0Client))
+    storeMocker = configureStore([])
+    state = {
+      visualization: {
+        visualization: {
+          id, title, allowedActions: [{ name: 'create_copy' }]
+        },
+        chart
+      },
+      queryReducer: { isQueryLoading: false },
+      datasetReducer: {
+        dataset: {
+          id: '123',
+          systemName: tableName,
+          organization: {}
+        }
+      },
+      presentation: {}
+    }
+    store = storeMocker(state)
+
+    const fakeRouterMatch = { params: {} }
+    const fakeLocation = { search: '?selectedIndex=1' }
+    const history = createMemoryHistory()
+    subject = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <ConnectedDatasetView match={fakeRouterMatch} location={fakeLocation} />
+        </Router>
+      </Provider>
+    )
+  })
+
+  it('visualization allowedActions are passed to VisualizationSaveMenuItem', () => {
+    expect(subject.find(VisualizationSaveMenuItem).props().allowedActions).toEqual(['create_copy'])
+  })
+
+  it('dispatches the proper visualizationSave action when visualization is saved as a copy', () => {
+    const shouldCreateCopy = true
+    subject.find(DatasetView).setState({ localTitle: title })
+
+    subject.find(VisualizationSaveMenuItem).props().handleSaveOrUpdate({ shouldCreateCopy })
+
+    expect(store.getActions()).toContainEqual(visualizationSave({ id, query, title, shouldCreateCopy }))
+  })
+})