use version and encode data

Author: mabaasit

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { downloadDiagram, 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';
 
@@ -56,6 +56,6 @@ export default connect(
     onUndoClick: undoEdit,
     onRedoClick: redoEdit,
     onExportClick: showExportModal,
-    onDownloadClick: downloadDiagram,
+    onDownloadClick: saveDiagram,
   }
 )(DiagramEditorToolbar);

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

@@ -6,7 +6,7 @@ import {
   Diagram,
 } from '@mongodb-js/diagramming';
 import type { DiagramInstance } from '@mongodb-js/diagramming';
-import type { Edit, StaticModel } from './data-model-storage';
+import type { StaticModel } from './data-model-storage';
 import ReactDOM from 'react-dom';
 import { toPng } from 'html-to-image';
 import { rafraf, spacing } from '@mongodb-js/compass-components';
@@ -155,18 +155,11 @@ export function getExportJsonFromModel({
   };
 }
 
-export function exportEdits(fileName: string, edits: Edit[]) {
-  const json = { name: fileName, edits };
-  const blob = new Blob([JSON.stringify(json, null, 2)], {
-    type: 'application/json',
-  });
-  const url = window.URL.createObjectURL(blob);
-  downloadFile(url, `${fileName}.compass`, () => {
-    window.URL.revokeObjectURL(url);
-  });
-}
-
-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,7 +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 { exportEdits } from '../services/export-diagram';
+import { downloadDiagram } from '../services/open-and-download-diagram';
 
 function isNonEmptyArray<T>(arr: T[]): arr is [T, ...T[]] {
   return Array.isArray(arr) && arr.length > 0;
@@ -316,13 +316,13 @@ export function deleteDiagram(
   };
 }
 
-export function downloadDiagram(): DataModelingThunkAction<void, never> {
+export function saveDiagram(): DataModelingThunkAction<void, never> {
   return (_dispatch, getState) => {
     const { diagram } = getState();
     if (!diagram) {
       return;
     }
-    exportEdits(diagram.name, diagram.edits.current);
+    downloadDiagram(diagram.name, diagram.edits.current);
   };
 }