feat: Persist feature prompt dismiss (#4360)

Author: georgylobko

src/app-layout/__tests__/runtime-feature-notifications.test.tsx

@@ -334,7 +334,10 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
   });
 
   test('shows feature prompt for a latest unseen features', async () => {
-    mockRetrieveFeatureNotifications.mockResolvedValue({ 'feature-1': mockDate2025.toString() });
+    mockRetrieveFeatureNotifications.mockResolvedValue({
+      'feature-1': mockDate2025.toString(),
+      'feature-1_feature-prompt': mockDate2025.toString(),
+    });
     featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
     const { container } = renderComponent(<AppLayout />);
     await delay();
@@ -376,7 +379,7 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
       'feature-2': mockDate2024.toString(),
       'feature-old': mockDateOld.toString(),
     });
-    featureNotifications.registerFeatureNotifications({ ...featureNotificationsDefaults, suppressFeaturePrompt: true });
+    featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
     const { container } = renderComponent(<AppLayout />);
 
     const featurePromptWrapper = new FeaturePromptWrapper(container);
@@ -408,9 +411,13 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
 
     wrapper.findDrawerTriggerById(featureNotificationsDefaults.id)!.click();
 
-    expect(mockPersistFeatureNotifications).toHaveBeenCalled();
-
-    const persistedFeaturesMap = mockPersistFeatureNotifications.mock.calls[0][1];
+    // The first persist call may be the feature prompt dismissal (if the prompt was shown and auto-dismissed).
+    // The "mark all as read" call is the one that contains all feature IDs.
+    const markAllAsReadCall = mockPersistFeatureNotifications.mock.calls.find(
+      call => call[1]['feature-1'] && call[1]['feature-2']
+    );
+    expect(markAllAsReadCall).toBeTruthy();
+    const persistedFeaturesMap = markAllAsReadCall![1];
 
     expect(persistedFeaturesMap).toHaveProperty('feature-1');
     expect(persistedFeaturesMap).toHaveProperty('feature-2');
@@ -432,6 +439,87 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     expect(wrapper.findDrawerTriggerById('empty-features')).toBeFalsy();
   });
 
