update banner to include data explorer versions

DarshanaVenkatesh · DarshanaVenkatesh · commit 0c9652032912 · 2025-08-07T16:11:57.000-07:00
diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx
@@ -5,12 +5,9 @@ import {
   withPreferences,
 } from 'compass-preferences-model/provider';
 import {
-  Banner,
-  BannerVariant,
   Button,
   css,
   DropdownMenuButton,
-  ErrorSummary,
   Icon,
   Link,
   PerformanceSignals,
@@ -30,7 +27,6 @@ import { getAtlasSearchIndexesLink } from '../../utils/atlas-search-indexes-link
 import { createIndexOpened } from '../../modules/create-index';
 import type { IndexView } from '../../modules/index-view';
 import { indexViewChanged } from '../../modules/index-view';
-import { getAtlasUpgradeClusterLink } from '../../utils/atlas-upgrade-cluster-link';
 
 const toolbarButtonsContainer = css({
   display: 'flex',
@@ -56,15 +52,6 @@ const createIndexButtonContainerStyles = css({
   width: 'fit-content',
 });
 
-const viewContentStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  //alignItems: 'flex-end',
-  //gap: spacing[200],
-});
-
 const MIN_SEARCH_INDEX_MANAGEMENT_SERVER_VERSION = '6.0.7';
 
 const serverSupportsSearchIndexManagement = (serverVersion: string) => {
@@ -121,7 +108,6 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   const { atlasMetadata } = useConnectionInfo();
   const showInsights = usePreference('showInsights') && !errorMessage;
   const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
-  const mongoDBMajorVersion = serverVersion.split('.').slice(0, 2).join('.');
   const refreshButtonIcon = isRefreshing ? (
     <div className={spinnerStyles}>
       <SpinLoader title="Refreshing Indexes" />
@@ -130,89 +116,6 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
     <Icon glyph="Refresh" title="Refresh Indexes" />
   );
 
-  const renderViewBanner = (
-    serverVersion: string,
-    mongoDBMajorVersion: string
-  ) => {
-    const version = parseFloat(mongoDBMajorVersion);
-    if (version < 8.0) {
-      return (
-        <Banner variant={BannerVariant.Warning}>
-          <b>Looking for search indexes?</b>
-          <br />
-          <div className={viewContentStyles}>
-            <span>
-              Your MongoDB version is {serverVersion}. Creating and managing
-              search indexes on views in Compass is supported on MongoDB version
-              8.1 or higher. Upgrade your cluster to create search indexes on
-              views.
-            </span>
-            {atlasMetadata && (
-              <Button
-                size="xsmall"
-                onClick={() => {
-                  window.open(
-                    getAtlasUpgradeClusterLink({
-                      clusterName: atlasMetadata.clusterName,
-                    }),
-                    '_blank'
-                  );
-                }}
-              >
-                Upgrade Cluster
-              </Button>
-            )}
-          </div>
-        </Banner>
-      );
-    }
-
-    if (version === 8.0) {
-      return (
-        <Banner variant={BannerVariant.Warning}>
-          <b>Looking for search indexes?</b>
-          <br />
-          <div className={viewContentStyles}>
-            <span>
-              Your MongoDB version is {serverVersion}. Creating and managing
-              search indexes on views in Compass is supported on MongoDB version
-              8.1 or higher. Upgrade your cluster or manage search indexes on
-              views in the Atlas UI.
-            </span>
-            {atlasMetadata && (
-              <Button
-                size="xsmall"
-                onClick={() => {
-                  window.open(
-                    getAtlasSearchIndexesLink({
-                      clusterName: atlasMetadata.clusterName,
-                      namespace,
-                    }),
-                    '_blank'
-                  );
-                }}
-              >
-                Go to Atlas
-              </Button>
-            )}
-          </div>
-        </Banner>
-      );
-    }
-    if (version > 8.0) {
-      return (
-        <Banner variant={BannerVariant.Warning}>
-          <b>Looking for search indexes?</b>
-          <br />
-          This view is incompatible with search indexes. To use search indexes,
-          edit the view to only contain $addFields, $set, or $match stages with
-          the $expr operator. You can view all search indexes under INSERT LINK.
-        </Banner>
-      );
-    }
-    return null;
-  };
-
   return (
     <div
       className={indexesToolbarContainerStyles}
@@ -335,11 +238,6 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
           </div>
         </div>
       )}
-      {isReadonlyView
-        ? renderViewBanner(serverVersion, mongoDBMajorVersion)
-        : !!errorMessage && (
-            <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
-          )}
     </div>
   );
 };
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
   Banner,
-  Body,
   Link,
   WorkspaceContainer,
   css,
   spacing,
   usePersistedState,
+  EmptyContent,
 } from '@mongodb-js/compass-components';
 
 import IndexesToolbar from '../indexes-toolbar/indexes-toolbar';
@@ -29,6 +29,9 @@ import { usePreference } from 'compass-preferences-model/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { getAtlasSearchIndexesLink } from '../../utils/atlas-search-indexes-link';
 import CreateIndexModal from '../create-index-modal/create-index-modal';
+import { ZeroGraphic } from '../search-indexes-table/zero-graphic';
+import { ViewVersionIncompatibleBanner } from '../view-version-incompatible-banners/view-version-incompatible-banners';
+import type { AtlasClusterMetadata } from '@mongodb-js/connection-info';
 
 // This constant is used as a trigger to show an insight whenever number of
 // indexes in a collection is more than what is specified here.
@@ -48,25 +51,54 @@ const linkTitle = 'Search and Vector Search.';
 const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
   'mongodb_compass_dismissedSearchIndexesBanner' as const;
 
