add tests to indexes.spec.tsx

Author: DarshanaVenkatesh

packages/compass-indexes/src/components/indexes/indexes.spec.tsx

@@ -45,20 +45,8 @@ const renderIndexes = async (
 
   if (props) {
     const state = store.getState();
-
-    const allProps: Partial<RootState> = {
-      indexView: props.indexView ?? 'regular-indexes',
-      regularIndexes: {
-        ...state.regularIndexes,
-        ...props.regularIndexes,
-      },
-      searchIndexes: {
-        ...state.searchIndexes,
-        ...props.searchIndexes,
-      },
-    };
-
-    Object.assign(store.getState(), allProps);
+    const newState = { ...state, ...props };
+    Object.assign(store.getState(), newState);
   }
 
   render(
@@ -332,5 +320,69 @@ describe('Indexes Component', function () {
 
       expect(getSearchIndexesStub.callCount).to.equal(2);
     });
+
+    it('renders search indexes list if isReadonlyView >8.0 and has indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves(searchIndexes);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.1.0',
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('search-indexes-list')).to.exist;
+      });
+    });
+
+    it('renders correct empty state if isReadonlyView >8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.1.0',
+      });
+
+      expect(screen.getByText('No search indexes yet')).to.be.visible;
+      expect(screen.getByText('Create Atlas Search Index')).to.be.visible;
+    });
+
+    it('renders correct empty state if isReadonlyView 8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.0.0',
+      });
+
+      expect(screen.queryByTestId('upgrade-cluster-banner-8.0')).to.exist;
+      expect(screen.queryByText('No standard indexes')).to.exist;
+      expect(screen.queryByText('Create Atlas Search Index')).to.not.exist;
+    });
+    it('renders correct empty state if isReadonlyView <8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '7.0.0',
+      });
+
+      expect(
+        screen.queryByTestId('upgrade-cluster-banner-less-than-8.0')
+      ).to.exist;
+      expect(screen.queryByText('No standard indexes')).to.exist;
+      expect(screen.queryByText('Create Atlas Search Index')).to.not.exist;
+    });
   });
 });

packages/compass-indexes/src/components/indexes/indexes.tsx

@@ -8,6 +8,7 @@ import {
   spacing,
   usePersistedState,
   EmptyContent,
+  Body,
 } from '@mongodb-js/compass-components';
 
 import IndexesToolbar from '../indexes-toolbar/indexes-toolbar';
@@ -31,7 +32,6 @@ 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.
@@ -58,13 +58,7 @@ const ViewVersionIncompatibleEmptyState = ({
   mongoDBMajorVersion: number;
   enableAtlasSearchIndexes: boolean;
 }) => {
-  const viewIsSearchCompatible = true; // view only contains $addFields, $set or $match stages with the $expr operator.
-
-  if (
-    mongoDBMajorVersion >= 8.1 &&
-    enableAtlasSearchIndexes &&
-    viewIsSearchCompatible
-  ) {
+  if (mongoDBMajorVersion > 8.0 && enableAtlasSearchIndexes) {
     return null;
   }
   return (
@@ -89,32 +83,21 @@ const AtlasIndexesBanner = ({
   namespace,
   dismissed,
   onDismissClick,
-  atlasMetadata,
-  isReadonlyView,
-  mongoDBMajorVersion,
 }: {
   namespace: string;
   dismissed: boolean;
   onDismissClick: () => void;
-  atlasMetadata: AtlasClusterMetadata | undefined;
-  isReadonlyView?: boolean;
-  mongoDBMajorVersion: number;
 }) => {
-  const viewIsSearchCompatible = true; // view only contains $addFields, $set or $match stages with the $expr operator.
-  if (dismissed || (mongoDBMajorVersion > 8.0 && viewIsSearchCompatible)) {
+  const { atlasMetadata } = useConnectionInfo();
+
+  if (!atlasMetadata || dismissed) {
     return null;
   }
-  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={bannerVariant} dismissible onClose={onDismissClick}>
-      <b>Looking for search indexes?</b>
-      <br />
-      {bannerText}
+    <Banner variant="info" dismissible onClose={onDismissClick}>
+      <Body weight="medium">Looking for search indexes?</Body>
+      These indexes can be created and viewed under{' '}
       {atlasMetadata ? (
         <Link
           href={getAtlasSearchIndexesLink({
@@ -218,7 +201,6 @@ export function Indexes({
         <div className={indexesContainersStyles}>
           {isReadonlyView && (
             <ViewVersionIncompatibleBanner
-              namespace={namespace}
               serverVersion={serverVersion}
               mongoDBMajorVersion={mongoDBMajorVersion}
               enableAtlasSearchIndexes={enableAtlasSearchIndexes}
@@ -233,9 +215,6 @@ export function Indexes({
                 onDismissClick={() => {
                   setDismissed(true);
                 }}
-                atlasMetadata={atlasMetadata}
-                isReadonlyView={isReadonlyView}
-                mongoDBMajorVersion={mongoDBMajorVersion}
               />
             ))}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (

packages/compass-indexes/src/components/view-version-incompatible-banners/view-version-incompatible-banners.tsx

@@ -5,7 +5,6 @@ import {
   css,
 } from '@mongodb-js/compass-components';
 import { getAtlasUpgradeClusterLink } from '../../utils/atlas-upgrade-cluster-link';
-import { getAtlasSearchIndexesLink } from '../../utils/atlas-search-indexes-link';
 import React from 'react';
 import type { AtlasClusterMetadata } from '@mongodb-js/connection-info';
 
@@ -17,13 +16,11 @@ const viewContentStyles = css({
 });
 
 export const ViewVersionIncompatibleBanner = ({
-  namespace,
   serverVersion,
   mongoDBMajorVersion,
   enableAtlasSearchIndexes,
   atlasMetadata,
 }: {
-  namespace: string;
   serverVersion: string;
   mongoDBMajorVersion: number;
   enableAtlasSearchIndexes: boolean;
@@ -35,14 +32,17 @@ export const ViewVersionIncompatibleBanner = ({
     mongoDBMajorVersion > 8.0 ||
     (mongoDBMajorVersion === 8.0 && !enableAtlasSearchIndexes)
   ) {
-    // return if 8.1+ or 8.0+ for data explorer
+    // return if 8.1+ on compass or 8.0+ for data explorer
     return null;
   }
 
   if (mongoDBMajorVersion < 8.0) {
     // data explorer <8.0 and compass <8.0
     return (
-      <Banner variant={BannerVariant.Warning}>
+      <Banner
+        variant={BannerVariant.Warning}
+        data-testid="upgrade-cluster-banner-less-than-8.0"
+      >
         <b>Looking for search indexes?</b>
         <br />
         <div className={viewContentStyles}>
@@ -75,7 +75,10 @@ export const ViewVersionIncompatibleBanner = ({
   if (mongoDBMajorVersion === 8.0 && enableAtlasSearchIndexes) {
     // compass 8.0
     return (
-      <Banner variant={BannerVariant.Warning}>
+      <Banner
+        variant={BannerVariant.Warning}
+        data-testid="upgrade-cluster-banner-8.0"
+      >
         <b>Looking for search indexes?</b>
         <br />
         <div className={viewContentStyles}>