feat: Add alert content replacement runtime API

pages/alert/runtime-content.page.tsx

@@ -0,0 +1,76 @@
+// 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, 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) {
+    console.log('replace');
+    const appendedContent = document.createElement('div');
+    if (context.type === 'error' && context.contentRef.current?.textContent?.match('Access denied')) {
+      render(<Spinner />, appendedContent);
+      context.contentRef.current.appendChild(appendedContent);
+      setTimeout(() => {
+        console.log('unmountManual');
+        unmountComponentAtNode(appendedContent);
+        appendedContent.parentNode?.removeChild(appendedContent);
+        render(<div>Access denied message!</div>, context.replacedContentRef.current);
+        registerReplacement({ hasHeader: false, hasContent: true }, () => {
+          console.log('unmount1');
+          unmountComponentAtNode(context.replacedContentRef.current!);
+        });
+      }, 2000);
+    }
+    registerReplacement({ hasHeader: null, hasContent: null }, () => {
+      console.log('unmount2');
+      unmountComponentAtNode(appendedContent);
+      appendedContent.parentNode?.removeChild(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);
+  return (
+    <>
+      <h1>Alert runtime actions</h1>
+      <Checkbox onChange={e => setLoading(e.detail.checked)} checked={loading}>
+        Loading
+      </Checkbox>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <>
+              <Alert statusIconAriaLabel={permutation.type} dismissAriaLabel="Dismiss" {...permutation} />
+              <Alert statusIconAriaLabel={permutation.type} dismissAriaLabel="Dismiss" {...permutation}>
+                {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');
+  });
 });