feat(export-code): improve query to language discoverability COMPASS-8348

packages/compass-aggregations/src/components/aggregations/aggregations.spec.tsx

@@ -9,7 +9,6 @@ describe('Aggregations [Component]', function () {
   beforeEach(async function () {
     await renderWithStore(
       <Aggregations
-        showExportButton={true}
         showRunButton={true}
         showExplainButton={true}
         enableSearchActivationProgramP1={false}

packages/compass-aggregations/src/components/pipeline-toolbar/index.spec.tsx

@@ -20,12 +20,7 @@ describe('PipelineToolbar', function () {
     let toolbar: HTMLElement;
     beforeEach(async function () {
       await renderWithStore(
-        <PipelineToolbar
-          isBuilderView
-          showExportButton
-          showRunButton
-          showExplainButton
-        />,
+        <PipelineToolbar isBuilderView showRunButton showExplainButton />,
         { pipeline: [{ $match: { _id: 1 } }] },
         undefined,
         {
@@ -106,10 +101,6 @@ describe('PipelineToolbar', function () {
         within(settings).getByTestId('pipeline-toolbar-create-new-button'),
         'shows create-new button'
       ).to.exist;
-      expect(
-        within(settings).getByTestId('pipeline-toolbar-export-button'),
-        'shows export to language button'
-      ).to.exist;
 
       expect(
         within(settings).getByTestId('pipeline-toolbar-preview-toggle'),
@@ -197,12 +188,7 @@ describe('PipelineToolbar', function () {
           assignExperiment={mockAssignExperiment}
           getAssignment={mockGetAssignment}
         >
-          <PipelineToolbar
-            isBuilderView
-            showRunButton
-            showExportButton
-            showExplainButton
-          />
+          <PipelineToolbar isBuilderView showRunButton showExplainButton />
         </CompassExperimentationProvider>,
         { pipeline: [] }, // Initial state
         undefined, // Connection info

packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx

@@ -53,15 +53,13 @@ export type PipelineToolbarProps = {
   isAggregationGeneratedFromQuery?: boolean;
   isBuilderView: boolean;
   showRunButton: boolean;
-  showExportButton: boolean;
   showExplainButton: boolean;
   onHideAIInputClick?: () => void;
 };
 
 export const PipelineToolbar: React.FunctionComponent<PipelineToolbarProps> = ({
   isBuilderView,
   showRunButton,
-  showExportButton,
   showExplainButton,
 }) => {
   const darkMode = useDarkMode();
@@ -91,7 +89,6 @@ export const PipelineToolbar: React.FunctionComponent<PipelineToolbarProps> = ({
           isOptionsVisible={isOptionsVisible}
           onToggleOptions={() => setIsOptionsVisible(!isOptionsVisible)}
           showRunButton={showRunButton}
-          showExportButton={showExportButton}
           showExplainButton={showExplainButton}
         />
         {isOptionsVisible && (

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx

@@ -17,7 +17,6 @@ describe('PipelineHeader', function () {
         isOpenPipelineVisible
         isOptionsVisible
         showRunButton
-        showExportButton
         showExplainButton
         onToggleOptions={onToggleOptionsSpy}
       />,

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx

@@ -57,7 +57,6 @@ const savedAggregationsPopoverStyles = css({
 type PipelineHeaderProps = {
   isOptionsVisible: boolean;
   showRunButton: boolean;
-  showExportButton: boolean;
   showExplainButton: boolean;
   onToggleOptions: () => void;
   isOpenPipelineVisible: boolean;
@@ -104,7 +103,6 @@ const SavedPipelinesButton: React.FunctionComponent = () => {
 
 export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   showRunButton,
-  showExportButton,
   showExplainButton,
   onToggleOptions,
   isOptionsVisible,
@@ -126,7 +124,6 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
           onToggleOptions={onToggleOptions}
           isOptionsVisible={isOptionsVisible}
           showRunButton={showRunButton}
-          showExportButton={showExportButton}
           showExplainButton={showExplainButton}
         />
       </div>

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx

@@ -26,25 +26,21 @@ describe('PipelineActions', function () {
   describe('options visible', function () {
     let onRunAggregationSpy: SinonSpy;
     let onToggleOptionsSpy: SinonSpy;
-    let onExportAggregationResultsSpy: SinonSpy;
     let onExplainAggregationSpy: SinonSpy;
 
     beforeEach(function () {
       onRunAggregationSpy = spy();
       onToggleOptionsSpy = spy();
-      onExportAggregationResultsSpy = spy();
       onExplainAggregationSpy = spy();
 
       render(
         <PipelineActions
           isOptionsVisible={true}
           showAIEntry={false}
           showRunButton={true}
-          showExportButton={true}
           showExplainButton={true}
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={onToggleOptionsSpy}
-          onExportAggregationResults={onExportAggregationResultsSpy}
           isExplainButtonDisabled={false}
           onExplainAggregation={onExplainAggregationSpy}
           onUpdateView={() => {}}
@@ -64,17 +60,6 @@ describe('PipelineActions', function () {
       expect(onRunAggregationSpy.calledOnce).to.be.true;
     });
 
-    it('calls onExportAggregationResults on click', function () {
-      const button = screen.getByTestId(
-        'pipeline-toolbar-export-aggregation-button'
-      );
-      expect(button).to.exist;
-
-      userEvent.click(button);
-
-      expect(onExportAggregationResultsSpy.calledOnce).to.be.true;
-    });
-
     it('calls onExplainAggregation on click', function () {
       const button = screen.getByTestId(
         'pipeline-toolbar-explain-aggregation-button'
@@ -107,11 +92,9 @@ describe('PipelineActions', function () {
           isOptionsVisible={false}
           showAIEntry={false}
           showRunButton={true}
-          showExportButton={true}
           showExplainButton={true}
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={onToggleOptionsSpy}
-          onExportAggregationResults={() => {}}
           onUpdateView={() => {}}
           onExplainAggregation={() => {}}
           onCollectionScanInsightActionButtonClick={() => {}}
@@ -151,11 +134,9 @@ describe('PipelineActions', function () {
             isOptionsVisible={false}
             showAIEntry={false}
             showRunButton={true}
-            showExportButton={true}
             showExplainButton={true}
             onRunAggregation={onRunAggregationSpy}
             onToggleOptions={onToggleOptionsSpy}
-            onExportAggregationResults={() => {}}
             onUpdateView={() => {}}
             onExplainAggregation={() => {}}
             onCollectionScanInsightActionButtonClick={() => {}}
@@ -174,26 +155,21 @@ describe('PipelineActions', function () {
 
   describe('disables actions when pipeline is invalid', function () {
     let onRunAggregationSpy: SinonSpy;
-    let onExportAggregationResultsSpy: SinonSpy;
     let onExplainAggregationSpy: SinonSpy;
 
     beforeEach(function () {
       onRunAggregationSpy = spy();
-      onExportAggregationResultsSpy = spy();
       onExplainAggregationSpy = spy();
       render(
         <PipelineActions
           isExplainButtonDisabled={true}
-          isExportButtonDisabled={true}
           isRunButtonDisabled={true}
           isOptionsVisible={true}
           showAIEntry={false}
           showRunButton={true}
-          showExportButton={true}
           showExplainButton={true}
           onRunAggregation={onRunAggregationSpy}
           onToggleOptions={() => {}}
-          onExportAggregationResults={onExportAggregationResultsSpy}
           onExplainAggregation={onExplainAggregationSpy}
           onUpdateView={() => {}}
           onCollectionScanInsightActionButtonClick={() => {}}
@@ -213,18 +189,6 @@ describe('PipelineActions', function () {
       expect(onRunAggregationSpy.calledOnce).to.be.false;
     });
 
-    it('export action disabled', function () {
-      const button = screen.getByTestId(
-        'pipeline-toolbar-export-aggregation-button'
-      );
-      expect(button.getAttribute('aria-disabled')).to.equal('true');
-
-      userEvent.click(button, undefined, {
-        skipPointerEventsCheck: true,
-      });
-      expect(onExportAggregationResultsSpy.calledOnce).to.be.false;
-    });
-
     it('explain action disabled', function () {
       const button = screen.getByTestId(
         'pipeline-toolbar-explain-aggregation-button'
@@ -243,7 +207,6 @@ describe('PipelineActions', function () {
       const result = await renderWithStore(
         <ConnectedPipelineActions
           showExplainButton={true}
-          showExportButton={true}
           showRunButton={true}
           onToggleOptions={() => {}}
         ></ConnectedPipelineActions>,
@@ -264,12 +227,6 @@ describe('PipelineActions', function () {
           .getAttribute('aria-disabled')
       ).to.equal('true');
 
-      expect(
-        screen
-          .getByTestId('pipeline-toolbar-export-aggregation-button')
-          .getAttribute('aria-disabled')
-      ).to.equal('true');
-
       expect(
         screen
           .getByTestId('pipeline-toolbar-run-button')
@@ -294,46 +251,12 @@ describe('PipelineActions', function () {
             .getAttribute('aria-disabled')
         ).to.equal('true');
 
-        expect(
-          screen
-            .getByTestId('pipeline-toolbar-export-aggregation-button')
-            .getAttribute('aria-disabled')
-        ).to.equal('true');
-
         expect(
           screen
             .getByTestId('pipeline-toolbar-run-button')
             .getAttribute('aria-disabled')
         ).to.equal('true');
       });
     });
-
-    it('should disable export button when pipeline is $out / $merge', async function () {
-      await renderPipelineActions({
-        pipeline: [{ $out: 'foo' }],
-      });
-
-      expect(
-        screen
-          .getByTestId('pipeline-toolbar-export-aggregation-button')
-          .getAttribute('aria-disabled')
-      ).to.equal('true');
-    });
-
-    it('should disable export button when last enabled stage is $out / $merge', async function () {
-      const { store } = await renderPipelineActions({
-        pipeline: [{ $out: 'foo' }, { $match: { _id: 1 } }],
-      });
-
-      store.dispatch(changeStageDisabled(1, true));
-
-      await waitFor(() => {
-        expect(
-          screen
-            .getByTestId('pipeline-toolbar-export-aggregation-button')
-            .getAttribute('aria-disabled')
-        ).to.equal('true');
-      });
-    });
   });
 });

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -10,10 +10,7 @@ import {
 } from '@mongodb-js/compass-components';
 import { AIExperienceEntry } from '@mongodb-js/compass-generative-ai';
 import type { RootState } from '../../../modules';
-import {
-  exportAggregationResults,
-  runAggregation,
-} from '../../../modules/aggregation';
+import { runAggregation } from '../../../modules/aggregation';
 import { updateView } from '../../../modules/update-view';
 import { explainAggregation } from '../../../modules/explain';
 import {
@@ -40,10 +37,6 @@ type PipelineActionsProps = {
   isRunButtonDisabled?: boolean;
   onRunAggregation: () => void;
 
-  showExportButton?: boolean;
-  isExportButtonDisabled?: boolean;
-  onExportAggregationResults: () => void;
-
   showUpdateViewButton?: boolean;
   isUpdateViewButtonDisabled?: boolean;
   onUpdateView: () => void;
@@ -68,8 +61,6 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   isOptionsVisible,
   showRunButton,
   isRunButtonDisabled,
-  showExportButton,
-  isExportButtonDisabled,
   showUpdateViewButton,
   isUpdateViewButtonDisabled,
   isExplainButtonDisabled,
@@ -79,7 +70,6 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   onUpdateView,
   onRunAggregation,
   onToggleOptions,
-  onExportAggregationResults,
   onExplainAggregation,
   showCollectionScanInsight,
   onCollectionScanInsightActionButtonClick,
@@ -152,18 +142,6 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
           Explain
         </Button>
       )}
-      {!showUpdateViewButton && showExportButton && (
-        <Button
-          aria-label="Export aggregation"
-          data-testid="pipeline-toolbar-export-aggregation-button"
-          variant="default"
-          size="small"
-          onClick={onExportAggregationResults}
-          disabled={isExportButtonDisabled}
-        >
-          Export
-        </Button>
-      )}
       {!showUpdateViewButton && showRunButton && (
         <Button
           aria-label="Run aggregation"
@@ -200,8 +178,6 @@ const mapState = (state: RootState) => {
   return {
     isRunButtonDisabled: hasSyntaxErrors || isAIFetching,
     isExplainButtonDisabled: hasSyntaxErrors || isAIFetching,
-    isExportButtonDisabled:
-      isMergeOrOutPipeline || hasSyntaxErrors || isAIFetching,
     showAIEntry:
       !state.pipelineBuilder.aiPipeline.isInputVisible &&
       resultPipeline.length > 0 &&
@@ -217,7 +193,6 @@ const mapState = (state: RootState) => {
 const mapDispatch = {
   onUpdateView: updateView,
   onRunAggregation: runAggregation,
-  onExportAggregationResults: exportAggregationResults,
   onExplainAggregation: explainAggregation,
   onCollectionScanInsightActionButtonClick: openCreateIndexModal,
   onShowAIInputClick: showAIInput,

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.spec.tsx

@@ -15,14 +15,18 @@ import { PipelineSettings } from '.';
 describe('PipelineSettings', function () {
   let container: HTMLElement;
   let onExportToLanguageSpy: SinonSpy;
+  let onExportDataSpy: SinonSpy;
   let onCreateNewPipelineSpy: SinonSpy;
   beforeEach(async function () {
     onExportToLanguageSpy = spy();
+    onExportDataSpy = spy();
     onCreateNewPipelineSpy = spy();
     await renderWithStore(
       <PipelineSettings
         isExportToLanguageEnabled={true}
+        isExportDataEnabled={true}
         onExportToLanguage={onExportToLanguageSpy}
+        onExportData={onExportDataSpy}
         onCreateNewPipeline={onCreateNewPipelineSpy}
       />
     );
@@ -41,9 +45,9 @@ describe('PipelineSettings', function () {
     expect(onCreateNewPipelineSpy.calledOnce).to.be.true;
   });
 
-  it('calls onExportToLanguage callback when export to language button is clicked', function () {
+  it('calls onExportToLanguage callback when export code button is clicked', function () {
     const button = within(container).getByTestId(
-      'pipeline-toolbar-export-button'
+      'pipeline-toolbar-export-code-button'
     );
     expect(button).to.exist;