mongodb-js · mabaasit · Apr 27, 2022 · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022
@@ -28,8 +28,6 @@ const toggleLabelStyles = css({
   marginBottom: 0,
   padding: 0,
   textTransform: 'uppercase',
-  // todo: remove this post removal of global styles
-  margin: 'inherit !important',
 });
 
 type PipelineExtraSettingsProps = {
@@ -48,7 +46,7 @@ export const PipelineExtraSettings: React.FunctionComponent<PipelineExtraSetting
         <div className={toggleStyles}>
           <Toggle
             id="auto-preview"
-            size="small"
+            size="xsmall"
             aria-label="Toggle Auto Preview"
             onChange={() => onToggleAutoPreview()}
             data-testid="pipeline-toolbar-preview-toggle"

@@ -7,6 +7,7 @@ import ToggleStage from './toggle-stage';
 import StageGrabber from './stage-grabber';
 import StageCollapser from './stage-collapser';
 import StageOperatorSelect from './stage-operator-select';
+import { Tooltip, Body, Icon } from '@mongodb-js/compass-components';
 
 import styles from './stage-editor-toolbar.module.less';
 
@@ -34,9 +35,32 @@ class StageEditorToolbar extends PureComponent {
     stageDeleted: PropTypes.func.isRequired,
     setIsModified: PropTypes.func.isRequired,
     isCommenting: PropTypes.bool.isRequired,
-    runStage: PropTypes.func.isRequired
+    runStage: PropTypes.func.isRequired,
+    isAutoPreviewing: PropTypes.bool,
   };
 
+  renderTooltip() {
+    const stages = {
+      $out: 'The $out operator will cause the pipeline to persist the results to the specified location (collection, S3, or Atlas). If the collection exists it will be replaced.',
+      $merge: 'The $merge operator will cause the pipeline to persist the results to the specified location.'
+    };
+    const { isAutoPreviewing, stageOperator } = this.props;
+    if (!isAutoPreviewing && Object.keys(stages).includes(stageOperator)) {
+      return (
+        <Tooltip
+          trigger={({ children, ...props }) => (
+            <span {...props} className={styles['tooltip-icon']}>
+              {children}
+              <Icon glyph="InfoWithCircle" />
+            </span>
+          )}
+        >
+          <Body>{stages[stageOperator]}</Body>
+        </Tooltip>
+      );
+    }
+  }
+
   /**
    * Renders the stage editor toolbar.
    *
@@ -76,6 +100,7 @@ class StageEditorToolbar extends PureComponent {
           stageToggled={this.props.stageToggled}
         />
         <div className={styles['stage-editor-toolbar-right']}>
+          {global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true' && this.renderTooltip()}
           <DeleteStage
             index={this.props.index}
             runStage={this.props.runStage}

@@ -31,6 +31,7 @@
     display: flex;
     justify-content: flex-end;
     flex-grow: 4;
+    align-items: center;
   }
 
   &-errored {
@@ -54,4 +55,9 @@
       }
     }
   }
+
+  .tooltip-icon {
+    margin-top: 6px;
+    margin-right: 6px;
+  }
 }
@@ -219,6 +219,7 @@ class StageEditor extends Component {
             onFocus={() => {
               tools.setCompleters([this.completer]);
             }}
+            showPrintMargin={false}
             onLoad={(editor) => {
               this.editor = editor;
               this.editor.commands.addCommand({

@@ -124,21 +124,7 @@ class Stage extends Component {
 
   renderEditor() {
     return (
-      <Resizable
-        className={styles['stage-editor']}
-        defaultSize={{
-          width: '388px',
-          height: 'auto'
-        }}
-        minWidth="260px"
-        maxWidth="92%"
-        enable={resizeableDirections}
-        ref={c => { this.resizableRef = c; }}
-        handleWrapperClass={styles['stage-resize-handle-wrapper']}
-        handleComponent={{
-          right: <ResizeHandle />,
-        }}
-      >
+      <>
         <DragHandleToolbar
           allowWrites={this.props.allowWrites}
           env={this.props.env}
@@ -158,6 +144,7 @@ class Stage extends Component {
           stageDeleted={this.props.stageDeleted}
           setIsModified={this.props.setIsModified}
           serverVersion={this.props.serverVersion}
+          isAutoPreviewing={this.props.isAutoPreviewing}
         />
         {this.props.isExpanded && (
           <StageEditor
@@ -180,6 +167,38 @@ class Stage extends Component {
             newPipelineFromPaste={this.props.newPipelineFromPaste}
           />
         )}
+      </>
+    );
+  }
+
+  renderResizableEditor() {
+    const { isAutoPreviewing } = this.props;
+    const editor = this.renderEditor();
+    if (
+      !isAutoPreviewing &&
+      global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true'
+    ) {
+      return <div className={styles['stage-editor-no-preview']}>{editor}</div>;
+    }
+    return (
+      <Resizable
+        className={styles['stage-editor']}
+        defaultSize={{
+          width: '388px',
+          height: 'auto',
+        }}
+        minWidth="260px"
+        maxWidth="92%"
+        enable={resizeableDirections}
+        ref={(c) => {
+          this.resizableRef = c;
+        }}
+        handleWrapperClass={styles['stage-resize-handle-wrapper']}
+        handleComponent={{
+          right: <ResizeHandle />,
+        }}
+      >
+        {editor}
       </Resizable>
     );
   }
@@ -224,6 +243,8 @@ class Stage extends Component {
    */
   render() {
     const opacity = this.getOpacity();
+    const isPreviewHidden = !this.props.isAutoPreviewing
+      && global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR ==='true';
     return (
       <div
         data-test-id="stage-container"
@@ -235,8 +256,8 @@ class Stage extends Component {
         <div className={classnames(styles.stage, {
           [styles['stage-errored']]: this.props.error
         })} style={{ opacity }}>
-          {this.renderEditor()}
-          {this.renderPreview()}
+          {this.renderResizableEditor()}
+          {!isPreviewHidden && this.renderPreview()}
         </div>
       </div>
     );

@@ -85,3 +85,7 @@
   align-items: stretch;
   border-radius: 0 0 4px 4px;
 }
+
+.stage-editor-no-preview {
+  width: 100%;
+}
@@ -0,0 +1,66 @@
+import { expect } from 'chai';
+import type { Store } from 'redux';
+
+import { toggleAutoPreview } from './auto-preview';
+import type { RootState } from '.';
+import configureStore from '../stores/store';
+import { DATA_SERVICE_CONNECTED } from './data-service';
+import { spy } from 'sinon';
+import { stageOperatorSelected, stageChanged, stageAddedAfter } from './pipeline';
+
+const initialToolbarValue = process.env.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR;
+
+describe('auto preview module', function () {
+  let store: Store<RootState>;
+  beforeEach(function () {
+    store = configureStore({});
+    process.env.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR = 'true';
+  });
+
+  afterEach(function() {
+    process.env.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR = initialToolbarValue;
+  });
+
+  it('returns the default state', function () {
+    expect(store.getState().autoPreview).to.equal(true);
+  });
+
+  it('returns the new state', function () {
+    store.dispatch(toggleAutoPreview() as any);
+    expect(store.getState().autoPreview).to.equal(false);
+  });
+
+  it('runs stages when user enables auto-preview', function () {
+    const cursorMock = {
+      toArray: spy(),
+      close: spy(),
+    };
+    const dataServiceMock = new class {
+      aggregate(...args) {
+        const callback = args[args.length - 1];
+        callback(null, cursorMock);
+      }
+    };
+    const aggregateSpy = spy(dataServiceMock, 'aggregate');
+
+    store.dispatch({
+      type: DATA_SERVICE_CONNECTED,
+      dataService: dataServiceMock
+    });
+
+    store.dispatch(stageOperatorSelected(0, '$match', false, 'on-prem') as any);
+    store.dispatch(stageChanged(`{name: /berlin/i}`, 0) as any);
+
+    store.dispatch(stageAddedAfter(0) as any);
+    store.dispatch(stageOperatorSelected(1, '$out', false, 'on-prem') as any);
+    store.dispatch(stageChanged(`'coll'`, 1) as any);
+
+
+    // by default autoPreview is true
+    store.dispatch(toggleAutoPreview() as any); // sets to false
+    store.dispatch(toggleAutoPreview() as any); // sets to true
+
+
+    expect(aggregateSpy.calledOnce, 'aggregates only once').to.be.true;
+  });
+});
@@ -0,0 +1,40 @@
+import type { AnyAction } from "redux";
+import type { ThunkAction } from "redux-thunk";
+import type { RootState } from ".";
+import { runStage } from "./pipeline";
+
+export enum ActionTypes {
+  AutoPreviewToggled = 'compass-aggregations/autoPreviewToggled',
+}
+
+type AutoPreviewToggledAction = {
+  type: ActionTypes.AutoPreviewToggled;
+};
+
+export const INITIAL_STATE = true;
+
+export default function reducer(state = INITIAL_STATE, action: AnyAction): boolean {
+  if (action.type === ActionTypes.AutoPreviewToggled) {
+    return !state;
+  }
+  return state;
+}
+
+export const toggleAutoPreview = (): ThunkAction<
+  void,
+  RootState,
+  void,
+  AutoPreviewToggledAction
+> => {
+  return (dispatch, getState) => {
+    const {
+      autoPreview,
+    } = getState();
+    if (!autoPreview && global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true') {
+      dispatch(runStage(0))
+    }
+    dispatch({
+      type: ActionTypes.AutoPreviewToggled
+    });
+  };
+};