chore: Introduce updateContent callback for alert flashbar runtime action api (#3954)

Author: just-boris

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

@@ -103,6 +103,46 @@ test('allows skipping rendering actions', async () => {
   expect(screen.queryByTestId('test-action')).toBeTruthy();
 });
 
+test('propagates state changes to update callback', async () => {
+  const updateContentSpy = jest.fn();
+  const testAction: ActionConfig = {
+    ...defaultAction,
+    updateContent: (container, context) => updateContentSpy(context.contentRef.current?.textContent),
+  };
+
+  awsuiPlugins.alert.registerAction(testAction);
+  const { rerender } = render(<Alert>Initial content</Alert>);
+  await delay();
+  expect(updateContentSpy).toHaveBeenCalledTimes(0);
+  rerender(<Alert>Updated content</Alert>);
+  expect(updateContentSpy).toHaveBeenCalledTimes(1);
+  expect(updateContentSpy).toHaveBeenCalledWith('Updated content');
+});
+
+test('container reference is permanent between mount/update/unmount', async () => {
+  let container: HTMLElement | null = null;
+  const testAction: ActionConfig = {
+    id: 'test-action',
+    mountContent: jest.fn(newContainer => (container = newContainer)),
+    updateContent: jest.fn(newContainer => expect(container).toBe(newContainer)),
+    unmountContent: jest.fn(newContainer => expect(container).toBe(newContainer)),
+  };
+  awsuiPlugins.alert.registerAction(testAction);
+  const { rerender } = render(<Alert />);
+  await delay();
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(0);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(0);
+  rerender(<Alert />);
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(1);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(0);
+  rerender(<></>);
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(1);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(1);
+});
+
 test('cleans up on unmount', async () => {
   const testAction: ActionConfig = {
     ...defaultAction,

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

@@ -178,6 +178,101 @@ test('propagates flash message context into callback', async () => {
   });
 });
 
+test('propagates state changes to update callback', async () => {
+  const updateContentSpy = jest.fn();
+  const testAction: ActionConfig = {
+    ...defaultAction,
+    updateContent: (container, context) => updateContentSpy(context.contentRef.current?.textContent),
+  };
+
+  awsuiPlugins.flashbar.registerAction(testAction);
+  const { rerender } = render(<Flashbar items={[{ ...defaultItem, content: 'Initial content' }]} />);
+  await delay();
+  expect(updateContentSpy).toHaveBeenCalledTimes(0);
+  rerender(<Flashbar items={[{ ...defaultItem, content: 'Updated content' }]} />);
+  expect(updateContentSpy).toHaveBeenCalledTimes(1);
+  expect(updateContentSpy).toHaveBeenCalledWith('Updated content');
+});
+
+test('container reference is permanent between mount/update/unmount', async () => {
+  let container: HTMLElement | null = null;
+  const testAction: ActionConfig = {
+    id: 'test-action',
+    mountContent: jest.fn(newContainer => (container = newContainer)),
+    updateContent: jest.fn(newContainer => expect(container).toBe(newContainer)),
+    unmountContent: jest.fn(newContainer => expect(container).toBe(newContainer)),
+  };
+  awsuiPlugins.flashbar.registerAction(testAction);
+  const { rerender } = render(<Flashbar items={[{ ...defaultItem }]} />);
+  await delay();
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(0);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(0);
+  rerender(<Flashbar items={[{ ...defaultItem }]} />);
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(1);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(0);
+  rerender(<></>);
+  expect(testAction.mountContent).toHaveBeenCalledTimes(1);
+  expect(testAction.updateContent).toHaveBeenCalledTimes(1);
+  expect(testAction.unmountContent).toHaveBeenCalledTimes(1);
+});
+
+test('allows conditionally render content when an item changes', async () => {
+  const unmount = (container: HTMLElement) => (container.innerHTML = '');
+  const renderIfApplicable = (container: HTMLElement, content: string) => {
+    if (content.includes('permission')) {
+      container.innerHTML = '<button data-testid="troubleshooter"></button>';
+    } else {
+      unmount(container);
+    }
+  };
+  const testAction: ActionConfig = {
+    ...defaultAction,
+    mountContent: (container, { contentRef }) => renderIfApplicable(container, contentRef.current!.textContent!),
+    updateContent: (container, { contentRef }) => renderIfApplicable(container, contentRef.current!.textContent!),
+    unmountContent: unmount,
+  };
+  awsuiPlugins.flashbar.registerAction(testAction);
+  const { rerender, queryAllByTestId } = render(<Flashbar items={[{ id: '1', content: 'random content' }]} />);
+  await delay();
+  expect(queryAllByTestId('troubleshooter')).toHaveLength(0);
+
+  // add new notification matching the pattern
+  rerender(
+    <Flashbar
+      items={[
+        { id: '1', content: 'random content' },
+        { id: '2', content: 'permission issue' },
+      ]}
+    />
+  );
+  await delay();
+  expect(queryAllByTestId('troubleshooter')).toHaveLength(1);
+
+  // update the existing notification to match the pattern
+  rerender(
+    <Flashbar
+      items={[
+        { id: '1', content: 'permission issue dynamic' },
+        { id: '2', content: 'permission issue' },
+      ]}
+    />
+  );
+  expect(queryAllByTestId('troubleshooter')).toHaveLength(2);
+
+  // update the existing notification to not match the pattern anymore
+  rerender(
+    <Flashbar
+      items={[
+        { id: '1', content: 'resolved issue' },
+        { id: '2', content: 'permission issue' },
+      ]}
+    />
+  );
+  expect(queryAllByTestId('troubleshooter')).toHaveLength(1);
+});
+
 test('cleans up on unmount', async () => {
   const testAction: ActionConfig = {
     ...defaultAction,

src/internal/plugins/controllers/action-buttons.ts

@@ -18,6 +18,7 @@ export interface ActionConfig {
   id: string;
   orderPriority?: number;
   mountContent: (container: HTMLElement, context: ActionContext) => void;
+  updateContent?: (container: HTMLElement, context: ActionContext) => void;
   unmountContent: (container: HTMLElement) => void;
 }
 

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

@@ -7,16 +7,26 @@ import { ActionButtonsController, ActionConfig, ActionContext } from '../control
 interface RuntimeActionWrapperProps {
   context: ActionContext;
   mountContent: ActionConfig['mountContent'];
+  updateContent: ActionConfig['updateContent'];
   unmountContent: ActionConfig['unmountContent'];
 }
 
-function RuntimeActionWrapper({ mountContent, unmountContent, context }: RuntimeActionWrapperProps) {
+function RuntimeActionWrapper({ mountContent, updateContent, unmountContent, context }: RuntimeActionWrapperProps) {
   const ref = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef(false);
+
+  useEffect(() => {
+    if (mountedRef.current && ref.current) {
+      updateContent?.(ref.current, context);
+    }
+  });
 
   useEffect(() => {
     const container = ref.current!;
     mountContent(container, context);
+    mountedRef.current = true;
     return () => {
+      mountedRef.current = false;
       unmountContent(container);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -25,36 +35,34 @@ function RuntimeActionWrapper({ mountContent, unmountContent, context }: Runtime
   return <div ref={ref}></div>;
 }
 
-function convertRuntimeAction(action: ActionConfig | null, context: ActionContext) {
-  if (!action) {
-    return null;
-  }
-  return (
-    <RuntimeActionWrapper
-      key={action.id + '-' + context.type}
-      context={context}
-      mountContent={action.mountContent}
-      unmountContent={action.unmountContent}
-    />
-  );
-}
-
 export function createUseDiscoveredAction(onActionRegistered: ActionButtonsController['onActionRegistered']) {
   return function useDiscoveredAction(type: string): {
     discoveredActions: React.ReactNode[];
     headerRef: React.Ref<HTMLDivElement>;
     contentRef: React.Ref<HTMLDivElement>;
   } {
-    const [discoveredActions, setDiscoveredActions] = useState<Array<React.ReactNode>>([]);
+    const [actionConfigs, setActionConfigs] = useState<Array<ActionConfig>>([]);
     const headerRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-      return onActionRegistered(actions => {
-        setDiscoveredActions(actions.map(action => convertRuntimeAction(action, { type, headerRef, contentRef })));
-      });
+      return onActionRegistered(actions => setActionConfigs(actions));
     }, [type]);
 
+    const discoveredActions = actionConfigs.map(action => (
+      <RuntimeActionWrapper
+        key={action.id + '-' + type}
+        context={{
+          type,
+          headerRef,
+          contentRef,
+        }}
+        mountContent={action.mountContent}
+        updateContent={action.updateContent}
+        unmountContent={action.unmountContent}
+      />
+    ));
+
     return { discoveredActions, headerRef, contentRef };
   };
 }