diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx index f551e85fe3e..c87aceb718b 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx @@ -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 onToggleAutoPreview()} data-testid="pipeline-toolbar-preview-toggle" diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.jsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.jsx index a2140409bb7..7de0aef3f66 100644 --- a/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.jsx +++ b/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.jsx @@ -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 ( + ( + + {children} + + + )} + > + {stages[stageOperator]} + + ); + } + } + /** * Renders the stage editor toolbar. * @@ -76,6 +100,7 @@ class StageEditorToolbar extends PureComponent { stageToggled={this.props.stageToggled} />
+ {global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true' && this.renderTooltip()} { tools.setCompleters([this.completer]); }} + showPrintMargin={false} onLoad={(editor) => { this.editor = editor; this.editor.commands.addCommand({ diff --git a/packages/compass-aggregations/src/components/stage/stage.jsx b/packages/compass-aggregations/src/components/stage/stage.jsx index f4db3c0e57b..aee21e9c3ca 100644 --- a/packages/compass-aggregations/src/components/stage/stage.jsx +++ b/packages/compass-aggregations/src/components/stage/stage.jsx @@ -124,21 +124,7 @@ class Stage extends Component { renderEditor() { return ( - { this.resizableRef = c; }} - handleWrapperClass={styles['stage-resize-handle-wrapper']} - handleComponent={{ - right: , - }} - > + <> {this.props.isExpanded && ( )} + + ); + } + + renderResizableEditor() { + const { isAutoPreviewing } = this.props; + const editor = this.renderEditor(); + if ( + !isAutoPreviewing && + global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true' + ) { + return
{editor}
; + } + return ( + { + this.resizableRef = c; + }} + handleWrapperClass={styles['stage-resize-handle-wrapper']} + handleComponent={{ + right: , + }} + > + {editor} ); } @@ -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 (
- {this.renderEditor()} - {this.renderPreview()} + {this.renderResizableEditor()} + {!isPreviewHidden && this.renderPreview()}
); diff --git a/packages/compass-aggregations/src/components/stage/stage.module.less b/packages/compass-aggregations/src/components/stage/stage.module.less index dfb6b1effe0..24cda03a2c4 100644 --- a/packages/compass-aggregations/src/components/stage/stage.module.less +++ b/packages/compass-aggregations/src/components/stage/stage.module.less @@ -85,3 +85,7 @@ align-items: stretch; border-radius: 0 0 4px 4px; } + +.stage-editor-no-preview { + width: 100%; +} diff --git a/packages/compass-aggregations/src/modules/auto-preview.js b/packages/compass-aggregations/src/modules/auto-preview.js deleted file mode 100644 index 5085f9b194e..00000000000 --- a/packages/compass-aggregations/src/modules/auto-preview.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Auto Preview toggled action name. - */ -export const TOGGLE_AUTO_PREVIEW = 'aggregations/autoPreview/TOGGLE_AUTO_PREVIEW'; - -/** - * The initial state. - */ -export const INITIAL_STATE = true; - -/** - * Reducer function for handle state changes to autoPreview. - * - * @param {Boolean} state - The auto preview state. - * @param {Object} action - The action. - * - * @returns {Boolean} The new state. - */ -export default function reducer(state = INITIAL_STATE, action) { - if (action.type === TOGGLE_AUTO_PREVIEW) { - return !state; - } - return state; -} - -/** - * Action creator for autoPreview toggling. - * - * @returns {Object} The toggle autoPreview action. - */ -export const toggleAutoPreview = () => ({ - type: TOGGLE_AUTO_PREVIEW -}); diff --git a/packages/compass-aggregations/src/modules/auto-preview.spec.js b/packages/compass-aggregations/src/modules/auto-preview.spec.js deleted file mode 100644 index 28280b52040..00000000000 --- a/packages/compass-aggregations/src/modules/auto-preview.spec.js +++ /dev/null @@ -1,26 +0,0 @@ -import reducer, { toggleAutoPreview, TOGGLE_AUTO_PREVIEW } from './auto-preview'; -import { expect } from 'chai'; - -describe('auto preview module', function() { - describe('#toggleAutoPreview', function() { - it('returns the TOGGLE_AUTO_PREVIEW action', function() { - expect(toggleAutoPreview()).to.deep.equal({ - type: TOGGLE_AUTO_PREVIEW - }); - }); - }); - - describe('#reducer', function() { - context('when the action is not toggle auto preview', function() { - it('returns the default state', function() { - expect(reducer(undefined, { type: 'test' })).to.equal(true); - }); - }); - - context('when the action is toggle auto preview', function() { - it('returns the new state', function() { - expect(reducer(undefined, toggleAutoPreview())).to.equal(false); - }); - }); - }); -}); diff --git a/packages/compass-aggregations/src/modules/auto-preview.spec.ts b/packages/compass-aggregations/src/modules/auto-preview.spec.ts new file mode 100644 index 00000000000..1e3a06f3adf --- /dev/null +++ b/packages/compass-aggregations/src/modules/auto-preview.spec.ts @@ -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; + 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; + }); +}); diff --git a/packages/compass-aggregations/src/modules/auto-preview.ts b/packages/compass-aggregations/src/modules/auto-preview.ts new file mode 100644 index 00000000000..679b6688862 --- /dev/null +++ b/packages/compass-aggregations/src/modules/auto-preview.ts @@ -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 + }); + }; +};