feat(compass-editor): add autocompleter for aggregation, use autocomp…

…leter in import pipeline modal COMPASS-6175 (#3594)

* feat(compass-editor): add autocompleter for aggregation, use autocompleter in import pipeline modal

* fix(compass-editor): exclude test files from the build

* chore(compass-editor): wrap snippets in blocks when autocompleter is triggered outside of one

* fix(compass-editor): fix test types

packages/compass-aggregations/src/components/aggregations/aggregations.jsx

@@ -35,8 +35,6 @@ import {
   newPipeline,
   newPipelineFromText,
   closeImport,
-  changeText,
-  createNew,
   confirmNew
 } from '../../modules/import-pipeline';
 import { setIsNewPipelineConfirm } from '../../modules/is-new-pipeline-confirm';
@@ -104,10 +102,7 @@ const mapStateToProps = (state) => ({
   isCommenting: state.comments,
   isAtlasDeployed: state.isAtlasDeployed,
   isAutoPreviewing: state.autoPreview,
-  isImportPipelineOpen: state.importPipeline.isOpen,
   isImportConfirmationNeeded: state.importPipeline.isConfirmationNeeded,
-  importPipelineText: state.importPipeline.text,
-  importPipelineError: state.importPipeline.syntaxError,
   settings: state.settings,
   limit: state.limit,
   largeLimit: state.largeLimit,
@@ -156,8 +151,6 @@ const MappedAggregations = connect(
     newPipelineFromText,
     closeImport,
     clonePipeline,
-    changeText,
-    createNew,
     confirmNew,
     openLink,
     applySettings,

packages/compass-aggregations/src/components/pipeline/modals/import-pipeline.spec.jsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
-import ImportPipeline from './import-pipeline';
+import { ImportPipeline } from './import-pipeline';
 import styles from './import-pipeline.module.less';
 
 describe('ImportPipeline [Component]', function() {
@@ -22,7 +22,10 @@ describe('ImportPipeline [Component]', function() {
         createNew={createNewSpy}
         changeText={changeTextSpy}
         text="testing"
-        isOpen />
+        isOpen
+        serverVersion="0.0.0"
+        fields={[]}
+      />
     );
   });
 

packages/compass-aggregations/src/components/pipeline/modals/import-pipeline.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef } from 'react';
+import { ConfirmationModal } from '@mongodb-js/compass-components';
+import type { CompletionWithServerInfo } from '@mongodb-js/compass-editor';
+import {
+  Editor,
+  EditorVariant,
+  EditorTextCompleter,
+  AggregationAutoCompleter
+} from '@mongodb-js/compass-editor';
+import {
+  changeText,
+  closeImport,
+  createNew
+} from '../../../modules/import-pipeline';
+import type { RootState } from '../../../modules';
+import styles from './import-pipeline.module.less';
+import { connect } from 'react-redux';
+
+function useAggregationCompleter(
+  ...args: ConstructorParameters<typeof AggregationAutoCompleter>
+): AggregationAutoCompleter {
+  const [version, textCompleter, fields] = args;
+  const completer = useRef<AggregationAutoCompleter>();
+  if (!completer.current) {
+    completer.current = new AggregationAutoCompleter(
+      version,
+      textCompleter,
+      fields
+    );
+  }
+  useEffect(() => {
+    completer.current?.updateFields(fields);
+  }, [fields]);
+  return completer.current;
+}
+
+export const ImportPipeline: React.FunctionComponent<{
+  isOpen?: boolean;
+  closeImport(): void;
+  changeText(newText: string): void;
+  createNew(): void;
+  text: string;
+  error?: string | null;
+  fields: CompletionWithServerInfo[];
+  serverVersion: string;
+}> = ({
+  isOpen,
+  createNew,
+  closeImport,
+  text,
+  changeText,
+  error,
+  fields,
+  serverVersion
+}) => {
+  const completer = useAggregationCompleter(
+    serverVersion,
+    EditorTextCompleter,
+    fields
+  );
+
+  return (
+    <ConfirmationModal
+      title="New Pipeline From Plain Text"
+      open={isOpen}
+      onConfirm={createNew}
+      onCancel={closeImport}
+      buttonText="Create New"
+      submitDisabled={text === ''}
+      trackingId="import_pipeline_modal"
+    >
+      <div className={styles['import-pipeline-note']}>
+        Supports MongoDB Shell syntax. Pasting a pipeline will create a new
+        pipeline.
+      </div>
+      <div className={styles['import-pipeline-editor']}>
+        <Editor
+          variant={EditorVariant.Shell}
+          text={text}
+          onChangeText={changeText}
+          options={{ minLines: 10 }}
+          completer={completer}
+          name="import-pipeline-editor"
+        />
+      </div>
+      {error && <div className={styles['import-pipeline-error']}>{error}</div>}
+    </ConfirmationModal>
+  );
+};
+
+const mapState = (state: RootState) => {
+  return {
+    isOpen: state.importPipeline.isOpen,
+    text: state.importPipeline.text,
+    error: state.importPipeline.syntaxError,
+    fields: state.fields,
+    serverVersion: state.serverVersion
+  };
+};
+
+const mapDispatch = {
+  closeImport,
+  changeText,
+  createNew
+};
+
+export default connect(mapState, mapDispatch)(ImportPipeline);

packages/compass-aggregations/src/components/pipeline/pipeline.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { Banner, WorkspaceContainer } from '@mongodb-js/compass-components';
 
 import Settings from '../settings';
@@ -46,17 +45,13 @@ class Pipeline extends PureComponent {
     newPipelineFromText: PropTypes.func.isRequired,
     closeImport: PropTypes.func.isRequired,
     clonePipeline: PropTypes.func.isRequired,
-    changeText: PropTypes.func.isRequired,
-    createNew: PropTypes.func.isRequired,
     confirmNew: PropTypes.func.isRequired,
     runStage: PropTypes.func.isRequired,
-    importPipelineText: PropTypes.string.isRequired,
     exportToLanguage: PropTypes.func.isRequired,
     fields: PropTypes.array.isRequired,
     isModified: PropTypes.bool.isRequired,
     isCommenting: PropTypes.bool.isRequired,
     isAutoPreviewing: PropTypes.bool.isRequired,
-    isImportPipelineOpen: PropTypes.bool.isRequired,
     isImportConfirmationNeeded: PropTypes.bool.isRequired,
     setIsModified: PropTypes.func.isRequired,
     gotoOutResults: PropTypes.func.isRequired,
@@ -66,7 +61,6 @@ class Pipeline extends PureComponent {
     editViewName: PropTypes.string,
     updateView: PropTypes.func.isRequired,
     updateViewError: PropTypes.string,
-    importPipelineError: PropTypes.string,
     collationString: PropTypes.object,
     collationStringChanged: PropTypes.func.isRequired,
     openLink: PropTypes.func.isRequired,
@@ -179,16 +173,6 @@ class Pipeline extends PureComponent {
    * @returns {Component} The component.
    */
   render() {
-    const importPipelineModal = (
-      <ImportPipeline
-        isOpen={this.props.isImportPipelineOpen}
-        closeImport={this.props.closeImport}
-        changeText={this.props.changeText}
-        createNew={this.props.createNew}
-        error={this.props.importPipelineError}
-        text={this.props.importPipelineText}
-      />
-    );
     const confirmImportPipelineModal = (
       <ConfirmImportPipeline
         isConfirmationNeeded={this.props.isImportConfirmationNeeded}
@@ -221,11 +205,7 @@ class Pipeline extends PureComponent {
     );
 
     return (
-      <div
-        className={classnames(
-          styles.pipeline
-        )}
-      >
+      <div className={styles.pipeline}>
         <Settings
           isAtlasDeployed={this.props.isAtlasDeployed}
           isExpanded={this.props.settings.isExpanded}
@@ -245,7 +225,7 @@ class Pipeline extends PureComponent {
         {this.renderModifyingViewSourceError()}
         {this.renderPipelineWorkspace()}
         <PipelineExplain />
-        {importPipelineModal}
+        <ImportPipeline />
         {confirmImportPipelineModal}
         {savingPipelineModal}
         {confirmNewPipelineModal}

packages/compass-aggregations/src/typings.d.ts

@@ -5,3 +5,8 @@ declare module 'mongodb-query-parser' {
     const isCollationValid: (collationString: string) => false | null | CollationOptions;
     export { isCollationValid };
 }
+
+declare module '*.module.less' {
+    const styles = Record<string, string>;
+    export default styles;
+}