chore: Persist and filter features with timestamps

Author: georgylobko

pages/feature-notifications/feature-prompt.page.tsx

@@ -15,24 +15,23 @@ import labels from '../app-layout/utils/labels';
 import * as toolsContent from '../app-layout/utils/tools-content';
 import ScreenshotArea from '../utils/screenshot-area';
 
-const readFeaturesStorage: Record<string, Array<string>> = {
-  'feature-notifications': [],
+const readFeaturesStorage: Record<string, Record<string, string>> = {
+  'feature-notifications': {},
 };
 
 setPersistenceFunctionsForTesting({
   persistSeenFeatureNotifications: async function (persistenceConfig, value) {
-    const readFeatures = readFeaturesStorage[persistenceConfig.uniqueKey] ?? [];
     const result = await new Promise<void>(resolve =>
       setTimeout(() => {
-        readFeaturesStorage[persistenceConfig.uniqueKey] = [...readFeatures, ...value];
+        readFeaturesStorage[persistenceConfig.uniqueKey] = value;
         resolve();
       }, 150)
     );
     return result;
   },
   retrieveSeenFeatureNotifications: async function (persistenceConfig) {
-    const result = await new Promise<Array<string>>(resolve =>
-      setTimeout(() => resolve(readFeaturesStorage[persistenceConfig.uniqueKey] ?? []), 150)
+    const result = await new Promise<Record<string, string>>(resolve =>
+      setTimeout(() => resolve(readFeaturesStorage[persistenceConfig.uniqueKey] ?? {}), 150)
     );
     return result;
   },

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

@@ -67,7 +67,7 @@ const mockPersistSeenFeatureNotifications = jest.mocked(persistSeenFeatureNotifi
 beforeEach(() => {
   awsuiWidgetInternal.clearInitialMessages();
   jest.resetAllMocks();
-  mockRetrieveSeenFeatureNotifications.mockResolvedValue([]);
+  mockRetrieveSeenFeatureNotifications.mockResolvedValue({});
   mockPersistSeenFeatureNotifications.mockResolvedValue();
 
   // Mock current date for consistent filtering
@@ -164,7 +164,7 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
   });
 
   test('shows feature prompt for a latest unseen features', async () => {
-    mockRetrieveSeenFeatureNotifications.mockResolvedValue(['feature-1']);
+    mockRetrieveSeenFeatureNotifications.mockResolvedValue({ 'feature-1': mockDate2025.toString() });
     awsuiWidgetPlugins.registerFeatureNotifications(featureNotificationsDefaults);
     const { container } = await renderComponent(<AppLayout />);
 
@@ -199,7 +199,11 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
   });
 
   test('should not show feature prompt if all feature are seen', async () => {
-    mockRetrieveSeenFeatureNotifications.mockResolvedValue(['feature-1', 'feature-2', 'feature-old']);
+    mockRetrieveSeenFeatureNotifications.mockResolvedValue({
+      'feature-1': mockDate2025.toString(),
+      'feature-2': mockDate2024.toString(),
+      'feature-old': mockDateOld.toString(),
+    });
     awsuiWidgetPlugins.registerFeatureNotifications({ ...featureNotificationsDefaults, suppressFeaturePrompt: true });
     const { container } = await renderComponent(<AppLayout />);
 

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

@@ -3,10 +3,12 @@
 import React, { RefObject, useEffect, useRef, useState } from 'react';
 
 import FeaturePrompt, { FeaturePromptProps } from '../../../internal/do-not-use/feature-prompt';
+import { metrics } from '../../../internal/metrics';
 import { persistSeenFeatureNotifications, retrieveSeenFeatureNotifications } from '../../../internal/persistence';
 import awsuiPlugins from '../../../internal/plugins';
 import { Feature, FeatureNotificationsPayload, WidgetMessage } from '../../../internal/plugins/widget/interfaces';
 import RuntimeFeaturesNotificationDrawer, { RuntimeContentPart } from '../drawer/feature-notifications-drawer-content';
+
 interface UseFeatureNotificationsProps {
   activeDrawersIds: Array<string>;
 }
@@ -34,30 +36,64 @@ function subtractDaysFromDate(currentDate: Date, daysToSubtract: number) {
   return pastDate;
 }
 
+function filterOutdatedFeatures(features: Record<string, string>): Record<string, string> {
+  const cutoffDate = subtractDaysFromDate(new Date(), 180);
+
+  return Object.keys(features).reduce((acc, key) => {
+    const featureDate = new Date(features[key]);
+
+    if (featureDate && featureDate >= cutoffDate) {
+      return {
+        ...acc,
+        [key]: features[key],
+      };
+    }
+
+    return acc;
+  }, {});
+}
+
 export function useFeatureNotifications({ activeDrawersIds }: UseFeatureNotificationsProps) {
   const [markAllAsRead, setMarkAllAsRead] = useState(false);
   const [featurePromptDismissed, setFeaturePromptDismissed] = useState(false);
   const [featureNotificationsData, setFeatureNotificationsData] = useState<FeatureNotificationsPayload<unknown> | null>(
     null
   );
-  const [seenFeatureIds, setSeenFeatureIds] = useState<Set<string>>(new Set());
+  const [seenFeatures, setSeenFeatures] = useState<Record<string, string>>({});
   const featurePromptRef = useRef<FeaturePromptProps.Ref>(null);
 
   useEffect(() => {
     if (!featureNotificationsData || markAllAsRead) {
       return;
     }
-    const id = featureNotificationsData.id;
-    if (activeDrawersIds.includes(id) && !markAllAsRead) {
-      const allFeaturesIds = [...seenFeatureIds, ...featureNotificationsData.features.map(feature => feature.id)];
-      const uniqueAllFeatureIds = [...new Set(allFeaturesIds)];
-      persistSeenFeatureNotifications(persistenceConfig, uniqueAllFeatureIds).then(() => {
-        awsuiPlugins.appLayout.updateDrawer({ id, badge: false });
-        setMarkAllAsRead(true);
-      });
+    try {
+      const id = featureNotificationsData?.id;
+      if (activeDrawersIds.includes(id) && !markAllAsRead) {
+        const featuresMap = featureNotificationsData.features.reduce((acc, feature) => {
+          return {
+            ...acc,
+            [feature.id]: feature.releaseDate.toString(),
+          };
+        }, {});
+        const filteredSeenFeaturesMap = filterOutdatedFeatures(seenFeatures);
+        const allFeaturesMap = { ...featuresMap, ...filteredSeenFeaturesMap };
+        persistSeenFeatureNotifications(persistenceConfig, allFeaturesMap).then(() => {
+          awsuiPlugins.appLayout.updateDrawer({ id, badge: false });
+          setMarkAllAsRead(true);
+        });
+      }
       return;
+    } catch (error) {
+      let message = '';
+      if (error instanceof Error) {
+        message = error?.message ?? '';
+      }
+      metrics.sendOpsMetricObject('awsui-widget-feature-notifications-error', {
+        id: featureNotificationsData?.id,
+        message,
+      });
     }
-  }, [featureNotificationsData, activeDrawersIds, markAllAsRead, featurePromptDismissed, seenFeatureIds]);
+  }, [featureNotificationsData, activeDrawersIds, markAllAsRead, featurePromptDismissed, seenFeatures]);
 
   const defaultFeaturesFilter = (feature: Feature<unknown>) => {
     return feature.releaseDate >= subtractDaysFromDate(new Date(), 90);
@@ -103,9 +139,8 @@ export function useFeatureNotifications({ activeDrawersIds }: UseFeatureNotifica
       });
 
       retrieveSeenFeatureNotifications(persistenceConfig).then(seenFeatureNotifications => {
-        const seenFeatureNotificationsSet = new Set(seenFeatureNotifications);
-        setSeenFeatureIds(seenFeatureNotificationsSet);
-        const hasUnseenFeatures = features.some(feature => !seenFeatureNotificationsSet.has(feature.id));
+        setSeenFeatures(seenFeatureNotifications);
+        const hasUnseenFeatures = features.some(feature => !seenFeatureNotifications[feature.id]);
         if (hasUnseenFeatures) {
           if (!payload.suppressFeaturePrompt && !featurePromptDismissed) {
             featurePromptRef.current?.show();
@@ -117,7 +152,6 @@ export function useFeatureNotifications({ activeDrawersIds }: UseFeatureNotifica
     }
 
     if (event.type === 'showFeaturePromptIfPossible') {
-      console.log('showFeaturePromptIfPossible markAllAsRead: ', markAllAsRead);
       if (markAllAsRead) {
         return;
       }
@@ -134,12 +168,11 @@ export function useFeatureNotifications({ activeDrawersIds }: UseFeatureNotifica
     // Features array is already sorted in reverse chronological order (most recent first)
     // Find the first feature that hasn't been seen
     for (const feature of featureNotificationsData.features) {
-      if (!seenFeatureIds.has(feature.id)) {
+      if (!seenFeatures[feature.id]) {
         return feature;
       }
     }
 
-    // No unseen features found
     return null;
   }
 

src/internal/persistence/index.ts

@@ -13,11 +13,11 @@ interface PersistenceFunction {
   retrieveAlertDismiss?: (persistenceConfig: AlertProps.PersistenceConfig) => Promise<boolean>;
   persistSeenFeatureNotifications?: (
     persistenceConfig: FeaturePromptProps.PersistenceConfig,
-    value: Array<string>
+    value: Record<string, string>
   ) => Promise<void>;
   retrieveSeenFeatureNotifications?: (
     persistenceConfig: FeaturePromptProps.PersistenceConfig
-  ) => Promise<Array<string>>;
+  ) => Promise<Record<string, string>>;
 }
 
 export function setPersistenceFunctionsForTesting(functions: PersistenceFunction) {
@@ -78,7 +78,7 @@ export let persistSeenFeatureNotifications = async function (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   persistenceConfig: FeaturePromptProps.PersistenceConfig,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  value: Array<string>
+  value: Record<string, string>
 ): Promise<void> {
   return Promise.resolve();
 };
@@ -87,6 +87,6 @@ export let persistSeenFeatureNotifications = async function (
 export let retrieveSeenFeatureNotifications = async function (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   persistenceConfig: FeaturePromptProps.PersistenceConfig
-): Promise<Array<string>> {
-  return Promise.resolve([]);
+): Promise<Record<string, string>> {
+  return Promise.resolve({});
 };