+const DataExplorerViewEmptyState = () => {
+  return (
+    <EmptyContent
+      icon={ZeroGraphic}
+      title="No standard indexes"
+      subTitle="Standard views use the indexes of the underlying collection. As a result, you
+           cannot create, drop or re-build indexes on a standard view directly, nor get a list of indexes on the view."
+      callToActionLink={
+        <Link
+          href="https://www.mongodb.com/docs/atlas/atlas-search/" // PLACEHOLDER LINK
+          target="_blank"
+        >
+          Learn more about views
+        </Link>
+      }
+    />
+  );
+};
+
 const AtlasIndexesBanner = ({
   namespace,
   dismissed,
   onDismissClick,
+  atlasMetadata,
+  isReadonlyView,
 }: {
   namespace: string;
   dismissed: boolean;
   onDismissClick: () => void;
+  atlasMetadata: AtlasClusterMetadata | undefined;
+  isReadonlyView?: boolean;
 }) => {
-  const { atlasMetadata } = useConnectionInfo();
-
   if (!atlasMetadata || dismissed) {
     return null;
   }
 
+  const viewIsSearchCompatible = false; // view only contains $addFields, $set or $match stages with the $expr operator.
+  const bannerVariant =
+    isReadonlyView && !viewIsSearchCompatible ? 'warning' : 'info';
+  const bannerText =
+    isReadonlyView && !viewIsSearchCompatible
+      ? 'This view is incompatible with search indexes. To use search indexes, edit the view to only contain $addFields, $set or $match stages with the $expr operator. You can view all search indexes under '
+      : 'These indexes can be created and viewed under ';
   return (
-    <Banner variant="info" dismissible onClose={onDismissClick}>
-      <Body weight="medium">Looking for search indexes?</Body>
-      These indexes can be created and viewed under{' '}
+    <Banner variant={bannerVariant} dismissible onClose={onDismissClick}>
+      <b>Looking for search indexes?</b>
+      <br />
+      {bannerText}
       {atlasMetadata ? (
         <Link
           href={getAtlasSearchIndexesLink({
@@ -84,6 +116,18 @@ const AtlasIndexesBanner = ({
   );
 };
 
+/*  if (version > 8.0 || version===8.0 && !isSearchManagementActive) { // compass >8.0 and data explorer >=8.0
+    return ( // ALSO CHECK IF VIEW IS SEARCH QUERYABLE
+        <Banner variant={BannerVariant.Warning}>
+          <b>Looking for search indexes?</b>
+          <br />
+          This view is incompatible with search indexes. To use search indexes,
+          edit the view to only contain $addFields, $set, or $match stages with
+          the $expr operator. You can view all search indexes under INSERT LINK.
+        </Banner>
+    );
+  }*/
+
 type IndexesProps = {
   namespace: string;
   isReadonlyView?: boolean;
@@ -92,6 +136,7 @@ type IndexesProps = {
   currentIndexesView: IndexView;
   refreshRegularIndexes: () => void;
   refreshSearchIndexes: () => void;
+  serverVersion: string;
 };
 
 function isRefreshingStatus(status: FetchStatus) {
@@ -117,6 +162,7 @@ export function Indexes({
   currentIndexesView,
   refreshRegularIndexes,
   refreshSearchIndexes,
+  serverVersion,
 }: IndexesProps) {
   const [atlasBannerDismissed, setDismissed] = usePersistedState(
     DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
@@ -143,7 +189,8 @@ export function Indexes({
       : refreshSearchIndexes;
 
   const enableAtlasSearchIndexes = usePreference('enableAtlasSearchIndexes');
-
+  const mongoDBMajorVersion = serverVersion.split('.').slice(0, 2).join('.');
+  const { atlasMetadata } = useConnectionInfo();
   return (
     <div className={containerStyles}>
       <WorkspaceContainer
@@ -162,13 +209,24 @@ export function Indexes({
         }
       >
         <div className={indexesContainersStyles}>
-          {!isReadonlyView && !enableAtlasSearchIndexes && (
+          {isReadonlyView && (
+            <ViewVersionIncompatibleBanner
+              namespace={namespace}
+              serverVersion={serverVersion}
+              mongoDBMajorVersion={mongoDBMajorVersion}
+              enableAtlasSearchIndexes={enableAtlasSearchIndexes}
+              atlasMetadata={atlasMetadata}
+            />
+          )}
+          {!enableAtlasSearchIndexes && (
             <AtlasIndexesBanner
               namespace={namespace}
               dismissed={atlasBannerDismissed}
               onDismissClick={() => {
                 setDismissed(true);
               }}
+              atlasMetadata={atlasMetadata}
+              isReadonlyView={isReadonlyView}
             />
           )}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
@@ -177,6 +235,11 @@ export function Indexes({
           {!isReadonlyView && currentIndexesView === 'search-indexes' && (
             <SearchIndexesTable />
           )}
+          {isReadonlyView &&
+            !enableAtlasSearchIndexes &&
+            searchIndexes.indexes.length === 0 && (
+              <DataExplorerViewEmptyState />
+            )}
         </div>
       </WorkspaceContainer>
       <CreateSearchIndexModal />
@@ -192,12 +255,14 @@ const mapState = ({
   regularIndexes,
   searchIndexes,
   indexView,
+  serverVersion,
 }: RootState) => ({
   namespace,
   isReadonlyView,
   regularIndexes,
   searchIndexes,
   currentIndexesView: indexView,
+  serverVersion,
 });
 
 const mapDispatch = {
diff --git a/packages/compass-indexes/src/components/view-version-incompatible-banners/view-version-incompatible-banners.tsx b/packages/compass-indexes/src/components/view-version-incompatible-banners/view-version-incompatible-banners.tsx
