@urbanos/react-discovery-ui 2.1.55 → 2.1.57

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

@@ -51,6 +51,7 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
         },
         padding: 10,
         onBlur: this.props.onBlur,
+        ignoreTabKey: true,
         style: {
           fontFamily: '"Fira code", "Fira Mono", monospace',
           fontSize: 12,

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

@@ -175,8 +175,6 @@ var DataTable = function DataTable(_ref) {
     if (coords) activateCell(coords.row, coords.col);
   };
   var dataRows = table.getRowModel().rows;
-  var pageIndex = pagination.pageIndex;
-  var pageSize = pagination.pageSize;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '400px',
@@ -184,30 +182,22 @@ var DataTable = function DataTable(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     ref: tableRef,
-    role: "grid",
     tabIndex: 0,
-    "aria-activedescendant": activeCellId,
-    "aria-rowcount": dataRows.length + 1,
-    "aria-colcount": columns.length,
     style: {
-      width: table.getTotalSize()
+      width: table.getTotalSize() == 0 ? '100%' : table.getTotalSize()
     },
     onClick: handleTableClick
   }, /*#__PURE__*/_react.default.createElement("caption", null, datasetName ? "".concat(datasetName, " Dataset Preview") : 'Dataset Preview'), /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement("tr", {
-      key: headerGroup.id,
-      role: "row",
-      "aria-rowindex": 1
+      key: headerGroup.id
     }, headerGroup.headers.map(function (header, colIndex) {
       var _header$column$column;
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
         id: colHeaderId(colIndex),
-        role: "columnheader",
         scope: "col",
         "data-row": 0,
         "data-col": colIndex,
-        "aria-colindex": colIndex + 1,
         className: "".concat(((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header').concat(activeCellId === colHeaderId(colIndex) ? ' active-cell' : ''),
         style: {
           width: header.getSize(),
@@ -220,40 +210,30 @@ var DataTable = function DataTable(_ref) {
         "aria-hidden": "true"
       }));
     }));
-  })), /*#__PURE__*/_react.default.createElement("tbody", null, dataRows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
-    role: "row"
-  }, /*#__PURE__*/_react.default.createElement("td", {
-    role: "gridcell",
-    colSpan: columns.length,
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, dataRows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: Math.max(columns.length, 1),
     className: "no-data-message"
   }, "No rows found")) : dataRows.map(function (row, rowIndex) {
     var tableRow = rowIndex + 1;
-    var ariaRowIndex = pageIndex * pageSize + rowIndex + 2; // +1 for header, +1 for 1-based
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: row.id,
-      role: "row",
-      "aria-rowindex": ariaRowIndex,
       className: rowIndex % 2 === 0 ? 'striped-row' : ''
     }, row.getVisibleCells().map(function (cell, colIndex) {
       var content = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
       return colIndex === 0 ? /*#__PURE__*/_react.default.createElement("th", {
         key: cell.id,
         id: rowHeaderId(rowIndex),
-        role: "rowheader",
         scope: "row",
         headers: colHeaderId(0),
         "data-row": tableRow,
         "data-col": colIndex,
-        "aria-colindex": 1,
         className: "row-header".concat(activeCellId === rowHeaderId(rowIndex) ? ' active-cell' : '')
       }, content) : /*#__PURE__*/_react.default.createElement("td", {
         key: cell.id,
         id: dataCellId(rowIndex, colIndex),
-        role: "gridcell",
         headers: "".concat(colHeaderId(colIndex), " ").concat(rowHeaderId(rowIndex)),
         "data-row": tableRow,
         "data-col": colIndex,
-        "aria-colindex": colIndex + 1,
         className: activeCellId === dataCellId(rowIndex, colIndex) ? 'active-cell' : undefined
       }, content);
     }));
