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 ;
}
@@ -138,6 +153,26 @@ function StagePreviewBody({
);
}
+ if (isAtlasOnlyStage(stageOperator ?? '') && documents?.length === 0) {
+ return (
+
+
+ No results found
+
+
+ This may be because your search has no results or your search index
+ does not exist.
+
+
+ );
+ }
+
if (documents && documents.length > 0) {
const docs = documents.map((doc, i) => {
return (