+  test('does not show feature prompt if it was previously dismissed (persisted)', async () => {
+    // Simulate that the feature prompt for feature-1 was previously dismissed and persisted
+    mockRetrieveFeatureNotifications.mockResolvedValue({
+      'feature-1_feature-prompt': mockDate2025.toString(),
+    });
+    featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
+    const { container } = renderComponent(<AppLayout />);
+    await delay();
+
+    const featurePromptWrapper = new FeaturePromptWrapper(container);
+    // Feature prompt should not appear because the latest unseen feature's prompt was already dismissed
+    expect(featurePromptWrapper.findContent()).toBeFalsy();
+  });
+
+  test('persists feature prompt dismissal when user dismisses the prompt', async () => {
+    featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
+    const { container, unmount } = renderComponent(
+      <TestI18nProvider messages={i18nMessages}>
+        <AppLayout />
+      </TestI18nProvider>
+    );
+    await delay();
+
+    const featurePromptWrapper = new FeaturePromptWrapper(container);
+    expect(featurePromptWrapper.findContent()!.getElement()).toHaveTextContent('This is the first new feature content');
+
+    featurePromptWrapper.findDismissButton()!.click();
+
+    await waitFor(() => {
+      expect(mockPersistFeatureNotifications).toHaveBeenCalled();
+      const persistedMap = mockPersistFeatureNotifications.mock.calls[0][1];
+      expect(persistedMap).toHaveProperty('feature-1_feature-prompt');
+    });
+
+    unmount();
+
+    const { container: containerAfterRemount } = renderComponent(
+      <TestI18nProvider messages={i18nMessages}>
+        <AppLayout />
+      </TestI18nProvider>
+    );
+    expect(new FeaturePromptWrapper(containerAfterRemount).findContent()).toBeFalsy();
+  });
+
+  test('feature prompt dismissal persists with filtered outdated seen features', async () => {
+    const oldSeenFeatureDate = new Date(mockCurrentDate);
+    oldSeenFeatureDate.setDate(oldSeenFeatureDate.getDate() - 200); // More than 180 days ago
+
+    const recentSeenFeatureDate = new Date(mockCurrentDate);
+    recentSeenFeatureDate.setDate(recentSeenFeatureDate.getDate() - 100); // Less than 180 days ago
+
+    mockRetrieveFeatureNotifications.mockResolvedValue({
+      'old-seen-feature': oldSeenFeatureDate.toISOString(),
+      'recent-seen-feature': recentSeenFeatureDate.toISOString(),
+    });
+
+    featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
+    const { container } = renderComponent(
+      <TestI18nProvider messages={i18nMessages}>
+        <AppLayout />
+      </TestI18nProvider>
+    );
+    await delay();
+
+    const featurePromptWrapper = new FeaturePromptWrapper(container);
+    expect(featurePromptWrapper.findContent()!.getElement()).toHaveTextContent('This is the first new feature content');
+
+    featurePromptWrapper.findDismissButton()!.click();
+
+    await waitFor(() => {
+      expect(mockPersistFeatureNotifications).toHaveBeenCalled();
+      const persistedMap = mockPersistFeatureNotifications.mock.calls[0][1];
+      // Should include the prompt dismissal key
+      expect(persistedMap).toHaveProperty('feature-1_feature-prompt');
+      // Should keep recent seen features
+      expect(persistedMap).toHaveProperty('recent-seen-feature');
+      // Should filter out outdated seen features (>180 days)
+      expect(persistedMap).not.toHaveProperty('old-seen-feature');
+    });
+  });
+
   test('renders feature notifications drawer alongside tools', () => {
     featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
     const { wrapper } = renderComponent(

src/app-layout/visual-refresh-toolbar/state/use-feature-notifications.tsx

@@ -125,7 +125,12 @@ export function useFeatureNotifications() {
           setSeenFeatures(seenFeatureNotifications);
           const hasUnseenFeatures = features.some(feature => !seenFeatureNotifications[feature.id]);
           if (hasUnseenFeatures) {
-            if (!payload.suppressFeaturePrompt && !featurePromptDismissed) {
+            const latestFeature = features.find(feature => !seenFeatureNotifications[feature.id]) ?? null;
+            if (
+              !payload.suppressFeaturePrompt &&
+              !featurePromptDismissed &&
+              !seenFeatureNotifications[getFeaturePromptPersistenceId(latestFeature)]
+            ) {
               featurePromptMountPromise.then(() => {
                 featurePromptRef.current?.show();
               });
@@ -173,6 +178,7 @@ export function useFeatureNotifications() {
               triggerRef.current!.dataset!.awsuiSuppressTooltip = 'false';
             }
           });
+          persistFeaturePromptDismiss(latestFeature);
         }}
         header={
           <RuntimeContentPart mountContent={featureNotificationsData?.mountItem} content={latestFeature.header} />
@@ -206,6 +212,21 @@ export function useFeatureNotifications() {
     });
   };
 
+  const getFeaturePromptPersistenceId = (feature?: Feature<unknown> | null) => `${feature?.id}_feature-prompt`;
+
+  const persistFeaturePromptDismiss = (feature: Feature<unknown>) => {
+    const persistenceConfig = featureNotificationsData?.persistenceConfig ?? DEFAULT_PERSISTENCE_CONFIG;
+    const featuresMap = { [getFeaturePromptPersistenceId(feature)]: feature.releaseDate?.toString() };
+    const filteredSeenFeaturesMap = filterOutdatedFeatures(seenFeatures);
+    const allFeaturesMap = { ...featuresMap, ...filteredSeenFeaturesMap };
+    (featureNotificationsData?.__persistFeatureNotifications ?? persistFeatureNotifications)(
+      persistenceConfig,
+      allFeaturesMap
+    ).then(() => {
+      setSeenFeatures(allFeaturesMap);
+    });
+  };
+
   const onOpenFeatureNotificationsDrawer = () => {
     if (!featureNotificationsData || allNotificationsSeen) {
       return;