fix(data-modeling): exclude add field button from export COMPASS-9894 (#7376)

exclude node button

Author: mabaasit

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

@@ -115,6 +115,9 @@ export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> {
                 height: `${bounds.height}px`,
                 transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,
               },
+              filter: (node) => {
+                return !node.classList?.contains('node-add-field-button');
+              },
             })
               .then(resolve)
               .catch(reject)

packages/compass-data-modeling/src/utils/nodes-and-edges.tsx

@@ -5,6 +5,7 @@ import {
   IconButton,
   InlineDefinition,
   css,
+  cx,
 } from '@mongodb-js/compass-components';
 import type { NodeProps, EdgeProps, BaseNode } from '@mongodb-js/diagramming';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
@@ -187,7 +188,7 @@ export function collectionToDiagramNode({
     actions: onClickAddNewFieldToCollection ? (
       <IconButton
         aria-label="Add Field"
-        className={addNewFieldStyles}
+        className={cx(addNewFieldStyles, 'node-add-field-button')}
         onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
           event.stopPropagation();
           onClickAddNewFieldToCollection();