mongodb-js · gribnoysup · Jun 30, 2023 · Jun 30, 2023
@@ -1,15 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { css, cx } from '@leafygreen-ui/emotion';
+import { css } 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],
@@ -25,24 +22,6 @@ 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>(
@@ -80,7 +59,6 @@ const DocumentActionsGroup: React.FunctionComponent<
     onClone?: () => void;
     onRemove?: () => void;
     onlyShowOnHover?: boolean;
-    insights?: Signal | Signal[];
   } & (
     | { onExpand?: never; expanded?: never }
     | { onExpand: () => void; expanded: boolean }
@@ -93,13 +71,10 @@ 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) {
@@ -115,10 +90,10 @@ const DocumentActionsGroup: React.FunctionComponent<
   return (
     <div
       ref={conatinerRef}
-      className={cx(
-        actionsGroupContainer,
-        onlyShowOnHover && (isActive ? actionsGroupHovered : actionsGroupIdle)
-      )}
+      className={actionsGroupContainer}
+      style={{
+        display: onlyShowOnHover ? (isHovered ? 'flex' : 'none') : 'flex',
+      }}
     >
       {onExpand && (
         <Button
@@ -138,14 +113,6 @@ 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"

@@ -52,8 +52,8 @@ export type Signal = {
 type SignalPopoverProps = {
   /** List of signals to render */
   signals: Signal | Signal[];
+
   darkMode?: boolean;
-  onPopoverOpenChange?: (open: boolean) => void;
 };
 
 const signalCardContentStyles = css({
@@ -362,7 +362,6 @@ const closeButtonMultiSignalStyles = css({
 const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
   signals: _signals,
   darkMode: _darkMode,
-  onPopoverOpenChange: _onPopoverOpenChange,
 }) => {
   const [cueOpen, setCueOpen] = useState(false);
   const darkMode = useDarkMode(_darkMode);
@@ -393,19 +392,15 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
     return observer.disconnect.bind(observer);
   }, []);
 
-  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 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 badgeLabel = multiSignals ? (
     <>{signals.length}&nbsp;insights</>

@@ -104,7 +104,6 @@
     "react-dom": "^17.0.2",
     "reflux": "^0.4.1",
     "reflux-state-mixin": "github:mongodb-js/reflux-state-mixin",
-    "semver": "^7.5.2",
     "sinon": "^8.1.1"
   },
   "dependencies": {

@@ -4,7 +4,6 @@ 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.
@@ -34,12 +33,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 = {
@@ -222,18 +221,6 @@ 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
-          }
         />
       );
     }
@@ -312,8 +299,7 @@ class EditableDocument extends React.Component<
     updateDocument: PropTypes.func.isRequired,
     openInsertDocumentDialog: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,
-    showInsights: PropTypes.bool,
   };
 }
 
-export default withPreferences(EditableDocument, ['showInsights'], React);
+export default EditableDocument;
@@ -3,7 +3,6 @@ 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'];
 
 /**
@@ -26,7 +25,6 @@ export type ReadonlyDocumentProps = {
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
   doc: Document;
   expandAll: boolean;
-  showInsights?: boolean;
 };
 
 /**
@@ -68,18 +66,6 @@ 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
-        }
       />
     );
   }
@@ -107,8 +93,7 @@ class ReadonlyDocument extends React.Component<ReadonlyDocumentProps> {
     doc: PropTypes.object.isRequired,
     expandAll: PropTypes.bool,
     openInsertDocumentDialog: PropTypes.func,
-    showInsights: PropTypes.bool,
   };
 }
 
-export default withPreferences(ReadonlyDocument, ['showInsights'], React);
+export default ReadonlyDocument;