@urbanos/react-discovery-ui 2.1.43

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

@@ -0,0 +1,175 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactTabs = require("react-tabs");
+require("react-tabs/style/react-tabs.css");
+var _chartIcon = _interopRequireDefault(require("../../components/generic-elements/chart-icon"));
+var _sqlIcon = _interopRequireDefault(require("../../components/generic-elements/sql-icon"));
+var _qs = _interopRequireDefault(require("qs"));
+var _routes = _interopRequireDefault(require("../../routes"));
+var _reactRouter = require("react-router");
+require("./dataset-view.scss");
+var _queryView = _interopRequireDefault(require("../query-view"));
+var _chartView = _interopRequireDefault(require("../chart-view"));
+var _datasetDetailView = _interopRequireDefault(require("../dataset-detail-view"));
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+var _visualizationListMenuItem = _interopRequireDefault(require("../../components/visualization-list-menu-item"));
+var _visualizationSaveMenuItem = _interopRequireDefault(require("../../components/visualization-save-menu-item"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+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 _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default() {
+    var _this;
+    _classCallCheck(this, _default);
+    _this = _callSuper(this, _default);
+    _this.state = {
+      index: 0,
+      localTitle: ''
+    };
+    return _this;
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "generateVisualizationLink",
+    value: function generateVisualizationLink() {
+      return this.props.visualizationId && (0, _reactRouter.generatePath)(_routes.default.visualizationView, {
+        id: this.props.visualizationId
+      });
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.reset();
+      this.props.retrieveDatasetDetails(this.props.match.params.organizationName, this.props.match.params.datasetName);
+      if (this.state.index != this.getIndexFromQueryParams()) {
+        this.setState({
+          index: this.getIndexFromQueryParams()
+        });
+      }
+    }
+  }, {
+    key: "getIndexFromQueryParams",
+    value: function getIndexFromQueryParams() {
+      var _qs$parse = _qs.default.parse(this.props.location.search, {
+          ignoreQueryPrefix: true
+        }),
+        selectedIndex = _qs$parse.selectedIndex;
+      return selectedIndex ? parseInt(selectedIndex) : 0;
+    }
+  }, {
+    key: "handleTitleChange",
+    value: function handleTitleChange(event) {
+      if (event.target.value !== this.state.localTitle) {
+        this.setState({
+          localTitle: event.target.value
+        });
+      }
+    }
+  }, {
+    key: "handleSaveOrUpdate",
+    value: function handleSaveOrUpdate(_ref) {
+      var shouldCreateCopy = _ref.shouldCreateCopy;
+      this.props.save({
+        id: this.props.visualizationId,
+        title: this.state.localTitle,
+        query: this.props.query,
+        shouldCreateCopy: shouldCreateCopy
+      });
+    }
+  }, {
+    key: "isNotDatasetDetailsTab",
+    value: function isNotDatasetDetailsTab() {
+      return this.state.index !== 0;
+    }
+  }, {
+    key: "isVisualizationEnabled",
+    value: function isVisualizationEnabled() {
+      return window.DISABLE_VISUALIZATIONS === 'false';
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.props.isDatasetLoaded) {
+        return /*#__PURE__*/_react.default.createElement("dataset-view", null, /*#__PURE__*/_react.default.createElement(_loadingElement.default, null));
+      }
+      if (this.props.isRemoteDataset || this.props.isHostDataset) {
+        return /*#__PURE__*/_react.default.createElement("dataset-view", null, /*#__PURE__*/_react.default.createElement(_datasetDetailView.default, null));
+      }
+      return /*#__PURE__*/_react.default.createElement("dataset-view", null, /*#__PURE__*/_react.default.createElement(_reactTabs.Tabs, {
+        className: "dataset-view",
+        selectedIndex: this.state.index,
+        onSelect: function onSelect(tabIndex) {
+          return _this2.setState({
+            index: tabIndex
+          });
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
+        className: "header"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "tab-area"
+      }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+        "data-testid": "dataset-details"
+      }, "Dataset Details"), /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+        "data-testid": "dataset-write-sql"
+      }, "Write SQL ", /*#__PURE__*/_react.default.createElement(_sqlIcon.default, {
+        className: "sqlIcon"
+      })), this.isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+        "data-testid": "visualize"
+      }, "Visualize ", /*#__PURE__*/_react.default.createElement(_chartIcon.default, {
+        className: "chartIcon"
+      })), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
+        role: "link",
+        className: "helpLink primary-color",
+        target: "_blank",
+        href: "https://en.wikipedia.org/wiki/SQL_syntax"
+      }, "SQL Help"), this.isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "|"), /*#__PURE__*/_react.default.createElement("a", {
+        role: "link",
+        id: "plotlyhelp",
+        className: "helpLink primary-color",
+        target: "_blank",
+        href: "https://plotly.com/chart-studio-help/tutorials/#basic"
+      }, "Plot.ly Help")))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
+        className: "action-area"
+      }, /*#__PURE__*/_react.default.createElement(_visualizationListMenuItem.default, {
+        isAuthenticated: this.props.auth.isAuthenticated
+      }), /*#__PURE__*/_react.default.createElement(_visualizationSaveMenuItem.default, {
+        isSaveable: this.props.isSaveable,
+        handleTitleChange: this.handleTitleChange.bind(this),
+        handleSaveOrUpdate: this.handleSaveOrUpdate.bind(this),
+        linkUrl: this.generateVisualizationLink(),
+        isSaveFailure: this.props.isSaveFailure,
+        isSaveSuccess: this.props.isSaveSuccess,
+        title: this.state.localTitle,
+        allowedActions: this.props.allowedActions,
+        isAuthenticated: this.props.auth.isAuthenticated
+      }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, {
+        forceRender: true
+      }, /*#__PURE__*/_react.default.createElement(_datasetDetailView.default, null)), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_queryView.default, {
+        shouldAutoExecuteQuery: this.props.shouldAutoExecuteQuery
+      })), this.isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, {
+        className: "visualization",
+        selectedClassName: "visualization--selected"
+      }, /*#__PURE__*/_react.default.createElement(_chartView.default, {
+        shouldAutoExecuteQuery: this.props.shouldAutoExecuteQuery
+      }))));
+    }
+  }]);
+}(_react.Component);

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

