feat(data-modeling): download diagram COMPASS-9545 (#7116)

* export diagram edits

* close file toast as user opens file

* move to toolbar

* fix test

* clean up

* unit test

* use version and encode data

Author: mabaasit

packages/compass-data-modeling/src/components/diagram-editor-toolbar.spec.tsx

@@ -12,6 +12,7 @@ function renderDiagramEditorToolbar(
       step="EDITING"
       hasUndo={true}
       hasRedo={true}
+      onDownloadClick={() => {}}
       onUndoClick={() => {}}
       onRedoClick={() => {}}
       onExportClick={() => {}}
@@ -63,12 +64,21 @@ describe('DiagramEditorToolbar', function () {
     });
   });
 
-  it('renders export buttona and calls onExportClick', function () {
+  it('renders export button and calls onExportClick', function () {
     const exportSpy = sinon.spy();
     renderDiagramEditorToolbar({ onExportClick: exportSpy });
     const exportButton = screen.getByRole('button', { name: 'Export' });
     expect(exportButton).to.exist;
     userEvent.click(exportButton);
     expect(exportSpy).to.have.been.calledOnce;
   });
+
+  it('renders download button and calls onDownloadClick', function () {
+    const downloadSpy = sinon.spy();
+    renderDiagramEditorToolbar({ onDownloadClick: downloadSpy });
+    const downloadButton = screen.getByRole('button', { name: 'Download' });
+    expect(downloadButton).to.exist;
+    userEvent.click(downloadButton);
+    expect(downloadSpy).to.have.been.calledOnce;
+  });
 });

packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx

@@ -1,23 +1,35 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { redoEdit, undoEdit } from '../store/diagram';
+import { saveDiagram, redoEdit, undoEdit } from '../store/diagram';
 import { showExportModal } from '../store/export-diagram';
 import { Icon, IconButton } from '@mongodb-js/compass-components';
 
 export const DiagramEditorToolbar: React.FunctionComponent<{
   step: DataModelingState['step'];
   hasUndo: boolean;
   hasRedo: boolean;
+  onDownloadClick: () => void;
   onUndoClick: () => void;
   onRedoClick: () => void;
   onExportClick: () => void;
-}> = ({ step, hasUndo, onUndoClick, hasRedo, onRedoClick, onExportClick }) => {
+}> = ({
+  step,
+  hasUndo,
+  onUndoClick,
+  hasRedo,
+  onRedoClick,
+  onExportClick,
+  onDownloadClick,
+}) => {
   if (step !== 'EDITING') {
     return null;
   }
   return (
     <div data-testid="diagram-editor-toolbar">
+      <IconButton aria-label="Download" onClick={onDownloadClick}>
+        <Icon glyph="Download"></Icon>
+      </IconButton>
       <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
         <Icon glyph="Undo"></Icon>
       </IconButton>
@@ -44,5 +56,6 @@ export default connect(
     onUndoClick: undoEdit,
     onRedoClick: redoEdit,
     onExportClick: showExportModal,
+    onDownloadClick: saveDiagram,
   }
 )(DiagramEditorToolbar);

packages/compass-data-modeling/src/services/export-diagram.tsx

@@ -155,7 +155,11 @@ export function getExportJsonFromModel({
   };
 }
 
-function downloadFile(uri: string, fileName: string, cleanup?: () => void) {
+export function downloadFile(
+  uri: string,
+  fileName: string,
+  cleanup?: () => void
+) {
   const link = document.createElement('a');
   link.download = fileName;
   link.href = uri;

packages/compass-data-modeling/src/services/open-and-download-diagram.spec.ts

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import { getDownloadDiagramContent } from './open-and-download-diagram';
+import FlightDiagram from '../../test/fixtures/flights-diagram.json';
+
+describe('open-and-download-diagram', function () {
+  it('should return correct content to download', function () {
+    const fileName = 'test-diagram';
+
+    const { edits, ...restOfContent } = getDownloadDiagramContent(
+      fileName,
+      FlightDiagram.edits as any
+    );
+    expect(restOfContent).to.deep.equal({
+      type: 'Compass Data Modeling Diagram',
+      version: 1,
+      name: fileName,
+    });
+
+    const decodedEdits = JSON.parse(
+      Buffer.from(edits, 'base64').toString('utf-8')
+    );
+    expect(decodedEdits).to.deep.equal(FlightDiagram.edits);
+  });
+});

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

@@ -0,0 +1,27 @@
+import type { Edit } from './data-model-storage';
+import { downloadFile } from './export-diagram';
+
+const kCurrentVersion = 1;
+const kFileTypeDescription = 'Compass Data Modeling Diagram';
+
+export function downloadDiagram(fileName: string, edits: Edit[]) {
+  const blob = new Blob(
+    [JSON.stringify(getDownloadDiagramContent(fileName, edits), null, 2)],
+    {
+      type: 'application/json',
+    }
+  );
+  const url = window.URL.createObjectURL(blob);
+  downloadFile(url, `${fileName}.compass`, () => {
+    window.URL.revokeObjectURL(url);
+  });
+}
+
+export function getDownloadDiagramContent(name: string, edits: Edit[]) {
+  return {
+    type: kFileTypeDescription,
+    version: kCurrentVersion,
+    name,
+    edits: Buffer.from(JSON.stringify(edits)).toString('base64'),
+  };
+}

packages/compass-data-modeling/src/store/diagram.ts

@@ -11,6 +11,7 @@ import { AnalysisProcessActionTypes } from './analysis-process';
 import { memoize } from 'lodash';
 import type { DataModelingState, DataModelingThunkAction } from './reducer';
 import { showConfirmation, showPrompt } from '@mongodb-js/compass-components';
+import { downloadDiagram } from '../services/open-and-download-diagram';
 
 function isNonEmptyArray<T>(arr: T[]): arr is [T, ...T[]] {
   return Array.isArray(arr) && arr.length > 0;
@@ -315,6 +316,16 @@ export function deleteDiagram(
   };
 }
 
+export function saveDiagram(): DataModelingThunkAction<void, never> {
+  return (_dispatch, getState) => {
+    const { diagram } = getState();
+    if (!diagram) {
+      return;
+    }
+    downloadDiagram(diagram.name, diagram.edits.current);
+  };
+}
+
 export function renameDiagram(
   id: string // TODO maybe pass the whole thing here, we always have it when calling this, then we don't need to re-load storage
 ): DataModelingThunkAction<Promise<void>, RenameDiagramAction> {

packages/compass-data-modeling/src/store/export-diagram.ts

@@ -118,8 +118,10 @@ export function exportDiagram(
       const cancelController = (cancelExportControllerRef.current =
         new AbortController());
 
-      const model = selectCurrentModel(getCurrentDiagramFromState(getState()));
       if (exportFormat === 'json') {
+        const model = selectCurrentModel(
+          getCurrentDiagramFromState(getState())
+        );
         exportToJson(diagram.name, model);
       } else if (exportFormat === 'png') {
         await exportToPng(