Replace <Input> with <MonacoEditor> manually connected to redux

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.less

@@ -0,0 +1,23 @@
+.mongoQueryComponent {
+  margin-left: 10px;
+
+  input {
+    margin-top: 0;
+  }
+  label {
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  label:before {
+    top: 2px;
+    left: 2px;
+    height: 16px;
+    width: 16px;
+  }
+
+  .queryInput {
+    border: 1px solid black;
+    margin: 5px;
+  }
+}

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Dispatch } from "redux";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import MonacoEditor from "@nteract/monaco-editor";
 import { PrimaryButton } from "office-ui-fabric-react";
 import { ChoiceGroup, IChoiceGroupOption } from "office-ui-fabric-react/lib/ChoiceGroup";
 import Input from "@nteract/stateful-components/lib/inputs/input";
@@ -14,6 +14,7 @@ import { actions, selectors, AppState, ContentRef, KernelRef } from "@nteract/co
 import loadTransform from "../NotebookComponent/loadTransform";
 import { connect } from "react-redux";
 
+import "./MongoQueryComponent.less";
 interface MongoQueryComponentPureProps {
   contentRef: ContentRef;
   kernelRef: KernelRef;
@@ -22,6 +23,7 @@ interface MongoQueryComponentPureProps {
 interface MongoQueryComponentDispatchProps {
   runCell: (contentRef: ContentRef, cellId: string) => void;
   addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
+  onChange: (text: string, id: string, contentRef: ContentRef) => void;
 }
 
 type OutputType = "rich" | "json";
@@ -52,16 +54,28 @@ export class MongoQueryComponent extends React.Component<MongoQueryComponentProp
     this.props.runCell(this.props.contentRef, this.props.firstCellId);
   };
 
-  private onOutputTypeChange = (e: React.FormEvent<HTMLElement | HTMLInputElement>): void => {
-    const outputType = e.target.value as OutputType;
+  /**
+   *
+   * @param databaseId
+   * @param collectionId
+   * @param query e.g. { "lastName": { $in: ["Andersen"] } }
+   */
+  private createFilterQuery(databaseId: string, collectionId: string, query: string): string {
+    const newCommand = `{ "command": "filter", "database": "${databaseId}", "collection": "${collectionId}", "filter": ${JSON.stringify(query)}, "outputType": "${this.state.outputType}" }`;
+    return newCommand;
+  }
+
+  private onOutputTypeChange = (e: React.FormEvent<HTMLElement | HTMLInputElement>, option: IChoiceGroupOption): void => {
+    const outputType = option.key as OutputType;
     this.setState({ outputType });
   };
 
-  render(): JSX.Element {
-    const editor = {
-      monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
-    };
+  private onInputChange = (text: string) => {
+    this.props.onChange(this.createFilterQuery("mydb", "airbnb-ch", text),
+      this.props.firstCellId, this.props.contentRef);
+  };
 
+  render(): JSX.Element {
     const { firstCellId: id, contentRef } = this.props;
 
     if (!id) {
@@ -69,30 +83,27 @@ export class MongoQueryComponent extends React.Component<MongoQueryComponentProp
     }
 
     return (
-      <div style={{ marginLeft: 10 }}>
-        <div>
-          <Input id={id} contentRef={contentRef}>
-            <Source className="nteract-cell-source">
-              <Editor id={id} contentRef={contentRef}>
-                {editor}
-              </Editor>
-            </Source>
-          </Input>
-          <PrimaryButton text="Primary" onClick={this.onExecute} disabled={!this.props.firstCellId} />
-          <ChoiceGroup
-            selectedKey={this.state.outputType}
-            options={options}
-            onChange={this.onOutputTypeChange}
-            label="Output Type"
-          />
-          <hr />
-          <Outputs id={id} contentRef={contentRef}>
-            <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-            <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-            <KernelOutputError />
-            <StreamText />
-          </Outputs>
+      <div className="mongoQueryComponent">
+        <div className="queryInput">
+          <MonacoEditor id={this.props.firstCellId} contentRef={this.props.contentRef} theme={""}
+            language="json" onChange={this.onInputChange}
+            value={this.props.inputValue} />
         </div>
+        <PrimaryButton text="Primary" onClick={this.onExecute} disabled={!this.props.firstCellId} />
+        <ChoiceGroup
+          selectedKey={this.state.outputType}
+          options={options}
+          onChange={this.onOutputTypeChange}
+          label="Output Type"
+          styles={{ input: { marginTop: 0 }, root: { marginTop: 0 } }}
+        />
+        <hr />
+        <Outputs id={id} contentRef={contentRef}>
+          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+          <KernelOutputError />
+          <StreamText />
+        </Outputs>
       </div>
     );
   }
@@ -100,6 +111,7 @@ export class MongoQueryComponent extends React.Component<MongoQueryComponentProp
 
 interface StateProps {
   firstCellId: string;
+  inputValue: string;
 }
 interface InitialProps {
   contentRef: string;
@@ -108,29 +120,40 @@ interface InitialProps {
 // Redux
 const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
   const { contentRef } = initialProps;
-  console.log("makeMapStateToProps");
-
   const mapStateToProps = (state: AppState) => {
     let firstCellId;
-
+    let inputValue = "";
     const content = selectors.content(state, { contentRef });
-
-    console.log("Looking for first cell", content?.type, state);
     if (content?.type === "notebook") {
       const cellOrder = selectors.notebook.cellOrder(content.model);
       if (cellOrder.size > 0) {
         firstCellId = cellOrder.first() as string;
+        const cell = selectors.notebook.cellById(content.model, { id: firstCellId });
+
+        // Parse to extract filter and output type
+        const cellValue = cell.get("source", "");
+        if (cellValue) {
+          try {
+            const filterValue = JSON.parse(cellValue).filter;
+            if (filterValue) {
+              inputValue = filterValue;
+            }
+          } catch(e) {
+            console.error("Could not parse", e);
+          }
+        }
       }
     }
 
     return {
-      firstCellId
+      firstCellId,
+      inputValue
     };
   };
   return mapStateToProps;
 };
 
-const makeMapDispatchToProps = (/* initialDispatch: Dispatch, initialProps: MongoQueryComponentProps */) => {
+const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: MongoQueryComponentProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => {
     return {
       addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
@@ -148,6 +171,9 @@ const makeMapDispatchToProps = (/* initialDispatch: Dispatch, initialProps: Mong
             id: cellId
           })
         );
+      },
+      onChange: (text: string, id: string, contentRef: ContentRef) => {
+        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
       }
     };
   };

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponentAdapter.tsx

@@ -33,7 +33,6 @@ export class MongoQueryComponentAdapter extends NotebookComponentBootstrapper im
   }
 
   public renderComponent(): JSX.Element {
-    console.log("Rendering from adapter");
     return (
       <Provider store={this.getStore()}>
         <MongoQueryComponent contentRef={this.contentRef} kernelRef={this.kernelRef} />;