use persisted storage

djechlin-mongodb · djechlin-mongodb · commit 5a9501c54443 · 2025-03-04T21:41:15.000-05:00
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,38 +50,40 @@ const containerStyles = css({
 
 const linkTitle = 'Atlas Search.';
 
-const DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
+const DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY =
   'mongodb_compass_dismissedSearchIndexesBanner' as const;
 
 const AtlasIndexesBanner = ({ namespace }: { namespace: string }) => {
   const { atlasMetadata } = useConnectionInfo();
   if (!atlasMetadata) {
     return null;
   }
-  const onClose = () => {
-    localStorage.setItem(
-      DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
-      'true'
-    );
-  };
+
+  const [dismissed, setDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+
   return (
-    <Banner variant="info" dismissible onClose={onClose}>
-      <Body weight="medium">Looking for search indexes?</Body>
-      These indexes can be created and viewed under{' '}
-      {atlasMetadata ? (
-        <Link
-          href={getAtlasSearchIndexesLink({
-            clusterName: atlasMetadata.clusterName,
-            namespace,
-          })}
-          hideExternalIcon
-        >
-          {linkTitle}
-        </Link>
-      ) : (
-        linkTitle
-      )}
-    </Banner>
+    !dismissed && (
+      <Banner variant="info" dismissible onClose={() => setDismissed(true)}>
+        <Body weight="medium">Looking for search indexes?</Body>
+        These indexes can be created and viewed under{' '}
+        {atlasMetadata ? (
+          <Link
+            href={getAtlasSearchIndexesLink({
+              clusterName: atlasMetadata.clusterName,
+              namespace,
+            })}
+            hideExternalIcon
+          >
+            {linkTitle}
+          </Link>
+        ) : (
+          linkTitle
+        )}
+      </Banner>
+    )
   );
 };
 
@@ -150,11 +153,9 @@ export function Indexes({
         }
       >
         <div className={indexesContainersStyles}>
-          {!isReadonlyView &&
-            !enableAtlasSearchIndexes &&
-            localStorage.getItem(
-              DIMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY
-            ) !== 'true' && <AtlasIndexesBanner namespace={namespace} />}
+          {!isReadonlyView && !enableAtlasSearchIndexes && (
+            <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
@@ -22,6 +22,7 @@ import {
   spacing,
   useDarkMode,
   WorkspaceContainer,
+  usePersistedState,
   lighten,
   Banner,
   Body,
@@ -74,9 +75,6 @@ const insightsBadgeStyles = css({
   verticalAlign: 'middle',
 });
 
-const DISMISSED_PERFORMANCE_ADVISOR_BANNER_LOCAL_STORAGE_KEY =
-  'mongodb_compass_dismissedPerformanceAdvisorBanner' as const;
-
 const minichartStyles = (darkMode: boolean) => {
   const mcBlue0 = palette.blue.light1;
   const mcBlue1 = lighten(0.075, mcBlue0);
@@ -344,14 +342,14 @@ 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'
-    );
-  };
+
+  const [dismissed, setDismissed] = usePersistedState(
+    DISMISSED_SEARCH_INDEXES_BANNER_LOCAL_STORAGE_KEY,
+    false
+  );
+
   return (
-    <Banner variant="info" dismissible onClose={onClose}>
+    <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">
@@ -422,10 +420,7 @@ const Schema: React.FunctionComponent<{
           }
         >
           <div className={contentStyles}>
-            {enablePerformanceAdvisorBanner &&
-              localStorage.getItem(
-                DISMISSED_PERFORMANCE_ADVISOR_BANNER_LOCAL_STORAGE_KEY
-              ) !== 'true' && <PerformanceAdvisorBanner />}
+            {enablePerformanceAdvisorBanner && <PerformanceAdvisorBanner />}
             {analysisState === ANALYSIS_STATE_INITIAL && (
               <InitialScreen onApplyClicked={onApplyClicked} />
             )}
diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx
@@ -536,7 +536,9 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       </div>
       <NavigationItemsFilter
         placeholder={
-          isAtlasConnectionStorage ? 'Search clusters' : 'Search connections'
+          isAtlasConnectionStorage
+            ? 'Search clusterssssss'
+            : 'Search connections'
         }
         filter={filter}
         onFilterChange={onFilterChange}
