feat(compass-import-export): add export modal COMPASS-6577 (#4262)

Author: Anemy

package-lock.json

@@ -61,6 +61,7 @@
     "@mongodb-js/compass-components": "^1.7.0",
     "@mongodb-js/compass-logging": "^1.1.4",
     "bson": "^5.0.1",
+    "compass-preferences-model": "^2.7.0",
     "hadron-app-registry": "^9.0.5",
     "hadron-ipc": "^3.1.1",
     "react": "^17.0.2"
@@ -69,6 +70,7 @@
     "@mongodb-js/compass-components": "^1.7.0",
     "@mongodb-js/compass-logging": "^1.1.4",
     "bson": "^5.0.1",
+    "compass-preferences-model": "^2.7.0",
     "hadron-app-registry": "^9.0.5",
     "hadron-ipc": "^3.1.1"
   },

packages/compass-collection/package.json

@@ -6,6 +6,7 @@ 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,
@@ -344,10 +345,23 @@ store.onActivated = (appRegistry: AppRegistry) => {
       if (activeTab) {
         const crudStore = activeTab.localAppRegistry.getStore('CRUD.Store');
         const { query: crudQuery, count } = crudStore.state;
-        const { filter, limit, skip } = crudQuery;
+        // TODO(COMPASS-6580): 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,
+          });
+          return;
+        }
+
+        const { filter, project, collation, limit, skip, sort } = crudQuery;
         appRegistry.emit('open-export', {
+          exportFullCollection: true,
           namespace: activeTab.namespace,
-          query: { filter, limit, skip },
+          query: { filter, project, collation, limit, skip, sort },
           count,
         });
       }

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

@@ -4,6 +4,7 @@ import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import {
   Body,
   Button,
+  DropdownMenuButton,
   Icon,
   IconButton,
   SegmentedControl,
@@ -15,6 +16,8 @@ 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';
 
@@ -56,6 +59,12 @@ const exportCollectionButtonStyles = css({
   whiteSpace: 'nowrap',
 });
 
+type ExportDataOption = 'export-query' | 'export-full-collection';
+const exportDataActions: MenuAction<ExportDataOption>[] = [
+  { action: 'export-query', label: 'Export query results' },
+  { action: 'export-full-collection', label: 'Export the full collection' },
+];
+
 const OUTDATED_WARNING = `The content is outdated and no longer in sync
 with the current query. Press "Find" again to see the results for
 the current query.`;
@@ -93,7 +102,7 @@ export type CrudToolbarProps = {
   localAppRegistry: AppRegistry;
   onApplyClicked: () => void;
   onResetClicked: () => void;
-  openExportFileDialog: () => void;
+  openExportFileDialog: (exportFullCollection?: boolean) => void;
   outdated: boolean;
   page: number;
   readonly: boolean;
@@ -128,6 +137,8 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
 }) => {
   const queryBarRole = localAppRegistry.getRole('Query.QueryBar')![0];
 
+  const useNewExport = usePreference('useNewExport', React);
+
   const queryBarRef = useRef(
     isExportable
       ? {
@@ -183,15 +194,32 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               instanceDescription={instanceDescription}
             />
           )}
-          <Button
-            className={exportCollectionButtonStyles}
-            leftGlyph={<Icon glyph="Export" />}
-            data-testid="export-collection-button"
-            size="xsmall"
-            onClick={openExportFileDialog}
-          >
-            Export Collection
-          </Button>
+          {/* TODO(COMPASS-6580): Remove feature flag, use next export. */}
+          {useNewExport ? (
+            <DropdownMenuButton<ExportDataOption>
+              data-testid="export-collection-button"
+              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>
+          )}
         </div>
         <div className={toolbarRightActionStyles}>
           <Body data-testid="crud-document-count-display">

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

@@ -329,7 +329,6 @@ class InsertDocumentDialog extends React.PureComponent<
           <Banner
             data-testid="insert-document-banner"
             data-variant={variant}
-            dismissable={false}
             variant={variant}
             className={bannerStyles}
           >

packages/compass-crud/src/components/insert-document-dialog.tsx

@@ -8,6 +8,10 @@ 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 {
   findDocuments,
   countDocuments,
@@ -24,7 +28,6 @@ import {
   DOCUMENTS_STATUS_FETCHED_CUSTOM,
   DOCUMENTS_STATUS_FETCHED_PAGINATION,
 } from '../constants/documents-statuses';
-import { capMaxTimeMSAtPreferenceLimit } from 'compass-preferences-model';
 
 import type { DataService } from 'mongodb-data-service';
 import type {
@@ -986,7 +989,20 @@ class CrudStoreImpl
    * Open an export file dialog from compass-import-export-plugin.
    * Emits a global app registry event the plugin listens to.
    */
-  openExportFileDialog() {
+  openExportFileDialog(exportFullCollection?: boolean) {
+    // TODO(COMPASS-6580): 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,
+      });
+      return;
+    }
+
     // Only three query fields that export modal will handle
     const { filter, limit, skip } = this.state.query;
     this.globalAppRegistry.emit('open-export', {

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import { ObjectId } from 'bson';
+
+import { UnconnectedExportCodeView as ExportCodeView } from './export-code-view';
+
+function renderExportCodeView(
+  props?: Partial<React.ComponentProps<typeof ExportCodeView>>
+) {
+  return render(
+    <ExportCodeView
+      ns="test.zebra"
+      query={{
+        filter: {
+          _id: new ObjectId(),
+        },
+      }}
+      fields={{}}
+      selectedFieldOption="all-fields"
+      {...props}
+    />
+  );
+}
+
+describe('ExportCodeView [Component]', function () {
+  describe('when rendered', function () {
+    beforeEach(function () {
+      renderExportCodeView();
+    });
+
+    it('should render the query code', function () {
+      expect(screen.getByTestId('export-code-view-code')).to.be.visible;
+      const codeText = screen.getByTestId('export-code-view-code').textContent;
+      expect(codeText).to.include('db.getCollection("zebra").find(');
+      expect(screen.queryByText('Export results from the query below')).to.be
+        .visible;
+    });
+  });
+
+  describe('when rendered with selected fields', function () {
+    beforeEach(function () {
+      renderExportCodeView({
+        selectedFieldOption: 'select-fields',
+        query: {
+          filter: {},
+        },
+        fields: {
+          name: {
+            path: ['name'],
+            selected: true,
+          },
+          test: {
+            path: ['test'],
+            selected: false,
+          },
+        },
+      });
+    });
+
+    it('should render the projection using the fields', function () {
+      expect(screen.getByTestId('export-code-view-code')).to.be.visible;
+      const codeText = screen.getByTestId('export-code-view-code').textContent;
+      expect(codeText).to.include('name: true');
+      expect(codeText).to.not.include('test: true');
+    });
+  });
+});

packages/compass-import-export/src/components/export-code-view.spec.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import { connect } from 'react-redux';
+import { Body, Code, css, spacing } from '@mongodb-js/compass-components';
+
+import type { FieldsToExportOption, FieldsToExport } from '../modules/export';
+import type { RootExportState } from '../stores/export-store';
+import { createProjectionFromSchemaFields } from '../export/gather-fields';
+import type { ExportQuery } from '../export/export-types';
+import { newGetQueryAsShellJSString } from '../utils/get-shell-js';
+
+const containerStyles = css({
+  marginBottom: spacing[3],
+});
+
+type ExportCodeViewProps = {
+  ns: string;
+  query?: ExportQuery;
+  fields: FieldsToExport;
+  selectedFieldOption: undefined | FieldsToExportOption;
+};
+
+function ExportCodeView({
+  ns,
+  query,
+  fields,
+  selectedFieldOption,
+}: ExportCodeViewProps) {
+  const code = useMemo(() => {
+    if (selectedFieldOption === 'select-fields') {
+      return newGetQueryAsShellJSString({
+        query: {
+          ...(query ?? {
+            filter: {},
+          }),
+          projection: createProjectionFromSchemaFields(
+            Object.values(fields)
+              .filter((field) => field.selected)
+              .map((field) => field.path)
+          ),
+        },
+        ns,
+      });
+    }
+
+    return newGetQueryAsShellJSString({
+      query: query ?? {
+        filter: {},
+      },
+      ns,
+    });
+  }, [fields, query, ns, selectedFieldOption]);
+
+  return (
+    <div className={containerStyles}>
+      <Body>Export results from the query below</Body>
+      <Code data-testid="export-code-view-code" language="javascript" copyable>
+        {code}
+      </Code>
+    </div>
+  );
+}
+
+const ConnectedExportCodeView = connect(
+  (state: RootExportState) => ({
+    ns: state.export.namespace,
+    fields: state.export.fieldsToExport,
+    query: state.export.query,
+    selectedFieldOption: state.export.selectedFieldOption,
+  }),
+  null
+)(ExportCodeView);
+
+export { ExportCodeView as UnconnectedExportCodeView };
+export { ConnectedExportCodeView as ExportCodeView };