feat(compass-aggregations): add unindexed aggregation insight COMPASS-6833 (#4551)

* chore(compass-aggregations): clean-up pipeline header code

* feat(compass-aggregations): add unindexed aggregation insight

* chore: fix test description

Co-authored-by: Himanshu Singh <[email protected]>

---------

Co-authored-by: Himanshu Singh <[email protected]>

Author: gribnoysup

package-lock.json

@@ -43,6 +43,7 @@
     "@mongodb-js/compass-editor": "^0.9.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "@mongodb-js/compass-utils": "^0.3.1",
+    "@mongodb-js/explain-plan-helper": "^1.0.7",
     "@mongodb-js/mongodb-constants": "^0.6.0",
     "@mongodb-js/mongodb-redux-common": "^2.0.8",
     "bson": "^5.2.0",
@@ -102,6 +103,7 @@
     "@mongodb-js/compass-editor": "^0.9.0",
     "@mongodb-js/compass-logging": "^1.1.6",
     "@mongodb-js/compass-utils": "^0.3.1",
+    "@mongodb-js/explain-plan-helper": "^1.0.7",
     "@mongodb-js/mongodb-constants": "^0.6.0",
     "@mongodb-js/mongodb-redux-common": "^2.0.8",
     "bson": "^5.2.0",

packages/compass-aggregations/package.json

@@ -11,21 +11,17 @@ import { PipelineHeader } from '.';
 
 describe('PipelineHeader', function () {
   let container: HTMLElement;
-  let onShowSavedPipelinesSpy: SinonSpy;
   let onToggleOptionsSpy: SinonSpy;
   beforeEach(function () {
-    onShowSavedPipelinesSpy = spy();
     onToggleOptionsSpy = spy();
     render(
       <Provider store={configureStore()}>
         <PipelineHeader
           isOpenPipelineVisible
-          isSavedPipelineVisible={false}
           isOptionsVisible
           showRunButton
           showExportButton
           showExplainButton
-          onToggleSavedPipelines={onShowSavedPipelinesSpy}
           onToggleOptions={onToggleOptionsSpy}
         />
       </Provider>
@@ -37,14 +33,14 @@ describe('PipelineHeader', function () {
     expect(within(container).getByText('Pipeline')).to.exist;
   });
 
-  it('open saved pipelines button', function () {
+  it('open saved pipelines button', async function () {
     const button = within(container).getByTestId(
       'pipeline-toolbar-open-pipelines-button'
     );
     expect(button).to.exist;
 
     userEvent.click(button);
 
-    expect(onShowSavedPipelinesSpy.calledOnce).to.be.true;
+    expect(await screen.findByTestId('saved-pipelines')).to.exist;
   });
 });

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useState } from 'react';
 import {
   Body,
   Icon,
@@ -12,7 +12,6 @@ import { connect } from 'react-redux';
 
 import PipelineStages from './pipeline-stages';
 import PipelineActions from './pipeline-actions';
-import { setShowSavedPipelines } from '../../../modules/saved-pipeline';
 import SavedPipelines from '../../saved-pipelines/saved-pipelines';
 import type { RootState } from '../../../modules';
 
@@ -66,65 +65,67 @@ type PipelineHeaderProps = {
   showRunButton: boolean;
   showExportButton: boolean;
   showExplainButton: boolean;
-  onToggleSavedPipelines: (show: boolean) => void;
   onToggleOptions: () => void;
   isOpenPipelineVisible: boolean;
-  isSavedPipelineVisible: boolean;
+};
+
+const containedElements = [
+  '[data-id="open-pipeline-confirmation-modal"]',
+  '[data-id="delete-pipeline-confirmation-modal"]',
+];
+
+const SavedPipelinesButton: React.FunctionComponent = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <InteractivePopover
+      className={savedAggregationsPopoverStyles}
+      // To prevent popover from closing when confirmation modal is shown
+      containedElements={containedElements}
+      trigger={({ onClick, ref, children }) => {
+        return (
+          <button
+            data-testid="pipeline-toolbar-open-pipelines-button"
+            onClick={onClick}
+            className={openSavedPipelinesStyles}
+            aria-label="Open saved pipelines"
+            aria-haspopup="true"
+            aria-expanded={isVisible ? true : undefined}
+            title="Saved Pipelines"
+            type="button"
+            ref={ref}
+          >
+            <Icon glyph="Folder" />
+            <Icon glyph="CaretDown" />
+            {children}
+          </button>
+        );
+      }}
+      open={isVisible}
+      setOpen={setIsVisible}
+    >
+      <SavedPipelines />
+    </InteractivePopover>
+  );
 };
 
 export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   showRunButton,
   showExportButton,
   showExplainButton,
   onToggleOptions,
-  onToggleSavedPipelines,
   isOptionsVisible,
   isOpenPipelineVisible,
-  isSavedPipelineVisible,
 }) => {
-  const containedElements = useMemo(() => {
-    return [
-      '[data-id="open-pipeline-confirmation-modal"]',
-      '[data-id="delete-pipeline-confirmation-modal"]',
-    ];
-  }, []);
-
   return (
     <div className={containerStyles} data-testid="pipeline-header">
-      {/* TODO: PipelineHeader component should only be concerned with layout, move the popover to a more appropriate place */}
       {isOpenPipelineVisible && (
-        <InteractivePopover
-          className={savedAggregationsPopoverStyles}
-          // To prevent popover from closing when confirmation modal is shown
-          containedElements={containedElements}
-          trigger={({ onClick, ref, children }) => (
-            <div
-              data-testid="saved-pipelines-popover"
-              className={pipelineTextAndOpenStyles}
-            >
-              <Body weight="medium">Pipeline</Body>
-              <button
-                data-testid="pipeline-toolbar-open-pipelines-button"
-                onClick={onClick}
-                className={openSavedPipelinesStyles}
-                aria-label="Open saved pipelines"
-                aria-haspopup="true"
-                aria-expanded={isSavedPipelineVisible ? true : undefined}
-                title="Saved Pipelines"
-                type="button"
-                ref={ref}
-              >
-                <Icon glyph="Folder" />
-                <Icon glyph="CaretDown" />
-              </button>
-              {children}
-            </div>
-          )}
-          open={isSavedPipelineVisible}
-          setOpen={onToggleSavedPipelines}
+        <div
+          data-testid="saved-pipelines-popover"
+          className={pipelineTextAndOpenStyles}
         >
-          <SavedPipelines />
-        </InteractivePopover>
+          <Body weight="medium">Pipeline</Body>
+          <SavedPipelinesButton></SavedPipelinesButton>
+        </div>
       )}
       <div className={pipelineStagesStyles}>
         <PipelineStages />
@@ -142,14 +143,8 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   );
 };
 
-export default connect(
-  (state: RootState) => {
-    return {
-      isOpenPipelineVisible: !state.editViewName && !state.isAtlasDeployed,
-      isSavedPipelineVisible: state.savedPipeline.isListVisible,
-    };
-  },
-  {
-    onToggleSavedPipelines: setShowSavedPipelines,
-  }
-)(PipelineHeader);
+export default connect((state: RootState) => {
+  return {
+    isOpenPipelineVisible: !state.editViewName && !state.isAtlasDeployed,
+  };
+})(PipelineHeader);

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx

@@ -36,6 +36,7 @@ describe('PipelineActions', function () {
           isExplainButtonDisabled={false}
           onExplainAggregation={onExplainAggregationSpy}
           onUpdateView={() => {}}
+          onCollectionScanInsightActionButtonClick={() => {}}
         />
       );
     });
@@ -101,6 +102,7 @@ describe('PipelineActions', function () {
           onUpdateView={() => {}}
           onExplainAggregation={() => {}}
           isAtlasDeployed={false}
+          onCollectionScanInsightActionButtonClick={() => {}}
         />
       );
     });
