Merge pull request #40 from accordproject/dl-error-component

feat(ErrorLogger): migrate error logger and refactor as functional component - 17

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package.json

@@ -24,6 +24,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-table": "^6.10.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.86.0",
     "styled-components": "^4.2.0"
@@ -80,6 +81,9 @@
   "jest": {
     "setupFiles": [
       "./src/utilities/test/jestEnzyme"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss|sass|styl)$": "<rootDir>/__mocks__/styleMock.js"
+    }
   }
-}
+}

src/ErrorLogger/README.md

@@ -0,0 +1,19 @@
+## Cicero-UI - ErrorLogger
+
+### Usage
+
+```
+npm install @accordproject/cicero-ui
+```
+
+```
+import { ErrorLogger } from '@accordproject/cicero-ui';
+
+const ErrorContainer = props => (
+  <ErrorComponent errors={props.errors}/>
+);
+```
+
+### Props
+
+- `error` : An `array` which contains error objects.

src/ErrorLogger/__snapshots__/index.test.js.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorLogger /> on initialization renders page correctly 1`] = `
+<ReactTable
+  AggregatedComponent={[Function]}
+  ExpanderComponent={[Function]}
+  FilterComponent={[Function]}
+  LoadingComponent={[Function]}
+  NoDataComponent={[Function]}
+  PadRowComponent={[Function]}
+  PaginationComponent={[Function]}
+  PivotValueComponent={[Function]}
+  ResizerComponent={[Function]}
+  TableComponent={[Function]}
+  TbodyComponent={[Function]}
+  TdComponent={[Function]}
+  TfootComponent={[Function]}
+  ThComponent={[Function]}
+  TheadComponent={[Function]}
+  TrComponent={[Function]}
+  TrGroupComponent={[Function]}
+  aggregatedKey="_aggregated"
+  className=""
+  collapseOnDataChange={true}
+  collapseOnPageChange={true}
+  collapseOnSortingChange={true}
+  column={
+    Object {
+      "Aggregated": undefined,
+      "Cell": undefined,
+      "Expander": undefined,
+      "Filter": undefined,
+      "Footer": undefined,
+      "Header": undefined,
+      "Pivot": undefined,
+      "PivotValue": undefined,
+      "Placeholder": undefined,
+      "aggregate": undefined,
+      "className": "",
+      "filterAll": false,
+      "filterMethod": undefined,
+      "filterable": undefined,
+      "footerClassName": "",
+      "footerStyle": Object {},
+      "getFooterProps": [Function],
+      "getHeaderProps": [Function],
+      "getProps": [Function],
+      "headerClassName": "",
+      "headerStyle": Object {},
+      "minResizeWidth": 11,
+      "minWidth": 100,
+      "resizable": undefined,
+      "show": true,
+      "sortMethod": undefined,
+      "sortable": undefined,
+      "style": Object {},
+    }
+  }
+  columns={
+    Array [
+      Object {
+        "Header": "Type",
+        "accessor": "type",
+        "width": 100,
+      },
+      Object {
+        "Header": "Name",
+        "accessor": "name",
+        "width": 200,
+      },
+      Object {
+        "Header": "File",
+        "accessor": "fileName",
+        "width": 100,
+      },
+      Object {
+        "Header": "Start Location",
+        "accessor": [Function],
+        "id": "startLocation",
+        "width": 100,
+      },
+      Object {
+        "Header": "End Location",
+        "accessor": [Function],
+        "id": "endLocation",
+        "width": 100,
+      },
+      Object {
+        "Header": "Message",
+        "accessor": "shortMessage",
+        "width": 600,
+      },
+    ]
+  }
+  data={Array []}
+  defaultExpanded={Object {}}
+  defaultFilterMethod={[Function]}
+  defaultFiltered={Array []}
+  defaultPage={0}
+  defaultPageSize={20}
+  defaultResized={Array []}
+  defaultSortDesc={false}
+  defaultSortMethod={[Function]}
+  defaultSorted={Array []}
+  expanderDefaults={
+    Object {
+      "filterable": false,
+      "resizable": false,
+      "sortable": false,
+      "width": 35,
+    }
+  }
+  filterable={false}
+  freezeWhenExpanded={false}
+  getLoadingProps={[Function]}
+  getNoDataProps={[Function]}
+  getPaginationProps={[Function]}
+  getProps={[Function]}
+  getResizerProps={[Function]}
+  getTableProps={[Function]}
+  getTbodyProps={[Function]}
+  getTdProps={[Function]}
+  getTfootProps={[Function]}
+  getTfootTdProps={[Function]}
+  getTfootTrProps={[Function]}
+  getTheadFilterProps={[Function]}
+  getTheadFilterThProps={[Function]}
+  getTheadFilterTrProps={[Function]}
+  getTheadGroupProps={[Function]}
+  getTheadGroupThProps={[Function]}
+  getTheadGroupTrProps={[Function]}
+  getTheadProps={[Function]}
+  getTheadThProps={[Function]}
+  getTheadTrProps={[Function]}
+  getTrGroupProps={[Function]}
+  getTrProps={[Function]}
+  groupedByPivotKey="_groupedByPivot"
+  indexKey="_index"
+  loading={false}
+  loadingText="Loading..."
+  multiSort={true}
+  nestingLevelKey="_nestingLevel"
+  nextText="Next"
+  noDataText="No rows found"
+  ofText="of"
+  onFetchData={[Function]}
+  originalKey="_original"
+  pageJumpText="jump to page"
+  pageSize={5}
+  pageSizeOptions={
+    Array [
+      5,
+      10,
+      20,
+      25,
+      50,
+      100,
+    ]
+  }
+  pageText="Page"
+  pivotDefaults={Object {}}
+  pivotIDKey="_pivotID"
+  pivotValKey="_pivotVal"
+  previousText="Previous"
+  resizable={true}
+  resolveData={[Function]}
+  rowsSelectorText="rows per page"
+  rowsText="rows"
+  showPageJump={true}
+  showPageSizeOptions={true}
+  showPagination={true}
+  showPaginationBottom={true}
+  showPaginationTop={false}
+  sortable={true}
+  style={Object {}}
+  subRowsKey="_subRows"
+/>
+`;

src/ErrorLogger/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+/**
+ * @param {object} d
+ * @param {string} key
+ */
+function buildMessage(d, key) {
+  let result = 'Unknown';
+
+  if (d.fileLocation) {
+    result = '';
+    if (d.fileLocation[key].line) {
+      result += `Line: ${d.fileLocation[key].line}`;
+    }
+
+    if (d.fileLocation[key].column) {
+      result += ` Col: ${d.fileLocation[key].column}`;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * @param {object} d
+ */
+function buildStartLocation(d) {
+  return buildMessage(d, 'start');
+}
+
+/**
+ * @param {object} d
+ */
+function buildEndLocation(d) {
+  return buildMessage(d, 'end');
+}
+
+
+const columns = [{
+  Header: 'Type',
+  accessor: 'type',
+  width: 100,
+},
+{
+  Header: 'Name',
+  accessor: 'name',
+  width: 200,
+},
+{
+  Header: 'File',
+  accessor: 'fileName',
+  width: 100,
+},
+{
+  id: 'startLocation',
+  Header: 'Start Location',
+  accessor: d => buildStartLocation(d),
+  width: 100,
+},
+{
+  id: 'endLocation',
+  Header: 'End Location',
+  accessor: d => buildEndLocation(d),
+  width: 100,
+},
+{
+  Header: 'Message',
+  accessor: 'shortMessage',
+  width: 600,
+},
+];
+
+const ErrorLogger = props => (
+  <ReactTable
+    data={props.errors}
+    pageSize={5}
+    columns={columns}
+  />
+);
+
+ErrorLogger.propTypes = {
+  errors: PropTypes.array.isRequired,
+};
+
+export default ErrorLogger;

src/ErrorLogger/index.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import ErrorLogger from './index';
+
+describe('<ErrorLogger />', () => {
+  describe('on initialization', () => {
+    it('renders page correctly', () => {
+      const component = shallow(<ErrorLogger />);
+      const tree = toJson(component);
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

src/index.js

@@ -1,6 +1,12 @@
-import TemplateLibrary from './TemplateLibrary';
 import ContractEditor from './ContractEditor';
+import ErrorLogger from './ErrorLogger';
+import TemplateLibrary from './TemplateLibrary';
 import Tile from './Tile';
 import 'semantic-ui-css/semantic.min.css';
 
-export { ContractEditor, TemplateLibrary, Tile };
+export {
+  ContractEditor,
+  ErrorLogger,
+  TemplateLibrary,
+  Tile,
+};