diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx index 557393cdbc..39da4a09b6 100644 --- a/pages/alert/runtime-content.page.tsx +++ b/pages/alert/runtime-content.page.tsx @@ -1,7 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useMemo, useState } from 'react'; +import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { @@ -20,7 +20,9 @@ import awsuiPlugins from '~components/internal/plugins'; import AppContext, { AppContextType } from '../app/app-context'; import ScreenshotArea from '../utils/screenshot-area'; -type PageContext = React.Context>; +type PageContext = React.Context< + AppContextType<{ loading: boolean; hidden: boolean; type: AlertProps.Type; autofocus: boolean }> +>; awsuiPlugins.alertContent.registerContentReplacer({ id: 'awsui/alert-test-action', @@ -61,11 +63,7 @@ awsuiPlugins.alertContent.registerContentReplacer({ }; }, initialCheck(context) { - const found = context.type === 'error' && context.contentText?.match('Access denied'); - return { - header: found ? 'remove' : 'original', - content: found ? 'replaced' : 'original', - }; + return context.type === 'error' && !!context.contentText?.match('Access denied'); }, }); @@ -73,7 +71,7 @@ const alertTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({ export default function () { const { - urlParams: { loading = false, hidden = false, type = 'error' }, + urlParams: { loading = false, hidden = false, type = 'error', autofocus = false }, setUrlParams, } = useContext(AppContext as PageContext); const [unrelatedState, setUnrelatedState] = useState(false); @@ -82,6 +80,14 @@ export default function () { const content1 = useMemo(() => (loading ? Loading... : Content), [loading]); const content2 = loading ? Loading... : There was an error: Access denied because of XYZ; + const alertRef = useRef(null); + + useEffect(() => { + if (autofocus && !hidden) { + alertRef.current?.focus(); + } + }, [autofocus, hidden]); + return (

Alert runtime actions

@@ -99,6 +105,9 @@ export default function () { setContentSwapped(e.detail.checked)} checked={contentSwapped}> Swap content + setUrlParams({ autofocus: e.detail.checked })} checked={autofocus}> + Auto-focus alert +