COMPASS-3851: ability to add fields when exporting collection

src/components/export-field/export-field.jsx

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+import createStyler from 'utils/styler.js';
+import styles from './export-field.less';
+import PropTypes from 'prop-types';
+
+const style = createStyler(styles, 'export-field');
+
+class ExportField extends PureComponent {
+  static propTypes = {
+    index: PropTypes.number,
+    checked: PropTypes.number,
+    field: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
+
+  render() {
+    return (
+      <tr key={this.props.field}>
+        <td>
+          <input type="checkbox"
+            id={this.props.index}
+            name={this.props.field}
+            checked={this.props.checked}
+            onChange={this.props.onChange}
+            aria-label={`Include ${this.props.field} in exported collection`}/>
+        </td>
+        <td className={style('field-number')}>{this.props.index + 1}</td>
+        <td>{this.props.field}</td>
+      </tr>
+    );
+  }
+}
+
+export default ExportField;

src/components/export-field/export-field.less

@@ -0,0 +1,8 @@
+@import (reference) '~less/compass/_theme.less';
+
+.export-field {
+  &-field-number {
+    text-align: center;
+  }
+
+}

src/components/export-field/index.js

@@ -0,0 +1,2 @@
+import ExportField from './export-field';
+export default ExportField;