@urbanos/react-discovery-ui 2.1.61 → 2.1.63

package/lib/ReactDiscoveryUI.js

@@ -44,7 +44,7 @@ var noMatch = function noMatch() {
 };
 var DiscoveryUI = function DiscoveryUI() {
   return /*#__PURE__*/_react.default.createElement("section", {
-    class: "main-app-element"
+    className: "main-app-element"
   }, /*#__PURE__*/_react.default.createElement(_networkLoadingElement.default, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react.default.createElement(_protectedRoute.default, {
     exact: true,
     path: _routes.default.root,

package/lib/components/auth0-login-zone/auth0-login-zone.test.js

@@ -2,12 +2,20 @@ import { mount } from 'enzyme'
 import { Auth0LoginZone as Component } from './auth0-login-zone'
 import LoadingElement from '../generic-elements/loading-element'
 import { BrowserRouter as Router } from 'react-router-dom'
-import * as device from 'react-device-detect'
+
+let mockIsMobile = false
+jest.mock('react-device-detect', () => ({
+  get isMobile() {
+    return mockIsMobile
+  }
+}))
+
 
 describe('OauthLoginZone component', () => {
   let subject, button, loginHandler, logoutHandler
 
   beforeEach(() => {
+    mockIsMobile = false
     loginHandler = jest.fn()
     logoutHandler = jest.fn()
   })
@@ -36,7 +44,7 @@ describe('OauthLoginZone component', () => {
 
   describe('authenticated', () => {
     beforeEach(() => {
-      device.isMobile = false
+      mockIsMobile = false
       subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
       button = subject.find('button')
     })
@@ -114,7 +122,7 @@ describe('OauthLoginZone component', () => {
 
     describe('account menu on mobile', () => {
       beforeEach(() => {
-        device.isMobile = true
+        mockIsMobile = true
         subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
         button = subject.find('button')
       })

package/lib/components/code-editor/code-editor.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
 var _prismCore = require("prismjs/components/prism-core");
 require("prismjs/components/prism-sql");
@@ -24,7 +24,7 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var code = 'SELECT * FROM ...';
-var CodeEditor = /*#__PURE__*/function (_React$Component) {
+var CodeEditor = /*#__PURE__*/function (_Component) {
   function CodeEditor(props) {
     var _this;
     _classCallCheck(this, CodeEditor);
@@ -34,12 +34,12 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-  _inherits(CodeEditor, _React$Component);
+  _inherits(CodeEditor, _Component);
   return _createClass(CodeEditor, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/_react.default.createElement(_reactSimpleCodeEditor.default, {
+      return /*#__PURE__*/React.createElement(_reactSimpleCodeEditor.default, {
         value: this.state.code,
         onValueChange: function onValueChange(code) {
           return _this2.setState({
@@ -61,5 +61,5 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-}(_react.default.Component);
+}(_react.Component);
 var _default = exports.default = CodeEditor;

package/lib/components/collapsable-box/collapsable-box.js

@@ -30,11 +30,11 @@ function extractText(node) {
   if (node.props && node.props.children) return extractText(node.props.children);
   return '';
 }
-var _default = exports.default = /*#__PURE__*/function (_Component) {
-  function _default(props) {
+var CollapsableBox = /*#__PURE__*/function (_Component) {
+  function CollapsableBox(props) {
     var _this;
-    _classCallCheck(this, _default);
-    _this = _callSuper(this, _default, [props]);
+    _classCallCheck(this, CollapsableBox);
+    _this = _callSuper(this, CollapsableBox, [props]);
     var isDesktop = window.matchMedia(_variables.default.aboveMaxBreak).matches;
     _this.state = {
       expanded: isDesktop || props.expanded
@@ -44,8 +44,8 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
     _this.contentId = "collapsable-box-content-".concat(normalizedTitle || 'content');
     return _this;
   }
-  _inherits(_default, _Component);
-  return _createClass(_default, [{
+  _inherits(CollapsableBox, _Component);
+  return _createClass(CollapsableBox, [{
     key: "toggleCollapsed",
     value: function toggleCollapsed() {
       this.setState({
@@ -72,8 +72,8 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         "data-testid": this.props.testId,
         className: "header-container ".concat(this.headerOpenClass()),
-        onClick: function onClick(e) {
-          _this2.toggleCollapsed();
+        onClick: function onClick() {
+          return _this2.toggleCollapsed();
         },
         onKeyDown: function onKeyDown(event) {
           if (event.key === ' ' || event.key === 'Enter') {
@@ -101,4 +101,5 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
       }, childrenWithContentId)));
     }
   }]);
-}(_react.Component);
+}(_react.Component);
+var _default = exports.default = CollapsableBox;

package/lib/components/collapsable-box/collapsable-box.test.js

@@ -3,10 +3,9 @@ import CollapsableBox from './collapsable-box'
 
 describe('CollapsableBox ', () => {
   test('desktop default to expanded', () => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: true
       }))
     })
@@ -19,10 +18,9 @@ describe('CollapsableBox ', () => {
   })
 
   test('mobile/table default to collapsed', () => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: false
       }))
     })
@@ -35,10 +33,9 @@ describe('CollapsableBox ', () => {
   })
 
   test('clicking the header changes the expanded state on mobile/tablet', () => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: false
       }))
     })
@@ -52,10 +49,9 @@ describe('CollapsableBox ', () => {
   })
 
   test('clicking the header changes the expanded state on Desktop', () => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: true
       }))
     })
@@ -69,10 +65,9 @@ describe('CollapsableBox ', () => {
   })
 
   test('clicking the header changes the expanded state on expanded', () => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: undefined
       }))
     })

package/lib/components/data-card/data-card.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 require("./data-card.scss");
 var _reactRouterDom = require("react-router-dom");
 var _reactSanitizedHtml = _interopRequireDefault(require("react-sanitized-html"));
@@ -29,14 +30,16 @@ var DataCard = function DataCard(props) {
     });
   };
   var dataset = props.dataset;
-  var _React$useState = React.useState('loading'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    imageStatus = _React$useState2[0],
-    setImageStatus = _React$useState2[1];
-  var logoAltText = function logoAltText() {
-    if (imageStatus === 'fallback') return "No image available for ".concat(dataset.organization_title);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    failedImageUrl = _useState2[0],
+    setFailedImageUrl = _useState2[1];
+  var logoAltText = function () {
+    if (failedImageUrl === dataset.organization_image_url) {
+      return "No image available for ".concat(dataset.organization_title);
+    }
     return "The logo for ".concat(dataset.organization_title);
-  };
+  }();
   var truncatedDescription = truncateDescription(dataset.description, maxDescriptionLength);
   return /*#__PURE__*/React.createElement("data-card", null, /*#__PURE__*/React.createElement("div", {
     className: "logo"
@@ -46,9 +49,9 @@ var DataCard = function DataCard(props) {
     src: dataset.organization_image_url,
     fallbackImage: _no_image.default,
     initialImage: /*#__PURE__*/React.createElement(_loadingElement.default, null),
-    alt: logoAltText(imageStatus, dataset),
-    onError: function onError(errorUrl) {
-      if (errorUrl === dataset.organization_image_url) setImageStatus('fallback');
+    alt: logoAltText,
+    onError: function onError() {
+      return setFailedImageUrl(dataset.organization_image_url);
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: "details"

package/lib/components/data-card/data-card.test.js

@@ -47,6 +47,14 @@ describe('data card element with logo', () => {
     expect(subject.find(ReactImageFallback).prop('alt')).toEqual('The logo for Organization Title')
     expect(subject.find(ReactImageFallback).prop('src')).toEqual(dataset.organization_image_url)
   })
+
+  test('card to render fallback alt text when image fails to load', () => {
+    subject.find(ReactImageFallback).prop('onError')()
+
+    expect(subject.find(ReactImageFallback).prop('alt')).toEqual(
+      'No image available for Organization Title'
+    )
+  })
 })
 
 describe('data card element with html description', () => {

package/lib/components/data-view/data-view.js

@@ -334,7 +334,7 @@ var cleanseData = function cleanseData(data) {
     return cleanseRow(row);
   });
 };
-var _default = exports.default = function _default(props) {
+var DataView = function DataView(props) {
   var _useState7 = (0, _react.useState)(0),
     _useState8 = _slicedToArray(_useState7, 2),
     index = _useState8[0],
@@ -389,4 +389,5 @@ var _default = exports.default = function _default(props) {
     theme: getTheme(),
     collapsed: 2
   })))));
-};
+};
+var _default = exports.default = DataView;

package/lib/components/dataset-api-doc/api-example.js

@@ -13,7 +13,7 @@ var defaultHeaders = [{
   description: 'Include your unique api key as the value. You can generate your key by navigating to the “API Key” item on the “My Account” menu.',
   required: false
 }];
-var _default = exports.default = function _default(_ref) {
+var ApiExample = function ApiExample(_ref) {
   var title = _ref.title,
     descriptionHtml = _ref.descriptionHtml,
     action = _ref.action,
@@ -118,4 +118,5 @@ function renderExample(example, index) {
 }
 function createCurlCommand(example, url) {
   return "curl -X POST '".concat(url, "' -H 'Content-Type: text/plain' -H 'api_key: USER_API_KEY_HERE' -d '").concat(example.body, "'");
-}
+}
+var _default = exports.default = ApiExample;

package/lib/components/dataset-api-doc/dataset-api-doc.js

@@ -107,7 +107,7 @@ function renderExamples(dataset) {
     headers: apiHeaders
   }));
 }
-var _default = exports.default = function _default(_ref) {
+var DatasetApiDoc = function DatasetApiDoc(_ref) {
   var expanded = _ref.expanded,
     dataset = _ref.dataset;
   return /*#__PURE__*/React.createElement("dataset-api-doc", {
@@ -117,4 +117,5 @@ var _default = exports.default = function _default(_ref) {
     headerHtml: renderHeader(),
     expanded: expanded
   }, renderExamples(dataset)));
-};
+};
+var _default = exports.default = DatasetApiDoc;

package/lib/components/dataset-api-doc/dataset-api-doc.test.js

@@ -13,10 +13,9 @@ describe('dataset api doc ', () => {
   let subject
 
   beforeEach(() => {
-    const matchMedia = jest.fn()
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: jest.fn().mockImplementation(query => ({
+      value: jest.fn().mockImplementation(() => ({
         matches: true
       }))
     })

package/lib/components/dataset-dictionary/dataset-dictionary.js

@@ -21,6 +21,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var expanderWidth = 35;
 var expandedArrow = "\u25BE";
 var collapsedArrow = "\u25B8";
+var expandedContentId = function expandedContentId(rowId) {
+  return "schema-row-".concat(String(rowId).replace(/[^a-zA-Z0-9_-]/g, '-'), "-content");
+};
 var isMap = function isMap(schemaElement) {
   return schemaElement.type === 'map' || schemaElement.itemType === 'map';
 };
@@ -39,6 +42,10 @@ var schemaColumns = [{
     var fieldName = getValue();
     var rowIsMap = isMap(row.original);
     var isExpanded = row.getIsExpanded();
+    var handleToggleExpanded = row.getToggleExpandedHandler();
+    var toggleExpanded = function toggleExpanded() {
+      return row.toggleExpanded();
+    };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "field-cell-content"
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
@@ -46,8 +53,16 @@ var schemaColumns = [{
     }), rowIsMap && /*#__PURE__*/_react.default.createElement("button", {
       type: "button",
       className: "field-expander-button",
-      onClick: row.getToggleExpandedHandler(),
+      onClick: handleToggleExpanded,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === ' ') {
+          event.preventDefault();
+          event.stopPropagation();
+          toggleExpanded();
+        }
+      },
       "aria-expanded": isExpanded,
+      "aria-controls": expandedContentId(row.id),
       "aria-label": "".concat(isExpanded ? 'Collapse' : 'Expand', " ").concat(fieldName)
     }, isExpanded ? expandedArrow : collapsedArrow));
   }
@@ -118,18 +133,32 @@ var _SchemaTable = function SchemaTable(_ref3) {
       key: headerGroup.id
     }, headerGroup.headers.map(function (header) {
       var _header$column$column;
+      var canSort = header.column.getCanSort();
+      var isSorted = header.column.getIsSorted();
+      var toggleSort = header.column.getToggleSortingHandler();
+      var headerLabel = String(header.column.columnDef.header);
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
         "aria-label": header.id,
         scope: "col",
         className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header',
         style: {
-          width: header.column.getSize() !== 150 ? "".concat(header.column.getSize(), "px") : undefined,
-          cursor: header.column.getCanSort() ? 'pointer' : undefined
+          width: header.column.getSize() !== 150 ? "".concat(header.column.getSize(), "px") : undefined
+        },
+        "aria-sort": canSort ? isSorted === 'asc' ? 'ascending' : isSorted === 'desc' ? 'descending' : 'none' : undefined
+      }, header.isPlaceholder ? null : canSort ? /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        className: "schema-header-sort-button",
+        onClick: toggleSort,
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            toggleSort(event);
+          }
         },
-        onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined,
-        "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : undefined
-      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? ' ↑' : header.column.getIsSorted() === 'desc' ? ' ↓' : '');
+        "aria-label": "Sort by ".concat(headerLabel)
+      }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), isSorted === 'asc' ? ' ↑' : isSorted === 'desc' ? ' ↓' : '') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), isSorted === 'asc' ? ' ↑' : isSorted === 'desc' ? ' ↓' : ''));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -141,6 +170,7 @@ var _SchemaTable = function SchemaTable(_ref3) {
         className: ((_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className) || ''
       }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
     })), row.getIsExpanded() && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      id: expandedContentId(row.id),
       colSpan: schemaColumns.length
     }, /*#__PURE__*/_react.default.createElement(_SchemaTable, {
       schema: row.original.subSchema,
@@ -163,7 +193,7 @@ var viewLink = function viewLink(datasetId) {
     className: "view-text"
   }, "View as JSON")));
 };
