feat(compass-import-export): remove export feature flag, use new export, remove old code COMPASS-6582 (#4336)

Author: Anemy

package-lock.json

@@ -61,7 +61,6 @@
     "@mongodb-js/compass-components": "^1.8.0",
     "@mongodb-js/compass-logging": "^1.1.5",
     "bson": "^5.2.0",
-    "compass-preferences-model": "^2.8.0",
     "hadron-app-registry": "^9.0.6",
     "hadron-ipc": "^3.1.2",
     "react": "^17.0.2"
@@ -70,7 +69,6 @@
     "@mongodb-js/compass-components": "^1.8.0",
     "@mongodb-js/compass-logging": "^1.1.5",
     "bson": "^5.2.0",
-    "compass-preferences-model": "^2.8.0",
     "hadron-app-registry": "^9.0.6",
     "hadron-ipc": "^3.1.2"
   },

packages/compass-collection/package.json

@@ -6,7 +6,6 @@ import type { AnyAction } from 'redux';
 import thunk from 'redux-thunk';
 import toNS from 'mongodb-ns';
 import type { DataService } from 'mongodb-data-service';
-import preferences from 'compass-preferences-model';
 
 import appRegistry, {
   appRegistryActivated,
@@ -342,30 +341,20 @@ store.onActivated = (appRegistry: AppRegistry) => {
       const activeTab = state.tabs.find(
         (tab: WorkspaceTabObject) => tab.isActive === true
       );
-      if (activeTab) {
-        const crudStore = activeTab.localAppRegistry.getStore('CRUD.Store');
-        const { query: crudQuery, count } = crudStore.state;
-        // TODO(COMPASS-6582): Remove feature flag, use new export.
-        if (preferences.getPreferences().useNewExport) {
-          const { filter, project, collation, limit, skip, sort } = crudQuery;
-          appRegistry.emit('open-export', {
-            exportFullCollection: true,
-            namespace: activeTab.namespace,
-            query: { filter, project, collation, limit, skip, sort },
-            count,
-            origin: 'menu',
-          });
-          return;
-        }
-
-        const { filter, project, collation, limit, skip, sort } = crudQuery;
-        appRegistry.emit('open-export', {
-          exportFullCollection: true,
-          namespace: activeTab.namespace,
-          query: { filter, project, collation, limit, skip, sort },
-          count,
-        });
+      if (!activeTab) {
+        return;
       }
+      const crudStore = activeTab.localAppRegistry.getStore('CRUD.Store');
+      const { query: crudQuery, count } = crudStore.state;
+
+      const { filter, project, collation, limit, skip, sort } = crudQuery;
+      appRegistry.emit('open-export', {
+        exportFullCollection: true,
+        namespace: activeTab.namespace,
+        query: { filter, project, collation, limit, skip, sort },
+        count,
+        origin: 'menu',
+      });
     });
 
     ipc.on('compass:open-import', () => {

packages/compass-collection/src/stores/index.ts

@@ -262,9 +262,11 @@ describe('CrudToolbar Component', function () {
     });
 
     expect(exportSpy.called).to.be.false;
-    fireEvent.click(screen.getByText('Export Collection'));
+    fireEvent.click(screen.getByText('Export Data'));
+    fireEvent.click(screen.getByText('Export the full collection'));
 
     expect(exportSpy.calledOnce).to.be.true;
+    expect(exportSpy.firstCall.args[0]).to.be.true;
   });
 
   it('should not render the outdated message', function () {

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import {
   Body,
-  Button,
   DropdownMenuButton,
   Icon,
   IconButton,
@@ -16,7 +15,6 @@ import {
   WarningSummary,
   ErrorSummary,
 } from '@mongodb-js/compass-components';
-import { usePreference } from 'compass-preferences-model';
 import type { MenuAction } from '@mongodb-js/compass-components';
 
 import { AddDataMenu } from './add-data-menu';
@@ -137,8 +135,6 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
 }) => {
   const queryBarRole = localAppRegistry.getRole('Query.QueryBar')![0];
 
-  const useNewExport = usePreference('useNewExport', React);
-
   const queryBarRef = useRef(
     isExportable
       ? {
@@ -194,32 +190,19 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               instanceDescription={instanceDescription}
             />
           )}
-          {/* TODO(COMPASS-6582): Remove feature flag, use next export. */}
-          {useNewExport ? (
-            <DropdownMenuButton<ExportDataOption>
-              data-testid="crud-export-collection"
-              actions={exportDataActions}
-              onAction={(action: ExportDataOption) =>
-                openExportFileDialog(action === 'export-full-collection')
-              }
-              buttonText="Export Data"
-              buttonProps={{
-                className: exportCollectionButtonStyles,
-                size: 'xsmall',
-                leftGlyph: <Icon glyph="Export" />,
-              }}
-            />
-          ) : (
-            <Button
-              className={exportCollectionButtonStyles}
-              leftGlyph={<Icon glyph="Export" />}
-              data-testid="export-collection-button"
-              size="xsmall"
-              onClick={() => openExportFileDialog(undefined)}
-            >
-              Export Collection
-            </Button>
-          )}
+          <DropdownMenuButton<ExportDataOption>
+            data-testid="crud-export-collection"
+            actions={exportDataActions}
+            onAction={(action: ExportDataOption) =>
+              openExportFileDialog(action === 'export-full-collection')
+            }
+            buttonText="Export Data"
+            buttonProps={{
+              className: exportCollectionButtonStyles,
+              size: 'xsmall',
+              leftGlyph: <Icon glyph="Export" />,
+            }}
+          />
         </div>
         <div className={toolbarRightActionStyles}>
           <Body data-testid="crud-document-count-display">

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -8,9 +8,7 @@ import type { Element } from 'hadron-document';
 import { Document } from 'hadron-document';
 import HadronDocument from 'hadron-document';
 import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
-import preferences, {
-  capMaxTimeMSAtPreferenceLimit,
-} from 'compass-preferences-model';
+import { capMaxTimeMSAtPreferenceLimit } from 'compass-preferences-model';
 
 import {
   findDocuments,
@@ -986,27 +984,13 @@ class CrudStoreImpl
    * Emits a global app registry event the plugin listens to.
    */
   openExportFileDialog(exportFullCollection?: boolean) {
-    // TODO(COMPASS-6582): Remove feature flag, use new export.
-    if (preferences.getPreferences().useNewExport) {
-      const { filter, project, collation, limit, skip, sort } =
-        this.state.query;
-
-      this.globalAppRegistry.emit('open-export', {
-        namespace: this.state.ns,
-        query: { filter, project, collation, limit, skip, sort },
-        exportFullCollection,
-        origin: 'crud-toolbar',
-      });
-      return;
-    }
+    const { filter, project, collation, limit, skip, sort } = this.state.query;
 
-    // Only three query fields that export modal will handle
-    const { filter, limit, skip } = this.state.query;
     this.globalAppRegistry.emit('open-export', {
       namespace: this.state.ns,
-      query: { filter, limit, skip },
-      // Pass the doc count to the export modal so we can avoid re-counting.
-      count: this.state.count,
+      query: { filter, project, collation, limit, skip, sort },
+      exportFullCollection,
+      origin: 'crud-toolbar',
     });
   }
 

packages/compass-crud/src/stores/crud-store.ts

@@ -56,3 +56,4 @@ export * from './drop-database-from-sidebar';
 export * from './toggle-aggregation-side-panel';
 export * from './add-wizard';
 export * from './set-combo-box-value';
+export * from './wait-for-export-to-finish';

packages/compass-e2e-tests/helpers/commands/index.ts

@@ -1,15 +1,13 @@
 import chai, { expect } from 'chai';
 import { promises as fs } from 'fs';
 import type { CompassBrowser } from '../compass-browser';
-import * as Selectors from '../selectors';
 import chaiAsPromised from 'chai-as-promised';
 
 chai.use(chaiAsPromised);
 
 export async function setExportFilename(
   browser: CompassBrowser,
-  filename: string,
-  skipUIElementCheck?: boolean // TODO(COMPASS-6582): Remove this option an default to skipping the UI element check.
+  filename: string
 ): Promise<void> {
   // make sure the file doesn't already exist
   await expect(fs.stat(filename)).to.be.rejected;
@@ -19,20 +17,4 @@ export async function setExportFilename(
       new CustomEvent('selectExportFileName', { detail: f })
     );
   }, filename);
-
-  if (skipUIElementCheck) {
-    // With the new export we use the electron file window directly (showSaveDialog) instead
-    // of using an html input element. So we don't have an element to check here.
-    return;
-  }
-
-  await browser.waitUntil(async () => {
-    const exportModalFileInput = await browser.$(
-      Selectors.ExportModalFileInput
-    );
-    const filenames: string = await exportModalFileInput.getAttribute(
-      'data-filenames'
-    );
-    return JSON.parse(filenames).includes(filename);
-  });
 }

packages/compass-e2e-tests/helpers/commands/set-export-filename.ts

@@ -0,0 +1,20 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function waitForExportToFinishAndCloseToast(
+  browser: CompassBrowser
+) {
+  // Wait for the export to finish and close the toast.
+  const toastElement = await browser.$(Selectors.ExportToast);
+  await toastElement.waitForDisplayed();
+
+  const exportShowFileButtonElement = await browser.$(
+    Selectors.ExportToastShowFile
+  );
+  await exportShowFileButtonElement.waitForDisplayed();
+  await browser
+    .$(Selectors.closeToastButton(Selectors.ExportToast))
+    .waitForDisplayed();
+  await browser.clickVisible(Selectors.closeToastButton(Selectors.ExportToast));
+  await toastElement.waitForDisplayed({ reverse: true });
+}

packages/compass-e2e-tests/helpers/commands/wait-for-export-to-finish.ts

@@ -507,8 +507,6 @@ export const collectionHeaderTitle = (
 // Documents tab
 export const DocumentListActionBarMessage =
   '[data-testid="crud-document-count-display"]';
-export const ExportCollectionButton =
-  '[data-testid="export-collection-button"]'; // TODO(COMPASS-6582): Remove.
 export const ExportCollectionMenuButton =
   '[data-testid="crud-export-collection-show-actions"]';
 export const ExportCollectionQueryOption =
@@ -1053,28 +1051,16 @@ export const ExportJSONFormatAccordion =
   '[data-testid="export-modal"] [data-testid="export-advanced-json-format"]';
 export const ExportJSONFormatCanonical =
   '[data-testid="export-modal"] [data-testid="export-json-format-canonical"]';
-export const ExportModalFullCollectionOption =
-  '[data-testid="export-modal"] [data-testid="export-full-collection"]'; // TODO(COMPASS-6582): Remove.
-export const ExportModalSelectFieldsButton =
-  '[data-testid="export-modal"] [data-testid="select-fields-button"]'; // TODO(COMPASS-6582): Remove.
-export const ExportModalSelectOutputButton =
-  '[data-testid="export-modal"] [data-testid="select-output-button"]'; // TODO(COMPASS-6582): Remove.
 export const ExportModalExportButton =
-  '[data-testid="export-modal"] [data-testid="export-button"]'; // TODO(COMPASS-6582): Remove.
-export const ExportModalShowFileButton =
-  '[data-testid="export-modal"] [data-testid="show-file-button"]'; // TODO(COMPASS-6582): Remove.
-export const ExportModalCloseButton =
-  '[data-testid="export-modal"] [data-testid="close-button"]'; // TODO(COMPASS-6582): Remove.
-export const ExportModalFileInput =
-  '[data-testid="export-modal"] #export-file_file_input'; // // // // TODO(COMPASS-6582): Remove.
+  '[data-testid="export-modal"] [data-testid="export-button"]';
 export const ExportToast = '[data-testid="toast-export-toast"]';
 export const ExportToastAbort =
-  '[data-testid="toast-export-toast"] [data-testid="toast-action-stop"]'; // TODO: Add test that uses this.
+  '[data-testid="toast-export-toast"] [data-testid="toast-action-stop"]';
 export const ExportToastShowFile =
   '[data-testid="toast-export-toast"] [data-testid="toast-action-show file"]';
 
 export const exportModalExportField = (fieldName: string): string => {
-  return `[data-testid="export-modal"] input[type="checkbox"][name="${fieldName}"]`; // TODO(COMPASS-6582): Remove.
+  return `[data-testid="export-modal"] input[type="checkbox"][name="${fieldName}"]`;
 };
 
 // Export to language modal