cleanup

Author: paula-stacho

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

@@ -1,4 +1,4 @@
-import React, { type ChangeEvent, useCallback, useMemo } from 'react';
+import React, { type ChangeEvent, useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
@@ -81,7 +81,7 @@ const ExportSchemaModal: React.FunctionComponent<{
   resultId?: string;
   exportFormat: SchemaFormat;
   exportedSchema?: string;
-  blobToDownload?: Blob;
+  downloadUrl?: string;
   filename?: string;
   onCancelSchemaExport: () => void;
   onChangeSchemaExportFormat: (format: SchemaFormat) => Promise<void>;
@@ -94,7 +94,7 @@ const ExportSchemaModal: React.FunctionComponent<{
   isOpen,
   exportFormat,
   exportedSchema,
-  blobToDownload,
+  downloadUrl,
   filename,
   onCancelSchemaExport,
   onChangeSchemaExportFormat,
@@ -111,11 +111,6 @@ 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" />
@@ -213,7 +208,7 @@ export default connect(
     exportFormat: state.schemaExport.exportFormat,
     isOpen: state.schemaExport.isOpen,
     exportedSchema: state.schemaExport.exportedSchema,
-    blobToDownload: state.schemaExport.blobToDownload,
+    downloadUrl: state.schemaExport.downloadUrl,
     filename: state.schemaExport.filename,
   }),
   {

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

@@ -27,7 +27,7 @@ export type SchemaExportState = {
   exportFormat: SchemaFormat;
   errorMessage?: string;
   exportStatus: ExportStatus;
-  blobToDownload?: Blob;
+  downloadUrl?: string;
   filename?: string;
 };
 
@@ -110,7 +110,7 @@ export type ChangeExportSchemaFormatCompletedAction = {
 
 export type schemaDownloadReadyAction = {
   type: SchemaExportActions.schemaDownloadReady;
-  blob: Blob;
+  downloadUrl: string;
   filename: string;
 };
 
@@ -127,6 +127,20 @@ export const cancelExportSchema = (): SchemaThunkAction<
   };
 };
 
+export const cleanupObjectUrl = (): SchemaThunkAction<
+  void,
+  CancelExportSchemaAction
+> => {
+  return (dispatch, getState) => {
+    const {
+      schemaExport: { downloadUrl },
+    } = getState();
+    if (downloadUrl) {
+      URL.revokeObjectURL(downloadUrl);
+    }
+  };
+};
+
 async function getSchemaByFormat({
   exportFormat,
   schemaAccessor,
@@ -228,20 +242,26 @@ export const trackSchemaExported = (): SchemaThunkAction<void> => {
 
 const prepareDownload = (): SchemaThunkAction<void> => {
   return (dispatch, getState, { namespace }) => {
-    const { exportedSchema, exportFormat } = getState().schemaExport;
+    const {
+      exportedSchema,
+      exportFormat,
+      downloadUrl: previousDownloadUrl,
+    } = getState().schemaExport;
     if (!exportedSchema) return;
 
     try {
+      if (previousDownloadUrl) URL.revokeObjectURL(previousDownloadUrl);
       const blob = new Blob([exportedSchema], {
         type: 'application/json',
       });
+      const downloadUrl = URL.createObjectURL(blob);
       const filename = `schema-${namespace.replace(
         '.',
         '-'
       )}-${exportFormat}.json`;
       dispatch({
         type: SchemaExportActions.schemaDownloadReady,
-        blob,
+        downloadUrl,
         filename,
       });
     } catch (error) {
@@ -463,7 +483,7 @@ export const schemaExportReducer: Reducer<SchemaExportState, Action> = (
   ) {
     return {
       ...state,
-      blobToDownload: action.blob,
+      downloadUrl: action.downloadUrl,
       filename: action.filename,
     };
   }

packages/compass-schema/src/stores/store.spec.ts

@@ -163,7 +163,7 @@ describe('Schema Store', function () {
             errorMessage,
             exportedSchema,
             filename,
-            blobToDownload,
+            downloadUrl,
           } = store.getState().schemaExport;
           expect(exportStatus).to.equal('complete');
           expect(!!errorMessage).to.be.false;
@@ -177,9 +177,8 @@ describe('Schema Store', function () {
             name: { type: 'string' },
           });
           expect(filename).to.equal('schema-db-coll-standardJSON.json');
-          expect(blobToDownload).to.be.a('Blob');
-          expect(blobToDownload?.type).to.equal('application/json');
-          expect(blobToDownload?.size).to.be.greaterThan(0);
+          expect(downloadUrl).to.be.a('string');
+          expect(/blob:(.*)/.test(downloadUrl || '')).to.be.true;
         });
 
         it('runs schema export formatting with a new format', async function () {
@@ -191,7 +190,7 @@ describe('Schema Store', function () {
             errorMessage,
             exportedSchema,
             filename,
-            blobToDownload,
+            downloadUrl,
           } = store.getState().schemaExport;
           expect(exportStatus).to.equal('complete');
           expect(!!errorMessage).to.be.false;
@@ -204,9 +203,8 @@ describe('Schema Store', function () {
             name: { bsonType: 'string' },
           });
           expect(filename).to.equal('schema-db-coll-mongoDBJSON.json');
-          expect(blobToDownload).to.be.a('Blob');
-          expect(blobToDownload?.type).to.equal('application/json');
-          expect(blobToDownload?.size).to.be.greaterThan(0);
+          expect(downloadUrl).to.be.a('string');
+          expect(/blob:(.*)/.test(downloadUrl || '')).to.be.true;
         });
       });
     });

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

@@ -24,6 +24,7 @@ import {
 } from './schema-analysis-reducer';
 import {
   cancelExportSchema,
+  cleanupObjectUrl,
   confirmedExportLegacySchemaToClipboard,
   openLegacyBanner,
   schemaExportReducer,
@@ -93,6 +94,7 @@ export function activateSchemaPlugin(
 
   addCleanup(() => store.dispatch(cleanupAnalysis()));
   addCleanup(() => store.dispatch(cancelExportSchema()));
+  addCleanup(() => store.dispatch(cleanupObjectUrl()));
 
   return {
     store,