update banner

Author: syn-zhu

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

@@ -9,6 +9,7 @@ import {
   ErrorSummary,
   Tooltip,
   WarningSummary,
+  Link,
   css,
   spacing,
   Icon,
@@ -18,10 +19,13 @@ import {
   DropdownMenuButton,
   SegmentedControl,
   SegmentedControlOption,
+  usePersistedState,
 } from '@mongodb-js/compass-components';
+import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 
 import type { RootState } from '../../modules';
 import { createSearchIndexOpened } from '../../modules/search-indexes';
+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';
@@ -46,6 +50,7 @@ const createIndexButtonContainerStyles = css({
 });
 
 type IndexesToolbarProps = {
+  namespace: string;
   indexView: IndexView;
   errorMessage: string | null;
   hasTooManyIndexes: boolean;
@@ -63,7 +68,11 @@ type IndexesToolbarProps = {
   readOnly?: boolean;
 };
 
+const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
+  'mongodb_compass_dismissedSearchIndexesBanner' as const;
+
 export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
+  namespace,
   indexView,
   errorMessage,
   isReadonlyView,
@@ -79,6 +88,11 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   readOnly, // preferences readOnly.
 }) => {
   const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
+  const [searchIndexesBannerDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+  const { atlasMetadata } = useConnectionInfo();
   const showInsights = usePreference('showInsights') && !errorMessage;
   const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
   const refreshButtonIcon = isRefreshing ? (
@@ -124,6 +138,21 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
             >
               Refresh
             </Button>
+            {!isReadonlyView &&
+              !isSearchManagementActive &&
+              searchIndexesBannerDismissed &&
+              atlasMetadata && (
+                <Link
+                  href={getAtlasSearchIndexesLink({
+                    clusterName: atlasMetadata.clusterName,
+                    namespace,
+                  })}
+                  hideExternalIcon
+                  arrowAppearance="persist"
+                >
+                  Manage your search indexes
+                </Link>
+              )}
             {showInsights && hasTooManyIndexes && (
               <SignalPopover
                 signals={PerformanceSignals.get('too-many-indexes')}
@@ -263,6 +292,7 @@ export const CreateIndexButton: React.FunctionComponent<
 };
 
 const mapState = ({
+  namespace,
   isWritable,
   isReadonlyView,
   isSearchIndexesSupported,
@@ -271,6 +301,7 @@ const mapState = ({
   searchIndexes,
   indexView,
 }: RootState) => ({
+  namespace,
   isWritable,
   isReadonlyView,
   isSearchIndexesSupported,

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

@@ -48,7 +48,7 @@ const containerStyles = css({
   flexGrow: 1,
 });
 
-const linkTitle = 'Atlas Search.';
+const linkTitle = 'Search and Vector Search.';
 
 const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
   'mongodb_compass_dismissedSearchIndexesBanner' as const;