-var _default = exports.default = function _default(_ref4) {
+var DatasetDictionary = function DatasetDictionary(_ref4) {
   var schema = _ref4.schema,
     datasetId = _ref4.datasetId,
     _ref4$expanded = _ref4.expanded,
@@ -180,4 +210,5 @@ var _default = exports.default = function _default(_ref4) {
   }, !isEmpty(schema) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SchemaTable, {
     schema: schema
   }), viewLink(datasetId))));
-};
+};
+var _default = exports.default = DatasetDictionary;

package/lib/components/dataset-dictionary/dataset-dictionary.scss

@@ -30,6 +30,22 @@ dataset-dictionary {
       font-weight: 800;
     }
 
+    .schema-header-sort-button {
+      border: 0;
+      background: transparent;
+      padding: 0;
+      font: inherit;
+      font-weight: inherit;
+      color: inherit;
+      cursor: pointer;
+      text-align: inherit;
+    }
+
+    .schema-header-sort-button:focus-visible {
+      outline: 2px solid $dark-blue;
+      outline-offset: 2px;
+    }
+
     .description-cell {
       white-space: unset;
     }

package/lib/components/dataset-dictionary/dataset-dictionary.test.js

@@ -15,7 +15,7 @@ describe('dataset dictionary', () => {
     beforeEach(() => {
       Object.defineProperty(window, 'matchMedia', {
         writable: true,
-        value: jest.fn().mockImplementation(query => ({
+        value: jest.fn().mockImplementation(() => ({
           matches: true
         }))
       })
@@ -49,8 +49,34 @@ describe('dataset dictionary', () => {
     })
 
     it('is sortable via column headers', () => {
-      const headers = subject.find('.dataset-schema-table th')
-      expect(headers.at(0).prop('onClick')).toBeTruthy()
+      const sortButtons = subject.find('.dataset-schema-table th .schema-header-sort-button')
+      expect(sortButtons.length).toBe(3)
+      expect(sortButtons.at(0).prop('type')).toBe('button')
+    })
+    it('sorts rows when a sort button is activated', () => {
+      const getFieldNames = () => subject.find('.dataset-schema-table tbody tr td:first-child').map(cell => cell.find(Tooltip).prop('text'))
+
+      expect(getFieldNames()).toEqual(['name', 'age'])
+
+      const fieldSortButton = subject.find('.dataset-schema-table th .schema-header-sort-button').at(0)
+      fieldSortButton.simulate('click')
+
+      expect(getFieldNames()).toEqual(['age', 'name'])
+    })
+
+    it('sorts rows when a sort button is activated with space', () => {
+      const getFieldNames = () => subject.find('.dataset-schema-table tbody tr td:first-child').map(cell => cell.find(Tooltip).prop('text'))
+      const preventDefault = jest.fn()
+      const stopPropagation = jest.fn()
+
+      expect(getFieldNames()).toEqual(['name', 'age'])
+
+      const fieldSortButton = subject.find('.dataset-schema-table th .schema-header-sort-button').at(0)
+      fieldSortButton.simulate('keydown', { key: ' ', preventDefault, stopPropagation })
+
+      expect(preventDefault).toHaveBeenCalledTimes(1)
+      expect(stopPropagation).toHaveBeenCalledTimes(1)
+      expect(getFieldNames()).toEqual(['age', 'name'])
     })
 
     it('has no left margin on the top-level table', () => {
@@ -115,6 +141,19 @@ describe('dataset dictionary', () => {
       expect(topLevelTable.find('.field-expander-button').at(0).text()).toBe('▸')
     })
 
+    it('expands map rows when the expander button is activated with space', () => {
+      const expanderButton = topLevelTable.find('.field-expander-button').at(0)
+      expect(subject.find('.dataset-schema-table.mother').length).toBe(0)
+
+      const preventDefault = jest.fn()
+      const stopPropagation = jest.fn()
+      expanderButton.simulate('keydown', { key: ' ', preventDefault, stopPropagation })
+
+      expect(preventDefault).toHaveBeenCalledTimes(1)
+      expect(stopPropagation).toHaveBeenCalledTimes(1)
+      expect(subject.find('.dataset-schema-table.mother').length).toBe(1)
+    })
+
     describe('with the map type expanded', () => {
       let subTable, subTableCells
 
@@ -130,6 +169,14 @@ describe('dataset dictionary', () => {
         expect(topLevelTable.find('.field-expander-button').at(0).text()).toBe('▾')
       })
 
+      it('connects expander controls to expanded content', () => {
+        const expanderButton = topLevelTable.find('.field-expander-button').at(0)
+        const controlsId = expanderButton.prop('aria-controls')
+
+        expect(controlsId).toBeTruthy()
+        expect(topLevelTable.find(`#${controlsId}`).length).toBe(1)
+      })
+
       it('renders a sub table for the map with correct values', () => {
         expect(subTable.length).toBe(1)
       })

package/lib/components/dataset-list/dataset-list.js

@@ -13,10 +13,11 @@ var createDatasetCard = function createDatasetCard(dataset) {
     dataset: dataset
   });
 };
-var _default = exports.default = function _default(_ref) {
+var DatasetList = function DatasetList(_ref) {
   var _ref$datasets = _ref.datasets,
     datasets = _ref$datasets === void 0 ? [] : _ref$datasets;
   return /*#__PURE__*/React.createElement("dataset-list", {
     "data-testid": "dataset-list"
   }, datasets.map(createDatasetCard) || /*#__PURE__*/React.createElement("div", null));
-};
+};
+var _default = exports.default = DatasetList;