fix(aggregations): show the search warning in all three places COMPASS-7317

packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.spec.tsx

@@ -86,6 +86,18 @@ describe('FocusModeStagePreview', function () {
       const preview = screen.getByTestId('focus-mode-stage-preview');
       expect(within(preview).getByText(/no preview documents/i)).to.exist;
     });
+    it('renders missing search index text for $search', async function () {
+      await renderFocusModePreview({
+        stageOperator: '$search',
+        documents: [],
+      });
+      expect(screen.getByText('No preview documents')).to.exist;
+      expect(
+        screen.getByText(
+          'This may be because your search has no results or your search index does not exist.'
+        )
+      ).to.exist;
+    });
     it('renders $out stage preview', async function () {
       await renderFocusModePreview(
         {

packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx

@@ -16,6 +16,7 @@ import OutputStagePreview from '../stage-preview/output-stage-preview';
 import { AtlasStagePreview } from '../stage-preview/atlas-stage-preview';
 import {
   isAtlasOnlyStage,
+  isSearchStage,
   isMissingAtlasStageSupport,
   isOutputStage,
 } from '../../utils/stage';
@@ -24,6 +25,7 @@ import {
   expandPreviewDocsForStage,
 } from '../../modules/pipeline-builder/stage-editor';
 import type { StoreStage } from '../../modules/pipeline-builder/stage-editor';
+import SearchNoResults from '../search-no-results';
 
 const containerStyles = css({
   display: 'flex',
@@ -149,6 +151,8 @@ export const FocusModePreview = ({
         className={documentListStyles}
       />
     );
+  } else if (isSearchStage(stageOperator)) {
+    content = <SearchNoResults />;
   } else {
     content = (
       <div className={centerStyles}>

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.spec.tsx

@@ -55,6 +55,19 @@ describe('PipelinePreview', function () {
     expect(screen.getByText(/No preview documents/)).to.exist;
   });
 
+  it('renders missing search index text for $search', async function () {
+    await renderPipelineEditor({
+      atlasOperator: '$search',
+      previewDocs: [],
+    });
+    expect(screen.getByText('No preview documents')).to.exist;
+    expect(
+      screen.getByText(
+        'This may be because your search has no results or your search index does not exist.'
+      )
+    ).to.exist;
+  });
+
   it('renders document list', async function () {
     await renderPipelineEditor({
       previewDocs: [{ _id: 1 }, { _id: 2 }].map(

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx

@@ -25,6 +25,7 @@ import {
   expandPreviewDocs,
   collapsePreviewDocs,
 } from '../../../modules/pipeline-builder/text-editor-pipeline';
+import SearchNoResults from '../../search-no-results';
 
 const containerStyles = css({
   display: 'flex',
@@ -126,6 +127,9 @@ const PreviewResults = ({
   }
 
   if (previewDocs.length === 0) {
+    if (atlasOperator) {
+      return <SearchNoResults />;
+    }
     return (
       <div className={centerStyles}>
         <DocumentIcon />

packages/compass-aggregations/src/components/search-no-results.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  css,
+  palette,
+  spacing,
+  Body,
+  useDarkMode,
+  Subtitle,
+} from '@mongodb-js/compass-components';
+
+const centeredContent = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  padding: spacing[3],
+  flexDirection: 'column',
+  textAlign: 'center',
+});
+
+const missingAtlasIndexLightStyles = css({
+  color: palette.green.dark2,
+});
+
+const missingAtlasIndexDarkStyles = css({
+  color: palette.green.base,
+});
+
+export default function SearchNoResults() {
+  const darkMode = useDarkMode();
+
+  return (
+    <div className={centeredContent}>
+      <Subtitle
+        className={css(
+          darkMode ? missingAtlasIndexDarkStyles : missingAtlasIndexLightStyles
+        )}
+      >
+        No preview documents
+      </Subtitle>
+      <Body>
+        This may be because your search has no results or your search index does
+        not exist.
+      </Body>
+    </div>
+  );
+}

packages/compass-aggregations/src/components/stage-preview/index.spec.tsx

@@ -106,7 +106,7 @@ describe('StagePreview', function () {
       stageOperator: '$search',
       documents: [],
     });
-    expect(screen.getByText('No results found')).to.exist;
+    expect(screen.getByText('No preview documents')).to.exist;
     expect(
       screen.getByText(
         'This may be because your search has no results or your search index does not exist.'

packages/compass-aggregations/src/components/stage-preview/index.tsx

@@ -9,13 +9,12 @@ import {
   Body,
   KeylineCard,
   useDarkMode,
-  Subtitle,
 } from '@mongodb-js/compass-components';
 import { Document } from '@mongodb-js/compass-crud';
 
 import type { RootState } from '../../modules';
 import {
-  isAtlasOnlyStage,
+  isSearchStage,
   isMissingAtlasStageSupport,
   isOutputStage,
 } from '../../utils/stage';
@@ -26,6 +25,8 @@ import OutputStagePreivew from './output-stage-preview';
 import StagePreviewHeader from './stage-preview-header';
 import type { StoreStage } from '../../modules/pipeline-builder/stage-editor';
 
+import SearchNoResults from '../search-no-results';
+
 const centeredContent = css({
   display: 'flex',
   alignItems: 'center',
@@ -52,7 +53,7 @@ const emptyStylesLight = css({
   stroke: palette.gray.base,
 });
 
-function EmptyIcon() {
+function NoPreviewDocuments() {
   const darkMode = useDarkMode();
 
   return (
@@ -97,14 +98,6 @@ const documentStyles = css({
   padding: 0,
 });
 
-const missingAtlasIndexLightStyles = css({
-  color: palette.green.dark2,
-});
-
-const missingAtlasIndexDarkStyles = css({
-  color: palette.green.base,
-});
-
 type StagePreviewProps = {
   index: number;
   isLoading: boolean;
@@ -123,9 +116,8 @@ function StagePreviewBody({
   shouldRenderStage,
   isLoading,
 }: StagePreviewProps) {
-  const darkMode = useDarkMode();
   if (!shouldRenderStage) {
-    return <EmptyIcon />;
+    return <NoPreviewDocuments />;
   }
 
   if (isMissingAtlasOnlyStageSupport) {
@@ -153,24 +145,8 @@ function StagePreviewBody({
     );
   }
 
-  if (isAtlasOnlyStage(stageOperator ?? '') && documents?.length === 0) {
-    return (
-      <div className={centeredContent}>
-        <Subtitle
-          className={css(
-            darkMode
-              ? missingAtlasIndexDarkStyles
-              : missingAtlasIndexLightStyles
-          )}
-        >
-          No results found
-        </Subtitle>
-        <Body>
-          This may be because your search has no results or your search index
-          does not exist.
-        </Body>
-      </div>
-    );
+  if (isSearchStage(stageOperator) && documents?.length === 0) {
+    return <SearchNoResults />;
   }
 
   if (documents && documents.length > 0) {
@@ -186,7 +162,7 @@ function StagePreviewBody({
     return <div className={documentsStyles}>{docs}</div>;
   }
 
-  return <EmptyIcon />;
+  return <NoPreviewDocuments />;
 }
 
 const containerStyles = css({
@@ -208,7 +184,7 @@ export function StagePreview(props: StagePreviewProps) {
   if (props.isDisabled) {
     return (
       <div className={containerStyles}>
-        <EmptyIcon />
+        <NoPreviewDocuments />
       </div>
     );
   }

packages/compass-aggregations/src/utils/stage.ts

@@ -203,6 +203,21 @@ export function isAtlasOnlyStage(
   return !!stageOperator && ATLAS_ONLY_OPERATOR_NAMES.has(stageOperator);
 }
 
+/*
+Atlas Search does not return an error if there is no search index - it just
+returns no results. So if the connection has access to Atlas Search and the
+aggregation used a search-related stage and got no results we want to display a
+different error.
+*/
+export function isSearchStage(
+  stageOperator: string | null | undefined
+): stageOperator is '$search' | '$searchMeta' | '$vectorSearch' {
+  if (!stageOperator) {
+    return false;
+  }
+  return ['$search', '$searchMeta', '$vectorSearch'].includes(stageOperator);
+}
+
 const STAGE_OPERATORS_MAP = new Map(
   STAGE_OPERATORS.map((stage) => [stage.value, stage])
 );