chore(compass-aggregations): clean up unused slices and utils COMPASS-6167 (#3615)

* chore(compass-aggregations): clean up unused slices and utils

* chore(compass-aggregations): connect components deeper in the react tree

Author: gribnoysup

package-lock.json

@@ -59,7 +59,6 @@
     "@mongodb-js/webpack-config-compass": "^1.0.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "@types/decomment": "^0.9.2",
     "@types/prettier": "^2.7.1",
     "@types/semver": "^7.3.9",
     "chai": "^4.3.6",
@@ -73,8 +72,6 @@
     "eslint": "^7.25.0",
     "hadron-app-registry": "^9.0.1",
     "is-electron-renderer": "^2.0.1",
-    "lodash.isempty": "^4.4.0",
-    "lodash.isstring": "^4.0.1",
     "mocha": "^8.4.0",
     "mongodb": "^4.10.0",
     "mongodb-data-service": "^22.1.1",

packages/compass-aggregations/package.json

@@ -2,12 +2,12 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import InputToolbar from '../input-toolbar';
 import InputWorkspace from '../input-workspace';
+import { connect } from 'react-redux';
+import { refreshInputDocuments, toggleInputDocumentsCollapsed } from '../../modules/input-documents';
 
 import styles from './input.module.less';
 
-class Input extends PureComponent {
-  static displayName = 'InputComponent';
-
+export class Input extends PureComponent {
   static propTypes = {
     toggleInputDocumentsCollapsed: PropTypes.func.isRequired,
     refreshInputDocuments: PropTypes.func.isRequired,
@@ -45,4 +45,17 @@ class Input extends PureComponent {
   }
 }
 
-export default Input;
+export default connect(
+  (state) => {
+    return {
+      documents: state.inputDocuments.documents,
+      isLoading: state.inputDocuments.isLoading,
+      isExpanded: state.inputDocuments.isExpanded,
+      count: state.inputDocuments.count
+    };
+  },
+  {
+    toggleInputDocumentsCollapsed: toggleInputDocumentsCollapsed,
+    refreshInputDocuments: refreshInputDocuments
+  }
+)(Input);

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

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
-import Input from '../input';
+import { Input } from './input';
 import InputToolbar from '../input-toolbar';
 import styles from './input.module.less';
 
@@ -26,7 +26,6 @@ describe('Input [Component]', function() {
           documents={[]}
           isExpanded
           isLoading
-          openLink={sinon.spy()}
           count={0} />
       );
     });
@@ -57,7 +56,6 @@ describe('Input [Component]', function() {
           documents={[]}
           isExpanded={false}
           isLoading
-          openLink={sinon.spy()}
           count={0} />
       );
     });

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

@@ -5,16 +5,10 @@ import Stage from '../stage';
 import Input from '../input';
 import AddStage from '../add-stage';
 import ModifySourceBanner from '../modify-source-banner';
-
+import { moveStage } from '../../modules/pipeline-builder/stage-editor';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 
 import styles from './pipeline-builder-ui-workspace.module.less';
-import {
-  refreshInputDocuments,
-  toggleInputDocumentsCollapsed,
-} from '../../modules/input-documents';
-import { openLink } from '../../modules/link';
-import { moveStage } from '../../modules/pipeline-builder/stage-editor';
 
 const SortableStage = sortableElement(({ idx, ...props }) => {
   return <Stage index={idx} {...props}></Stage>;
@@ -25,16 +19,10 @@ const SortableContainer = sortableContainer(({ children }) => {
 });
 
 export class PipelineBuilderUIWorkspace extends PureComponent {
-  static displayName = 'PipelineBuilderUIWorkspace';
-
   static propTypes = {
     stageIds: PropTypes.array.isRequired,
     editViewName: PropTypes.string,
-    inputDocuments: PropTypes.object.isRequired,
-    onStageMoveEnd: PropTypes.func.isRequired,
-    toggleInputDocumentsCollapsed: PropTypes.func.isRequired,
-    refreshInputDocuments: PropTypes.func.isRequired,
-    openLink: PropTypes.func.isRequired
+    onStageMoveEnd: PropTypes.func.isRequired
   };
 
   /**
@@ -47,52 +35,12 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
     this.props.onStageMoveEnd(oldIndex, newIndex);
   };
 
-  /**
-   * Render the modify source banner if neccessary.
-   *
-   * @returns {Component} The component.
-   */
-  renderModifyingViewSourceBanner() {
-    if (this.props.editViewName) {
-      return <ModifySourceBanner editViewName={this.props.editViewName} />;
-    }
-  }
-
-  /**
-   * Render a stage list.
-   *
-   * @returns {Component} The component.
-   */
-  renderStageList = () => {
-    return (
-      <SortableContainer
-        axis="y"
-        lockAxis="y"
-        onSortEnd={this.onStageMoved}
-        useDragHandle
-        transitionDuration={0}
-        helperContainer={() => {
-          return this.stageListContainerRef ?? document.body;
-        }}
-        helperClass="dragging"
-        // Slight distance requirement to prevent sortable logic messing with
-        // interactive elements in the handler toolbar component
-        distance={10}
-      >
-        {this.props.stageIds.map((id, index) => {
-          return <SortableStage key={id} idx={index} index={index} />;
-        })}
-      </SortableContainer>
-    );
-  };
-
   /**
    * Renders the pipeline workspace.
    *
    * @returns {React.Component} The component.
    */
   render() {
-    const inputDocuments = this.props.inputDocuments;
     return (
       <div
         data-testid="pipeline-builder-ui-workspace"
@@ -102,19 +50,28 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
       >
         <div className={styles['pipeline-workspace-container']}>
           <div className={styles['pipeline-workspace']}>
-            {this.renderModifyingViewSourceBanner()}
-            <Input
-              toggleInputDocumentsCollapsed={
-                this.props.toggleInputDocumentsCollapsed
-              }
-              refreshInputDocuments={this.props.refreshInputDocuments}
-              documents={inputDocuments.documents}
-              isLoading={inputDocuments.isLoading}
-              isExpanded={inputDocuments.isExpanded}
-              openLink={this.props.openLink}
-              count={inputDocuments.count}
-            />
-            {this.renderStageList()}
+            {this.props.editViewName && (
+              <ModifySourceBanner editViewName={this.props.editViewName} />
+            )}
+            <Input />
+            <SortableContainer
+              axis="y"
+              lockAxis="y"
+              onSortEnd={this.onStageMoved}
+              useDragHandle
+              transitionDuration={0}
+              helperContainer={() => {
+                return this.stageListContainerRef ?? document.body;
+              }}
+              helperClass="dragging"
+              // Slight distance requirement to prevent sortable logic messing with
+              // interactive elements in the handler toolbar component
+              distance={10}
+            >
+              {this.props.stageIds.map((id, index) => {
+                return <SortableStage key={id} idx={index} index={index} />;
+              })}
+            </SortableContainer>
             <AddStage />
           </div>
         </div>
@@ -127,17 +84,15 @@ export class PipelineBuilderUIWorkspace extends PureComponent {
  *
  * @param {import('./../../modules/').RootState} state
  */
-const mapState = (state) => ({
-  stageIds: state.pipelineBuilder.stageEditor.stageIds,
-  editViewName: state.editViewName,
-  inputDocuments: state.inputDocuments
-});
+const mapState = (state) => {
+  return {
+    stageIds: state.pipelineBuilder.stageEditor.stageIds,
+    editViewName: state.editViewName
+  }
+};
 
 const mapDispatch = {
-  onStageMoveEnd: moveStage,
-  toggleInputDocumentsCollapsed,
-  refreshInputDocuments,
-  openLink
+  onStageMoveEnd: moveStage
 };
 
 export default connect(mapState, mapDispatch)(PipelineBuilderUIWorkspace);

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

@@ -1,46 +1,29 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { expect } from 'chai';
-import { PipelineBuilderUIWorkspace } from './pipeline-builder-ui-workspace';
+import { Provider } from 'react-redux';
+import configureStore from '../../stores/store'
+import PipelineBuilderUIWorkspace from './pipeline-builder-ui-workspace';
 import Stage from '../stage';
 
-/* eslint react/prop-types: 0 */
-function createPipelineWorkspace({
-  toggleInputDocumentsCollapsed = () => {},
-  refreshInputDocuments = () => {},
-  openLink = () => {},
-  inputDocuments = {},
-} = {}) {
-  return (<PipelineBuilderUIWorkspace
-    stageIds={[]}
-    inputDocuments={inputDocuments}
-    toggleInputDocumentsCollapsed={toggleInputDocumentsCollapsed}
-    refreshInputDocuments={refreshInputDocuments}
-    openLink={openLink}
-  />);
+function renderPipelineStageEditor(options) {
+  const store = configureStore(options);
+  return mount(
+    <Provider store={store}>
+      <PipelineBuilderUIWorkspace></PipelineBuilderUIWorkspace>
+    </Provider>
+  );
 }
 
-describe('PipelineWorkspace [Component]', function() {
-  it('renders', function() {
-    shallow(createPipelineWorkspace({
-      inputDocuments: {
-        documents: [],
-        isLoading: false,
-        isExpanded: true,
-        count: 0
-      }
-    }));
+describe('PipelineBuilderUIWorkspace [Component]', function () {
+  it('renders', function () {
+    expect(() => renderPipelineStageEditor()).to.not.throw;
   });
 
-  it('renders the stages contained in the pipeline', function() {
-    const wrapper = shallow(createPipelineWorkspace({
-      inputDocuments: {
-        documents: [],
-        isLoading: false,
-        isExpanded: true,
-        count: 0
-      }
-    }));
-    expect(wrapper.find(Stage)).to.have.lengthOf(0);
+  it('renders the stages contained in the pipeline', function () {
+    const wrapper = renderPipelineStageEditor({
+      sourcePipeline: [{$match: {_id: 1}}, {$limit: 10}, {$out: 'out'}]
+    });
+    expect(wrapper.find(Stage)).to.have.lengthOf(3);
   });
 });