v1.39.0

Author: github-actions[bot]

package-lock.json

@@ -1,12 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Button, Icon } from '../leafygreen';
 import { Tooltip } from '../tooltip';
+import type { Signal } from '../signal-popover';
+import { SignalPopover } from '../signal-popover';
 
 const actionsGroupContainer = css({
   position: 'absolute',
   display: 'flex',
+  alignItems: 'center',
   gap: spacing[2],
   width: '100%',
   top: spacing[2] + spacing[1],
@@ -22,6 +25,24 @@ const actionsGroupItem = css({
 
 const actionsGroupItemSeparator = css({
   flex: '1 0 auto',
+  pointerEvents: 'none',
+});
+
+const actionsGroupIdle = css({
+  '& > button': {
+    display: 'none',
+  },
+});
+
+const actionsGroupHovered = css({
+  '& > button': {
+    display: 'block',
+  },
+});
+
+// Insight icon is always visible, even when action buttons are not
+const actionsGroupSignalPopover = css({
+  display: 'block !important',
 });
 
 function useElementParentHoverState<T extends HTMLElement>(
@@ -59,6 +80,7 @@ const DocumentActionsGroup: React.FunctionComponent<
     onClone?: () => void;
     onRemove?: () => void;
     onlyShowOnHover?: boolean;
+    insights?: Signal | Signal[];
   } & (
     | { onExpand?: never; expanded?: never }
     | { onExpand: () => void; expanded: boolean }
@@ -71,10 +93,13 @@ const DocumentActionsGroup: React.FunctionComponent<
   onExpand,
   expanded,
   onlyShowOnHover = true,
+  insights,
 }) => {
+  const [signalOpened, setSignalOpened] = useState(false);
   const conatinerRef = useRef<HTMLDivElement | null>(null);
   const isHovered = useElementParentHoverState(conatinerRef);
   const [showCopyButtonTooltip, setShowCopyButtonTooltip] = useState(false);
+  const isActive = isHovered || signalOpened;
 
   useEffect(() => {
     if (showCopyButtonTooltip === true) {
@@ -90,10 +115,10 @@ const DocumentActionsGroup: React.FunctionComponent<
   return (
     <div
       ref={conatinerRef}
-      className={actionsGroupContainer}
-      style={{
-        display: onlyShowOnHover ? (isHovered ? 'flex' : 'none') : 'flex',
-      }}
+      className={cx(
+        actionsGroupContainer,
+        onlyShowOnHover && (isActive ? actionsGroupHovered : actionsGroupIdle)
+      )}
     >
       {onExpand && (
         <Button
@@ -113,6 +138,14 @@ const DocumentActionsGroup: React.FunctionComponent<
         ></Button>
       )}
       <span className={actionsGroupItemSeparator}></span>
+      {insights && (
+        <div className={cx(actionsGroupItem, actionsGroupSignalPopover)}>
+          <SignalPopover
+            signals={insights}
+            onPopoverOpenChange={setSignalOpened}
+          ></SignalPopover>
+        </div>
+      )}
       {onEdit && (
         <Button
           size="xsmall"

packages/compass-components/src/components/document-list/document-actions-group.tsx

@@ -121,8 +121,8 @@ export type Signal = {
 type SignalPopoverProps = {
   /** List of signals to render */
   signals: Signal | Signal[];
-
   darkMode?: boolean;
+  onPopoverOpenChange?: (open: boolean) => void;
 };
 
 const signalCardContentStyles = css({
@@ -438,6 +438,7 @@ const closeButtonMultiSignalStyles = css({
 const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   signals: _signals,
   darkMode: _darkMode,
+  onPopoverOpenChange: _onPopoverOpenChange,
 }) => {
   const hooks = useContext(TrackingHooksContext);
   const darkMode = useDarkMode(_darkMode);
@@ -488,15 +489,19 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
     return observer.disconnect.bind(observer);
   }, []);
 
-  const onPopoverOpenChange = useCallback((newStatus: boolean) => {
-    setPopoverOpen(newStatus);
-    // Reset current signal index when popover is being opened. If we do this on
-    // close instead, the popover content is weirdly changed while the closing
-    // animation is happening
-    if (newStatus === true) {
-      setCurrentSignalIndex(0);
-    }
-  }, []);
+  const onPopoverOpenChange = useCallback(
+    (newStatus: boolean) => {
+      setPopoverOpen(newStatus);
+      _onPopoverOpenChange?.(newStatus);
+      // Reset current signal index when popover is being opened. If we do this on
+      // close instead, the popover content is weirdly changed while the closing
+      // animation is happening
+      if (newStatus === true) {
+        setCurrentSignalIndex(0);
+      }
+    },
+    [_onPopoverOpenChange]
+  );
 
   const badgeLabel = multiSignals ? (
     <>{signals.length}&nbsp;insights</>

packages/compass-components/src/components/signal-popover.tsx

@@ -4,6 +4,7 @@ import type { Document } from 'hadron-document';
 import HadronDocument from 'hadron-document';
 import { DocumentList } from '@mongodb-js/compass-components';
 import type { CrudActions } from '../stores/crud-store';
+import { withPreferences } from 'compass-preferences-model';
 
 /**
  * The base class.
@@ -33,12 +34,12 @@ const TEST_ID = 'editable-document';
 export type EditableDocumentProps = {
   doc: Document;
   expandAll?: boolean;
-
   removeDocument?: CrudActions['removeDocument'];
   replaceDocument?: CrudActions['replaceDocument'];
   updateDocument?: CrudActions['updateDocument'];
   openInsertDocumentDialog?: CrudActions['openInsertDocumentDialog'];
   copyToClipboard?: CrudActions['copyToClipboard'];
+  showInsights?: boolean;
 };
 
 type EditableDocumentState = {
@@ -221,6 +222,18 @@ class EditableDocument extends React.Component<
           onClone={this.handleClone.bind(this)}
           onExpand={this.handleExpandAll.bind(this)}
           expanded={!!this.state.expandAll}
+          insights={
+            this.props.showInsights && (this.props.doc?.size ?? 0) > 10_000_000
+              ? {
+                  id: 'bloated-document',
+                  title: 'Possibly bloated document',
+                  description:
+                    'Large documents can slow down queries by decreasing the number of documents that can be stored in RAM. Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.',
+                  learnMoreLink:
+                    'https://www.mongodb.com/docs/atlas/schema-suggestions/reduce-document-size/',
+                }
+              : undefined
+          }
         />
       );
     }
@@ -299,7 +312,8 @@ class EditableDocument extends React.Component<
     updateDocument: PropTypes.func.isRequired,
     openInsertDocumentDialog: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,
+    showInsights: PropTypes.bool,
   };
 }
 
-export default EditableDocument;
+export default withPreferences(EditableDocument, ['showInsights'], React);

packages/compass-crud/src/components/editable-document.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { DocumentList } from '@mongodb-js/compass-components';
 import type Document from 'hadron-document';
 import type { TypeCastMap } from 'hadron-type-checker';
+import { withPreferences } from 'compass-preferences-model';
 type BSONObject = TypeCastMap['Object'];
 
 /**
@@ -25,6 +26,7 @@ export type ReadonlyDocumentProps = {
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
   doc: Document;
   expandAll: boolean;
+  showInsights?: boolean;
 };
 
 /**
@@ -66,6 +68,18 @@ class ReadonlyDocument extends React.Component<ReadonlyDocumentProps> {
         onClone={
           this.props.openInsertDocumentDialog ? this.handleClone : undefined
         }
+        insights={
+          this.props.showInsights && (this.props.doc?.size ?? 0) > 10_000_000
+            ? {
+                id: 'bloated-document',
+                title: 'Possibly bloated document',
+                description:
+                  'Large documents can slow down queries by decreasing the number of documents that can be stored in RAM. Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.',
+                learnMoreLink:
+                  'https://www.mongodb.com/docs/atlas/schema-suggestions/reduce-document-size/',
+              }
+            : undefined
+        }
       />
     );
   }
@@ -93,7 +107,8 @@ class ReadonlyDocument extends React.Component<ReadonlyDocumentProps> {
     doc: PropTypes.object.isRequired,
     expandAll: PropTypes.bool,
     openInsertDocumentDialog: PropTypes.func,
+    showInsights: PropTypes.bool,
   };
 }
 
-export default ReadonlyDocument;
+export default withPreferences(ReadonlyDocument, ['showInsights'], React);

packages/compass-crud/src/components/readonly-document.tsx

@@ -2,6 +2,7 @@ import type { Listenable, Store } from 'reflux';
 import Reflux from 'reflux';
 import toNS from 'mongodb-ns';
 import { findIndex, isEmpty, isEqual } from 'lodash';
+import semver from 'semver';
 // @ts-expect-error no types available
 import StateMixin from 'reflux-state-mixin';
 import type { Element } from 'hadron-document';
@@ -713,8 +714,6 @@ class CrudStoreImpl
         doc.emit('update-error', error.message);
       } else if (d) {
         doc.emit('update-success', d);
-        this.localAppRegistry.emit('document-updated', this.state.view);
-        this.globalAppRegistry.emit('document-updated', this.state.view);
         const index = this.findDocumentIndex(doc);
         this.state.docs![index] = new HadronDocument(d);
         this.trigger(this.state);
@@ -806,8 +805,6 @@ class CrudStoreImpl
         doc.emit('update-error', error.message);
       } else {
         doc.emit('update-success', d);
-        this.localAppRegistry.emit('document-updated', this.state.view);
-        this.globalAppRegistry.emit('document-updated', this.state.view);
         const index = this.findDocumentIndex(doc);
         this.state.docs![index] = new HadronDocument(d);
         this.trigger(this.state);
@@ -851,7 +848,7 @@ class CrudStoreImpl
    * @param {Number} page - The page that is being shown.
    */
   async getPage(page: number) {
-    const { ns, status, view } = this.state;
+    const { ns, status } = this.state;
 
     if (page < 0) {
       return;
@@ -909,7 +906,7 @@ class CrudStoreImpl
     const cancelDebounceLoad = this.debounceLoading();
 
     let error: Error | undefined;
-    let documents: BSONObject[];
+    let documents: HadronDocument[];
     try {
       documents = await fetchDocuments(
         this.dataService,
@@ -933,7 +930,7 @@ class CrudStoreImpl
       status: error
         ? DOCUMENTS_STATUS_ERROR
         : DOCUMENTS_STATUS_FETCHED_PAGINATION,
-      docs: documents.map((doc: BSONObject) => new HadronDocument(doc)),
+      docs: documents,
       // making sure we don't set start to 1 if length is 0
       start: length === 0 ? 0 : skip + 1,
       end: skip + length,
@@ -942,8 +939,10 @@ class CrudStoreImpl
       resultId: resultId(),
       abortController: null,
     });
-    this.localAppRegistry.emit('documents-paginated', view, documents);
-    this.globalAppRegistry.emit('documents-paginated', view, documents);
+    this.localAppRegistry.emit(
+      'documents-paginated',
+      documents[0]?.generateObject()
+    );
 
     cancelDebounceLoad();
   }
@@ -964,7 +963,7 @@ class CrudStoreImpl
    * @param {Boolean} clone - Whether this is a clone operation.
    */
   async openInsertDocumentDialog(doc: BSONObject, clone: boolean) {
-    const hadronDoc = new HadronDocument(doc, false);
+    const hadronDoc = new HadronDocument(doc);
 
     if (clone) {
       track('Document Cloned', { mode: this.modeForTelemetry() });
@@ -1341,7 +1340,7 @@ class CrudStoreImpl
       return;
     }
 
-    const { ns, status, view, query } = this.state;
+    const { ns, status, query } = this.state;
 
     if (status === DOCUMENTS_STATUS_FETCHING) {
       return;
@@ -1489,16 +1488,18 @@ class CrudStoreImpl
           ? DOCUMENTS_STATUS_FETCHED_INITIAL
           : DOCUMENTS_STATUS_FETCHED_CUSTOM,
         error: null,
-        docs: docs.map((doc) => new HadronDocument(doc)),
+        docs: docs,
         page: 0,
         start: docs.length > 0 ? 1 : 0,
         end: docs.length,
         table: this.getInitialTableState(),
         shardKeys,
       });
 
-      this.localAppRegistry.emit('documents-refreshed', view, docs);
-      this.globalAppRegistry.emit('documents-refreshed', view, docs);
+      this.localAppRegistry.emit(
+        'documents-refreshed',
+        docs[0]?.generateObject()
+      );
     } catch (error) {
       log.error(
         mongoLogId(1_001_000_074),

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

@@ -196,17 +196,17 @@ const configureStore = (options = {}) => {
   if (options.localAppRegistry) {
     const appRegistry = options.localAppRegistry;
 
-    appRegistry.on('documents-refreshed', (view, docs) => {
-      store.processSingleDocument(docs[0] || {});
+    appRegistry.on('documents-refreshed', (doc = {}) => {
+      store.processSingleDocument(doc);
     });
 
     // process new document a user inserts
     appRegistry.on('document-inserted', ({ docs }) => {
       store.processSingleDocument(docs[0] || {});
     });
 
-    appRegistry.on('documents-paginated', (view, docs) => {
-      store.processSingleDocument(docs[0] || {});
+    appRegistry.on('documents-paginated', (doc = {}) => {
+      store.processSingleDocument(doc);
     });
 
     // optionally also subscribe to the SchemaStore if present

packages/compass-field-store/src/stores/store.js

@@ -101,7 +101,7 @@ describe('FieldStore', function () {
         ]);
         expect(state.autocompleteFields).to.deep.equal(expected);
       }, done);
-      appRegistry.emit('documents-refreshed', null, [doc]);
+      appRegistry.emit('documents-refreshed', doc);
     });
 
     it('on documents-inserted', function (done) {
@@ -125,7 +125,7 @@ describe('FieldStore', function () {
         ]);
         expect(state.autocompleteFields).to.deep.equal(expected);
       }, done);
-      appRegistry.emit('documents-paginated', null, [doc]);
+      appRegistry.emit('documents-paginated', doc);
     });
   });
   /**