Merge pull request #7 from mongodb-js/show-query-options-in-viewer

COMPASS-3825: Show skip/limit/project in query view on export

Author: imlucas

src/components/export-modal/export-modal.jsx

@@ -192,6 +192,7 @@ class ExportModal extends PureComponent {
               <QueryViewer
                 query={this.props.query}
                 disabled={isFullCollection}
+                ns={this.props.ns}
               />
             </div>
             <div className={style('toggle-full')}>

src/components/query-viewer/query-viewer.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import AceEditor from 'react-ace';
 import classnames from 'classnames';
-import toJavascriptString from 'javascript-stringify';
+import getShellJS from 'utils/get-shell-js';
 
 import styles from './query-viewer.less';
 
@@ -32,8 +32,9 @@ class QueryViewer extends PureComponent {
 
   static propTypes = {
     query: PropTypes.object.isRequired,
-    disabled: PropTypes.bool.isRequired
-  }
+    disabled: PropTypes.bool.isRequired,
+    ns: PropTypes.string.isRequired
+  };
 
   /**
    * Render the query viewer component.
@@ -47,9 +48,10 @@ class QueryViewer extends PureComponent {
           mode="javascript"
           theme="mongodb"
           width="100%"
-          value={toJavascriptString(this.props.query.filter, null, '  ')}
+          value={getShellJS(this.props.ns, this.props.query)}
           editorProps={{ $blockScrolling: Infinity }}
-          setOptions={OPTIONS} />
+          setOptions={OPTIONS}
+        />
       </div>
     );
   }

src/utils/get-shell-js.js

@@ -0,0 +1,18 @@
+import toJavascriptString from 'javascript-stringify';
+import toNS from 'mongodb-ns';
+
+export default function(ns, spec) {
+  let ret = `db.${toNS(ns).collection}.find(\n`;
+  ret += '  ' + toJavascriptString(spec.filter, null, '');
+  if (spec.project) {
+    ret += ',\n  ' + toJavascriptString(spec.project, null, '');
+  }
+  ret += '\n)';
+  if (spec.limit) {
+    ret += `.limit(${spec.limit})`;
+  }
+  if (spec.skip) {
+    ret += `.skip(${spec.skip})`;
+  }
+  return ret;
+}

src/utils/get-shell-js.spec.js

@@ -0,0 +1,49 @@
+import getShellJS from './get-shell-js';
+
+describe('get-shell-js', () => {
+  it('should support simple query', () => {
+    const ret = getShellJS('lucas.pets', { filter: { name: 'Arlo' } });
+    const expected = `db.pets.find(
+  {name:'Arlo'}
+)`;
+    expect(ret).to.equal(expected);
+  });
+  it('should support a projection', () => {
+    const ret = getShellJS('lucas.pets', {
+      filter: { name: 'Arlo' },
+      project: { name: 1 }
+    });
+    const expected = `db.pets.find(
+  {name:'Arlo'},
+  {name:1}
+)`;
+    expect(ret).to.equal(expected);
+  });
+  it('should support a skip', () => {
+    const ret = getShellJS('lucas.pets', {
+      filter: { name: 'Arlo' },
+      project: { name: 1 },
+      limit: 100
+    });
+    const expected = `db.pets.find(
+  {name:'Arlo'},
+  {name:1}
+).limit(100)`;
+
+    expect(ret).to.equal(expected);
+  });
+  it('should support a limit', () => {
+    const ret = getShellJS('lucas.pets', {
+      filter: { name: 'Arlo' },
+      project: { name: 1 },
+      limit: 100,
+      skip: 1
+    });
+    const expected = `db.pets.find(
+  {name:'Arlo'},
+  {name:1}
+).limit(100).skip(1)`;
+
+    expect(ret).to.equal(expected);
+  });
+});