From dfe4b814c21f3cc27b2afec082b6ae144a86fe65 Mon Sep 17 00:00:00 2001
From: Basit <1305718+mabaasit@users.noreply.github.com>
Date: Wed, 13 Sep 2023 12:37:52 +0200
Subject: [PATCH] chore(aggregations): update search stage preview COMPASS-7169
 (#4839)

---
 .../components/stage-preview/index.spec.tsx   | 25 ++++++++++++-
 .../src/components/stage-preview/index.tsx    | 37 ++++++++++++++++++-
 2 files changed, 60 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..b80fe2f44bf 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,26 @@ 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 because your search has no results or your search index does not exist.'
+      )
+    ).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..b3d1868c684 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,26 @@ 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 (documents && documents.length > 0) {
     const docs = documents.map((doc, i) => {
       return (