wip

Author: paula-stacho

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

@@ -1,4 +1,4 @@
-import React, { type ChangeEvent, useCallback } from 'react';
+import React, { type ChangeEvent, useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
@@ -14,6 +14,8 @@ import {
   ErrorSummary,
   Label,
   CancelLoader,
+  Link,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
@@ -80,20 +82,24 @@ const ExportSchemaModal: React.FunctionComponent<{
   resultId?: string;
   exportFormat: SchemaFormat;
   exportedSchema?: string;
+  blobToDownload?: Blob;
   onCancelSchemaExport: () => void;
   onChangeSchemaExportFormat: (format: SchemaFormat) => Promise<void>;
   onClose: () => void;
   onExportedSchemaCopied: () => void;
+  onExportedSchema: () => void;
 }> = ({
   errorMessage,
   exportStatus,
   isOpen,
   exportFormat,
   exportedSchema,
+  blobToDownload,
   onCancelSchemaExport,
   onChangeSchemaExportFormat,
   onClose,
   onExportedSchemaCopied,
+  onExportedSchema,
 }) => {
   const onFormatOptionSelected = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -104,6 +110,11 @@ const ExportSchemaModal: React.FunctionComponent<{
     [onChangeSchemaExportFormat]
   );
 
+  const downloadUrl = useMemo<string | undefined>(() => {
+    if (!blobToDownload) return;
+    return window.URL.createObjectURL(blobToDownload);
+  }, [blobToDownload]);
+
   return (
     <Modal open={isOpen} setOpen={onClose}>
       <ModalHeader title="Export Schema" />
@@ -177,14 +188,19 @@ const ExportSchemaModal: React.FunctionComponent<{
         <Button onClick={onClose} variant="default">
           Cancel
         </Button>
-        <Button
-          onClick={() => {
-            /* TODO(COMPASS-8704): download and track with trackSchemaExported */
-          }}
-          variant="primary"
+        <Link
+          download="export.json" // TODO
+          href={downloadUrl}
+          onClick={onExportedSchema}
         >
-          Export
-        </Button>
+          <Button
+            variant="primary"
+            isLoading={!downloadUrl}
+            loadingIndicator={<SpinLoader />}
+          >
+            Export
+          </Button>
+        </Link>
       </ModalFooter>
     </Modal>
   );
@@ -197,9 +213,11 @@ export default connect(
     exportFormat: state.schemaExport.exportFormat,
     isOpen: state.schemaExport.isOpen,
     exportedSchema: state.schemaExport.exportedSchema,
+    blobToDownload: state.schemaExport.blobToDownload,
   }),
   {
     onExportedSchemaCopied: trackSchemaExported,
+    onExportedSchema: trackSchemaExported,
     onCancelSchemaExport: cancelExportSchema,
     onChangeSchemaExportFormat: changeExportSchemaFormat,
     onClose: closeExportSchema,

packages/compass-schema/src/stores/schema-export-reducer.ts

@@ -27,6 +27,7 @@ export type SchemaExportState = {
   exportFormat: SchemaFormat;
   errorMessage?: string;
   exportStatus: ExportStatus;
+  blobToDownload?: Blob;
 };
 
 const defaultSchemaFormat: SchemaFormat = 'standardJSON';
@@ -52,6 +53,7 @@ export const enum SchemaExportActions {
   changeExportSchemaFormatComplete = 'schema-service/schema-export/changeExportSchemaFormatComplete',
   changeExportSchemaFormatError = 'schema-service/schema-export/changeExportSchemaFormatError',
   cancelExportSchema = 'schema-service/schema-export/cancelExportSchema',
+  schemaDownloadReady = 'schema-service/schema-export/schemaDownloadReady',
 }
 
 export type OpenExportSchemaAction = {
@@ -105,6 +107,11 @@ export type ChangeExportSchemaFormatCompletedAction = {
   exportedSchema: string;
 };
 
+export type schemaDownloadReadyAction = {
+  type: SchemaExportActions.schemaDownloadReady;
+  blob: Blob;
+};
+
 export const cancelExportSchema = (): SchemaThunkAction<
   void,
   CancelExportSchemaAction
@@ -201,6 +208,37 @@ export const trackSchemaExported = (): SchemaThunkAction<void> => {
   };
 };
 
+const prepareDownload = (): SchemaThunkAction<void> => {
+  return (dispatch, getState, { track, connectionInfoRef }) => {
+    let stage = 'initial';
+    const { exportedSchema, exportFormat } = getState().schemaExport;
+
+    try {
+      stage = 'stringify';
+      // const stringified = JSON.stringify({ abc: 1 }, null, 2);
+
+      stage = 'blob';
+      // TODO: schema is already stringified. are edge cases handled?
+      // TODO: no schema case
+      const blob = new Blob([exportedSchema || ''], {
+        type: 'application/json',
+      });
+      dispatch({ type: SchemaExportActions.schemaDownloadReady, blob });
+    } catch (error) {
+      track(
+        'Schema Export Download Failed',
+        {
+          has_schema: !!exportedSchema,
+          schema_length: exportedSchema?.length || 0,
+          format: exportFormat,
+          stage,
+        },
+        connectionInfoRef.current
+      );
+    }
+  };
+};
+
 export const changeExportSchemaFormat = (
   exportFormat: SchemaFormat
 ): SchemaThunkAction<
@@ -284,6 +322,7 @@ export const changeExportSchemaFormat = (
       type: SchemaExportActions.changeExportSchemaFormatComplete,
       exportedSchema,
     });
+    dispatch(prepareDownload());
   };
 };
 
@@ -404,6 +443,18 @@ export const schemaExportReducer: Reducer<SchemaExportState, Action> = (
     };
   }
 
