add banners to indexes tab

Author: DarshanaVenkatesh

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

@@ -1,24 +1,25 @@
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import {
-  withPreferences,
   usePreference,
+  withPreferences,
 } from 'compass-preferences-model/provider';
 import {
+  Banner,
+  BannerVariant,
   Button,
-  ErrorSummary,
-  Tooltip,
-  WarningSummary,
-  Link,
   css,
-  spacing,
+  DropdownMenuButton,
+  ErrorSummary,
   Icon,
-  SpinLoader,
-  SignalPopover,
+  Link,
   PerformanceSignals,
-  DropdownMenuButton,
   SegmentedControl,
   SegmentedControlOption,
+  SignalPopover,
+  spacing,
+  SpinLoader,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import semver from 'semver';
@@ -29,6 +30,7 @@ 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',
@@ -54,6 +56,15 @@ 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) => {
@@ -110,6 +121,7 @@ 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" />
@@ -118,6 +130,89 @@ 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}
@@ -240,15 +335,11 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
           </div>
         </div>
       )}
-      {isReadonlyView ? (
-        <WarningSummary
-          warnings={['Readonly views may not contain indexes.']}
-        />
-      ) : (
-        !!errorMessage && (
-          <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
-        )
-      )}
+      {isReadonlyView
+        ? renderViewBanner(serverVersion, mongoDBMajorVersion)
+        : !!errorMessage && (
+            <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
+          )}
     </div>
   );
 };

packages/compass-indexes/src/utils/atlas-upgrade-cluster-link.ts

@@ -0,0 +1,7 @@
+export function getAtlasUpgradeClusterLink({
+  clusterName,
+}: {
+  clusterName: string;
+}) {
+  return `#/clusters/edit/${encodeURIComponent(clusterName)}`;
+}