@urbanos/react-discovery-ui 2.1.43

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

@@ -0,0 +1,340 @@
+@import '../../styles/mixins.scss';
+
+.apiKey-view-title {
+
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  padding-bottom: 20px;
+
+  color: $black;
+
+  flex: none;
+  flex-grow: 0;
+}
+
+.apiKey-view-paragraph {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+
+  display: flex;
+  align-items: center;
+
+  color: $black;
+
+  padding-bottom: 65px;
+
+  flex: none;
+  flex-grow: 0;
+}
+
+.apiKey-view-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 40px 30px;
+  margin: 20px 20px;
+  gap: 20px;
+  box-shadow: 0 0 6px gray;
+  min-width: 400px;
+
+  background: $white;
+
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.apiKey-view-generate-button {
+  @include button();
+  display: flex;
+
+  padding: 1rem;
+  background-color: $light-blue;
+  color: white;
+  letter-spacing: 0.05rem;
+  margin: 1rem 1rem 1rem 0rem;
+}
+
+.modal-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 40px 30px;
+  margin: 20px 20px;
+  gap: 20px;
+  box-shadow: 0 0 6px gray;
+  max-width: 800px;
+
+  background: $white;
+
+  align-self: stretch;
+}
+
+.modal-header-box {
+  display: flex;
+  width: 100%;
+}
+
+.MuiSvgIcon-root.modal-close-button {
+
+  height: 1.5em;
+  width: 1.5em;
+
+  &:hover {
+    background-color: $light-gray;
+  }
+}
+
+.modal-title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  text-transform: capitalize;
+
+  color: $black;
+
+  flex: none;
+  flex: 9
+}
+
+.modal-paragraph {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20px 13px;
+  margin-bottom: 100px;
+  gap: 10px;
+
+  background: $warning-background;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+
+  flex: none;
+  flex-grow: 0;
+}
+
+hr.solid {
+  border: 1px solid $light-gray;
+  width: 100%;
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.apikey-modal-warning-icon-container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+
+}
+
+.MuiSvgIcon-root.apikey-modal-warning-icon {
+
+  height: 2em;
+  width: 2em;
+  color: $error-color;
+}
+
+.paragraph-text {
+  display: flex;
+
+  flex: 15;
+}
+
+.modal-button-group {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.modal-confirm-button {
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 15px 50px;
+  gap: 10px;
+
+  border: 1px solid $error-color;
+
+  flex: none;
+  flex-grow: 0;
+
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+
+  color: $error-color;
+
+  background: none;
+
+  &:hover {
+    background-color: $error-color;
+    color: white;
+    border: 1px solid $error-color;
+  }
+
+}
+
+.modal-cancel-button {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 50px;
+  gap: 10px;
+
+  flex: none;
+  flex-grow: 0;
+
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+
+  background: none;
+
+  border: none;
+
+  &:hover {
+    background: $light-grey;
+  }
+
+}
+
+.loading-spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.loading-spinner {
+  position: absolute;
+  top: 40%;
+  left: 40%;
+  width: 20%;
+  height: 20%;
+}
+
+.apiKey-view-sub-title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 23px;
+  text-transform: capitalize;
+  padding-bottom: 20px;
+
+  color: #333333;
+
+  flex: none;
+  order: 3;
+  flex-grow: 0;
+}
+
+.apiKey-view-display-page-display-window-container {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 50px;
+}
+
+.apiKey-view-display-page-display-window {
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1px 1px 1px 10px;
+  gap: 10px;
+
+  width: 340px;
+  height: 73px;
+
+  background: #F0F0F0;
+
+  border: 1px solid #595959;
+  border-radius: 10px 0px 0px 10px;
+
+  flex: none;
+  flex-grow: 0;
+}
+
+.apiKey-view-display-page-copy-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  color: white;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+
+
+  text-align: center;
+
+  width: 76px;
+  height: 73px;
+
+  background-color: $light-blue;
+
+  border-radius: 0px 9px 9px 0px;
+  border-style: none;
+
+  flex: none;
+  flex-grow: 0;
+
+  &:hover {
+    color: white;
+    background-color: $almost-black;
+    cursor: pointer;
+  }
+}
+
+.apiKey-view-display-page-return-button {
+  @include button();
+
+  display: flex;
+
+  padding: 1rem;
+  background-color: $light-blue;
+  color: white;
+  letter-spacing: 0.05rem;
+
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 16px;
+  border: 1px;
+  border-radius: 2px;
+}
+
+.apiKey-view-display-page-return-button-link {
+  display: flex;
+  text-decoration: none;
+}
+
+.apiKey-view-display-page-return-button-container {
+  display: flex;
+  text-decoration: none;
+
+  flex-direction: column;
+  align-items: flex-start;
+}

