From 775dcd633ecf12f4ccc48834b3ec69b2221c11f9 Mon Sep 17 00:00:00 2001
From: Basit <baasit121@icloud.com>
Date: Tue, 12 Sep 2023 12:47:00 +0200
Subject: [PATCH 1/2] update search stage preview

---
 .../components/stage-preview/index.spec.tsx   | 23 ++++++++++++-
 .../src/components/stage-preview/index.tsx    | 34 ++++++++++++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx b/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
index 90e5505bf3b..f6fb83b0002 100644
--- a/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
+++ b/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { Document } from 'mongodb';
-import { render, screen } from '@testing-library/react';
+import { render, screen, cleanup } from '@testing-library/react';
 import { expect } from 'chai';
 import { Provider } from 'react-redux';
 
@@ -40,6 +40,7 @@ const renderStagePreview = (
 };
 
 describe('StagePreview', function () {
+  afterEach(cleanup);
   it('renders empty content when stage is disabled', function () {
     renderStagePreview({
       isDisabled: true,
@@ -105,4 +106,24 @@ describe('StagePreview', function () {
     const docs = screen.getAllByTestId('readonly-document');
     expect(docs).to.have.length(2);
   });
+  it('renders missing search index text for $search', function () {
+    renderStagePreview({
+      shouldRenderStage: true,
+      stageOperator: '$search',
+      documents: [],
+    });
+    expect(screen.getByText('No results found')).to.exist;
+    expect(
+      screen.getByText('This may be due to an invalid or missing Search index')
+    ).to.exist;
+  });
+  it('renders $search preview docs', function () {
+    renderStagePreview({
+      shouldRenderStage: true,
+      stageOperator: '$search',
+      documents: [{ _id: 1 }, { _id: 2 }],
+    });
+    const docs = screen.getAllByTestId('readonly-document');
+    expect(docs).to.have.length(2);
+  });
 });
diff --git a/packages/compass-aggregations/src/components/stage-preview/index.tsx b/packages/compass-aggregations/src/components/stage-preview/index.tsx
index 89e3e5d7b6c..e78350557a7 100644
--- a/packages/compass-aggregations/src/components/stage-preview/index.tsx
+++ b/packages/compass-aggregations/src/components/stage-preview/index.tsx
@@ -9,11 +9,16 @@ import {
   Body,
   KeylineCard,
   useDarkMode,
+  Subtitle,
 } from '@mongodb-js/compass-components';
 import { Document } from '@mongodb-js/compass-crud';
 
 import type { RootState } from '../../modules';
-import { isMissingAtlasStageSupport, isOutputStage } from '../../utils/stage';
+import {
+  isAtlasOnlyStage,
+  isMissingAtlasStageSupport,
+  isOutputStage,
+} from '../../utils/stage';
 
 import LoadingOverlay from '../loading-overlay';
 import { AtlasStagePreview } from './atlas-stage-preview';
@@ -27,6 +32,7 @@ const centeredContent = css({
   justifyContent: 'center',
   height: '100%',
   padding: spacing[3],
+  flexDirection: 'column',
 });
 
 const emptyStyles = css({
@@ -91,6 +97,14 @@ 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;
@@ -109,6 +123,7 @@ function StagePreviewBody({
   shouldRenderStage,
   isLoading,
 }: StagePreviewProps) {
+  const darkMode = useDarkMode();
   if (!shouldRenderStage) {
     return <EmptyIcon />;
   }
@@ -138,6 +153,23 @@ 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 due to an invalid or missing Search index</Body>
+      </div>
+    );
+  }
+
   if (documents && documents.length > 0) {
     const docs = documents.map((doc, i) => {
       return (

From 6c05ca42ab7a70fd760e009e780e26511eed3e7d Mon Sep 17 00:00:00 2001
From: Basit <baasit121@icloud.com>
Date: Tue, 12 Sep 2023 16:21:51 +0200
Subject: [PATCH 2/2] update text

---
 .../src/components/stage-preview/index.spec.tsx              | 4 +++-
 .../src/components/stage-preview/index.tsx                   | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx b/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
index f6fb83b0002..b80fe2f44bf 100644
--- a/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
+++ b/packages/compass-aggregations/src/components/stage-preview/index.spec.tsx
@@ -114,7 +114,9 @@ describe('StagePreview', function () {
     });
     expect(screen.getByText('No results found')).to.exist;
     expect(
-      screen.getByText('This may be due to an invalid or missing Search index')
+      screen.getByText(
+        'This may be because your search has no results or your search index does not exist.'
+      )
     ).to.exist;
   });
   it('renders $search preview docs', function () {
diff --git a/packages/compass-aggregations/src/components/stage-preview/index.tsx b/packages/compass-aggregations/src/components/stage-preview/index.tsx
index e78350557a7..b3d1868c684 100644
--- a/packages/compass-aggregations/src/components/stage-preview/index.tsx
+++ b/packages/compass-aggregations/src/components/stage-preview/index.tsx
@@ -165,7 +165,10 @@ function StagePreviewBody({
         >
           No results found
         </Subtitle>
-        <Body>This may be due to an invalid or missing Search index</Body>
+        <Body>
+          This may be because your search has no results or your search index
+          does not exist.
+        </Body>
       </div>
     );
   }