feat(indexes): add Atlas search indexes link when banner dismissed COMPASS-9158 (#6880)

* update banner

* add dismissed

* Update banner

* fix test

Author: syn-zhu

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

@@ -42,6 +42,8 @@ describe('IndexesToolbar Component', function () {
           onIndexViewChanged={() => {}}
           onCreateRegularIndexClick={() => {}}
           onCreateSearchIndexClick={() => {}}
+          namespace=""
+          showAtlasSearchLink={false}
           {...props}
         />
       </PreferencesProvider>

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

@@ -9,6 +9,7 @@ import {
   ErrorSummary,
   Tooltip,
   WarningSummary,
+  Link,
   css,
   spacing,
   Icon,
@@ -19,9 +20,11 @@ import {
   SegmentedControl,
   SegmentedControlOption,
 } 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,9 +49,11 @@ const createIndexButtonContainerStyles = css({
 });
 
 type IndexesToolbarProps = {
+  namespace: string;
   indexView: IndexView;
   errorMessage: string | null;
   hasTooManyIndexes: boolean;
+  showAtlasSearchLink: boolean;
   isRefreshing: boolean;
   onRefreshIndexes: () => void;
   onIndexViewChanged: (newView: IndexView) => void;
@@ -64,6 +69,7 @@ type IndexesToolbarProps = {
 };
 
 export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
+  namespace,
   indexView,
   errorMessage,
   isReadonlyView,
@@ -73,12 +79,14 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   isRefreshing,
   writeStateDescription,
   hasTooManyIndexes,
+  showAtlasSearchLink,
   isSearchIndexesSupported,
   onRefreshIndexes,
   onIndexViewChanged,
   readOnly, // preferences readOnly.
 }) => {
   const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
+  const { atlasMetadata } = useConnectionInfo();
   const showInsights = usePreference('showInsights') && !errorMessage;
   const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
   const refreshButtonIcon = isRefreshing ? (
@@ -124,6 +132,18 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
             >
               Refresh
             </Button>
+            {showAtlasSearchLink && 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 +283,7 @@ export const CreateIndexButton: React.FunctionComponent<
 };
 
 const mapState = ({
+  namespace,
   isWritable,
   isReadonlyView,
   isSearchIndexesSupported,
@@ -271,6 +292,7 @@ const mapState = ({
   searchIndexes,
   indexView,
 }: RootState) => ({
+  namespace,
   isWritable,
   isReadonlyView,
   isSearchIndexesSupported,

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

@@ -48,24 +48,28 @@ 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;
 
-const AtlasIndexesBanner = ({ namespace }: { namespace: string }) => {
+const AtlasIndexesBanner = ({
+  namespace,
+  dismissed,
+  onDismissClick,
+}: {
+  namespace: string;
+  dismissed: boolean;
+  onDismissClick: () => void;
+}) => {
   const { atlasMetadata } = useConnectionInfo();
-  const [dismissed, setDismissed] = usePersistedState(
-    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
-    false
-  );
 
   if (!atlasMetadata || dismissed) {
     return null;
   }
 
   return (
-    <Banner variant="info" dismissible onClose={() => setDismissed(true)}>
+    <Banner variant="info" dismissible onClose={onDismissClick}>
       <Body weight="medium">Looking for search indexes?</Body>
       These indexes can be created and viewed under{' '}
       {atlasMetadata ? (
@@ -117,6 +121,11 @@ export function Indexes({
   refreshRegularIndexes,
   refreshSearchIndexes,
 }: IndexesProps) {
+  const [atlasBannerDismissed, setDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+
   const errorMessage =
     currentIndexesView === 'regular-indexes'
       ? regularIndexes.error
@@ -147,12 +156,23 @@ export function Indexes({
             hasTooManyIndexes={hasTooManyIndexes}
             isRefreshing={isRefreshing}
             onRefreshIndexes={onRefreshIndexes}
+            showAtlasSearchLink={
+              !isReadonlyView &&
+              !enableAtlasSearchIndexes &&
+              atlasBannerDismissed
+            }
           />
         }
       >
         <div className={indexesContainersStyles}>
           {!isReadonlyView && !enableAtlasSearchIndexes && (
-            <AtlasIndexesBanner namespace={namespace} />
+            <AtlasIndexesBanner
+              namespace={namespace}
+              dismissed={atlasBannerDismissed}
+              onDismissClick={() => {
+                setDismissed(true);
+              }}
+            />
           )}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
             <RegularIndexesTable />