@@ -137,6 +139,7 @@ describe('PipelineActions', function () {
           onUpdateView={() => {}}
           onExplainAggregation={() => {}}
           isAtlasDeployed={true}
+          onCollectionScanInsightActionButtonClick={() => {}}
         />
       );
     });
@@ -170,6 +173,7 @@ describe('PipelineActions', function () {
           onExportAggregationResults={onExportAggregationResultsSpy}
           onExplainAggregation={onExplainAggregationSpy}
           onUpdateView={() => {}}
+          onCollectionScanInsightActionButtonClick={() => {}}
         />
       );
     });

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import {
   Button,
   MoreOptionsToggle,
+  SignalPopover,
   css,
   spacing,
 } from '@mongodb-js/compass-components';
@@ -18,6 +19,7 @@ import {
   getPipelineStageOperatorsFromBuilderState,
 } from '../../../modules/pipeline-builder/builder-helpers';
 import { isOutputStage } from '../../../utils/stage';
+import { openCreateIndexModal } from '../../../modules/insights';
 
 const containerStyles = css({
   display: 'flex',
@@ -46,6 +48,9 @@ type PipelineActionsProps = {
   onToggleOptions: () => void;
 
   isAtlasDeployed?: boolean;
+
+  showCollectionScanInsight?: boolean;
+  onCollectionScanInsightActionButtonClick: () => void;
 };
 
 export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
@@ -64,9 +69,34 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   onExportAggregationResults,
   onExplainAggregation,
   isAtlasDeployed,
+  showCollectionScanInsight,
+  onCollectionScanInsightActionButtonClick,
 }) => {
   return (
     <div className={containerStyles}>
+      {showCollectionScanInsight && (
+        <div>
+          <SignalPopover
+            signals={{
+              id: 'aggregation-executed-without-index',
+              title: 'Aggregation executed without index',
+              description: (
+                <>
+                  This aggregation ran without an index. If you plan on using
+                  this query <strong>heavily</strong> in your application, you
+                  should create an index that covers this aggregation.
+                </>
+              ),
+              learnMoreLink:
+                'https://www.mongodb.com/docs/v6.0/core/data-model-operations/#indexes',
+              primaryActionButtonLabel: 'Create index',
+              primaryActionButtonIcon: 'Plus',
+              onPrimaryActionButtonClick:
+                onCollectionScanInsightActionButtonClick,
+            }}
+          ></SignalPopover>
+        </div>
+      )}
       {showUpdateViewButton && (
         <Button
           aria-label="Update view"
@@ -141,6 +171,7 @@ const mapState = (state: RootState) => {
     showUpdateViewButton: Boolean(state.editViewName),
     isUpdateViewButtonDisabled: !state.isModified || hasSyntaxErrors,
     isAtlasDeployed: state.isAtlasDeployed,
+    showCollectionScanInsight: state.insights.isCollectionScan,
   };
 };
 
@@ -149,6 +180,7 @@ const mapDispatch = {
   onRunAggregation: runAggregation,
   onExportAggregationResults: exportAggregationResults,
   onExplainAggregation: explainAggregation,
+  onCollectionScanInsightActionButtonClick: openCreateIndexModal,
 };
 
 export default connect(mapState, mapDispatch)(React.memo(PipelineActions));

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -40,6 +40,10 @@ const controls = css({
 
 const button = css({
   flex: 'none',
+  // Because leafygreen buttons have transition: all by default and this causes
+  // a lag when trying to hide the buttons, because the browser will transition
+  // properties like display or visibility
+  transitionProperty: 'background-color, box-shadow, border-color',
 });
 
 export const SavePipelineCard: React.FunctionComponent<

packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx

@@ -26,6 +26,7 @@ const renderSavedPipelines = (
       namespace="test.test123"
       onDeletePipeline={() => {}}
       onOpenPipeline={() => {}}
+      onMount={() => {}}
       {...props}
     />
   );

packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   css,
   spacing,
@@ -11,6 +11,7 @@ import { SavePipelineCard } from './saved-pipeline-card';
 import {
   confirmOpenPipeline,
   confirmDeletePipeline,
+  getSavedPipelines,
 } from '../../modules/saved-pipeline';
 import type { RootState } from '../../modules';
 import type { StoredPipeline } from '../../utils/pipeline-storage';
@@ -60,15 +61,21 @@ type SavedPipelinesProps = {
   savedPipelines: StoredPipeline[];
   onOpenPipeline: (pipelineData: StoredPipeline) => void;
   onDeletePipeline: (pipelineId: string) => void;
+  onMount: () => void;
 };
 
 export const SavedPipelines = ({
   namespace,
   savedPipelines,
   onOpenPipeline,
   onDeletePipeline,
+  onMount,
 }: SavedPipelinesProps) => {
   const darkMode = useDarkMode();
+  const onMountRef = useRef(onMount);
+  useEffect(() => {
+    onMountRef.current();
+  }, []);
   return (
     <div className={savedPipelinesStyles} data-testid="saved-pipelines">
       <div className={toolbarContentStyles}>
@@ -120,6 +127,7 @@ const mapState = (state: RootState) => ({
 const mapDispatch = {
   onOpenPipeline: confirmOpenPipeline,
   onDeletePipeline: confirmDeletePipeline,
+  onMount: getSavedPipelines,
 };
 
 export default connect(mapState, mapDispatch)(SavedPipelines);