@urbanos/react-discovery-ui 2.1.43

package/lib/components/query-form/query-form.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./query-form.scss");
+require("@trendmicro/react-buttons/dist/react-buttons.css");
+require("@trendmicro/react-dropdown/dist/react-dropdown.css");
+var _reactDropdown2 = _interopRequireWildcard(require("@trendmicro/react-dropdown"));
+var _loadingElement = _interopRequireDefault(require("../generic-elements/loading-element"));
+var _recommendationList = _interopRequireDefault(require("../recommendation-list"));
+var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _MergeType = _interopRequireDefault(require("@material-ui/icons/MergeType"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactRouterDom = require("react-router-dom");
+var _codeEditor = _interopRequireDefault(require("../code-editor"));
+var _js2xmlparser = require("js2xmlparser");
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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 QueryForm = function QueryForm(props) {
+  var queryText = props.queryText,
+    recommendations = props.recommendations,
+    usedDatasets = props.usedDatasets,
+    datasetReferences = props.datasetReferences,
+    isQueryLoading = props.isQueryLoading,
+    queryFailureMessage = props.queryFailureMessage,
+    isQueryDataAvailable = props.isQueryDataAvailable,
+    queryData = props.queryData,
+    executeQuery = props.executeQuery,
+    cancelQuery = props.cancelQuery,
+    setQueryText = props.setQueryText;
+  var _useState = (0, _react.useState)(queryText),
+    _useState2 = _slicedToArray(_useState, 2),
+    localQueryText = _useState2[0],
+    setLocalQueryText = _useState2[1];
+  React.useEffect(function () {
+    setLocalQueryText(queryText);
+  }, [queryText]);
+  var updateReduxQueryText = function updateReduxQueryText(e) {
+    setQueryText(e.target.value);
+    setLocalQueryText(e.target.value);
+  };
+  var submit = function submit() {
+    executeQuery(localQueryText);
+  };
+  var cancel = function cancel() {
+    cancelQuery();
+  };
+  var textArea = /*#__PURE__*/React.createElement(_codeEditor.default, {
+    code: localQueryText,
+    onBlur: updateReduxQueryText,
+    "data-testid": "query-input",
+    "aria-label": "SQL Query Input"
+  });
+  var submitButton = /*#__PURE__*/React.createElement("button", {
+    "data-testid": "submit-query-button",
+    className: "action-button",
+    disabled: isQueryLoading,
+    onClick: submit
+  }, "Submit");
+  var cancelButton = /*#__PURE__*/React.createElement("button", {
+    "data-testid": "cancel-query-button",
+    className: "action-button",
+    disabled: !isQueryLoading,
+    onClick: cancel
+  }, "Cancel");
+  var showSuccessMessage = !queryFailureMessage && isQueryDataAvailable && !isQueryLoading;
+  var successMessage = showSuccessMessage && /*#__PURE__*/React.createElement("span", {
+    "data-testid": "success-message",
+    className: "success-message"
+  }, "Query successful");
+  var showFailureMessage = queryFailureMessage && !isQueryLoading;
+  var failureMessage = showFailureMessage && /*#__PURE__*/React.createElement("span", {
+    "data-testid": "error-message",
+    className: "error-message"
+  }, /*#__PURE__*/React.createElement("span", null, "Query Failed"), /*#__PURE__*/React.createElement("div", null, queryFailureMessage));
+  var recommendationSection = function recommendationSection() {
+    var toolTipText = 'These datasets have related fields or columns that may be suitable for joining in your query';
+    if (!_lodash.default.isEmpty(recommendations)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "recommendation-section link-list"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React.createElement("span", null, "Recommendations"), /*#__PURE__*/React.createElement(_reactTooltip.default, {
+        effect: "solid"
+      }), /*#__PURE__*/React.createElement(_InfoOutlined.default, {
+        className: "info-icon",
+        "data-tip": toolTipText
+      })), /*#__PURE__*/React.createElement(_recommendationList.default, {
+        recommendations: recommendations
+      }));
+    }
+  };
+  var createDatasetLinks = function createDatasetLinks(datasetIds) {
+    return datasetIds.map(function (datasetId) {
+      var dataset = datasetReferences[datasetId];
+      if (!dataset) {
+        return;
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        className: "dataset-reference",
+        key: datasetId
+      }, /*#__PURE__*/React.createElement(_MergeType.default, {
+        className: "icon"
+      }), /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+        target: "_blank",
+        to: "/dataset/".concat(dataset.org, "/").concat(dataset.name)
+      }, dataset.title));
+    });
+  };
+  var usedDatasetsSection = function usedDatasetsSection() {
+    var toolTipText = 'These datasets are used in the query. This list is regenerated whenever the visualization is saved.';
+    if (!_lodash.default.isEmpty(usedDatasets)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "link-list"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React.createElement("span", null, "Used Datasets"), /*#__PURE__*/React.createElement(_reactTooltip.default, {
+        effect: "solid"
+      }), /*#__PURE__*/React.createElement(_InfoOutlined.default, {
+        className: "info-icon",
+        "data-tip": toolTipText
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "used-datasets-section"
+      }, createDatasetLinks(usedDatasets)));
+    }
+  };
+  var dataObj, data, tempLink;
+  var queryDataDownloadLinkAsCsv = function queryDataDownloadLinkAsCsv() {
+    dataObj = queryDataToCSV(queryData);
+    data = new Blob([dataObj], {
+      type: "application/json"
+    });
+    tempLink = document.createElement('a');
+    tempLink.href = window.URL.createObjectURL(data);
+    tempLink.setAttribute('download', 'query_results.csv');
+    tempLink.click();
+  };
+  var queryDataDownloadLinkAsJson = function queryDataDownloadLinkAsJson() {
+    dataObj = JSON.stringify(queryData);
+    data = new Blob([dataObj], {
+      type: "text/csv"
+    });
+    tempLink = document.createElement('a');
+    tempLink.href = window.URL.createObjectURL(data);
+    tempLink.setAttribute('download', 'query_results.json');
+    tempLink.click();
+  };
+  var queryDataDownloadLinkAsXml = function queryDataDownloadLinkAsXml() {
+    dataObj = (0, _js2xmlparser.parse)("results", queryData);
+    data = new Blob([dataObj], {
+      type: "application/xml"
+    });
+    tempLink = document.createElement('a');
+    tempLink.href = window.URL.createObjectURL(data);
+    tempLink.setAttribute('download', 'query_results.xml');
+    tempLink.click();
+  };
+  var keys, csv, row;
+  var queryDataToCSV = function queryDataToCSV(dataObj) {
+    if (dataObj == undefined || dataObj == null || dataObj == []) return '';
+    row = dataObj[0];
+    if (row == undefined || row == null) return '';
+    keys = Object.keys(row);
+    csv = keys.join(',') + '\n';
+    dataObj.forEach(function (row) {
+      Object.values(row).forEach(function (colVal) {
+        colVal = parseJsonStringField(colVal);
+        colVal = prepareFieldForCSV(colVal);
+        csv += colVal + ',';
+      });
+      csv += '\n';
+    });
+    return csv;
+  };
+  var prepareFieldForCSV = function prepareFieldForCSV(colVal) {
+    if (colVal == null) {
+      colVal = '';
+    } else if (_typeof(colVal) === 'object') {
+      colVal = JSON.stringify(colVal);
+      colVal = colVal.replaceAll('"', '""');
+      colVal = "\"".concat(colVal, "\"");
+    } else {
+      colVal = "\"".concat(colVal, "\"");
+    }
+    return colVal;
+  };
+  var parseJsonStringField = function parseJsonStringField(stringifiedJson) {
+    try {
+      return JSON.parse(stringifiedJson);
+    } catch (error) {
+      return stringifiedJson;
+    }
+  };
+  var downloadButtonColor = window.PRIMARY_COLOR || '#0F64B3';
+  return /*#__PURE__*/React.createElement("query-form", null, /*#__PURE__*/React.createElement("h1", null, "Query Dataset"), /*#__PURE__*/React.createElement("div", {
+    className: "user-input"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sql-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    for: "code-editor",
+    className: "sql-title"
+  }, "Enter your SQL query below. For best performance, you should limit your results to no more than 20,000 rows."), textArea), /*#__PURE__*/React.createElement("div", {
+    className: "query-info"
+  }, recommendationSection(), usedDatasetsSection())), /*#__PURE__*/React.createElement("div", {
+    className: "query-form__btn-group"
+  }, submitButton, cancelButton, successMessage, /*#__PURE__*/React.createElement(_reactDropdown2.default, {
+    className: "download-dropdown",
+    disabled: isQueryLoading
+  }, /*#__PURE__*/React.createElement(_reactDropdown2.default.Toggle, {
+    title: "Download Returned Results",
+    style: {
+      background: downloadButtonColor,
+      color: 'white',
+      border: 'none',
+      padding: '1rem'
+    }
+  }), /*#__PURE__*/React.createElement(_reactDropdown2.default.MenuWrapper, null, /*#__PURE__*/React.createElement(_reactDropdown2.default.Menu, null, /*#__PURE__*/React.createElement(_reactDropdown2.MenuItem, {
+    onKeyDown: function onKeyDown(event) {
+      return (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsCsv();
+    },
+    onClick: function onClick() {
+      return queryDataDownloadLinkAsCsv();
+    }
+  }, "CSV"), /*#__PURE__*/React.createElement(_reactDropdown2.MenuItem, {
+    onKeyDown: function onKeyDown(event) {
+      return (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsJson();
+    },
+    onClick: function onClick() {
+      return queryDataDownloadLinkAsJson();
+    }
+  }, "JSON"), /*#__PURE__*/React.createElement(_reactDropdown2.MenuItem, {
+    onKeyDown: function onKeyDown(event) {
+      return (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsJson();
+    },
+    onClick: function onClick() {
+      return queryDataDownloadLinkAsXml();
+    }
+  }, "XML")))), failureMessage, isQueryLoading && /*#__PURE__*/React.createElement(_loadingElement.default, null)));
+};
+QueryForm.propTypes = {
+  queryText: _propTypes.default.string,
+  recommendations: _propTypes.default.array,
+  queryFailureMessage: _propTypes.default.string,
+  isQueryDataAvailable: _propTypes.default.bool,
+  isQueryLoading: _propTypes.default.bool.isRequired,
+  executeQuery: _propTypes.default.func.isRequired,
+  cancelQuery: _propTypes.default.func.isRequired,
+  setQueryText: _propTypes.default.func.isRequired
+};
+var _default = exports.default = QueryForm;

package/lib/components/query-form/query-form.scss

@@ -0,0 +1,167 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+query-form {
+  $default-margin: 1.25rem;
+
+  margin: $default-margin;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .action-button {
+    @include button();
+    padding: 1rem;
+    background-color: $light-blue;
+    color: white;
+    letter-spacing: 0.05rem;
+    margin: 1rem 1rem 1rem 0rem;
+  }
+
+  .download-dropdown {
+    float: right;
+    margin-top: 1rem;
+
+    .dropdown---caret---3CkEt {
+      border-top: 4px dashed $super-light-grey;
+    }
+
+    .dropdown---dropdown-menu-wrapper---3gX-X,
+    .dropdown---dropdown-menu---1fkH0 {
+      width: -webkit-fill-available;
+    }
+
+    .dropdown---menu-item---1LjoL {
+      text-align: right;
+    }
+
+    a {
+      text-decoration: none;
+      color: black;
+    }
+  }
+
+  .query-form__btn-group {
+    width: 100%;
+  }
+
+  button:disabled,
+  button:disabled:hover {
+    background: #efefef;
+    border: 1px solid #b1bbc9;
+    color: #a2a9b3;
+    text-decoration: none;
+    cursor: default;
+  }
+
+  .error-message {
+    color: $error-color;
+  }
+
+  loading-element {
+    display: inline-block;
+    width: 3rem;
+    margin: 0;
+    vertical-align: middle;
+  }
+
+  .recommended-dataset {
+    width: 20em;
+    display: inline-block;
+  }
+
+  textarea {
+    width: 100%;
+    border-color: black;
+    resize: none;
+  }
+
+  .user-input {
+    width: 100%;
+    display: flex;
+    margin-right: 2rem;
+  }
+
+  .dataset-reference {
+    margin-bottom: 0.7rem;
+    display: block;
+
+    .icon {
+      vertical-align: top;
+      margin-right: 0.4rem;
+      width: 10%;
+      height: 1.4rem;
+    }
+
+    a {
+      @include link();
+      color: $dark-blue;
+
+      &:hover {
+        color: $almost-black;
+      }
+
+      &:active {
+        color: $medium-grey
+      }
+    }
+  }
+
+  .sql-title {
+    margin-bottom: $default-margin;
+  }
+
+  .sql-textbox {
+    padding: 0.5rem;
+  }
+
+  .sql-section {
+    width: 70%;
+    flex-grow: 3;
+  }
+
+  .query-info {
+    width: 30%;
+  }
+
+  .link-list {
+    margin-left: 3rem;
+    padding-bottom: 1rem;
+    flex-grow: 1;
+
+    .title {
+      margin-bottom: $default-margin;
+
+      span {
+        font-weight: bold;
+      }
+
+      .info-icon {
+        height: 1rem;
+      }
+    }
+  }
+
+  .used-datasets-section {
+    border: 1px solid $light-grey;
+    max-height: 100%;
+    overflow-y: auto;
+    border: 1px solid $almost-black;
+    display: inline-block;
+    padding: 0.5rem;
+
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+
+    &::-webkit-scrollbar:vertical {
+      width: 11px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 8px;
+      border: 2px solid white;
+      background-color: $almost-black;
+    }
+  }
+}

package/lib/components/query-form/query-form.test.js

@@ -0,0 +1,248 @@
+import { mount } from 'enzyme'
+import QueryForm from './query-form'
+import { BrowserRouter as Router } from 'react-router-dom'
+import LoadingElement from '../generic-elements/loading-element'
+import RecommendationList from '../recommendation-list'
+import { recommendations } from '../../../test-helpers/recommendations'
+
+let subject, queryCallback, updateCallback
+
+describe('QueryForm', () => {
+  describe('on initial running query', () => {
+    beforeEach(() => {
+      subject = createSubject({ isQueryLoaded: false, isQueryLoading: true })
+    })
+
+    test('shows loading component', () => {
+      expect(subject.find(LoadingElement).length).toEqual(1)
+    })
+  })
+
+  describe('on user editing query', () => {
+    beforeEach(() => {
+      updateCallback = jest.fn()
+      subject = createSubject({ setQueryText: updateCallback })
+      subject.find('textarea').simulate('blur')
+    })
+
+    test('triggers query update callback', () => {
+      expect(updateCallback).toHaveBeenCalled()
+    })
+  })
+
+  describe('on user submitted running query', () => {
+    const cancelCallback = jest.fn()
+    beforeEach(() => {
+      queryCallback = jest.fn()
+      subject = createSubject({ executeQuery: queryCallback, isQueryLoading: true, cancelQuery: cancelCallback })
+    })
+
+    test('shows loading component', () => {
+      expect(subject.find(LoadingElement).length).toEqual(1)
+    })
+
+    test('hides success and error text', () => {
+      expect(subject.find('.success-message').length).toEqual(0)
+      expect(subject.find('.error-message').length).toEqual(0)
+    })
+
+    test('sets the cancel button to enabled', () => {
+      const button = getButton(subject, 'Cancel')
+      expect(button.find('[disabled=false]').length).toEqual(1)
+    })
+
+    test('sets the submit button to disabled', () => {
+      const button = getButton(subject, 'Submit')
+      expect(button.find('[disabled=true]').length).toEqual(1)
+    })
+
+    test('sets the download button to disabled', () => {
+      const button = subject.find('.download-dropdown button')
+      expect(button.find('[disabled=true]').length).toEqual(1)
+    })
+
+    test('cancelling the query invokes a provided cancel handler', () => {
+      getButton(subject, 'Cancel').simulate('click')
+      expect(cancelCallback).toHaveBeenCalled()
+    })
+  })
+
+  describe('after cancel button click', () => {
+    beforeEach(() => {
+      subject = createSubject({ isQueryLoading: true })
+
+      getButton(subject, 'Cancel').simulate('click')
+      subject.setProps({ queryFailureMessage: 'Query cancelled by user.' })
+    })
+
+    test('cancelling the query sets the cancelled state to true', () => {
+      subject.setProps({ isQueryLoading: false })
+      expect(subject.find('.error-message').text()).toContain('Query cancelled by user.')
+    })
+
+    test('resubmitting the query sets the cancelled state to false', () => {
+      getButton(subject, 'Submit').simulate('click')
+      subject.setProps({ isLoading: true })
+
+      expect(subject.find('.error-message').length).toEqual(0)
+    })
+  })
+
+  describe('after initial load', () => {
+    beforeEach(() => {
+      subject = createSubject({ isQueryLoaded: false })
+    })
+
+    test('do not show success text', () => {
+      expect(subject.find('.success-message').length).toEqual(0)
+    })
+
+    test('defaults the query input field to use the default query', () => {
+      expect(subject.find('textarea').render().text()).toEqual('SELECT * FROM sky')
+    })
+
+    test('defaults the cancel button to disabled', () => {
+      const button = getButton(subject, 'Cancel')
+      expect(button.find('[disabled=true]').length).toEqual(1)
+    })
+
+    test('defaults the submit button to enabled', () => {
+      const button = getButton(subject, 'Submit')
+      expect(button.find('[disabled=false]').length).toEqual(1)
+    })
+
+    test('defaults the download button to enabled', () => {
+      const button = subject.find('.download-dropdown button')
+      expect(button.find('[disabled=false]').length).toEqual(1)
+    })
+
+    test('disables cancel button', () => {
+      const button = getButton(subject, 'Cancel')
+      expect(button.find('[disabled=true]').length).toEqual(1)
+    })
+  })
+
+  describe('on success', () => {
+    beforeEach(() => {
+      subject = createSubject({ isQueryLoading: false, isQueryLoaded: true, isQueryDataAvailable: true })
+    })
+
+    test('calls the submit handler on click of the submit button', () => {
+      const newText = 'SELECT * FROM great_org__awesome_dataset LIMIT 55'
+      const queryInput = subject.find('textarea')
+      queryInput.instance().value = newText
+      queryInput.simulate('blur')
+
+      getButton(subject, 'Submit').simulate('click')
+      expect(queryCallback).toHaveBeenCalledWith(newText)
+    })
+
+    test('hides loading element', () => {
+      expect(subject.find(LoadingElement).length).toEqual(0)
+    })
+
+    test('shows success text', () => {
+      expect(subject.find('.success-message').length).toEqual(1)
+    })
+  })
+
+  describe('on failure', () => {
+    beforeEach(() => {
+      subject = createSubject({ queryFailureMessage: 'the bad thing happened', isQueryLoaded: false })
+    })
+
+    test('shows error message', () => {
+      expect(subject.find('.error-message')).toHaveLength(1)
+    })
+
+    test('hides success text', () => {
+      expect(subject.find('.success-message').length).toEqual(0)
+    })
+
+    test('hides loading element', () => {
+      expect(subject.find(LoadingElement).length).toEqual(0)
+    })
+  })
+
+  describe('recommendations', () => {
+    test('do not render if none are provided', () => {
+      subject = createSubject({ recommendations: undefined })
+      expect(subject.exists(RecommendationList)).toBeFalsy()
+    })
+  })
+
+  describe('recommendations', () => {
+    test('do not render if none are available', () => {
+      subject = createSubject({ recommendations: [] })
+      expect(subject.exists('.recommendation-section')).toBeFalsy()
+    })
+
+    test('do not render if undefined', () => {
+      subject = createSubject({ recommendations: undefined })
+      expect(subject.exists('.recommendation-section')).toBeFalsy()
+    })
+  })
+
+  describe('used datasets', () => {
+    let subject
+    beforeEach(() => {
+      const fakeDataset1 = { org: 'org_name_1', name: 'data_name_1', title: 'Dataset 1', id: '123' }
+      const fakeDataset2 = { org: 'org_name_2', name: 'data_name_2', title: 'Dataset 2', id: '456' }
+      const datasetReferences = { [fakeDataset1.id]: fakeDataset1, [fakeDataset2.id]: fakeDataset2 }
+      const usedDatasets = [fakeDataset1.id, fakeDataset2.id, 'no_ref']
+      subject = createSubject({ usedDatasets, datasetReferences })
+    })
+
+    test('do not render if none are provided', () => {
+      const subject_with_no_datasets = createSubject({ usedDatasets: undefined })
+      expect(subject_with_no_datasets.exists('.used-datasets-section')).toBeFalsy()
+    })
+
+    test('shows the used datasets section', () => {
+      expect(subject.exists('.used-datasets-section')).toBeTruthy()
+    })
+
+    test('renders a link per dataset with a reference', () => {
+      const links = subject.find('.dataset-reference Link')
+      expect(links.length).toEqual(2)
+      expect(links.at(0).prop('to')).toEqual('/dataset/org_name_1/data_name_1')
+      expect(links.at(0).text()).toEqual('Dataset 1')
+      expect(links.at(1).prop('to')).toEqual('/dataset/org_name_2/data_name_2')
+      expect(links.at(1).text()).toEqual('Dataset 2')
+    })
+  })
+})
+
+function createSubject(params) {
+  const defaults = {
+    queryText: 'SELECT * FROM sky',
+    queryData: [],
+    recommendations: recommendations,
+    usedDatasets: [],
+    datasetReferences: {},
+    queryFailureMessage: '',
+    isQueryDataAvailable: false,
+    isQueryLoading: false,
+    isQueryLoaded: true,
+    executeQuery: queryCallback || jest.fn(),
+    cancelQuery: jest.fn(),
+    setQueryText: updateCallback || jest.fn()
+  }
+
+  const paramsWithDefaults = Object.assign({}, defaults, params)
+
+  // This allows us to set properties on a component wrapped in a provider
+  return mount(React.createElement(
+    props => (
+      <Router>
+        <QueryForm {...props} />
+      </Router>
+    ),
+    paramsWithDefaults)
+  )
+}
+
+function getButton(subject, text) {
+  const isButton = x => x.type() === 'button' && x.text() === text
+  return subject.findWhere(isButton)
+}

package/lib/components/recommendation-list/index.js

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