+  if (
+    isAction<schemaDownloadReadyAction>(
+      action,
+      SchemaExportActions.schemaDownloadReady
+    )
+  ) {
+    return {
+      ...state,
+      blobToDownload: action.blob,
+    };
+  }
+
   return state;
 };
 

packages/compass-telemetry/src/telemetry-events.ts

@@ -2024,6 +2024,27 @@ type SchemaExportedEvent = ConnectionScopedEvent<{
   };
 }>;
 
+/**
+ * This event is fired when user shares the schema.
+ *
+ * @category Schema
+ */
+type SchemaExportFailedEvent = ConnectionScopedEvent<{
+  name: 'Schema Export Download Failed';
+  payload: {
+    /**
+     * Indicates whether the schema was analyzed before sharing.
+     */
+    has_schema: boolean;
+
+    schema_length: number;
+
+    format: 'standardJSON' | 'mongoDBJSON' | 'extendedJSON' | 'legacyJSON';
+
+    stage: string;
+  };
+}>;
+
 /**
  * This event is fired when a user clicks to show the details of an operation.
  *
@@ -2729,6 +2750,7 @@ export type TelemetryEvent =
   | SchemaAnalysisCancelledEvent
   | SchemaAnalyzedEvent
   | SchemaExportedEvent
+  | SchemaExportFailedEvent
   | SchemaValidationAddedEvent
   | SchemaValidationEditedEvent
   | SchemaValidationUpdatedEvent

packages/compass-web/sandbox/index.tsx

@@ -127,6 +127,7 @@ const App = () => {
             onActiveWorkspaceTabChange={updateCurrentTab}
             initialWorkspace={currentTab ?? undefined}
             initialPreferences={{
+              enableExportSchema: true,
               enablePerformanceAdvisorBanner: isAtlas,
               enableAtlasSearchIndexes: !isAtlas,
               maximumNumberOfActiveConnections: isAtlas ? 10 : undefined,

packages/compass/src/app/utils/csp.ts

@@ -62,6 +62,7 @@ const defaultCSP = {
   ],
   'script-src': [
     "'self'",
+    'blob:',
     'https://app.intercom.io',
     'https://widget.intercom.io',
     'https://js.intercomcdn.com',
@@ -100,6 +101,8 @@ function injectCSP() {
         return `${name} ${values.join(' ')}`;
       })
       .join('; ') + ';';
+
+  console.log({ cspContent });
   metaCSP.setAttribute('http-equiv', 'Content-Security-Policy');
   metaCSP.setAttribute('content', cspContent);
   document.head.prepend(metaCSP);