@@ -0,0 +1,95 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+@import "../visualization-view/visualization-view.scss";
+
+dataset-view {
+  @extend visualization-view;
+
+  .chartIcon {
+    padding-left: 5px;
+
+    path {
+      fill: $medium-grey;
+    }
+  }
+
+  .sqlIcon {
+    padding-left: 5px;
+    fill: $medium-grey;
+  }
+
+  .helpLink {
+    padding: 5px;
+    text-decoration: none;
+    font-size: 12px;
+  }
+
+  .helpLink:first-of-type {
+    border-left: 1px solid $light-grey;
+    padding-left: 15px;
+  }
+
+  .react-tabs__tab-list {
+    border-bottom: 0;
+    box-shadow: 0px 1px 3px $light-grey;
+    margin: 0;
+    padding: 0;
+  }
+
+  .react-tabs__tab {
+    display: inline-block;
+    border: 0;
+    position: relative;
+    list-style: initial;
+    padding: 12px 24px;
+    cursor: pointer;
+    color: $dark-grey;
+  }
+
+  .react-tabs__tab--selected {
+    background: transparent;
+    border-bottom: 5px solid;
+    border-color: $light-blue;
+    color: $almost-black;
+
+    .sqlIcon {
+      padding-left: 5px;
+      fill: $almost-black;
+    }
+
+    .chartIcon {
+      path {
+        fill: $almost-black;
+      }
+    }
+  }
+
+  .react-tabs__tab:hover {
+    color: $almost-black;
+
+    .sqlIcon {
+      padding-left: 5px;
+      fill: $almost-black;
+    }
+
+    .chartIcon {
+      path {
+        fill: $almost-black;
+      }
+    }
+  }
+
+  .visualization {
+    height: 85vh;
+    width: 100vw;
+    display: none;
+  }
+
+  .visualization--selected {
+    display: flex;
+  }
+
+  loading-element {
+    @include default-loading-icon();
+  }
+}

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

