From 5914dfde1246e2334c80b4257543780a303c8612 Mon Sep 17 00:00:00 2001
From: Basit <basit.chonka@mongodb.com>
Date: Thu, 12 May 2022 12:40:25 +0200
Subject: [PATCH 1/4] feat(explain-aggregation): add explain button in toolbar

---
 .../pipeline-header/pipeline-actions.tsx      | 23 ++++++++++++++++++-
 packages/compass/src/index.d.ts               |  1 +
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
index c6fabbbefe5..be5ec4483b6 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
@@ -51,6 +51,9 @@ type PipelineActionsProps = {
   isUpdateViewButtonDisabled?: boolean;
   onUpdateView: () => void;
 
+  isExplainButtonDisabled?: boolean;
+  onExplainAggregation: () => void;
+
   isOptionsVisible?: boolean;
   onToggleOptions: () => void;
 };
@@ -63,22 +66,26 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   isExportButtonDisabled,
   showUpdateViewButton,
   isUpdateViewButtonDisabled,
+  isExplainButtonDisabled,
   onUpdateView,
   onRunAggregation,
   onToggleOptions,
   onExportAggregationResults,
+  onExplainAggregation,
 }) => {
   const optionsIcon = isOptionsVisible ? 'CaretDown' : 'CaretRight';
   const showExportButton =
     process?.env?.COMPASS_ENABLE_AGGREGATION_EXPORT === 'true' &&
     _showExportButton;
+  const showExplainButton =
+    process?.env?.COMPASS_ENABLE_AGGREGATION_EXPLAIN === 'true';
   const optionsLabel = isOptionsVisible ? 'Less Options' : 'More Options';
   return (
     <div className={containerStyles}>
       {showUpdateViewButton && (
         <Button
           aria-label="Update view"
-          data-testid="pipeline-toolbar-export-aggregation-button"
+          data-testid="pipeline-toolbar-update-view-aggregation-button"
           variant="primary"
           size="small"
           onClick={onUpdateView}
@@ -87,6 +94,18 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
           Update view
         </Button>
       )}
+      {showExplainButton && (
+        <Button
+          aria-label="Explain aggregation"
+          data-testid="pipeline-toolbar-explain-aggregation-button"
+          variant="default"
+          size="small"
+          onClick={onExplainAggregation}
+          disabled={isExplainButtonDisabled}
+        >
+          Explain
+        </Button>
+      )}
       {!showUpdateViewButton && showExportButton && (
         <Button
           aria-label="Export aggregation"
@@ -146,6 +165,7 @@ const mapState = ({ pipeline, editViewName, isModified }: RootState) => {
 
   return {
     isRunButtonDisabled: isPipelineInvalid || isStageStateEmpty,
+    isExplainButtonDisabled: isPipelineInvalid,
     isExportButtonDisabled:
       isMergeOrOutPipeline || isPipelineInvalid || isStageStateEmpty,
     showUpdateViewButton: Boolean(editViewName),
@@ -158,6 +178,7 @@ const mapDispatch = {
   onUpdateView: updateView,
   onRunAggregation: runAggregation,
   onExportAggregationResults: exportAggregationResults,
+  onExplainAggregation: () => {},
 };
 
 export default connect(mapState, mapDispatch)(PipelineActions);
diff --git a/packages/compass/src/index.d.ts b/packages/compass/src/index.d.ts
index 96d6b731312..81dca15f198 100644
--- a/packages/compass/src/index.d.ts
+++ b/packages/compass/src/index.d.ts
@@ -57,6 +57,7 @@ declare module 'process' {
          */
         COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR?: 'true';
         COMPASS_ENABLE_AGGREGATION_EXPORT?: 'true' | 'false';
+        COMPASS_ENABLE_AGGREGATION_EXPLAIN?: 'true' | 'false';
 
         /**
          * Permanent feature flag for debugging.

From 0a0b6371a40a9ec2980f8825d31d1dd3b810a7f3 Mon Sep 17 00:00:00 2001
From: Basit <basit.chonka@mongodb.com>
Date: Thu, 28 Apr 2022 11:21:01 +0200
Subject: [PATCH 2/4] feat(explain-aggregation): show explain modal

---
 .../src/components/pipeline-explain/index.tsx | 35 +++++++++++++
 .../pipeline-header/pipeline-actions.tsx      |  3 +-
 .../src/components/pipeline/pipeline.jsx      |  6 ++-
 .../src/modules/explain.ts                    | 51 +++++++++++++++++++
 .../compass-aggregations/src/modules/index.ts | 11 +++-
 5 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 packages/compass-aggregations/src/components/pipeline-explain/index.tsx
 create mode 100644 packages/compass-aggregations/src/modules/explain.ts

diff --git a/packages/compass-aggregations/src/components/pipeline-explain/index.tsx b/packages/compass-aggregations/src/components/pipeline-explain/index.tsx
new file mode 100644
index 00000000000..f7ce7c60d05
--- /dev/null
+++ b/packages/compass-aggregations/src/components/pipeline-explain/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Modal, H3 } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+
+import type { RootState } from '../../modules';
+import { closeExplainModal } from '../../modules/explain';
+
+type PipelineExplainProps = {
+  isModalOpen: boolean;
+  onCloseModal: () => void;
+};
+
+export const PipelineExplain: React.FunctionComponent<PipelineExplainProps> = ({
+  isModalOpen,
+  onCloseModal,
+}) => {
+  return (
+    <Modal
+      setOpen={onCloseModal}
+      open={isModalOpen}
+      data-testid="pipeline-explain-modal"
+    >
+      <H3>Explain</H3>
+    </Modal>
+  );
+};
+
+const mapState = ({ explain: { isModalOpen } }: RootState) => ({
+  isModalOpen: isModalOpen,
+});
+
+const mapDispatch = {
+  onCloseModal: closeExplainModal,
+};
+export default connect(mapState, mapDispatch)(PipelineExplain);
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
index be5ec4483b6..c71fc2befcb 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
@@ -15,6 +15,7 @@ import {
 } from '../../../modules/aggregation';
 import { isEmptyishStage } from '../../../modules/stage';
 import { updateView } from '../../../modules/update-view';
+import { openExplainModal } from '../../../modules/explain';
 
 const containerStyles = css({
   display: 'flex',
@@ -178,7 +179,7 @@ const mapDispatch = {
   onUpdateView: updateView,
   onRunAggregation: runAggregation,
   onExportAggregationResults: exportAggregationResults,
-  onExplainAggregation: () => {},
+  onExplainAggregation: openExplainModal,
 };
 
 export default connect(mapState, mapDispatch)(PipelineActions);
diff --git a/packages/compass-aggregations/src/components/pipeline/pipeline.jsx b/packages/compass-aggregations/src/components/pipeline/pipeline.jsx
index f3c8b1a9de8..029f7eb5b60 100644
--- a/packages/compass-aggregations/src/components/pipeline/pipeline.jsx
+++ b/packages/compass-aggregations/src/components/pipeline/pipeline.jsx
@@ -18,6 +18,7 @@ import ConfirmNewPipeline from './modals/confirm-new-pipeline';
 import styles from './pipeline.module.less';
 
 import PipelineToolbar from '../pipeline-toolbar';
+import PipelineExplain from '../pipeline-explain';
 import PipelineBuilderWorkspace from '../pipeline-builder-workspace';
 import PipelineResultsWorkspace from '../pipeline-results-workspace';
 import {
@@ -126,7 +127,7 @@ class Pipeline extends PureComponent {
     toggleInputDocumentsCollapsed: PropTypes.func.isRequired,
     refreshInputDocuments: PropTypes.func.isRequired,
     showExportButton: PropTypes.bool.isRequired,
-    showRunButton: PropTypes.bool.isRequired
+    showRunButton: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -362,6 +363,9 @@ class Pipeline extends PureComponent {
         {this.renderModifyingViewSourceError()}
         {this.renderPipelineWorkspace()}
         {this.renderSavePipeline()}
+        {process?.env?.COMPASS_ENABLE_AGGREGATION_EXPLAIN === 'true' && (
+          <PipelineExplain />
+        )}
         <Settings
           isAtlasDeployed={this.props.isAtlasDeployed}
           isExpanded={this.props.settings.isExpanded}
diff --git a/packages/compass-aggregations/src/modules/explain.ts b/packages/compass-aggregations/src/modules/explain.ts
new file mode 100644
index 00000000000..47c583c61d0
--- /dev/null
+++ b/packages/compass-aggregations/src/modules/explain.ts
@@ -0,0 +1,51 @@
+import type { Reducer } from 'redux';
+
+export enum ActionTypes {
+  ModalOpened = 'compass-aggregations/modalOpened',
+  ModalClosed = 'compass-aggregations/modalClosed',
+}
+
+type ModalOpenedAction = {
+  type: ActionTypes.ModalOpened;
+};
+
+type ModalClosedAction = {
+  type: ActionTypes.ModalClosed;
+};
+
+export type Actions =
+  | ModalOpenedAction
+  | ModalClosedAction;
+
+export type State = {
+  isModalOpen: boolean;
+};
+
+export const INITIAL_STATE: State = {
+  isModalOpen: false,
+};
+
+const reducer: Reducer<State, Actions> = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case ActionTypes.ModalOpened:
+      return {
+        isModalOpen: true,
+      };
+    case ActionTypes.ModalClosed:
+      return {
+        isModalOpen: false,
+      };
+    default:
+      return state;
+  }
+};
+
+export const openExplainModal = (): ModalOpenedAction => ({
+  type: ActionTypes.ModalOpened,
+});
+
+export const closeExplainModal = (): ModalClosedAction => ({
+  type: ActionTypes.ModalClosed,
+});
+
+export default reducer;
\ No newline at end of file
diff --git a/packages/compass-aggregations/src/modules/index.ts b/packages/compass-aggregations/src/modules/index.ts
index 44a393d79f8..afecb3e1655 100644
--- a/packages/compass-aggregations/src/modules/index.ts
+++ b/packages/compass-aggregations/src/modules/index.ts
@@ -119,6 +119,11 @@ import aggregation, {
 import countDocuments, {
   INITIAL_STATE as COUNT_INITIAL_STATE
 } from './count-documents';
+
+import explain, {
+  INITIAL_STATE as EXPLAIN_INITIAL_STATE
+} from './explain';
+
 import workspace, {
   INITIAL_STATE as WORKSPACE_INITIAL_STATE
 } from './workspace';
@@ -176,6 +181,7 @@ export const INITIAL_STATE = {
   aggregation: AGGREGATION_INITIAL_STATE,
   workspace: WORKSPACE_INITIAL_STATE,
   countDocuments: COUNT_INITIAL_STATE,
+  explain: EXPLAIN_INITIAL_STATE,
 };
 
 /**
@@ -255,7 +261,8 @@ const appReducer = combineReducers({
   aggregation,
   workspace,
   countDocuments,
-  aggregationWorkspaceId
+  aggregationWorkspaceId,
+  explain,
 });
 
 export type RootState = ReturnType<typeof appReducer>;
@@ -291,7 +298,7 @@ const doNamespaceChanged = (state: RootState, action: AnyAction) => {
  *
  * @returns {Object} The new state.
  */
-const doReset= (state: RootState) => ({
+const doReset = (state: RootState) => ({
   ...INITIAL_STATE,
   aggregationWorkspaceId: state.aggregationWorkspaceId
 });

From ec3cee799392487632e8e3cd20ecdc8964cfbb10 Mon Sep 17 00:00:00 2001
From: Basit <basit.chonka@mongodb.com>
Date: Thu, 12 May 2022 13:49:12 +0200
Subject: [PATCH 3/4] feat(explain-aggregation): tests

---
 .../src/components/pipeline-explain/index.tsx |  3 +-
 .../pipeline-header/pipeline-actions.spec.tsx | 38 +++++++++++++++++++
 .../src/stores/store.spec.js                  |  1 +
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/compass-aggregations/src/components/pipeline-explain/index.tsx b/packages/compass-aggregations/src/components/pipeline-explain/index.tsx
index f7ce7c60d05..dd7b1cda9da 100644
--- a/packages/compass-aggregations/src/components/pipeline-explain/index.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-explain/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, H3 } from '@mongodb-js/compass-components';
+import { Modal, H3, Body } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 
 import type { RootState } from '../../modules';
@@ -21,6 +21,7 @@ export const PipelineExplain: React.FunctionComponent<PipelineExplainProps> = ({
       data-testid="pipeline-explain-modal"
     >
       <H3>Explain</H3>
+      <Body>Implementation in progress ...</Body>
     </Modal>
   );
 };
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
index 6abbfb06ed7..7d335e9516c 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
@@ -8,17 +8,21 @@ import type { SinonSpy } from 'sinon';
 import { PipelineActions } from './pipeline-actions';
 
 const initialEnableExport = process.env.COMPASS_ENABLE_AGGREGATION_EXPORT;
+const initialEnableExplain = process.env.COMPASS_ENABLE_AGGREGATION_EXPLAIN;
 
 describe('PipelineActions', function () {
   describe('options visible', function () {
     let onRunAggregationSpy: SinonSpy;
     let onToggleOptionsSpy: SinonSpy;
     let onExportAggregationResultsSpy: SinonSpy;
+    let onExplainAggregationSpy: SinonSpy;
     beforeEach(function () {
       process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = 'true';
+      process.env.COMPASS_ENABLE_AGGREGATION_EXPLAIN = 'true';
       onRunAggregationSpy = spy();
       onToggleOptionsSpy = spy();
       onExportAggregationResultsSpy = spy();
+      onExplainAggregationSpy = spy();
       render(
         <PipelineActions
           isOptionsVisible={true}
@@ -27,12 +31,16 @@ describe('PipelineActions', function () {
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={onToggleOptionsSpy}
           onExportAggregationResults={onExportAggregationResultsSpy}
+          isExplainButtonDisabled={false}
+          onExplainAggregation={onExplainAggregationSpy}
+          onUpdateView={() => {}}
         />
       );
     });
 
     afterEach(function () {
       process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = initialEnableExport;
+      process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = initialEnableExplain;
     });
 
     it('calls onRunAggregation callback on click', function () {
@@ -55,6 +63,15 @@ describe('PipelineActions', function () {
       expect(onExportAggregationResultsSpy.calledOnce).to.be.true;
     });
 
+    it('calls onExplainAggregation on click', function () {
+      const button = screen.getByTestId(
+        'pipeline-toolbar-explain-aggregation-button'
+      );
+      expect(button).to.exist;
+      userEvent.click(button);
+      expect(onExplainAggregationSpy.calledOnce).to.be.true;
+    });
+
     it('calls onToggleOptions on click', function () {
       const button = screen.getByTestId('pipeline-toolbar-options-button');
       expect(button).to.exist;
@@ -81,6 +98,8 @@ describe('PipelineActions', function () {
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={onToggleOptionsSpy}
           onExportAggregationResults={() => {}}
+          onUpdateView={() => {}}
+          onExplainAggregation={() => {}}
         />
       );
     });
@@ -100,12 +119,16 @@ describe('PipelineActions', function () {
   describe('disables actions when pipeline is invalid', function () {
     let onRunAggregationSpy: SinonSpy;
     let onExportAggregationResultsSpy: SinonSpy;
+    let onExplainAggregationSpy: SinonSpy;
     beforeEach(function () {
       process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = 'true';
+      process.env.COMPASS_ENABLE_AGGREGATION_EXPLAIN = 'true';
       onRunAggregationSpy = spy();
       onExportAggregationResultsSpy = spy();
+      onExplainAggregationSpy = spy();
       render(
         <PipelineActions
+          isExplainButtonDisabled={true}
           isExportButtonDisabled={true}
           isRunButtonDisabled={true}
           isOptionsVisible={true}
@@ -114,12 +137,15 @@ describe('PipelineActions', function () {
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={() => {}}
           onExportAggregationResults={onExportAggregationResultsSpy}
+          onExplainAggregation={onExplainAggregationSpy}
+          onUpdateView={() => {}}
         />
       );
     });
 
     afterEach(function () {
       process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = initialEnableExport;
+      process.env.COMPASS_ENABLE_AGGREGATION_EXPLAIN = initialEnableExplain;
     });
 
     it('run action disabled', function () {
@@ -143,5 +169,17 @@ describe('PipelineActions', function () {
       });
       expect(onExportAggregationResultsSpy.calledOnce).to.be.false;
     });
+
+    it('explain action disabled', function () {
+      const button = screen.getByTestId(
+        'pipeline-toolbar-explain-aggregation-button'
+      );
+      expect(button.getAttribute('disabled')).to.exist;
+
+      userEvent.click(button, undefined, {
+        skipPointerEventsCheck: true,
+      });
+      expect(onExplainAggregationSpy.calledOnce).to.be.false;
+    });
   });
 });
diff --git a/packages/compass-aggregations/src/stores/store.spec.js b/packages/compass-aggregations/src/stores/store.spec.js
index 1dce7ed884a..6148f0556a9 100644
--- a/packages/compass-aggregations/src/stores/store.spec.js
+++ b/packages/compass-aggregations/src/stores/store.spec.js
@@ -262,6 +262,7 @@ describe('Aggregation Store', function() {
             aggregation: INITIAL_STATE.aggregation,
             workspace: INITIAL_STATE.workspace,
             countDocuments: INITIAL_STATE.countDocuments,
+            explain: INITIAL_STATE.explain,
           });
         });
       });

From e21ac5a3598c7958bd87b4e81bee919348fc4b3c Mon Sep 17 00:00:00 2001
From: Basit <1305718+mabaasit@users.noreply.github.com>
Date: Thu, 12 May 2022 18:44:49 +0200
Subject: [PATCH 4/4] Update
 packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx

Co-authored-by: Rhys <Anemy@users.noreply.github.com>
---
 .../pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
index 7d335e9516c..46789379811 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx
@@ -40,7 +40,7 @@ describe('PipelineActions', function () {
 
     afterEach(function () {
       process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = initialEnableExport;
-      process.env.COMPASS_ENABLE_AGGREGATION_EXPORT = initialEnableExplain;
+      process.env.COMPASS_ENABLE_AGGREGATION_EXPLAIN = initialEnableExplain;
     });
 
     it('calls onRunAggregation callback on click', function () {