show the search warning in all three places

lerouxb · lerouxb · commit 3140db0fe571 · 2024-10-14T15:00:15.000+01:00
diff --git a/packages/compass-aggregations/src/components/atlas-no-results.tsx b/packages/compass-aggregations/src/components/atlas-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 AtlasNoResults() {
+  const darkMode = useDarkMode();
+
+  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>
+  );
+}
diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx
@@ -24,6 +24,7 @@ import {
   expandPreviewDocsForStage,
 } from '../../modules/pipeline-builder/stage-editor';
 import type { StoreStage } from '../../modules/pipeline-builder/stage-editor';
+import AtlasNoResults from '../atlas-no-results';
 
 const containerStyles = css({
   display: 'flex',
@@ -149,6 +150,8 @@ export const FocusModePreview = ({
         className={documentListStyles}
       />
     );
+  } else if (isAtlasOnlyStage(stageOperator)) {
+    return <AtlasNoResults />;
   } else {
     content = (
       <div className={centerStyles}>
diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx b/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 AtlasNoResults from '../../atlas-no-results';
 
 const containerStyles = css({
   display: 'flex',
@@ -126,6 +127,9 @@ const PreviewResults = ({
   }
 
   if (previewDocs.length === 0) {
+    if (atlasOperator) {
+      return <AtlasNoResults />;
+    }
     return (
       <div className={centerStyles}>
         <DocumentIcon />
diff --git a/packages/compass-aggregations/src/components/stage-preview/index.tsx b/packages/compass-aggregations/src/components/stage-preview/index.tsx
@@ -9,7 +9,6 @@ import {
   Body,
   KeylineCard,
   useDarkMode,
-  Subtitle,
 } from '@mongodb-js/compass-components';
 import { Document } from '@mongodb-js/compass-crud';
 
@@ -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 AtlasNoResults from '../atlas-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) {
@@ -154,23 +146,7 @@ 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>
-    );
+    return <AtlasNoResults />;
   }
 
   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>
     );
   }

No results found