package/lib/pages/apikey-view/connector.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _apikeyView = _interopRequireDefault(require("./apikey-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 {
+    apiKey: (0, _selectors.getApiKeyState)(state),
+    isLoading: (0, _selectors.determineIfLoading)(state),
+    isError: (0, _selectors.getGlobalErrorState)(state),
+    errorMessage: (0, _selectors.getGlobalErrorMessage)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    generate: function generate() {
+      return dispatch((0, _actions.generateApiKey)());
+    },
+    dismissGlobalError: function dismissGlobalError() {
+      return dispatch((0, _actions.setGlobalErrorState)(false, ''));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_apikeyView.default));

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

@@ -0,0 +1,92 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+require("./chart-view.scss");
+var _react = _interopRequireDefault(require("react"));
+require("react-chart-editor/lib/react-chart-editor.ie.css");
+var _lib = _interopRequireWildcard(require("react-chart-editor/lib"));
+var _plotly = _interopRequireDefault(require("plotly.js/dist/plotly"));
+var _lodash = require("lodash");
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+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 }; }
+var hasDataSources = function hasDataSources(dataSources) {
+  return dataSources && Object.keys(dataSources).length > 0;
+};
+var getDataSourceOptions = function getDataSourceOptions(dataSources) {
+  return Object.keys(dataSources).map(function (name) {
+    return {
+      value: name,
+      label: name
+    };
+  });
+};
+var ChartView = function ChartView(props) {
+  var dataSources = props.dataSources,
+    isLoading = props.isLoading,
+    shouldAutoExecuteQuery = props.shouldAutoExecuteQuery,
+    executeQuery = props.executeQuery,
+    setChartInformation = props.setChartInformation,
+    chart = props.chart;
+  var data = chart.data,
+    layout = chart.layout,
+    frames = chart.frames;
+  _react.default.useEffect(function () {
+    if (shouldAutoExecuteQuery) {
+      executeQuery();
+    }
+  }, [shouldAutoExecuteQuery]);
+  _react.default.useEffect(function () {
+    var clonedData = (0, _lodash.cloneDeep)(data);
+    (0, _lib.dereference)(clonedData, dataSources);
+    setChartInformation({
+      data: clonedData,
+      layout: layout,
+      frames: frames
+    });
+  }, [dataSources]);
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement("chart-view", null, /*#__PURE__*/_react.default.createElement(_loadingElement.default, null));
+  }
+  if (!hasDataSources(dataSources)) {
+    return /*#__PURE__*/_react.default.createElement("chart-view", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-data-message"
+    }, "Unable to load data. You may need to revise your query."));
+  }
+  var onUpdate = function onUpdate(data, layout, frames) {
+    setChartInformation({
+      data: data,
+      layout: layout,
+      frames: frames
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("chart-view", null, /*#__PURE__*/_react.default.createElement(_lib.default, {
+    data: data,
+    layout: layout,
+    frames: frames,
+    dataSources: dataSources,
+    dataSourceOptions: getDataSourceOptions(dataSources),
+    plotly: _plotly.default,
+    onUpdate: onUpdate,
+    advancedTraceTypeSelector: true,
+    useResizeHandler: true,
+    config: {
+      mapboxAccessToken: window.MAPBOX_ACCESS_TOKEN
+    },
+    "data-testid": "plotly-editor"
+  }, /*#__PURE__*/_react.default.createElement(_lib.DefaultEditor, {
+    logoSrc: window.LOGO_URL
+  })));
+};
+ChartView.propTypes = {
+  dataSources: _propTypes.default.object.isRequired,
+  isQueryLoading: _propTypes.default.bool,
+  shouldAutoExecuteQuery: _propTypes.default.bool,
+  executeQuery: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ChartView;

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

@@ -0,0 +1,35 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+
+main-app-element {
+  overflow-y: scroll;
+}
+
+chart-view {
+  width: 100%;
+  height: 85vh;
+  align-self: center;
+
+  loading-element {
+    @include default-loading-icon();
+  }
+
+  .no-data-message {
+    padding: 5rem;
+    text-align: center;
+    color: $almost-black;
+  }
+}
+
+.plotly-editor--theme-provider {
+  --color-button-primary-base-fill: hsl(205, 100%, 30%);
+  --color-button-primary-hover-fill: hsl(205, 87%, 30%);
+  --color-button-primary-active-fill: hsl(205, 87%, 20%);
+  --color-text-light: #595959;
+  --color-text-placeholder: #595959;
+}
+
+.editor_controls .rich-text-editor__editor .public-DraftEditorPlaceholder-root,
+.editor_controls .rich-text-editor__editor .public-DraftEditor-content {
+  color: #595959;
+}

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

@@ -0,0 +1,206 @@
+import { shallow } from 'enzyme'
+
+import ChartView from './chart-view'
+import PlotlyEditor, { DefaultEditor } from 'react-chart-editor'
+import LoadingElement from '../../components/generic-elements/loading-element'
+import * as ReactChartLibrary from 'react-chart-editor/lib'
+
+// Currently, shallow rendering is not compatible with React hooks.
+// We've utilized a strategy found here https://blog.carbonfive.com/2019/08/05/shallow-testing-hooks-with-enzyme/
+// which should become unneccessary in the near future
+const runUseEffect = () => {
+  const useEffect = jest.spyOn(React, 'useEffect')
+  useEffect.mockImplementation(f => f())
+}
+
+describe('chart view', () => {
+  const chartDataSources = { data: ['sources'] }
+
+  let subject
+
+  beforeEach(() => {
+    runUseEffect()
+  })
+
+  describe('before load', () => {
+    beforeEach(() => {
+      subject = createSubject({ isLoading: true })
+    })
+
+    it('shows full page loading icon', () => {
+      expect(subject.find(LoadingElement).length).toBe(1)
+    })
+
+    it('does not display a Plotly chart', () => {
+      expect(subject.find(PlotlyEditor).length).toBe(0)
+    })
+  })
+
+  describe('after load', () => {
+    beforeEach(() => {
+      subject = createSubject({ dataSources: chartDataSources, isLoading: false })
+    })
+
+    it('does not show full page loading icon', () => {
+      expect(subject.find(LoadingElement).length).toBe(0)
+    })
+
+    it('displays a Plotly chart with the provided data sources', () => {
+      expect(subject.find(PlotlyEditor).props().dataSources).toBe(chartDataSources)
+    })
+  })
+
+  describe('with empty dataSources', () => {
+    beforeEach(() => {
+      subject = createSubject({ dataSources: {} })
+    })
+
+    it('does not render a Plotly chart', () => {
+      expect(subject.find(PlotlyEditor).length).toBe(0)
+    })
+
+    it('displays a message that data has not been loaded', () => {
+      expect(subject.text()).toContain('Unable to load data')
+    })
+  })
+
+  it('does not automatically execute the query when instructed not to', () => {
+    const executeQuery = jest.fn()
+
+    subject = createSubject({ shouldAutoExecuteQuery: false, executeQuery })
+
+    expect(executeQuery).toHaveBeenCalledTimes(0)
+  })
+
+  it('automatically executes the query when instructed to', () => {
+    const executeQuery = jest.fn()
+
+    subject = createSubject({ shouldAutoExecuteQuery: true, executeQuery })
+
+    expect(executeQuery).toHaveBeenCalledTimes(1)
+  })
+
+  describe('with dataSources', () => {
+    const dataSources = {
+      col1: [1, 2, 3],
+      col2: [4, 5, 6]
+    }
+
+    beforeEach(() => {
+      window.LOGO_URL = 'https://placekitten.com/530/530'
+      window.MAPBOX_ACCESS_TOKEN = 'secret key'
+      subject = createSubject({ dataSources: dataSources })
+    })
+
+    it('renders a chart editor', () => {
+      expect(subject.find(PlotlyEditor).length).toBe(1)
+    })
+
+    it('configures the editor with empty data by default', () => {
+      expect(subject.find(PlotlyEditor).props().data).toEqual([])
+    })
+
+    it('configures the editor with empty layout by default', () => {
+      expect(subject.find(PlotlyEditor).props().layout).toEqual({})
+    })
+
+    it('configures the editor with empty frames by default', () => {
+      expect(subject.find(PlotlyEditor).props().frames).toEqual([])
+    })
+
+    it('automcatically updates the editor when dataSources change', () => {
+      const newDataSources = {
+        col1: [1, 2],
+        col2: [3, 4]
+      }
+
+      subject.setProps({ dataSources: newDataSources })
+
+      expect(subject.find(PlotlyEditor).props().dataSources).toBe(newDataSources)
+    })
+
+    it('converts data sources to options for editor', () => {
+      expect(subject.find(PlotlyEditor).props().dataSourceOptions).toEqual([
+        { value: 'col1', label: 'col1' },
+        { value: 'col2', label: 'col2' }
+      ])
+    })
+
+    it('configures the editor with the provided logo', () => {
+      expect(subject.find(DefaultEditor).length).toBe(1)
+      expect(subject.find(DefaultEditor).props().logoSrc).toBe(window.LOGO_URL)
+    })
+
+    it('configures the editor with the provided mapbox api token', () => {
+      expect(subject.find(PlotlyEditor).props().config.mapboxAccessToken).toBe('secret key')
+    })
+  })
+
+  describe('when datasources are updated', () => {
+    const dataSources = {
+      col1: [1, 2, 3],
+      col2: [4, 5, 6]
+    }
+    const plotlyData = [
+      {
+        type: 'scatter',
+        mode: 'markers',
+        x: [1, 2, 3],
+        xsrc: 'col1',
+        meta: { columnNames: { x: 'col1', y: 'col2' } },
+        y: [4, 5, 6],
+        ysrc: 'col2'
+      }
+    ]
+
+    let setChartInformation
+
+    beforeEach(() => {
+      setChartInformation = jest.fn()
+      subject = createSubject({ dataSources: dataSources, chart: { data: plotlyData, frames: [], layout: {} }, setChartInformation })
+      setChartInformation.mockClear()
+    })
+
+    it('sets updated data for the chart', () => {
+      const newDataSources = {
+        col1: [1, 2],
+        col2: [3, 4]
+      }
+
+      subject.setProps({ dataSources: newDataSources })
+
+      expect(setChartInformation).toHaveBeenCalledTimes(1)
+      const firstPlotData = plotlyData[0]
+      const expected = { ...firstPlotData, ...{ x: newDataSources.col1, y: newDataSources.col2 } }
+      expect(setChartInformation).toHaveBeenCalledWith({ data: [expected], layout: {}, frames: [] })
+    })
+  })
+
+  describe('save chart', () => {
+    it('sends a save chart event', () => {
+      const setChartInformation = jest.fn()
+      const subject = createSubject({ setChartInformation })
+      setChartInformation.mockClear()
+
+      const data = [{ x: [1, 2, 3], xsrc: 'col1' }]
+      subject.find(PlotlyEditor).props().onUpdate(data, {}, [])
+
+      expect(setChartInformation).toHaveBeenCalledTimes(1)
+      expect(setChartInformation).toHaveBeenCalledWith({ data: data, layout: {}, frames: [] })
+    })
+  })
+})
+
+function createSubject (params = {}) {
+  const defaultParams = {
+    chart: { data: [], layout: {}, frames: [] },
+    isLoading: false,
+    dataSources: { data: ['sources'] },
+    shouldAutoExecuteQuery: false,
+    executeQuery: jest.fn(),
+    setChartInformation: jest.fn()
+  }
+  const paramsWithDefaults = Object.assign({}, defaultParams, params)
+
+  return shallow(<ChartView {...paramsWithDefaults} />)
+}