two dismissible banners

djechlin-mongodb · djechlin-mongodb · commit c3ae95e60fec · 2025-03-01T12:00:10.000-05:00
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -49,13 +49,23 @@ const containerStyles = css({
 
 const linkTitle = 'Atlas Search.';
 
+const DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
+  'dismissedSearchIndexesBanner';
+
 const AtlasIndexesBanner = ({ namespace }: { namespace: string }) => {
   const { atlasMetadata } = useConnectionInfo();
   if (!atlasMetadata) {
     return null;
   }
+  const onClose = () => {
+    localStorage.setItem(
+      DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+      'true'
+    );
+  };
   return (
-    <Banner variant="info">
+    // one
+    <Banner variant="info" dismissible onClose={onClose}>
       <Body weight="medium">Looking for search indexes?</Body>
       These indexes can be created and viewed under{' '}
       {atlasMetadata ? (
@@ -141,9 +151,11 @@ export function Indexes({
         }
       >
         <div className={indexesContainersStyles}>
-          {!isReadonlyView && !enableAtlasSearchIndexes && (
-            <AtlasIndexesBanner namespace={namespace} />
-          )}
+          {!isReadonlyView &&
+            !enableAtlasSearchIndexes &&
+            localStorage.getItem(
+              DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY
+            ) !== 'true' && <AtlasIndexesBanner namespace={namespace} />}
           {!isReadonlyView && currentIndexesView === 'regular-indexes' && (
             <RegularIndexesTable />
           )}
diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/packages/compass-schema/src/components/compass-schema.tsx
@@ -74,6 +74,9 @@ const insightsBadgeStyles = css({
   verticalAlign: 'middle',
 });
 
+const DISMISSED_PERFORMANCE_ADVISOR_BANNER_LOCAL_STORAGE_KEY =
+  'dismissedPerformanceAdvisorBanner' as const;
+
 const minichartStyles = (darkMode: boolean) => {
   const mcBlue0 = palette.blue.light1;
   const mcBlue1 = lighten(0.075, mcBlue0);
@@ -341,8 +344,15 @@ const title = 'Atlas’ Performance Advisor.';
 const PerformanceAdvisorBanner = () => {
   const connectionInfo = useConnectionInfo();
   const track = useTelemetry();
+  const onClose = () => {
+    localStorage.setItem(
+      DISMISSED_PERFORMANCE_ADVISOR_BANNER_LOCAL_STORAGE_KEY,
+      'true'
+    );
+  };
   return (
-    <Banner variant="info">
+    // two
+    <Banner variant="info" dismissible onClose={onClose}>
       <Body weight="medium">Looking for schema anti-patterns?</Body>
       In its place, you may refer to Data Explorer’s performance insights{' '}
       <Badge className={insightsBadgeStyles} variant="blue">
@@ -413,7 +423,10 @@ const Schema: React.FunctionComponent<{
           }
         >
           <div className={contentStyles}>
-            {enablePerformanceAdvisorBanner && <PerformanceAdvisorBanner />}
+            {enablePerformanceAdvisorBanner &&
+              localStorage.getItem(
+                DISMISSED_PERFORMANCE_ADVISOR_BANNER_LOCAL_STORAGE_KEY
+              ) !== 'true' && <PerformanceAdvisorBanner />}
             {analysisState === ANALYSIS_STATE_INITIAL && (
               <InitialScreen onApplyClicked={onApplyClicked} />
             )}
