COMPASS-3826 COMPASS-3947: Import preview table with project and type customization

README.md

@@ -28,19 +28,25 @@ See files in the `./test` directory.
 
 ## TODO/Ideas
 
+- [ ] Import: Preview Table: Use highlight.js, mongodb-ace-mode, or something so the text style of the value within a cell matches its destination type
+- [ ] Export: Use electron add to destination file to [recent documents](https://electronjs.org/docs/tutorial/recent-documents)
+- [ ] Import and Export: Show system notification when operation completes. like dropbox screenshot message. toast "XX/XX documents successfully"
+- [ ] Import and Export: New Option: If you need to [specify extended-json legacy spec](https://github.com/mongodb/js-bson/pull/339)
 - [ ] Refactor src/modules/ so import and export reuse a common base
-- [ ] Import and Export: Show system notification when operation completes. like dropbox screenshot message.
-- [ ] Import csv: dynamicTyping of values like papaparse
-- [ ] Import csv: mapHeaders option to support existing .<bson_type>() caster like [mongoimport does today][mongoimport]
+- [ ] Import: bson-csv: support existing .<bson_type>() caster like [mongoimport does today][mongoimport]
 - [ ] Import: expose finer-grained bulk op results in progress
-- [ ] Import: define import mode: insert, upsert, merge
-- [ ] Import: option to specify a different path for `_id` such as `business_id` in the yelp dataset
-- [ ] Import: Paste URL to fetch from
-- [ ] Import: multi file import via archive (supports gzip/zip/bzip2/etc.)
-- [ ] Import: option for path to pass to JSONStream for nested docs (e.g. `results` array when fetching JSON from a rest api)
-- [ ] Import: Option to drop target collection before import
-- [ ] Import: Drop file target in modal
-- [ ] Export: use electron add to destination file to [recent documents](https://electronjs.org/docs/tutorial/recent-documents)
+- [ ] Import: New Option: drop target collection before import
+- [ ] Import: New Option: define import mode: insert, upsert, merge
+- [ ] Import: New Option: specify a different path for `_id` such as `business_id` in the yelp dataset
+- [ ] Import: Option for path to pass to JSONStream for nested docs (e.g. `results` array when fetching JSON from a rest api)
+- [ ] Import: New Option: Paste URL to fetch from
+- [ ] Import: Preview Table: use `react-table` and [`react-window`](https://www.npmjs.com/package/react-window-infinite-loader) for fixed headers and more # of documents to preview
+- [ ] Import: Preview Table: Allow transpose on fields/values so all type selection and projection is in a single left aligned list
+- [ ] Import: Multi file import via archive (supports gzip/zip/bzip2/etc.)
+- [ ] Import: Use schema parser or something later to handle complete tabular renderings of sparse/polymorphic
+- [ ] Import: Improve import-size-guesstimator
+- [ ] Import: guess delimiter in `src/utils/detect-import-file.js`
+- [ ] Import and Export: Extract anything from `./src/utils` that could live as standalone modules so other things like say a cli or a different platform could reuse compass' import/export business logic and perf.
 
 ## License
 

config/webpack.dev.config.js

@@ -11,6 +11,9 @@ const config = {
   mode: 'development',
   target: 'electron-renderer',
   devtool: 'eval-source-map',
+  optimization: {
+    minimize: false
+  },
   entry: {
     index: [
       // activate HMR for React

config/webpack.storybook.config.js

@@ -64,6 +64,9 @@ const config = {
     process: false,
     Buffer: false
   },
+  optimization: {
+    minimize: false
+  },
   devtool: 'eval-source-map',
   entry: {
     index: path.resolve(project.path.src, 'index.js')

electron/renderer/index.js

@@ -21,12 +21,15 @@ import 'less/global.less';
 /**
  * Customize data service for your sandbox.
  */
-const NS = 'test.people_imported';
+const NS = 'lucas_apple_health_data.sleep';
 
 import Connection from 'mongodb-connection-model';
 const connection = new Connection({
   hostname: '127.0.0.1',
-  port: 27017
+  port: 27017,
+  options: {
+    explicitlyIgnoreSession: true
+  }
 });
 
 /**
@@ -51,8 +54,8 @@ var QUERY_BAR = {
 
 console.group('Compass Plugin Sandbox');
 console.log('db.collection', NS);
-console.log('connect', connection.driver_url, {
-  options: connection.driver_options
+console.log('connect', connection.driverUrl, {
+  options: connection.driverOptions
 });
 console.groupEnd();
 
@@ -82,7 +85,7 @@ const store = configureStore({
 });
 
 // Create a HMR enabled render function
-const render = Component => {
+const render = (Component) => {
   ReactDOM.render(
     <AppContainer>
       <Component store={store} appRegistry={localAppRegistry} />

examples/import-options.stories.js

@@ -0,0 +1,49 @@
+const DEFAULT_PROPS = {
+  delimiter: ',',
+  setDelimiter: () => console.log('setDelimiter:'),
+  fileType: '',
+  selectImportFileType: () => console.log('selectImportFileType:'),
+  fileName: '',
+  selectImportFileName: () => console.log('selectImportFileName:'),
+  stopOnErrors: false,
+  setStopOnErrors: () => console.log('setStopOnErrors:'),
+  ignoreBlanks: true,
+  setIgnoreBlanks: () => console.log('setIgnoreBlanks:'),
+  fileOpenDialog: () => console.log('fileOpenDialog:')
+};
+
+/* eslint-disable no-alert */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ImportOptions from 'components/import-options';
+
+storiesOf('Examples/ImportOptions', module)
+  .add('csv', () => {
+    const props = {
+      ...DEFAULT_PROPS,
+      fileType: 'csv',
+      fileName: '~/my-csv-data.csv'
+    };
+    return <ImportOptions {...props} />;
+  })
+  .add('tsv', () => {
+    const props = {
+      ...DEFAULT_PROPS,
+      fileType: 'csv',
+      fileName: '~/my-tsv-data.tsv',
+      delimiter: '\\t'
+    };
+    return <ImportOptions {...props} />;
+  })
+  .add('json', () => {
+    const props = {
+      ...DEFAULT_PROPS,
+      fileType: 'json',
+      fileName: '~/compass-github-api-releases.json'
+    };
+
+    return <ImportOptions {...props} />;
+  })
+  .add('default', () => {
+    return <ImportOptions {...DEFAULT_PROPS} />;
+  });

examples/import-preview.stories.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ImportPreview from 'components/import-preview';
+
+// const docs = [
+//   {
+//     _id: 'arlo',
+//     name: 'Arlo',
+//     stats: {
+//       age: 5,
+//       fluffiness: ''
+//     }
+//   },
+//   {
+//     _id: 'basilbazel',
+//     name: 'Basil',
+//     stats: {
+//       age: 8,
+//       fluffiness: '100'
+//     }
+//   },
+//   {
+//     _id: 'hellbeast',
+//     name: 'Kochka',
+//     stats: {
+//       age: '14',
+//       fluffiness: 50
+//     }
+//   }
+// ];
+
+storiesOf('Examples/ImportPreview', module).add('simple', () => {
+  return (
+    <ImportPreview
+      onFieldCheckedChanged={(path, checked) => {
+        console.log('onFieldCheckedChanged: %s is now', path, checked);
+      }}
+      setFieldType={(path, bsonType) => {
+        console.log('setFieldType: %s to %s', path, bsonType);
+      }}
+      fields={[
+        {
+          path: '_id',
+          type: 'string',
+          checked: true
+        },
+        {
+          path: 'name',
+          type: 'string',
+          checked: true
+        },
+        {
+          path: 'stats.age',
+          type: 'string',
+          checked: true
+        },
+        {
+          path: 'stats.fluffiness',
+          type: 'string',
+          checked: false
+        }
+      ]}
+      values={[
+        ['arlo', 'Arlo', '5', ''],
+        ['basilbazel', 'Basil', '8', '100'],
+        ['hellbeast', 'Kochka', '14', '50']
+      ]}
+    />
+  );
+});

examples/select-field-type.stories.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import SelectFieldType from 'components/select-field-type';
+
+storiesOf('Examples/SelectFieldType', module)
+  .add('default', () => {
+    return (
+      <SelectFieldType
+        onChange={t => window.alert(`Selected type changed ${t}`)}
+      />
+    );
+  })
+  .add('number selected', () => {
+    return (
+      <SelectFieldType
+        selectedType="number"
+        onChange={t => window.alert(`Selected type changed ${t}`)}
+      />
+    );
+  });

package.json

@@ -154,6 +154,8 @@
     "fast-csv": "^3.4.0",
     "flat": "^4.1.0",
     "javascript-stringify": "^1.6.0",
+    "lodash.isobjectlike": "^4.0.0",
+    "lodash.isplainobject": "^4.0.6",
     "lodash.throttle": "^4.1.1",
     "marky": "^1.2.1",
     "mime-types": "^2.1.24",

src/components/error-box/error-box.jsx

@@ -7,7 +7,10 @@ import styles from './error-box.less';
 import createStyler from 'utils/styler.js';
 const style = createStyler(styles, 'error-box');
 
-// TODO: lucas: Sync hex values against .less
+/**
+ * TODO: lucas: Sync hex values against palatte
+ * once we start actually produce ansi.
+ */
 const ANSI_TO_HTML_OPTIONS = {
   fg: '#FFF',
   bg: '#000',