add version incompatible banner

Author: DarshanaVenkatesh

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

@@ -31,6 +31,8 @@ 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 { CollectionStats } from '../../modules/collection-stats';
+import { isPipelineSearchQueryable } from 'mongodb-compass/src/app/utils/view-search-queryable';
 
 const toolbarButtonsContainer = css({
   display: 'flex',
@@ -88,6 +90,7 @@ type IndexesToolbarProps = {
   isSearchIndexesSupported: boolean;
   // via withPreferences:
   readOnly?: boolean;
+  collectionStats: CollectionStats;
 };
 
 export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
@@ -107,6 +110,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   onIndexViewChanged,
   serverVersion,
   readOnly, // preferences readOnly.
+  collectionStats,
 }) => {
   const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
   const { atlasMetadata } = useConnectionInfo();
@@ -122,7 +126,14 @@ 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>>
+    );
+  const pipelineNotSearchQueryableDescription =
+    'Search indexes can only be created on  views containing $addFields, $set or $match stages with the $expr operator.';
   return (
     <div
       className={indexesToolbarContainerStyles}
@@ -135,7 +146,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
           <div className={toolbarButtonsContainer}>
             {showCreateIndexButton && (
               <Tooltip
-                enabled={!isWritable}
+                enabled={!isWritable || !isViewPipelineSearchQueryable}
                 align="top"
                 justify="middle"
                 trigger={
@@ -148,11 +159,16 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
                       onCreateSearchIndexClick={onCreateSearchIndexClick}
                       isReadonlyView={isReadonlyView}
                       indexView={indexView}
+                      isViewPipelineSearchQueryable={
+                        isViewPipelineSearchQueryable
+                      }
                     />
                   </div>
                 }
               >
-                {writeStateDescription}
+                {(!isWritable && writeStateDescription) ||
+                  (!isViewPipelineSearchQueryable &&
+                    pipelineNotSearchQueryableDescription)}
               </Tooltip>
             )}
             <Button
@@ -286,6 +302,7 @@ type CreateIndexButtonProps = {
   onCreateSearchIndexClick: () => void;
   isReadonlyView: boolean;
   indexView: IndexView;
+  isViewPipelineSearchQueryable: boolean;
 };
 
 type CreateIndexActions = 'createRegularIndex' | 'createSearchIndex';
@@ -300,6 +317,7 @@ export const CreateIndexButton: React.FunctionComponent<
   onCreateSearchIndexClick,
   isReadonlyView,
   indexView,
+  isViewPipelineSearchQueryable,
 }) => {
   const onActionDispatch = useCallback(
     (action: CreateIndexActions) => {
@@ -317,7 +335,7 @@ export const CreateIndexButton: React.FunctionComponent<
     if (indexView === 'search-indexes') {
       return (
         <Button
-          disabled={!isWritable}
+          disabled={!isWritable || !isViewPipelineSearchQueryable}
           onClick={onCreateSearchIndexClick}
           variant="primary"
           size="small"
@@ -371,6 +389,7 @@ const mapState = ({
   serverVersion,
   searchIndexes,
   indexView,
+  collectionStats,
 }: RootState) => ({
   namespace,
   isWritable,
@@ -380,6 +399,7 @@ const mapState = ({
   indexView,
   serverVersion,
   searchIndexes,
+  collectionStats,
 });
 
 const mapDispatch = {

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

@@ -36,6 +36,9 @@ 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 semver from 'semver';
+import type { SearchIndex } from 'mongodb-data-service';
+import { isPipelineSearchQueryable } from 'mongodb-compass/src/app/utils/view-search-queryable';
+import type { CollectionStats } from '../../modules/collection-stats';
 
 // 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.
@@ -100,6 +103,30 @@ const ViewVersionIncompatibleEmptyState = ({
   );
 };
 
+const ViewNotSearchCompatibleBanner = ({
+  searchIndexes,
+}: {
+  searchIndexes: SearchIndex[];
+}) => {
+  const hasNoSearchIndexes = searchIndexes.length === 0;
+  const variant = hasNoSearchIndexes ? 'warning' : 'danger';
+  return (
+    <Banner variant={variant}>
+      {hasNoSearchIndexes && (
+        <>
+          <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.{' '}
+      <Link href={''} hideExternalIcon>
+        Learn more.
+      </Link>
+    </Banner>
+  );
+};
+
 const AtlasIndexesBanner = ({
   namespace,
   dismissed,
@@ -145,6 +172,7 @@ type IndexesProps = {
   refreshRegularIndexes: () => void;
   refreshSearchIndexes: () => void;
   serverVersion: string;
+  collectionStats: CollectionStats;
 };
 
 function isRefreshingStatus(status: FetchStatus) {
@@ -171,6 +199,7 @@ export function Indexes({
   refreshRegularIndexes,
   refreshSearchIndexes,
   serverVersion,
+  collectionStats,
 }: IndexesProps) {
   const [atlasBannerDismissed, setDismissed] = usePersistedState(
     DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
@@ -198,6 +227,11 @@ export function Indexes({
 
   const enableAtlasSearchIndexes = usePreference('enableAtlasSearchIndexes');
   const { atlasMetadata } = useConnectionInfo();
+  const isViewPipelineSearchQueryable =
+    collectionStats?.pipeline &&
+    isPipelineSearchQueryable(
+      collectionStats.pipeline as Array<Record<string, any>>
+    );
 
   return (
     <div className={containerStyles}>
@@ -224,16 +258,22 @@ export function Indexes({
               atlasMetadata={atlasMetadata}
             />
           )}
-          {(!isReadonlyView ||
-            (isVersionSearchCompatibleForViewsDataExplorer(serverVersion) &&
-              !enableAtlasSearchIndexes)) && (
-            <AtlasIndexesBanner // cta to Atlas Search Indexes Page
-              namespace={namespace}
-              dismissed={atlasBannerDismissed}
-              onDismissClick={() => {
-                setDismissed(true);
-              }}
+          {isReadonlyView && !isViewPipelineSearchQueryable ? (
+            <ViewNotSearchCompatibleBanner
+              searchIndexes={searchIndexes.indexes}
             />
+          ) : (
+            (!isReadonlyView ||
+              (isVersionSearchCompatibleForViewsDataExplorer(serverVersion) &&
+                !enableAtlasSearchIndexes)) && (
+              <AtlasIndexesBanner // cta to Atlas Search Indexes Page
+                namespace={namespace}
+                dismissed={atlasBannerDismissed}
+                onDismissClick={() => {
+                  setDismissed(true);
+                }}
+              />
+            )
           )}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
             <RegularIndexesTable />
@@ -264,13 +304,15 @@ const mapState = ({
   searchIndexes,
   indexView,
   serverVersion,
+  collectionStats,
 }: RootState) => ({
   namespace,
   isReadonlyView,
   regularIndexes,
   searchIndexes,
   currentIndexesView: indexView,
   serverVersion,
+  collectionStats,
 });
 
 const mapDispatch = {

packages/compass-indexes/src/modules/collection-stats.ts

@@ -11,16 +11,17 @@ function isAction<A extends AnyAction>(
 export function extractCollectionStats(
   collection: Collection
 ): CollectionStats {
-  const { index_count, index_size } = collection.toJSON();
+  const { index_count, index_size, pipeline } = collection.toJSON();
   return {
     index_count,
     index_size,
+    pipeline,
   };
 }
 
 export type CollectionStats = Pick<
   Collection,
-  'index_count' | 'index_size'
+  'index_count' | 'index_size' | 'pipeline'
 > | null;
 
 enum StatsActions {