chore(compass-aggregations): connect stage-by-stage editor to new store slice COMPASS-6167 (#3610)

* chore(compass-aggregations): connect stage-by-stage editor to new store slice

* chore(compass-aggregation): remove usage of state.pipeline from actions and components

* chore(compass-aggregations): use one getStageOperator everywhere

* chore(compass-aggregation): show syntax error annotation in the stage editor

* chore(compass-aggregations): remove last usage of runStage

* chore(compass-aggregations): remove pipeline runOut / gotoOut actions usage

* chore(compass-aggregations): fix e2e tests

Author: gribnoysup

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

@@ -1,18 +1,24 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TextButton } from 'hadron-react-buttons';
+import { connect } from 'react-redux';
+import { addStage } from '../../modules/pipeline-builder/stage-editor';
 
 import styles from './add-stage.module.less';
 
 /**
  * Display a card with an add stage button.
  */
-class AddStage extends PureComponent {
+export class AddStage extends PureComponent {
   static displayName = 'AddStageComponent';
 
   static propTypes = {
-    stageAdded: PropTypes.func.isRequired
-  }
+    onAddStageClick: PropTypes.func.isRequired
+  };
+
+  onClick = () => {
+    this.props.onAddStageClick();
+  };
 
   /**
    * Render the stage component.
@@ -27,12 +33,12 @@ class AddStage extends PureComponent {
             dataTestId="add-stage"
             text="Add Stage"
             className="btn btn-xs btn-default"
-            clickHandler={this.props.stageAdded}
+            clickHandler={this.onClick}
           />
         </div>
       </div>
     );
   }
 }
 
-export default AddStage;
+export default connect(null, { onAddStageClick: addStage })(AddStage);

packages/compass-aggregations/src/components/add-stage/add-stage.spec.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { expect } from 'chai';
-import AddStage from '.';
+import { AddStage } from './add-stage';
 import styles from './add-stage.module.less';
 
 describe('AddStage [Component]', function() {
@@ -11,7 +11,7 @@ describe('AddStage [Component]', function() {
 
   beforeEach(function() {
     component = mount(
-      <AddStage stageAdded={spy} />
+      <AddStage onAddStageClick={spy} />
     );
   });
 

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

@@ -7,7 +7,6 @@ import { toggleAutoPreview } from '../../modules/auto-preview';
 import { exportToLanguage } from '../../modules/export-to-language';
 import { openLink } from '../../modules/link';
 import { clonePipeline } from "../../modules/clone-pipeline";
-import { runStage, runOutStage } from '../../modules/pipeline';
 import {
   saveCurrentPipeline,
   savedPipelineAdd,
@@ -95,8 +94,6 @@ const MappedAggregations = connect(
   {
     collationStringChanged,
     toggleAutoPreview,
-    runStage,
-    runOutStage,
     toggleSettingsIsExpanded,
     toggleSettingsIsCommentMode,
     setSettingsSampleSize,

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace.jsx

@@ -13,23 +13,8 @@ import {
   refreshInputDocuments,
   toggleInputDocumentsCollapsed,
 } from '../../modules/input-documents';
-import {
-  gotoMergeResults,
-  gotoOutResults,
-  runOutStage,
-  runStage,
-  stageAdded,
-  stageAddedAfter,
-  stageChanged,
-  stageCollapseToggled,
-  stageDeleted,
-  stageMoved,
-  stageOperatorSelected,
-  stageToggled,
-} from '../../modules/pipeline';
-import { setIsModified } from '../../modules/is-modified';
 import { openLink } from '../../modules/link';
-import { projectionsChanged } from '../../modules/projections';
+import { moveStage } from '../../modules/pipeline-builder/stage-editor';
 
 const SortableStage = sortableElement(({ idx, ...props }) => {
   return <Stage index={idx} {...props}></Stage>;
@@ -43,36 +28,13 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
   static displayName = 'PipelineBuilderUIWorkspace';
 
   static propTypes = {
+    stageIds: PropTypes.array.isRequired,
     editViewName: PropTypes.string,
-    env: PropTypes.string.isRequired,
-    isTimeSeries: PropTypes.bool.isRequired,
-    isReadonly: PropTypes.bool.isRequired,
-    sourceName: PropTypes.string,
-    pipeline: PropTypes.array.isRequired,
+    inputDocuments: PropTypes.object.isRequired,
+    onStageMoveEnd: PropTypes.func.isRequired,
     toggleInputDocumentsCollapsed: PropTypes.func.isRequired,
     refreshInputDocuments: PropTypes.func.isRequired,
-    stageAdded: PropTypes.func.isRequired,
-    setIsModified: PropTypes.func.isRequired,
-    openLink: PropTypes.func.isRequired,
-    isCommenting: PropTypes.bool.isRequired,
-    isAutoPreviewing: PropTypes.bool.isRequired,
-    inputDocuments: PropTypes.object.isRequired,
-    runStage: PropTypes.func.isRequired,
-    runOutStage: PropTypes.func.isRequired,
-    gotoOutResults: PropTypes.func.isRequired,
-    gotoMergeResults: PropTypes.func.isRequired,
-    serverVersion: PropTypes.string.isRequired,
-    stageChanged: PropTypes.func.isRequired,
-    stageCollapseToggled: PropTypes.func.isRequired,
-    stageAddedAfter: PropTypes.func.isRequired,
-    stageDeleted: PropTypes.func.isRequired,
-    stageMoved: PropTypes.func.isRequired,
-    stageOperatorSelected: PropTypes.func.isRequired,
-    stageToggled: PropTypes.func.isRequired,
-    fields: PropTypes.array.isRequired,
-    projections: PropTypes.array.isRequired,
-    projectionsChanged: PropTypes.func.isRequired,
-    isAtlasDeployed: PropTypes.bool,
+    openLink: PropTypes.func.isRequired
   };
 
   /**
@@ -82,10 +44,7 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
    * @param {Number} toIndex - The index to move to.
    */
   onStageMoved = ({ oldIndex, newIndex }) => {
-    if (oldIndex !== newIndex) {
-      this.props.stageMoved(oldIndex, newIndex);
-      this.props.runStage(0, true /* force execute */);
-    }
+    this.props.onStageMoveEnd(oldIndex, newIndex);
   };
 
   /**
@@ -99,60 +58,6 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
     }
   }
 
-  /**
-   * Render a stage.
-   *
-   * @param {Object} stage - The current stage info.
-   * @param {Number} i - The current index.
-   * @param {Function} connectDragSource - The function to render a stage editor toolbar.
-   *
-   * @returns {Component} The component.
-   */
-  renderStage = (stage, i) => {
-    return (
-      <SortableStage
-        key={stage.id}
-        idx={i}
-        index={i}
-        env={this.props.env}
-        isTimeSeries={this.props.isTimeSeries}
-        isReadonly={this.props.isReadonly}
-        sourceName={this.props.sourceName}
-        stage={stage.stage ?? ''}
-        stageOperator={stage.stageOperator}
-        error={stage.error}
-        syntaxError={stage.syntaxError}
-        isValid={stage.isValid}
-        isEnabled={stage.isEnabled}
-        isLoading={stage.isLoading}
-        isComplete={stage.isComplete}
-        isMissingAtlasOnlyStageSupport={stage.isMissingAtlasOnlyStageSupport}
-        isExpanded={stage.isExpanded}
-        isCommenting={this.props.isCommenting}
-        isAutoPreviewing={this.props.isAutoPreviewing}
-        previewDocuments={stage.previewDocuments}
-        runStage={this.props.runStage}
-        openLink={this.props.openLink}
-        runOutStage={this.props.runOutStage}
-        gotoOutResults={this.props.gotoOutResults}
-        gotoMergeResults={this.props.gotoMergeResults}
-        serverVersion={this.props.serverVersion}
-        stageChanged={this.props.stageChanged}
-        stageCollapseToggled={this.props.stageCollapseToggled}
-        stageAddedAfter={this.props.stageAddedAfter}
-        stageDeleted={this.props.stageDeleted}
-        stageMoved={this.props.stageMoved}
-        stageOperatorSelected={this.props.stageOperatorSelected}
-        stageToggled={this.props.stageToggled}
-        fields={this.props.fields}
-        setIsModified={this.props.setIsModified}
-        projections={this.props.projections}
-        projectionsChanged={this.props.projectionsChanged}
-        isAtlasDeployed={this.props.isAtlasDeployed}
-      />
-    );
-  };
-
   /**
    * Render a stage list.
    *
@@ -174,8 +79,8 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
         // interactive elements in the handler toolbar component
         distance={10}
       >
-        {this.props.pipeline.map((stage, idx) => {
-          return this.renderStage(stage, idx);
+        {this.props.stageIds.map((id, index) => {
+          return <SortableStage key={id} idx={index} index={index} />;
         })}
       </SortableContainer>
     );
@@ -210,10 +115,7 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
               count={inputDocuments.count}
             />
             {this.renderStageList()}
-            <AddStage
-              stageAdded={this.props.stageAdded}
-              setIsModified={this.props.setIsModified}
-            />
+            <AddStage />
           </div>
         </div>
       </div>
@@ -226,39 +128,16 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
  * @param {import('./../../modules/').RootState} state
  */
 const mapState = (state) => ({
+  stageIds: state.pipelineBuilder.stageEditor.stageIds,
   editViewName: state.editViewName,
-  env: state.env,
-  isTimeSeries: state.isTimeSeries,
-  isReadonly: state.isReadonly,
-  sourceName: state.sourceName,
-  pipeline: state.pipeline,
-  isCommenting: state.comments,
-  isAutoPreviewing: state.autoPreview,
-  inputDocuments: state.inputDocuments,
-  serverVersion: state.serverVersion,
-  fields: state.fields,
-  projections: state.projections,
-  isAtlasDeployed: state.isAtlasDeployed,
+  inputDocuments: state.inputDocuments
 });
 
 const mapDispatch = {
+  onStageMoveEnd: moveStage,
   toggleInputDocumentsCollapsed,
   refreshInputDocuments,
-  stageAdded,
-  setIsModified,
-  openLink,
-  runStage,
-  runOutStage,
-  gotoOutResults,
-  gotoMergeResults,
-  stageChanged,
-  stageCollapseToggled,
-  stageAddedAfter,
-  stageDeleted,
-  stageMoved,
-  stageOperatorSelected,
-  stageToggled,
-  projectionsChanged,
+  openLink
 };
 
 export default connect(mapState, mapDispatch)(PipelineBuilderUIWorkspace);