chore(data-modeling): move export state to redux and add telemetry COMPASS-9523 (#7092)

* move export state to redux

* add telemetry

* handle rejecting

* controller in args and add comment for rafraf

Author: mabaasit

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { redoEdit, showExportModal, undoEdit } from '../store/diagram';
+import { redoEdit, undoEdit } from '../store/diagram';
+import { showExportModal } from '../store/export-diagram';
 import { Icon, IconButton } from '@mongodb-js/compass-components';
 
 export const DiagramEditorToolbar: React.FunctionComponent<{

packages/compass-data-modeling/src/components/export-diagram-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import {
   Button,
   css,
@@ -13,19 +13,17 @@ import {
   RadioGroup,
   spacing,
   SpinLoader,
-  openToast,
 } from '@mongodb-js/compass-components';
+import type { ExportDiagramFormat } from '../store/export-diagram';
 import {
   closeExportModal,
-  selectCurrentModel,
-  getCurrentDiagramFromState,
-} from '../store/diagram';
+  exportDiagram,
+  selectFormat,
+} from '../store/export-diagram';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import type { StaticModel } from '../services/data-model-storage';
-import { exportToJson, exportToPng } from '../services/export-diagram';
 import { useDiagram } from '@mongodb-js/diagramming';
-import { isCancelError } from '@mongodb-js/compass-utils';
+import type { DiagramInstance } from '@mongodb-js/diagramming';
 
 const nbsp = '\u00a0';
 
@@ -52,79 +50,27 @@ const footerStyles = css({
 
 type ExportDiagramModalProps = {
   isModalOpen: boolean;
-  diagramLabel: string;
-  model: StaticModel | null;
+  isExporting: boolean;
+  exportFormat?: ExportDiagramFormat;
+  onExportDiagram: (diagramInstance: DiagramInstance) => void;
+  onSelectFormat: (format: ExportDiagramFormat) => void;
   onCloseClick: () => void;
 };
 
 const ExportDiagramModal = ({
   isModalOpen,
-  diagramLabel,
-  model,
+  isExporting,
+  exportFormat,
+  onExportDiagram,
+  onSelectFormat,
   onCloseClick,
 }: ExportDiagramModalProps) => {
-  const [exportFormat, setExportFormat] = useState<'png' | 'json' | null>(null);
   const diagram = useDiagram();
-  const [isExporting, setIsExporting] = useState(false);
-  const abortControllerRef = useRef<AbortController | null>(null);
-  useEffect(() => {
-    const cleanup = () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-        abortControllerRef.current = null;
-      }
-    };
-    const abortController = new AbortController();
-    if (isModalOpen) {
-      abortControllerRef.current = abortController;
-    } else {
-      cleanup();
-    }
-    return cleanup;
-  }, [isModalOpen]);
-
-  const onClose = useCallback(() => {
-    setIsExporting(false);
-    abortControllerRef.current?.abort();
-    abortControllerRef.current = null;
-    onCloseClick();
-  }, [onCloseClick]);
-
-  const onExport = useCallback(async () => {
-    try {
-      if (!exportFormat || !model) {
-        return;
-      }
-      setIsExporting(true);
-      if (exportFormat === 'json') {
-        exportToJson(diagramLabel, model);
-      } else if (exportFormat === 'png') {
-        await exportToPng(
-          diagramLabel,
-          diagram,
-          abortControllerRef.current?.signal
-        );
-      }
-    } catch (error) {
-      if (isCancelError(error)) {
-        return;
-      }
-      openToast('export-diagram-error', {
-        variant: 'warning',
-        title: 'Export failed',
-        description: `An error occurred while exporting the diagram: ${
-          (error as Error).message
-        }`,
-      });
-    } finally {
-      onClose();
-    }
-  }, [exportFormat, onClose, model, diagram, diagramLabel]);
 
   return (
     <Modal
       open={isModalOpen}
-      setOpen={onClose}
+      setOpen={onCloseClick}
       data-testid="export-diagram-modal"
     >
       <ModalHeader
@@ -153,7 +99,7 @@ const ExportDiagramModal = ({
                 checked={exportFormat === 'png'}
                 value="png"
                 aria-label="PNG"
-                onClick={() => setExportFormat('png')}
+                onClick={() => onSelectFormat('png')}
               >
                 PNG
               </Radio>
@@ -164,7 +110,7 @@ const ExportDiagramModal = ({
                 checked={exportFormat === 'json'}
                 value="json"
                 aria-label="JSON"
-                onClick={() => setExportFormat('json')}
+                onClick={() => onSelectFormat('json')}
               >
                 JSON
               </Radio>
@@ -175,15 +121,19 @@ const ExportDiagramModal = ({
       <ModalFooter className={footerStyles}>
         <Button
           variant="primary"
-          onClick={() => void onExport()}
+          onClick={() => onExportDiagram(diagram)}
           data-testid="export-button"
-          disabled={!exportFormat || !model}
+          disabled={!exportFormat}
           loadingIndicator={<SpinLoader />}
           isLoading={isExporting}
         >
           Export
         </Button>
-        <Button variant="default" onClick={onClose} data-testid="cancel-button">
+        <Button
+          variant="default"
+          onClick={onCloseClick}
+          data-testid="cancel-button"
+        >
           Cancel
         </Button>
       </ModalFooter>
@@ -193,17 +143,18 @@ const ExportDiagramModal = ({
 
 export default connect(
   (state: DataModelingState) => {
-    const { diagram } = state;
-    const model = diagram
-      ? selectCurrentModel(getCurrentDiagramFromState(state))
-      : null;
+    const {
+      exportDiagram: { isExporting, isModalOpen, exportFormat },
+    } = state;
     return {
-      model,
-      diagramLabel: diagram?.name ?? 'Schema Preview',
-      isModalOpen: Boolean(diagram?.isExportModalOpen),
+      isModalOpen,
+      isExporting,
+      exportFormat,
     };
   },
   {
     onCloseClick: closeExportModal,
+    onSelectFormat: selectFormat,
+    onExportDiagram: exportDiagram,
   }
 )(ExportDiagramModal);

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

@@ -46,7 +46,7 @@ export async function exportToPng(
 }
 
 export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> {
-  return new Promise<string>((resolve, _reject) => {
+  return new Promise<string>((resolve, reject) => {
     const bounds = getNodesBounds(diagram.getNodes());
 
     const container = document.createElement('div');
@@ -65,11 +65,6 @@ export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> {
       selected: false, // Dont show selected state (blue border)
     }));
 
-    const reject = (error: Error) => {
-      document.body.removeChild(container);
-      _reject(error);
-    };
-
     ReactDOM.render(
       <DiagramProvider>
         <Diagram
@@ -80,6 +75,9 @@ export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> {
       </DiagramProvider>,
       container,
       () => {
+        // We skip some frames here to ensure that the DOM has fully rendered and React has
+        // committed all updates before we try to query for viewport element. Without this,
+        // the element may not exist yet or may not have the correct styles etc.
         rafraf(() => {
           // For export we are selecting react-flow__viewport element,
           // which contains the export canvas. It excludes diagram
@@ -91,6 +89,7 @@ export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> {
             '.react-flow__viewport'
           );
           if (!viewportElement) {
+            document.body.removeChild(container);
             return reject(new Error('Diagram element not found'));
           }
 

packages/compass-data-modeling/src/store/analysis-process.ts

@@ -144,7 +144,7 @@ export function startAnalysis(
     const namespaces = collections.map((collName) => {
       return `${database}.${collName}`;
     });
-    const cancelController = (services.cancelControllerRef.current =
+    const cancelController = (services.cancelAnalysisControllerRef.current =
       new AbortController());
     dispatch({
       type: AnalysisProcessActionTypes.ANALYZING_COLLECTIONS_START,
@@ -223,7 +223,7 @@ export function startAnalysis(
         });
       }
     } finally {
-      services.cancelControllerRef.current = null;
+      services.cancelAnalysisControllerRef.current = null;
     }
   };
 }
@@ -250,8 +250,8 @@ export function retryAnalysis(): DataModelingThunkAction<void, never> {
 }
 
 export function cancelAnalysis(): DataModelingThunkAction<void, never> {
-  return (_dispatch, _getState, { cancelControllerRef }) => {
-    cancelControllerRef.current?.abort();
-    cancelControllerRef.current = null;
+  return (_dispatch, _getState, { cancelAnalysisControllerRef }) => {
+    cancelAnalysisControllerRef.current?.abort();
+    cancelAnalysisControllerRef.current = null;
   };
 }

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

@@ -24,7 +24,6 @@ export type DiagramState =
         next: Edit[][];
       };
       editErrors?: string[];
-      isExportModalOpen?: boolean;
     })
   | null; // null when no diagram is currently open
 
@@ -37,8 +36,6 @@ export enum DiagramActionTypes {
   APPLY_EDIT_FAILED = 'data-modeling/diagram/APPLY_EDIT_FAILED',
   UNDO_EDIT = 'data-modeling/diagram/UNDO_EDIT',
   REDO_EDIT = 'data-modeling/diagram/REDO_EDIT',
-  EXPORT_MODAL_OPENED = 'data-modeling/diagram/EXPORT_MODAL_OPENED',
-  EXPORT_MODAL_CLOSED = 'data-modeling/diagram/EXPORT_MODAL_CLOSED',
 }
 
 export type OpenDiagramAction = {
@@ -80,14 +77,6 @@ export type RedoEditAction = {
   type: DiagramActionTypes.REDO_EDIT;
 };
 
-type ExportModalOpenedAction = {
-  type: DiagramActionTypes.EXPORT_MODAL_OPENED;
-};
-
-type ExportModalClosedAction = {
-  type: DiagramActionTypes.EXPORT_MODAL_CLOSED;
-};
-
 export type DiagramActions =
   | OpenDiagramAction
   | DeleteDiagramAction
@@ -231,18 +220,6 @@ export const diagramReducer: Reducer<DiagramState> = (
       updatedAt: new Date().toISOString(),
     };
   }
-  if (isAction(action, DiagramActionTypes.EXPORT_MODAL_OPENED)) {
-    return {
-      ...state,
-      isExportModalOpen: true,
-    };
-  }
-  if (isAction(action, DiagramActionTypes.EXPORT_MODAL_CLOSED)) {
-    return {
-      ...state,
-      isExportModalOpen: false,
-    };
-  }
   return state;
 };
 
@@ -452,12 +429,4 @@ export function getCurrentDiagramFromState(
   return { id, connectionId, name, edits, createdAt, updatedAt };
 }
 
-export function showExportModal(): ExportModalOpenedAction {
-  return { type: DiagramActionTypes.EXPORT_MODAL_OPENED };
-}
-
-export function closeExportModal(): ExportModalClosedAction {
-  return { type: DiagramActionTypes.EXPORT_MODAL_CLOSED };
-}
-
 export const selectCurrentModel = memoize(getCurrentModel);