chore: Clear feature notifications (#4343)

Author: georgylobko

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

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import {
   AppLayoutProps,
@@ -191,6 +191,7 @@ type DemoContext = React.Context<
 >;
 
 export default function () {
+  const [mountApp, setMountApp] = useState(true);
   const featurePromptRef = useRef<FeaturePromptProps.Ref>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
@@ -214,6 +215,10 @@ export default function () {
     };
   }, []);
 
+  if (!mountApp) {
+    return null;
+  }
+
   return (
     <ScreenshotArea gutters={false}>
       <I18nProvider messages={[messages]} locale="en">
@@ -360,6 +365,16 @@ export default function () {
                     >
                       Override
                     </Button>
+                    <Button
+                      onClick={() => {
+                        setMountApp(false);
+                        setTimeout(() => {
+                          setMountApp(true);
+                        }, 100);
+                      }}
+                    >
+                      Remount application
+                    </Button>
                   </SpaceBetween>
                 </Container>
               </Box>

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

@@ -225,11 +225,17 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
 
   test('clears feature notifications correctly', () => {
     featureNotifications.registerFeatureNotifications({ ...featureNotificationsDefaults, mountItem: undefined });
-    const { wrapper } = renderComponent(<AppLayout />);
+    const { wrapper, unmount } = renderComponent(<AppLayout />);
     expect(wrapper.findDrawerTriggerById(featureNotificationsDefaults.id)).toBeTruthy();
 
     featureNotifications.clearFeatureNotifications();
     expect(wrapper.findDrawerTriggerById(featureNotificationsDefaults.id)).toBeFalsy();
+
+    unmount();
+
+    const { wrapper: wrapperAfterRemount } = renderComponent(<AppLayout />);
+
+    expect(wrapperAfterRemount.findDrawerTriggerById(featureNotificationsDefaults.id)).toBeFalsy();
   });
 
   test('supports custom filterFeatures function', () => {

src/internal/plugins/widget/core.ts

@@ -41,6 +41,11 @@ export function pushInitialMessage<T>(message: InitialMessage<T>) {
   win[storageKeyInitialMessages].push(message as InitialMessage<unknown>);
 }
 
+export function setInitialMessage(message: Array<InitialMessage<unknown>>) {
+  const win = getWindow();
+  win[storageKeyInitialMessages] = message;
+}
+
 export function registerAppLayoutHandler(handler: MessageHandler) {
   const win = getWindow();
   if (win[storageKeyMessageHandler]) {

src/internal/plugins/widget/index.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { getExternalProps } from '../../utils/external-props';
-import { getAppLayoutInitialMessages, getAppLayoutMessageHandler, pushInitialMessage } from './core';
+import { getAppLayoutInitialMessages, getAppLayoutMessageHandler, pushInitialMessage, setInitialMessage } from './core';
 import {
   AppLayoutUpdateMessage,
   DrawerPayload,
@@ -62,12 +62,17 @@ export function clearFeatureNotifications() {
  * @param message
  */
 export function updateDrawer<T = unknown>(message: AppLayoutUpdateMessage<T>) {
+  const initialMessages = getAppLayoutInitialMessages();
   if (message.type === 'updateDrawerConfig') {
-    getAppLayoutInitialMessages().forEach(initialMessage => {
+    initialMessages.forEach(initialMessage => {
       if (initialMessage.payload.id === message.payload.id) {
         initialMessage.payload = { ...initialMessage.payload, ...message.payload };
       }
     });
   }
+
+  if (message.type === 'clearFeatureNotifications') {
+    setInitialMessage(initialMessages.filter(initialMessage => initialMessage.type !== 'registerFeatureNotifications'));
+  }
   getAppLayoutMessageHandler()?.(message as WidgetMessage<unknown>);
 }