chore: Implement flashbar runtime API

Author: just-boris

src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap

@@ -1365,6 +1365,8 @@ Map {
     "children": <div>
       notifications
     </div>,
+    "flashbarProps": null,
+    "setFlashbarProps": [Function],
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {

src/app-layout/__tests__/runtime-drawers-widgetized.test.tsx

@@ -5,8 +5,9 @@ import { act, render } from '@testing-library/react';
 
 import AppLayout from '../../../lib/components/app-layout';
 import { metrics } from '../../../lib/components/internal/metrics';
+import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget';
+import * as awsuiWidgetInternal from '../../../lib/components/internal/plugins/widget/core';
 import { DrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces';
-import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget/internal';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { describeEachAppLayout, getGlobalDrawersTestUtils } from './utils';
 
@@ -19,7 +20,7 @@ const drawerDefaults: DrawerPayload = {
 };
 
 beforeEach(() => {
-  awsuiWidgetPlugins.clearInitialMessages();
+  awsuiWidgetInternal.clearInitialMessages();
   jest.resetAllMocks();
 });
 

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -11,8 +11,9 @@ import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-drawers';
 import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
 import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers';
+import * as awsuiWidgetInternal from '../../../lib/components/internal/plugins/widget/core';
+import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget/index';
 import { DrawerPayload as WidgetDrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces';
-import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget/internal';
 import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import {
@@ -31,7 +32,7 @@ import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refr
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();
-  awsuiWidgetPlugins.clearInitialMessages();
+  awsuiWidgetInternal.clearInitialMessages();
   activateAnalyticsMetadata(true);
 });
 

src/app-layout/utils/use-ai-drawer.ts

@@ -11,9 +11,9 @@ import customCssProps from '../../../internal/generated/custom-css-properties';
 import { usePrevious } from '../../../internal/hooks/use-previous';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
 import { AppLayoutProps } from '../../interfaces';
-import { OnChangeParams } from '../../utils/use-ai-drawer';
 import { FocusControlState } from '../../utils/use-focus-control';
 import { AppLayoutInternals, InternalDrawer } from '../interfaces';
+import { OnChangeParams } from '../state/use-ai-drawer';
 import { useResize } from './use-resize';
 
 import sharedStyles from '../../resize/styles.css.js';

src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';
 import { ButtonGroupProps } from '../../button-group/interfaces';
+import { FlashbarProps } from '../../flashbar/interfaces';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { NonCancelableEventHandler } from '../../internal/events';
 import { SomeOptional } from '../../internal/types';
@@ -90,6 +91,8 @@ interface AppLayoutWidgetizedState extends AppLayoutInternals {
   verticalOffsets: VerticalLayoutOutput;
   navigationAnimationDisabled: boolean;
   aiDrawerExpandedMode: boolean;
+  flashbarProps: FlashbarProps | null;
+  setFlashbarProps: (props: FlashbarProps | null) => void;
   splitPanelOffsets: {
     stickyVerticalBottomOffset: number;
     mainContentPaddingBlockEnd: number | undefined;

src/app-layout/visual-refresh-toolbar/interfaces.ts

@@ -5,20 +5,26 @@ import clsx from 'clsx';
 
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 
+import { FlashbarImplementation } from '../../../flashbar/implementation';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
-import { AppLayoutInternals } from '../interfaces';
+import { AppLayoutInternals, AppLayoutState } from '../interfaces';
 import { NotificationsSlot } from '../skeleton/slots';
+import { FlashbarPropsSetter } from '../state/runtime-notifications';
 
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
 export interface AppLayoutNotificationsImplementationProps {
   appLayoutInternals: AppLayoutInternals;
+  flashbarProps?: AppLayoutState['widgetizedState']['flashbarProps'];
+  setFlashbarProps?: AppLayoutState['widgetizedState']['setFlashbarProps'];
   children: React.ReactNode;
 }
 
 export function AppLayoutNotificationsImplementation({
   appLayoutInternals,
+  flashbarProps,
+  setFlashbarProps,
   children,
 }: AppLayoutNotificationsImplementationProps) {
   const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;
@@ -51,7 +57,8 @@ export function AppLayoutNotificationsImplementation({
       }}
     >
       <div className={testutilStyles.notifications} role="region" aria-label={ariaLabels?.notifications}>
-        {children}
+        <FlashbarPropsSetter.Provider value={setFlashbarProps ?? null}>{children}</FlashbarPropsSetter.Provider>
+        {flashbarProps && <FlashbarImplementation {...flashbarProps} />}
       </div>
     </NotificationsSlot>
   );

src/app-layout/visual-refresh-toolbar/notifications/index.tsx

@@ -0,0 +1,28 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext, useState } from 'react';
+
+import { FlashbarProps } from '../../../flashbar/interfaces';
+import { WidgetMessage } from '../../../internal/plugins/widget/interfaces';
+
+export const FlashbarPropsSetter = createContext<((props: FlashbarProps | null) => void) | null>(null);
+
+export function useRuntimeNotifications() {
+  const [flashbarProps, setFlashbarProps] = useState<FlashbarProps | null>(null);
+  const [notifications, setNotifications] = useState<Array<FlashbarProps.MessageDefinition>>([]);
+
+  function notificationsMessageHandler(message: WidgetMessage) {
+    if (message.type === 'emitNotification') {
+      setNotifications(notifications => [...notifications, message.payload]);
+    }
+  }
+
+  return {
+    flashbarProps: (flashbarProps || notifications.length > 0) && {
+      ...flashbarProps,
+      items: [...(flashbarProps?.items ?? []), ...notifications],
+    },
+    setFlashbarProps,
+    notificationsMessageHandler,
+  };
+}