@@ -266,6 +246,9 @@ var DataTable = function DataTable(_ref) {
     disabled: !table.getCanPreviousPage(),
     "aria-label": "Previous page"
   }, '<'), /*#__PURE__*/_react.default.createElement("span", null, "Page", ' ', /*#__PURE__*/_react.default.createElement("input", {
+    id: "page-number-input",
+    type: "number",
+    label: "Page number input",
     "data-testid": "page-number-input",
     value: table.getState().pagination.pageIndex + 1,
     onChange: function onChange(e) {

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

@@ -88,7 +88,6 @@ var MetadataTable = function MetadataTable(_ref) {
   })));
 };
 var _default = exports.default = function _default(_ref2) {
-  var _dataset$homepage, _dataset$sourceUrl, _dataset$license;
   var dataset = _ref2.dataset;
   if (!dataset) return /*#__PURE__*/_react.default.createElement("div", null);
   var referenceUrls = dataset.referenceUrls || [];
@@ -119,10 +118,8 @@ var _default = exports.default = function _default(_ref2) {
   }, {
     Field: 'Data Dictionary URL',
     Value: dataset.describedByUrl ? /*#__PURE__*/_react.default.createElement("a", {
-      role: "link",
       href: dataset.describedByUrl,
       target: "_blank",
-      "aria-label": "Data Dictionary URL",
       rel: "noreferrer"
     }, dataset.describedByUrl) : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
   }, {
@@ -137,46 +134,38 @@ var _default = exports.default = function _default(_ref2) {
   }, {
     Field: 'Homepage URL',
     Value: dataset.homepage ? /*#__PURE__*/_react.default.createElement("a", {
-      role: "link",
       href: dataset.homepage,
       target: "_blank",
-      "aria-label": "Homepage URL",
       rel: "noreferrer"
-    }, (_dataset$homepage = dataset.homepage) !== null && _dataset$homepage !== void 0 ? _dataset$homepage : 'Unavailable') : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
+    }, dataset.homepage) : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
   }, {
     Field: 'Related Documents',
     Value: referenceUrls.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, "None") : referenceUrls.map(function (url) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: url
       }, /*#__PURE__*/_react.default.createElement("a", {
-        role: "link",
         href: url,
         target: "_blank",
-        "aria-label": "Related Document URL",
         rel: "noreferrer"
       }, url));
     })
   }, {
     Field: 'Source URL',
     Value: dataset.sourceUrl ? /*#__PURE__*/_react.default.createElement("a", {
-      role: "link",
       href: dataset.sourceUrl,
       target: "_blank",
-      "aria-label": "Source URL",
       rel: "noreferrer"
-    }, (_dataset$sourceUrl = dataset.sourceUrl) !== null && _dataset$sourceUrl !== void 0 ? _dataset$sourceUrl : 'Unavailable') : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
+    }, dataset.sourceUrl) : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
   }, {
     Field: 'Source Type',
     Value: dataset.sourceType
   }, {
     Field: 'License',
     Value: dataset.license ? /*#__PURE__*/_react.default.createElement("a", {
-      role: "link",
       href: dataset.license,
       target: "_blank",
-      "aria-label": "License URL",
       rel: "noreferrer"
-    }, (_dataset$license = dataset.license) !== null && _dataset$license !== void 0 ? _dataset$license : 'Unavailable') : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
+    }, dataset.license) : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
   }, {
     Field: 'Category',
     Value: dataset.catagories
@@ -205,7 +194,6 @@ var _default = exports.default = function _default(_ref2) {
 function mailto(email, name) {
   if (email) {
     return /*#__PURE__*/_react.default.createElement("a", {
-      role: "link",
       href: 'mailto:' + email
     }, name);
   } else {

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

@@ -31,4 +31,8 @@ dataset-metadata {
   a {
     @include sub-link();
   }
+
+  td {
+    overflow-wrap: anywhere;
+  }
 }

package/lib/components/facet-sidebar/facet-sidebar.scss

@@ -6,8 +6,6 @@
   flex-direction: column;
   padding: 0 2em 0 0;
   float: left;
-  margin-top: 20px;
-
 }
 
 .checkbox-label {
@@ -98,9 +96,6 @@
     background-size: 28px 28px;
   }
 
-  login-zone login-svgs-and-text span {
-    display: none;
-  }
 
   login-zone login-svgs-and-text .MuiSvgIcon-root {
     font-size: 2.4rem;

package/lib/components/generic-elements/arrow-left-button/arrow-left-button.js

@@ -17,6 +17,7 @@ var _default = exports.default = function _default(_ref) {
     innerClass = _ref.innerClass;
   return /*#__PURE__*/React.createElement("button", {
     disabled: disabled,
+    "aria-label": "Previous page",
     className: "".concat(className, " ").concat(disabled ? 'disabled' : ''),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(_arrow_left.default, {

package/lib/components/generic-elements/arrow-right-button/arrow-right-button.js

@@ -17,6 +17,7 @@ var _default = exports.default = function _default(_ref) {
     innerClass = _ref.innerClass;
   return /*#__PURE__*/React.createElement("button", {
     disabled: disabled,
+    "aria-label": "Next page",
     className: "".concat(className, " ").concat(disabled ? 'disabled' : ''),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(_arrow_right.default, {

package/lib/components/organization/organization.js

@@ -12,6 +12,7 @@ var _default = exports.default = function _default(_ref) {
     className: "organization-header"
   }, "Organization Info"), /*#__PURE__*/React.createElement("a", {
     role: "link",
+    "aria-label": "View ".concat(organization.title, " datasets"),
     href: "/?".concat(_utils.QueryStringBuilder.createFilterQueryString('organization', organization.title))
   }, /*#__PURE__*/React.createElement("img", {
     "data-testid": "organization-logo",

package/lib/components/share/share.scss

@@ -63,4 +63,21 @@ share-zone {
         display: flex;
         padding: 6px;
     }
-}
+
+    @media only screen and (max-width: 600px) {
+        .share-icons {
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .shareButton {
+            margin: 0;
+            flex: 0 0 32px;
+        }
+
+        .button.clipboard {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}

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

@@ -2,6 +2,22 @@
 
 dataset-detail-view {
   @include page-with-left-bar();
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+
+  .left-section {
+    float: none;
+    width: min-content;
+    flex: 0 0 auto;
+  }
+
+  .right-section {
+    float: none;
+    width: auto;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
 
   dataset-api-doc {
     margin-top: 2.5rem
@@ -61,24 +77,22 @@ dataset-detail-view {
   }
 
   @media only screen and (max-width: 600px) {
+    display: block;
+
     .dataset-detail-view {
       min-width:400px;
       padding:4%;  
     }
-    dataset-view .header {
-      display:none;
-    } 
     .left-section, .right-section {
       width:100%;
-      float:left;
+      float:none;
       clear:both;
       display:block;
     }
     dataset-organization .logo {
-      display:none;
-    }
-    share-zone {
-      display:none;
+      display:block;
+      max-width:120px;
+      margin:0.75rem 0;
     }
     .download-button {
       display:none;
@@ -93,7 +107,7 @@ dataset-detail-view {
       font-weight:normal;
     } 
     dataset-organization .organization-header {
-      display:none;
+      display:block;
     }
     dataset-details .name {
       font-size:1.5rem;
@@ -116,7 +130,9 @@ dataset-detail-view {
       text-transform:uppercase;
     }
     dataset-organization .description {
-      display:none;
+      display:block;
+      font-size:0.9rem;
+      line-height:1.3;
     } 
     api-example .example-table {
       font-size:0.8em;

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

@@ -81,11 +81,7 @@ var DatasetListView = function DatasetListView(props) {
     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, {
+  }, /*#__PURE__*/React.createElement(_auth0LoginZone.default, null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_checkbox.default, {
     id: "toggleAPIDatasets",
     clickHandler: searchParamsManager.toggleApiAccessible,
     text: "Only Show API Accessible Datasets",

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

@@ -41,12 +41,21 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, _default);
     _this.state = {
       index: 0,
-      localTitle: ''
+      localTitle: '',
+      isMobileMenuOpen: false
     };
     return _this;
   }
   _inherits(_default, _Component);
   return _createClass(_default, [{
+    key: "selectTab",
+    value: function selectTab(tabIndex) {
+      this.setState({
+        index: tabIndex,
+        isMobileMenuOpen: false
+      });
+    }
+  }, {
     key: "generateVisualizationLink",
     value: function generateVisualizationLink() {
       return this.props.visualizationId && (0, _reactRouter.generatePath)(_routes.default.visualizationView, {
@@ -117,9 +126,7 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         className: "dataset-view",
         selectedIndex: this.state.index,
         onSelect: function onSelect(tabIndex) {
-          return _this2.setState({
-            index: tabIndex
-          });
+          return _this2.selectTab(tabIndex);
         }
       }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
         className: "header"
@@ -148,7 +155,39 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         target: "_blank",
         href: "https://plotly.com/chart-studio-help/tutorials/#basic",
         rel: "noreferrer"
-      }, "Plot.ly Help")))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
+      }, "Plot.ly Help")))), /*#__PURE__*/_react.default.createElement("div", {
+        className: "mobile-tab-menu"
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        className: "mobile-tab-toggle",
+        onClick: function onClick() {
+          return _this2.setState(function (_ref2) {
+            var isMobileMenuOpen = _ref2.isMobileMenuOpen;
+            return {
+              isMobileMenuOpen: !isMobileMenuOpen
+            };
+          });
+        },
+        "aria-label": "Open tab menu",
+        "aria-expanded": this.state.isMobileMenuOpen
+      }, "\u2630"), this.state.isMobileMenuOpen && /*#__PURE__*/_react.default.createElement("div", {
+        className: "mobile-tab-dropdown"
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          return _this2.selectTab(0);
+        }
+      }, "Dataset Details"), /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          return _this2.selectTab(1);
+        }
+      }, "Write SQL"), this.isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          return _this2.selectTab(2);
+        }
+      }, "Visualize"))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
         className: "action-area"
       }, /*#__PURE__*/_react.default.createElement(_visualizationListMenuItem.default, {
         isAuthenticated: this.props.auth.isAuthenticated

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

@@ -92,4 +92,56 @@ dataset-view {
   loading-element {
     @include default-loading-icon();
   }
+
+  .mobile-tab-menu {
+    display: none;
+    position: relative;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tab-area {
+      font-size: small;
+    }
+    
+    .react-tabs__tab {
+      padding: 6px 12px;
+    }
+
+    .mobile-tab-menu {
+      display: block;
+    }
+
+    .mobile-tab-toggle {
+      border: 0;
+      background: transparent;
+      font-size: 22px;
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+
+    .mobile-tab-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 20;
+      background: white;
+      border: 1px solid $light-grey;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+
+    .mobile-tab-dropdown button {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 10px 12px;
+      border: 0;
+      background: white;
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme'
-import { Tab, TabPanel, TabList } from 'react-tabs'
+import { Tab, TabPanel, TabList, Tabs } from 'react-tabs'
 
 import DatasetView from './dataset-view'
 import QueryView from '../query-view'
@@ -62,6 +62,60 @@ describe('dataset view', () => {
     expect(subject.find(VisualizationSaveMenuItem)).toHaveLength(0)
     expect(subject.find(VisualizationListMenuItem)).toHaveLength(0)
   })
+
+  describe('mobile tab menu', () => {
+    it('renders mobile menu toggle button', () => {
+      const mobileMenuToggle = subject.find('.mobile-tab-toggle')
+      expect(mobileMenuToggle).toHaveLength(1)
+      expect(mobileMenuToggle.prop('aria-expanded')).toBe(false)
+    })
+
+    it('toggles dropdown open and closed when menu button is clicked', () => {
+      subject.find('.mobile-tab-toggle').simulate('click')
+      expect(subject.state('isMobileMenuOpen')).toBe(true)
+      expect(subject.find('.mobile-tab-dropdown')).toHaveLength(1)
+
+      subject.find('.mobile-tab-toggle').simulate('click')
+      expect(subject.state('isMobileMenuOpen')).toBe(false)
+      expect(subject.find('.mobile-tab-dropdown')).toHaveLength(0)
+    })
+
+    it('selecting Dataset Details from dropdown sets index to 0 and closes menu', () => {
+      subject.setState({ index: 2, isMobileMenuOpen: true })
+
+      subject.find('.mobile-tab-dropdown button').at(0).simulate('click')
+
+      expect(subject.state('index')).toBe(0)
+      expect(subject.state('isMobileMenuOpen')).toBe(false)
+    })
+
+    it('selecting Write SQL from dropdown sets index to 1 and closes menu', () => {
+      subject.setState({ index: 0, isMobileMenuOpen: true })
+
+      subject.find('.mobile-tab-dropdown button').at(1).simulate('click')
+
+      expect(subject.state('index')).toBe(1)
+      expect(subject.state('isMobileMenuOpen')).toBe(false)
+    })
+
+    it('selecting Visualize from dropdown sets index to 2 when visualizations are enabled', () => {
+      subject.setState({ index: 0, isMobileMenuOpen: true })
+
+      subject.find('.mobile-tab-dropdown button').at(2).simulate('click')
+
+      expect(subject.state('index')).toBe(2)
+      expect(subject.state('isMobileMenuOpen')).toBe(false)
+    })
+
+    it('closes mobile menu when selecting a tab via Tabs onSelect callback', () => {
+      subject.setState({ isMobileMenuOpen: true })
+
+      subject.find(Tabs).prop('onSelect')(1)
+
+      expect(subject.state('index')).toBe(1)
+      expect(subject.state('isMobileMenuOpen')).toBe(false)
+    })
+  })
 })
 
 describe('Visualizations when DISABLE_VISUALIZATIONS is true', () => {
@@ -87,6 +141,11 @@ describe('Visualizations when DISABLE_VISUALIZATIONS is true', () => {
     const test = subject.find('#plotlyhelp')
     expect(test.length).toEqual(0)
   })
+
+  it('does not have the visualize option in the mobile tab dropdown', () => {
+    subject.find('.mobile-tab-toggle').simulate('click')
+    expect(subject.find('.mobile-tab-dropdown button')).toHaveLength(2)
+  })
 })
 
 describe('dataset view when dataset is not loaded', () => {

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

@@ -107,9 +107,4 @@ visualization-view {
   .visualization--selected {
     display: flex;
   }
-  @media only screen and (max-width: 600px) {
-    .header {
-      display:none;
-    } 
-  } 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.55",
+  "version": "2.1.57",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {