feat(schema): File download COMPASS-8704

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

@@ -2,7 +2,6 @@ import { inspect } from 'util';
 import { ObjectId, EJSON } from 'bson';
 import { promises as fs, rmdirSync } from 'fs';
 import type Mocha from 'mocha';
-import path from 'path';
 import os from 'os';
 import { execFile } from 'child_process';
 import type { ExecFileOptions, ExecFileException } from 'child_process';
@@ -42,6 +41,8 @@ import {
   ELECTRON_PATH,
 } from './test-runner-paths';
 import treeKill from 'tree-kill';
+import { downloadPath } from './downloads';
+import path from 'path';
 
 const killAsync = async (pid: number, signal?: string) => {
   return new Promise<void>((resolve, reject) => {
@@ -677,6 +678,13 @@ async function startCompassElectron(
 
   try {
     browser = (await remote(options)) as CompassBrowser;
+    // https://webdriver.io/docs/best-practices/file-download/#configuring-chromium-browser-downloads
+    const page = await browser.getPuppeteer();
+    const cdpSession = await page.target().createCDPSession();
+    await cdpSession.send('Browser.setDownloadBehavior', {
+      behavior: 'allow',
+      downloadPath: downloadPath,
+    });
   } catch (err) {
     debug('Failed to start remote webdriver session', {
       error: (err as Error).stack,
@@ -755,6 +763,26 @@ export async function startBrowser(
   runCounter++;
   const { webdriverOptions, wdioOptions } = await processCommonOpts();
 
+  const browserCapabilities: Record<string, Record<string, unknown>> = {
+    chrome: {
+      'goog:chromeOptions': {
+        prefs: {
+          'download.default_directory': downloadPath,
+        },
+      },
+    },
+    firefox: {
+      'moz:firefoxOptions': {
+        prefs: {
+          'browser.download.dir': downloadPath,
+          'browser.download.folderList': 2,
+          'browser.download.manager.showWhenStarting': false,
+          'browser.helperApps.neverAsk.saveToDisk': '*/*',
+        },
+      },
+    },
+  };
+
   // webdriverio removed RemoteOptions. It is now
   // Capabilities.WebdriverIOConfig, but Capabilities is not exported
   const options = {
@@ -763,6 +791,7 @@ export async function startBrowser(
       ...(context.browserVersion && {
         browserVersion: context.browserVersion,
       }),
+      ...browserCapabilities[context.browserName],
 
       // from https://github.com/webdriverio-community/wdio-electron-service/blob/32457f60382cb4970c37c7f0a19f2907aaa32443/packages/wdio-electron-service/src/launcher.ts#L102
       'wdio:enforceWebDriverClassic': true,

packages/compass-e2e-tests/helpers/downloads.ts

@@ -0,0 +1,33 @@
+import path from 'path';
+import fs from 'fs';
+
+export const downloadPath = path.join(__dirname, 'downloads');
+
+export const waitForFileDownload = async (
+  filename: string,
+  browser: WebdriverIO.Browser
+): Promise<{
+  fileExists: boolean;
+  filePath: string;
+}> => {
+  const filePath = `${downloadPath}/${filename}`;
+  await browser.waitUntil(
+    function () {
+      return fs.existsSync(filePath);
+    },
+    { timeout: 10000, timeoutMsg: 'file not downloaded yet.' }
+  );
+
+  return { fileExists: fs.existsSync(filePath), filePath };
+};
+
+export const cleanUpDownloadedFile = (filename: string) => {
+  const filePath = `${downloadPath}/${filename}`;
+  try {
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+    }
+  } catch (err) {
+    console.error(`Error deleting file: ${(err as Error).message}`);
+  }
+};

packages/compass-e2e-tests/helpers/selectors.ts

@@ -1025,7 +1025,12 @@ export const AnalyzeSchemaButton = '[data-testid="analyze-schema-button"]';
 export const ExportSchemaButton = '[data-testid="open-schema-export-button"]';
 export const ExportSchemaFormatOptions =
   '[data-testid="export-schema-format-type-box-group"]';
+export const exportSchemaFormatOption = (
+  option: 'standardJSON' | 'mongoDBJSON' | 'extendedJSON'
+) => `label[for="export-schema-format-${option}-button"]`;
 export const ExportSchemaOutput = '[data-testid="export-schema-content"]';
+export const ExportSchemaDownloadButton =
+  '[data-testid="schema-export-download-button"]';
 export const SchemaFieldList = '[data-testid="schema-field-list"]';
 export const AnalysisMessage =
   '[data-testid="schema-content"] [data-testid="schema-analysis-message"]';

packages/compass-e2e-tests/tests/collection-schema-tab.test.ts

@@ -6,13 +6,19 @@ import {
   screenshotIfFailed,
   skipForWeb,
   DEFAULT_CONNECTION_NAME_1,
+  TEST_COMPASS_WEB,
 } from '../helpers/compass';
 import type { Compass } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
 import {
   createGeospatialCollection,
   createNumbersCollection,
 } from '../helpers/insert-data';
+import {
+  cleanUpDownloadedFile,
+  waitForFileDownload,
+} from '../helpers/downloads';
+import { readFileSync } from 'fs';
 
 const { expect } = chai;
 
@@ -111,12 +117,21 @@ describe('Collection schema tab', function () {
 
   describe('with the enableExportSchema feature flag enabled', function () {
     beforeEach(async function () {
-      // TODO(COMPASS-8819): remove web skip when defaulted true.
-      skipForWeb(this, "can't toggle features in compass-web");
-      await browser.setFeature('enableExportSchema', true);
+      if (!TEST_COMPASS_WEB)
+        await browser.setFeature('enableExportSchema', true);
+    });
+
+    const filename = 'schema-test-numbers-mongoDBJSON.json';
+
+    before(() => {
+      cleanUpDownloadedFile(filename);
     });
 
-    it('shows an exported schema to copy', async function () {
+    after(() => {
+      cleanUpDownloadedFile(filename);
+    });
+
+    it('shows an exported schema to copy (standard JSON Schema)', async function () {
       await browser.navigateToCollectionTab(
         DEFAULT_CONNECTION_NAME_1,
         'test',
@@ -157,6 +172,57 @@ describe('Collection schema tab', function () {
         },
       });
     });
+
+    it('can download schema (MongoDB $jsonSchema)', async function () {
+      await browser.navigateToCollectionTab(
+        DEFAULT_CONNECTION_NAME_1,
+        'test',
+        'numbers',
+        'Schema'
+      );
+      await browser.clickVisible(Selectors.AnalyzeSchemaButton);
+
+      const element = browser.$(Selectors.SchemaFieldList);
+      await element.waitForDisplayed();
+
+      await browser.clickVisible(Selectors.ExportSchemaButton);
+
+      const exportModal = browser.$(Selectors.ExportSchemaFormatOptions);
+      await exportModal.waitForDisplayed();
+
+      await browser.clickVisible(
+        Selectors.exportSchemaFormatOption('mongoDBJSON')
+      );
+
+      const exportSchemaButton = browser.$(
+        Selectors.ExportSchemaDownloadButton
+      );
+      await exportSchemaButton.waitForEnabled();
+      await exportSchemaButton.click();
+
+      const { fileExists, filePath } = await waitForFileDownload(
+        filename,
+        browser
+      );
+      expect(fileExists).to.be.true;
+
+      const content = readFileSync(filePath, 'utf-8');
+      expect(JSON.parse(content)).to.deep.equal({
+        bsonType: 'object',
+        required: ['_id', 'i', 'j'],
+        properties: {
+          _id: {
+            bsonType: 'objectId',
+          },
+          i: {
+            bsonType: 'int',
+          },
+          j: {
+            bsonType: 'int',
+          },
+        },
+      });
+    });
   });
 
   it('analyzes the schema with a query');

packages/compass-schema/src/components/export-schema-modal.tsx

@@ -14,6 +14,7 @@ import {
   ErrorSummary,
   Label,
   CancelLoader,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
@@ -25,6 +26,7 @@ import {
   trackSchemaExported,
   type SchemaFormat,
   type ExportStatus,
+  downloadSchema,
 } from '../stores/schema-export-reducer';
 
 const loaderStyles = css({
@@ -80,10 +82,12 @@ const ExportSchemaModal: React.FunctionComponent<{
   resultId?: string;
   exportFormat: SchemaFormat;
   exportedSchema?: string;
+  filename?: string;
   onCancelSchemaExport: () => void;
   onChangeSchemaExportFormat: (format: SchemaFormat) => Promise<void>;
   onClose: () => void;
   onExportedSchemaCopied: () => void;
+  onSchemaDownload: () => void;
 }> = ({
   errorMessage,
   exportStatus,
@@ -94,6 +98,7 @@ const ExportSchemaModal: React.FunctionComponent<{
   onChangeSchemaExportFormat,
   onClose,
   onExportedSchemaCopied,
+  onSchemaDownload,
 }) => {
   const onFormatOptionSelected = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -178,10 +183,12 @@ const ExportSchemaModal: React.FunctionComponent<{
           Cancel
         </Button>
         <Button
-          onClick={() => {
-            /* TODO(COMPASS-8704): download and track with trackSchemaExported */
-          }}
           variant="primary"
+          isLoading={exportStatus === 'inprogress'}
+          loadingIndicator={<SpinLoader />}
+          disabled={!exportedSchema}
+          onClick={onSchemaDownload}
+          data-testid="schema-export-download-button"
         >
           Export
         </Button>
@@ -197,11 +204,14 @@ export default connect(
     exportFormat: state.schemaExport.exportFormat,
     isOpen: state.schemaExport.isOpen,
     exportedSchema: state.schemaExport.exportedSchema,
+    filename: state.schemaExport.filename,
   }),
   {
     onExportedSchemaCopied: trackSchemaExported,
+    onExportedSchema: trackSchemaExported,
     onCancelSchemaExport: cancelExportSchema,
     onChangeSchemaExportFormat: changeExportSchemaFormat,
     onClose: closeExportSchema,
+    onSchemaDownload: downloadSchema,
   }
 )(ExportSchemaModal);