fix(compass-web): make banners dismissible COMPASS-8976 (#6764)

djechlin-mongodb · gribnoysup · web-flow · commit 83ce1b5b404b · 2025-03-07T15:08:46.000-05:00
* two dismissible banners

* changes

* use persisted storage

* fix

* return &lt;&gt;&lt;/&gt;

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

Co-authored-by: Sergey Petushkov &lt;petushkov.sergey@gmail.com&gt;

* empty

* prettier

---------

Co-authored-by: Sergey Petushkov &lt;petushkov.sergey@gmail.com&gt;
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -7,6 +7,7 @@ import {
   WorkspaceContainer,
   css,
   spacing,
+  usePersistedState,
 } from '@mongodb-js/compass-components';
 
 import IndexesToolbar from '../indexes-toolbar/indexes-toolbar';
@@ -49,13 +50,22 @@ const containerStyles = css({
 
 const linkTitle = 'Atlas Search.';
 
+const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
+  'mongodb_compass_dismissedSearchIndexesBanner' as const;
+
 const AtlasIndexesBanner = ({ namespace }: { namespace: string }) => {
   const { atlasMetadata } = useConnectionInfo();
-  if (!atlasMetadata) {
+  const [dismissed, setDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+
+  if (!atlasMetadata || dismissed) {
     return null;
   }
+
   return (
-    <Banner variant="info">
+    <Banner variant="info" dismissible onClose={() => setDismissed(true)}>
       <Body weight="medium">Looking for search indexes?</Body>
       These indexes can be created and viewed under{' '}
       {atlasMetadata ? (
diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/packages/compass-schema/src/components/compass-schema.tsx
@@ -22,6 +22,7 @@ import {
   spacing,
   useDarkMode,
   WorkspaceContainer,
+  usePersistedState,
   lighten,
   Banner,
   Body,
@@ -298,6 +299,9 @@ const AnalyzingScreen: React.FunctionComponent<{
   );
 };
 
+const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
+  'mongodb_compass_dismissedSearchIndexesBanner' as const;
+
 const FieldList: React.FunctionComponent<{
   schema: MongodbSchema | null;
   analysisState: AnalysisState;
@@ -341,8 +345,18 @@ const title = 'Atlas’ Performance Advisor.';
 const PerformanceAdvisorBanner = () => {
   const connectionInfo = useConnectionInfo();
   const track = useTelemetry();
+
+  const [dismissed, setDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+
+  if (dismissed) {
+    return <></>;
+  }
+
   return (
-    <Banner variant="info">
+    <Banner variant="info" dismissible onClose={() => setDismissed(true)}>
       <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">