@@ -0,0 +1,157 @@
+import { shallow } from 'enzyme'
+import { Tab, TabPanel, TabList } from 'react-tabs'
+
+import DatasetView from './dataset-view'
+import QueryView from '../query-view'
+import ChartView from '../chart-view'
+import DatasetDetailView from '../dataset-detail-view'
+import LoadingElement from '../../components/generic-elements/loading-element'
+import VisualizationSaveMenuItem from '../../components/visualization-save-menu-item'
+import VisualizationListMenuItem from '../../components/visualization-list-menu-item'
+import ChartIcon from '../../components/generic-elements/chart-icon'
+
+describe('dataset view', () => {
+  let subject
+  beforeEach(() => {
+    window.DISABLE_VISUALIZATIONS = 'false'
+    subject = createSubject()
+  })
+
+  it('has three tabs', () => {
+    expect(subject.find(Tab).length).toEqual(3)
+  })
+
+  it('has three tab panels', () => {
+    expect(subject.find(TabPanel).length).toEqual(3)
+  })
+
+  it('has a dataset details component', () => {
+    expect(subject.find(DatasetDetailView).length).toEqual(1)
+  })
+
+  it('has a chart view component', () => {
+    expect(subject.find(ChartView).length).toEqual(1)
+  })
+
+  it('passes shouldAutoExecuteQuery property to the chart view', () => {
+    expect(subject.find(ChartView).props().shouldAutoExecuteQuery).toBe(true)
+  })
+
+  it('has a query view component', () => {
+    expect(subject.find(QueryView).length).toEqual(1)
+  })
+
+  it('passes shouldAutoExecuteQuery property to the query view', () => {
+    expect(subject.find(QueryView).props().shouldAutoExecuteQuery).toBe(true)
+  })
+
+  it('displays the save icon in the header with expected props', () => {
+    subject.setState({ index: 1 })
+    expect(subject.find(VisualizationSaveMenuItem)).toHaveLength(1)
+    expect(subject.find(VisualizationSaveMenuItem).props().isAuthenticated).toBe(true)
+  })
+
+  it('displays the user page icon in the header with expected props', () => {
+    subject.setState({ index: 1 })
+    expect(subject.find(VisualizationListMenuItem)).toHaveLength(1)
+    expect(subject.find(VisualizationListMenuItem).props().isAuthenticated).toBe(true)
+  })
+
+  it('hides the save and user page icon on the dataset detail tab', () => {
+    subject.setState({ index: 0 })
+    expect(subject.find(VisualizationSaveMenuItem)).toHaveLength(0)
+    expect(subject.find(VisualizationListMenuItem)).toHaveLength(0)
+  })
+})
+
+describe('Visualizations when DISABLE_VISUALIZATIONS is true', () => {
+  let subject
+  beforeEach(() => {
+    window.DISABLE_VISUALIZATIONS = 'true'
+    subject = createSubject()
+  })
+
+  afterEach(() => {
+    window.DISABLE_VISUALIZATIONS = 'false'
+  })
+
+  it('does not have the visualizations tab', () => {
+    expect(subject.find(ChartIcon).length).toEqual(0)
+  })
+
+  it('does not have the visualizations view', () => {
+    expect(subject.find(ChartView).length).toEqual(0)
+  })
+  it('does not have the plot.ly help link', () => {
+    subject.setState({ index: 1 })
+    const test = subject.find('#plotlyhelp')
+    expect(test.length).toEqual(0)
+  })
+})
+
+describe('dataset view when dataset is not loaded', () => {
+  let subject
+  beforeEach(() => {
+    subject = createSubject({ isDatasetLoaded: false })
+  })
+
+  it('shows a loading element', () => {
+    expect(subject.find(LoadingElement)).toHaveLength(1)
+  })
+
+  it('does not have a dataset details component', () => {
+    expect(subject.find(DatasetDetailView)).toHaveLength(0)
+  })
+})
+
+describe('dataset view for a remote dataset', () => {
+  let subject
+  beforeEach(() => {
+    subject = createSubject({ isRemoteDataset: true })
+  })
+
+  it('shows a DatasetDetailView', () => {
+    expect(subject.find(DatasetDetailView)).toHaveLength(1)
+  })
+
+  it('does not show tabs', () => {
+    expect(subject.find(Tab)).toHaveLength(0)
+  })
+})
+
+describe('dataset view for a host dataset', () => {
+  let subject
+  beforeEach(() => {
+    subject = createSubject({ isHostDataset: true })
+  })
+
+  it('shows a DatasetDetailView', () => {
+    expect(subject.find(DatasetDetailView)).toHaveLength(1)
+  })
+
+  it('does not show tabs', () => {
+    expect(subject.find(Tab)).toHaveLength(0)
+  })
+})
+
+const createSubject = (props = {}) => {
+  const defaultProps = {
+    match: { params: { organizationName: 'org', datasetName: 'dataset' } },
+    dataset: {},
+    location: { search: '?systemName=org__dataset' },
+    systemName: 'org__dataset',
+    retrieveDatasetDetails: jest.fn(),
+    setQuery: jest.fn(),
+    resetQuery: jest.fn(),
+    isDatasetLoaded: true,
+    isHostDataset: false,
+    isRemoteDataset: false,
+    reset: jest.fn(),
+    shouldAutoExecuteQuery: true,
+    auth: { isAuthenticated: true }
+  }
+
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+
+  return shallow(<DatasetView {...propsWithDefaults} />)
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _loginView = _interopRequireDefault(require("./login-view"));
+var _selectors = require("../../store/selectors");
+var _actions = require("../../store/actions");
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    lastAttemptFailed: (0, _selectors.lastLoginAttemptFailed)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    login: function login(credentials) {
+      return dispatch((0, _actions.login)(credentials));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_loginView.default));

