Update banner

syn-zhu · syn-zhu · commit 5a430a814b92 · 2025-04-28T19:55:35.000-04:00
diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx
@@ -19,7 +19,6 @@ import {
   DropdownMenuButton,
   SegmentedControl,
   SegmentedControlOption,
-  usePersistedState,
 } from '@mongodb-js/compass-components';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 
@@ -54,6 +53,7 @@ type IndexesToolbarProps = {
   indexView: IndexView;
   errorMessage: string | null;
   hasTooManyIndexes: boolean;
+  showAtlasSearchLink: boolean;
   isRefreshing: boolean;
   onRefreshIndexes: () => void;
   onIndexViewChanged: (newView: IndexView) => void;
@@ -68,9 +68,6 @@ 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,
@@ -82,16 +79,13 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   isRefreshing,
   writeStateDescription,
   hasTooManyIndexes,
+  showAtlasSearchLink,
   isSearchIndexesSupported,
   onRefreshIndexes,
   onIndexViewChanged,
   readOnly, // preferences readOnly.
 }) => {
   const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
-  const [dismissed, setDismissed] = usePersistedState(
-    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
-    false
-  );
   const { atlasMetadata } = useConnectionInfo();
   const showInsights = usePreference('showInsights') && !errorMessage;
   const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
@@ -138,21 +132,18 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
             >
               Refresh
             </Button>
-            {!isReadonlyView &&
-              !isSearchManagementActive &&
-              dismissed &&
-              atlasMetadata && (
-                <Link
-                  href={getAtlasSearchIndexesLink({
-                    clusterName: atlasMetadata.clusterName,
-                    namespace,
-                  })}
-                  hideExternalIcon
-                  arrowAppearance="persist"
-                >
-                  Manage your search indexes
-                </Link>
-              )}
+            {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')}
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -53,19 +53,23 @@ 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 />
