add disabled tooltip

Author: DarshanaVenkatesh

packages/compass-aggregations/src/modules/update-view.ts

@@ -111,6 +111,7 @@ export const updateView = (): PipelineBuilderThunkAction<Promise<void>> => {
       pipelineBuilder
     );
 
+    // confirmation banner if indexes present
     await dispatch(fetchIndexes(viewNamespace));
     if (state.searchIndexes.indexes.length > 0) {
       const pipelineIsSearchQueryable = isPipelineSearchQueryable(viewPipeline);

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

@@ -127,11 +127,12 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
     <Icon glyph="Refresh" title="Refresh Indexes" />
   );
   const isViewPipelineSearchQueryable =
-    isReadonlyView &&
-    collectionStats?.pipeline &&
-    isPipelineSearchQueryable(
-      collectionStats.pipeline as Array<Record<string, any>>
-    );
+    (isReadonlyView &&
+      collectionStats?.pipeline &&
+      isPipelineSearchQueryable(
+        collectionStats.pipeline as Array<Record<string, any>>
+      )) ??
+    true;
   const pipelineNotSearchQueryableDescription =
     'Search indexes can only be created on  views containing $addFields, $set or $match stages with the $expr operator.';
   return (

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

@@ -105,21 +105,25 @@ const ViewVersionIncompatibleEmptyState = ({
 
 const ViewNotSearchCompatibleBanner = ({
   searchIndexes,
+  enableAtlasSearchIndexes,
 }: {
   searchIndexes: SearchIndex[];
+  enableAtlasSearchIndexes: boolean;
 }) => {
   const hasNoSearchIndexes = searchIndexes.length === 0;
-  const variant = hasNoSearchIndexes ? 'warning' : 'danger';
+  const variant =
+    hasNoSearchIndexes || !enableAtlasSearchIndexes ? 'warning' : 'danger';
   return (
     <Banner variant={variant}>
-      {hasNoSearchIndexes && (
+      {!enableAtlasSearchIndexes && (
         <>
           <b>Looking for search indexes?</b> <br />
         </>
       )}
       This view is incompatible with search indexes. Only views containing
       $addFields, $set or $match stages with the $expr operator are compatible
-      with search indexes. Edit the view to rebuild search indexes.{' '}
+      with search indexes.{' '}
+      {!hasNoSearchIndexes && 'Edit the view to rebuild search indexes.'}{' '}
       <Link href={''} hideExternalIcon>
         Learn more.
       </Link>
@@ -228,10 +232,47 @@ export function Indexes({
   const enableAtlasSearchIndexes = usePreference('enableAtlasSearchIndexes');
   const { atlasMetadata } = useConnectionInfo();
   const isViewPipelineSearchQueryable =
-    collectionStats?.pipeline &&
-    isPipelineSearchQueryable(
-      collectionStats.pipeline as Array<Record<string, any>>
-    );
+    (isReadonlyView &&
+      collectionStats?.pipeline &&
+      isPipelineSearchQueryable(
+        collectionStats.pipeline as Array<Record<string, any>>
+      )) ??
+    true;
+
+  const getBanner = () => {
+    if (isReadonlyView) {
+      if (!isVersionSearchCompatibleForViews(serverVersion)) {
+        return (
+          <ViewVersionIncompatibleBanner
+            serverVersion={serverVersion}
+            enableAtlasSearchIndexes={enableAtlasSearchIndexes}
+            atlasMetadata={atlasMetadata}
+          />
+        );
+      }
+      if (!isViewPipelineSearchQueryable) {
+        return (
+          <ViewNotSearchCompatibleBanner
+            searchIndexes={searchIndexes.indexes}
+            enableAtlasSearchIndexes={enableAtlasSearchIndexes}
+          />
+        );
+      }
+    }
+
+    if (!isReadonlyView || !enableAtlasSearchIndexes) {
+      return (
+        <AtlasIndexesBanner
+          namespace={namespace}
+          dismissed={atlasBannerDismissed}
+          onDismissClick={() => {
+            setDismissed(true);
+          }}
+        />
+      );
+    }
+    return null;
+  };
 
   return (
     <div className={containerStyles}>
@@ -251,30 +292,7 @@ export function Indexes({
         }
       >
         <div className={indexesContainersStyles}>
-          {isReadonlyView && (
-            <ViewVersionIncompatibleBanner
-              serverVersion={serverVersion}
-              enableAtlasSearchIndexes={enableAtlasSearchIndexes}
-              atlasMetadata={atlasMetadata}
-            />
-          )}
-          {isReadonlyView && !isViewPipelineSearchQueryable ? (
-            <ViewNotSearchCompatibleBanner
-              searchIndexes={searchIndexes.indexes}
-            />
-          ) : (
-            (!isReadonlyView ||
-              (isVersionSearchCompatibleForViewsDataExplorer(serverVersion) &&
-                !enableAtlasSearchIndexes)) && (
-              <AtlasIndexesBanner // cta to Atlas Search Indexes Page
-                namespace={namespace}
-                dismissed={atlasBannerDismissed}
-                onDismissClick={() => {
-                  setDismissed(true);
-                }}
-              />
-            )
-          )}
+          {getBanner()}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
             <RegularIndexesTable />
           )}

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

@@ -39,12 +39,16 @@ import type { RootState } from '../../modules';
 import BadgeWithIconLink from '../indexes-table/badge-with-icon-link';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { useWorkspaceTabId } from '@mongodb-js/compass-workspaces/provider';
+import type { CollectionStats } from '../../modules/collection-stats';
+import { isPipelineSearchQueryable } from 'mongodb-compass/src/app/utils/view-search-queryable';
+import { CreateIndexButton } from '../indexes-toolbar/indexes-toolbar';
 
 type SearchIndexesTableProps = {
   namespace: string;
   indexes: SearchIndex[];
   isWritable?: boolean;
   readOnly?: boolean;
+  collectionStats?: CollectionStats;
   status: FetchStatus;
   onDropIndexClick: (name: string) => void;
   onEditIndexClick: (name: string) => void;
@@ -63,23 +67,36 @@ function isReadyStatus(status: FetchStatus) {
 
 function ZeroState({
   onOpenCreateModalClick,
+  isViewPipelineSearchQueryable,
 }: {
   onOpenCreateModalClick: () => void;
+  isViewPipelineSearchQueryable: boolean;
 }) {
   return (
     <EmptyContent
       icon={ZeroGraphic}
       title="No search indexes yet"
       subTitle="Atlas Search is an embedded full-text search in MongoDB Atlas that gives you a seamless, scalable experience for building relevance-based app features."
       callToAction={
-        <Button
-          onClick={onOpenCreateModalClick}
-          data-testid="create-atlas-search-index-button"
-          variant="primary"
-          size="small"
+        <Tooltip
+          enabled={!isViewPipelineSearchQueryable}
+          align="top"
+          justify="middle"
+          trigger={
+            <Button
+              onClick={onOpenCreateModalClick}
+              data-testid="create-atlas-search-index-button"
+              variant="primary"
+              size="small"
+              disabled={!isViewPipelineSearchQueryable}
+            >
+              Create Atlas Search Index
+            </Button>
+          }
         >
-          Create Atlas Search Index
-        </Button>
+          Search indexes can only be created on views containing $addFields,
+          $set or $match stages with the $expr operator.
+        </Tooltip>
       }
       callToActionLink={
         <span>
@@ -283,6 +300,7 @@ export const SearchIndexesTable: React.FunctionComponent<
   namespace,
   indexes,
   isWritable,
+  collectionStats,
   readOnly,
   status,
   onOpenCreateModalClick,
@@ -302,7 +320,13 @@ export const SearchIndexesTable: React.FunctionComponent<
       onSearchIndexesClosed(tabId);
     };
   }, [tabId, onSearchIndexesOpened, onSearchIndexesClosed]);
-
+  const isViewPipelineSearchQueryable =
+    (readOnly &&
+      collectionStats?.pipeline &&
+      isPipelineSearchQueryable(
+        collectionStats.pipeline as Array<Record<string, any>>
+      )) ??
+    true;
   const data = useMemo<LGTableDataType<SearchIndexInfo>[]>(
     () =>
       indexes.map((index) => {
@@ -384,7 +408,12 @@ export const SearchIndexesTable: React.FunctionComponent<
   }
 
   if (indexes.length === 0) {
-    return <ZeroState onOpenCreateModalClick={onOpenCreateModalClick} />;
+    return (
+      <ZeroState
+        onOpenCreateModalClick={onOpenCreateModalClick}
+        isViewPipelineSearchQueryable={isViewPipelineSearchQueryable}
+      />
+    );
   }
 
   const canModifyIndex = isWritable && !readOnly;
@@ -399,9 +428,15 @@ export const SearchIndexesTable: React.FunctionComponent<
   );
 };
 
-const mapState = ({ searchIndexes, isWritable, namespace }: RootState) => ({
+const mapState = ({
+  searchIndexes,
+  isWritable,
+  namespace,
+  collectionStats,
+}: RootState) => ({
   namespace,
   isWritable,
+  collectionStats,
   indexes: searchIndexes.indexes,
   status: searchIndexes.status,
 });