feat: Add alert content replacement runtime API

pages/alert/runtime-content.page.tsx

@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { Checkbox, Input, Spinner } from '~components';
+import Alert, { AlertProps } from '~components/alert';
+import Button from '~components/button';
+import awsuiPlugins from '~components/internal/plugins';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+awsuiPlugins.alertContent.registerContentReplacer({
+  id: 'awsui/alert-test-action',
+  runReplacer(context, registerReplacement) {
+    const appendedContent = document.createElement('div');
+
+    const doReplace = () => {
+      registerReplacement('header', 'original');
+      registerReplacement('content', 'original');
+      if (context.type === 'error' && context.contentRef.current?.textContent?.match('Access denied')) {
+        render(<Spinner />, appendedContent);
+        context.contentRef.current.appendChild(appendedContent);
+        setTimeout(() => {
+          unmountComponentAtNode(appendedContent);
+          appendedContent.parentNode?.removeChild(appendedContent);
+
+          registerReplacement('header', 'remove');
+          registerReplacement('content', container => {
+            render(<div>Access denied message!</div>, container);
+
+            return () => {
+              unmountComponentAtNode(container);
+            };
+          });
+        }, 2000);
+      }
+    };
+
+    doReplace();
+
+    return {
+      update() {
+        console.log('update');
+        doReplace();
+      },
+      unmount() {
+        console.log('unmount');
+        unmountComponentAtNode(appendedContent);
+      },
+    };
+  },
+});
+
+/* eslint-disable react/jsx-key */
+const permutations = createPermutations<AlertProps>([
+  {
+    header: [null, 'Alert'],
+    children: ['Content', 'There was an error: Access denied because of XYZ'],
+    type: ['success', 'error'],
+    action: [null, <Button>Action</Button>],
+  },
+]);
+/* eslint-enable react/jsx-key */
+
+export default function () {
+  const [loading, setLoading] = useState(true);
+  const [hid, setHid] = useState(false);
+  const [anotherState, setAnotherState] = useState('');
+  return (
+    <>
+      <h1>Alert runtime actions</h1>
+      <Checkbox onChange={e => setLoading(e.detail.checked)} checked={loading}>
+        Loading
+      </Checkbox>
+      <Checkbox onChange={e => setHid(e.detail.checked)} checked={hid}>
+        Hide
+      </Checkbox>
+      <Input value={anotherState} onChange={e => setAnotherState(e.detail.value)} />
+      <ScreenshotArea>
+        {hid ? null : (
+          <PermutationsView
+            permutations={permutations}
+            render={permutation => (
+              <>
+                <Alert
+                  statusIconAriaLabel={permutation.type}
+                  dismissAriaLabel="Dismiss"
+                  {...permutation}
+                  header={<Button>Action</Button>}
+                />
+                <Alert
+                  statusIconAriaLabel={permutation.type}
+                  dismissAriaLabel="Dismiss"
+                  {...permutation}
+                  header={<Button>Action</Button>}
+                >
+                  {loading ? 'Loading' : permutation.children}
+                </Alert>
+              </>
+            )}
+          />
+        )}
+      </ScreenshotArea>
+    </>
+  );
+}

src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -6,8 +6,10 @@ Object {
     "awsui_action-button_mx3cw",
     "awsui_action-slot_mx3cw",
     "awsui_alert_mx3cw",
+    "awsui_content-replacement_mx3cw",
     "awsui_content_mx3cw",
     "awsui_dismiss-button_mx3cw",
+    "awsui_header-replacement_mx3cw",
     "awsui_header_mx3cw",
     "awsui_root_mx3cw",
   ],
@@ -257,7 +259,9 @@ Object {
     "awsui_action-button_1q84n",
     "awsui_action-slot_1q84n",
     "awsui_dismiss-button_1q84n",
+    "awsui_flash-content-replacement_1q84n",
     "awsui_flash-content_1q84n",
+    "awsui_flash-header-replacement_1q84n",
     "awsui_flash-header_1q84n",
     "awsui_flash-list-item_1q84n",
     "awsui_flash-type-error_1q84n",

src/alert/__tests__/alert.test.tsx

@@ -11,11 +11,25 @@ import createWrapper from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/alert/styles.css.js';
 
+let useVisualRefresh = false;
+jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => {
+  const originalVisualModeModule = jest.requireActual('../../../lib/components/internal/hooks/use-visual-mode');
+  return {
+    __esModule: true,
+    ...originalVisualModeModule,
+    useVisualRefresh: (...args: any) => useVisualRefresh || originalVisualModeModule.useVisualRefresh(...args),
+  };
+});
+
 function renderAlert(props: AlertProps = {}) {
   const { container } = render(<Alert {...props} />);
   return { wrapper: createWrapper(container).findAlert()!, container };
 }
 
+beforeEach(() => {
+  useVisualRefresh = false;
+});
+
 describe('Alert Component', () => {
   describe('structure', () => {
     it('has no header container when no header is set', () => {
@@ -153,4 +167,10 @@ describe('Alert Component', () => {
       expect(wrapper.getElement()).toHaveAttribute(DATA_ATTR_ANALYTICS_ALERT, 'success');
     });
   });
+
+  test('visual refresh rendering for coverage', () => {
+    useVisualRefresh = true;
+    const { wrapper } = renderAlert({ header: 'Hello' });
+    expect(wrapper.findHeader()!.getElement()).toHaveTextContent('Hello');
+  });
 });