package/lib/pages/login-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/login-view/login-view.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactRouter = require("react-router");
+require("./login-view.scss");
+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 LoginView = function LoginView(props) {
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    username = _useState2[0],
+    setUsername = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    password = _useState4[0],
+    setPassword = _useState4[1];
+  var enterKeyLogin = function enterKeyLogin(event) {
+    return event.key === 'Enter' && event.preventDefault() && login();
+  };
+  var spaceKeyLogin = function spaceKeyLogin(event) {
+    return event.key === ' ' && event.preventDefault() && login();
+  };
+  var login = function login() {
+    return props.login({
+      username: username,
+      password: password,
+      history: props.history
+    });
+  };
+  return sessionStorage.getItem('api-token') ? /*#__PURE__*/React.createElement(_reactRouter.Redirect, {
+    to: {
+      pathname: '/'
+    }
+  }) : /*#__PURE__*/React.createElement("login-view", null, /*#__PURE__*/React.createElement("div", {
+    className: "box",
+    onKeyPress: enterKeyLogin
+  }, /*#__PURE__*/React.createElement("h3", null, "Restricted Dataset Login"), /*#__PURE__*/React.createElement("div", null, "This area is restricted to authorized users only."), props.lastAttemptFailed && /*#__PURE__*/React.createElement("div", {
+    className: "error-message"
+  }, "Username and/or password invalid."), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "username"
+  }, "Username"), /*#__PURE__*/React.createElement("input", {
+    id: "username",
+    className: "username",
+    type: "text",
+    tabIndex: 1,
+    value: username,
+    onChange: function onChange(e) {
+      return setUsername(e.target.value);
+    },
+    autoFocus: true
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "password"
+  }, "Password"), /*#__PURE__*/React.createElement("input", {
+    id: "password",
+    className: "password",
+    type: "password",
+    tabIndex: 2,
+    value: password,
+    onChange: function onChange(e) {
+      return setPassword(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "login-row"
+  }, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    href: "".concat(window.DISC_UI_URL, "/reset-password")
+  }, "Forgot your username and/or password?")), /*#__PURE__*/React.createElement("div", {
+    className: "submit",
+    role: "button",
+    tabIndex: 3,
+    onClick: login,
+    onKeyPress: spaceKeyLogin
+  }, "Login")));
+};
+var _default = exports.default = LoginView;

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

@@ -0,0 +1,62 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+login-view {
+  display: flex;
+  flex-direction: column;
+  width: 8 * $column-width;
+  margin: 5rem auto 0 auto;
+
+  .submit {
+    background-color: $light-blue;
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+    margin-top: 1rem;
+    padding: 0.6rem 1rem;
+
+    &:hover {
+      background-color: $almost-black;
+    }
+  }
+
+  .login-row {
+    padding-top: 0.5rem;
+  }
+
+  .box {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid $light-grey;
+    padding: 2.25rem $column-width;
+  }
+
+  input {
+    border: 1px solid $light-grey;
+    background-color: white;
+    box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+    padding: 0.75rem;
+  }
+
+  h3 {
+    @include header-medium();
+    margin: 0 0 0.75rem 0;
+  }
+
+  label {
+    margin: 1rem 0 0.25rem 0;
+    font-weight: bold;
+  }
+
+  .error-message {
+    color: #B80000;
+  }
+
+  a {
+    @include link();
+    font-size: 1rem;
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { shallow } from 'enzyme'
+import LoginView from './login-view'
+
+describe('login view', () => {
+  let subject, loginSpy
+  const fakeHistory = jest.fn()
+
+  beforeEach(() => {
+    loginSpy = jest.fn()
+    subject = shallow(<LoginView login={loginSpy} lastAttemptFailed={false} history={fakeHistory} />)
+  })
+
+  it('when the login button is clicked, a login is dispatched with creds', () => {
+    const username = 'lettuce'
+    const password = 'tarpsoff123'
+
+    subject.find('.username').simulate('change', { target: { value: username } })
+    subject.find('.password').simulate('change', { target: { value: password } })
+    subject.find('.submit').simulate('click')
+
+    expect(loginSpy).toHaveBeenCalledWith({ username: username, password: password, history: fakeHistory })
+  })
+})

package/lib/pages/oauth-error-view/index.js

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

package/lib/pages/oauth-error-view/oauth-error-view.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRouterDom = require("react-router-dom");
+require("./oauth-error-view.scss");
+var _qs = _interopRequireDefault(require("qs"));
+var _routes = _interopRequireDefault(require("../../routes.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getError = function getError(search) {
+  return _qs.default.parse(search, {
+    ignoreQueryPrefix: true
+  }).error_description;
+};
+var OAuthErrorView = function OAuthErrorView() {
+  return /*#__PURE__*/React.createElement("oauth-error-view", null, /*#__PURE__*/React.createElement("h2", null, "Oops! We can't process that request. Please click ", /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    href: _routes.default.root
+  }, "here"), " to go back to the home page. "), /*#__PURE__*/React.createElement("p", {
+    className: "error-message"
+  }, getError(window.location.search)));
+};
+var _default = exports.default = OAuthErrorView;