feat: Add instance id to alert/flash runtime replacement API (#3500)

Author: just-boris

src/alert/__tests__/runtime-content.test.tsx

@@ -171,9 +171,11 @@ test('removes styling if replacement is explicitly empty', () => {
 
 describe('runReplacer arguments', () => {
   const runReplacer = jest.fn();
+  const initialCheck = jest.fn();
   beforeEach(() => {
     const plugin: AlertFlashContentConfig = {
       id: 'test-content',
+      initialCheck,
       runReplacer,
     };
     awsuiPlugins.alertContent.registerContentReplacer(plugin);
@@ -195,6 +197,18 @@ describe('runReplacer arguments', () => {
     render(<Alert type="error" />);
     expect(runReplacer.mock.lastCall[0].type).toBe('error');
   });
+
+  test('persists instanceId between initial check and runtime replacement', () => {
+    const { rerender } = render(<Alert key={1}>Alert content</Alert>);
+    const initialId = initialCheck.mock.lastCall[0].instanceId;
+    expect(initialId).toEqual(expect.any(String));
+    expect(initialId).toEqual(runReplacer.mock.lastCall[0].instanceId);
+    initialCheck.mockClear();
+    runReplacer.mockClear();
+    rerender(<Alert key={2}>Alert content</Alert>);
+    expect(initialId).not.toEqual(initialCheck.mock.lastCall[0].instanceId);
+    expect(initialCheck.mock.lastCall[0].instanceId).toEqual(runReplacer.mock.lastCall[0].instanceId);
+  });
 });
 
 test('calls unmount callback', () => {

src/flashbar/__tests__/runtime-content.test.tsx

@@ -159,9 +159,11 @@ test('restores content and header', async () => {
 
 describe('runReplacer arguments', () => {
   const runReplacer = jest.fn();
+  const initialCheck = jest.fn();
   beforeEach(() => {
     const plugin: AlertFlashContentConfig = {
       id: 'test-content',
+      initialCheck,
       runReplacer,
     };
     awsuiPlugins.flashContent.registerContentReplacer(plugin);
@@ -189,6 +191,18 @@ describe('runReplacer arguments', () => {
     render(<Flashbar items={[{ type: 'error' }]} />);
     expect(runReplacer.mock.lastCall[0].type).toBe('error');
   });
+
+  test('persists instanceId between initial check and runtime replacement', () => {
+    const { rerender } = render(<Flashbar key={1} items={[{ content: 'Something' }]} />);
+    const initialId = initialCheck.mock.lastCall[0].instanceId;
+    expect(initialId).toEqual(expect.any(String));
+    expect(initialId).toEqual(runReplacer.mock.lastCall[0].instanceId);
+    initialCheck.mockClear();
+    runReplacer.mockClear();
+    rerender(<Flashbar key={2} items={[{ content: 'Something' }]} />);
+    expect(initialId).not.toEqual(initialCheck.mock.lastCall[0].instanceId);
+    expect(initialCheck.mock.lastCall[0].instanceId).toEqual(runReplacer.mock.lastCall[0].instanceId);
+  });
 });
 
 test('calls unmount callback', () => {

src/internal/plugins/controllers/alert-flash-content.ts

@@ -12,12 +12,14 @@ interface RefShim<T> {
 }
 
 interface AlertFlashContentContext {
+  instanceId: string;
   type: string;
   headerRef: RefShim<HTMLElement>;
   contentRef: RefShim<HTMLElement>;
 }
 
 interface AlertFlashContentInitialContext {
+  instanceId: string;
   type: string;
   header?: ReactNode;
   content?: ReactNode;

src/internal/plugins/helpers/use-discovered-content.tsx

@@ -1,7 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
+import { useUniqueId } from '../../hooks/use-unique-id';
 import {
   AlertFlashContentApiInternal,
   AlertFlashContentResult,
@@ -16,15 +17,17 @@ export function createUseDiscoveredContent(componentName: string, controller: Al
     children,
   }: {
     type: string;
-    header: ReactNode;
-    children: ReactNode;
+    header: React.ReactNode;
+    children: React.ReactNode;
   }) {
+    const instanceId = useUniqueId(`${componentName}-discovered-content`);
     const headerRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const replacementHeaderRef = useRef<HTMLDivElement>(null);
     const replacementContentRef = useRef<HTMLDivElement>(null);
     const [initialHidden, setInitialHidden] = useState(() =>
       controller.initialCheck({
+        instanceId,
         type,
         header,
         content: children,
@@ -35,7 +38,7 @@ export function createUseDiscoveredContent(componentName: string, controller: Al
     const mountedProvider = useRef<AlertFlashContentResult | undefined>();
 
     useEffect(() => {
-      const context = { type, headerRef, contentRef };
+      const context = { instanceId, type, headerRef, contentRef };
 
       setInitialHidden(false);
 
@@ -96,7 +99,7 @@ export function createUseDiscoveredContent(componentName: string, controller: Al
           mounted = false;
         };
       });
-    }, [type]);
+    }, [instanceId, type]);
 
     useEffect(() => {
       mountedProvider.current?.update();