chore: Implement flashbar runtime API

Author: just-boris

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}>{children}</FlashbarPropsSetter.Provider>
+        {flashbarProps && <FlashbarImplementation {...flashbarProps} />}
       </div>
     </NotificationsSlot>
   );

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

@@ -0,0 +1,25 @@
+// 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 && { ...flashbarProps, items: [...flashbarProps.items, ...notifications] },
+    setFlashbarProps,
+    notificationsMessageHandler,
+  };
+}

src/app-layout/visual-refresh-toolbar/state/runtime-notifications.ts

@@ -0,0 +1,117 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useRef, useState } from 'react';
+
+import { fireNonCancelableEvent } from '../../../internal/events';
+import { metrics } from '../../../internal/metrics';
+import { DrawerPayload as RuntimeAiDrawerConfig, WidgetMessage } from '../../../internal/plugins/widget/interfaces';
+import { mapRuntimeConfigToAiDrawer } from '../../runtime-drawer';
+
+export interface OnChangeParams {
+  initiatedByUserAction: boolean;
+}
+
+const DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };
+
+const MIN_DRAWER_SIZE = 400;
+
+interface UseDrawersProps {
+  onAiDrawerFocus: () => void;
+  expandedDrawerId: string | null;
+  setExpandedDrawerId: (value: string | null) => void;
+}
+
+export function useAiDrawer({ onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }: UseDrawersProps) {
+  const [runtimeDrawer, setRuntimeDrawer] = useState<RuntimeAiDrawerConfig | null>(null);
+  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);
+  const [size, setSize] = useState<number | null>(null);
+  const aiDrawerWasOpenRef = useRef(false);
+  aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
+
+  function onActiveAiDrawerResize(size: number) {
+    if (!activeAiDrawerId) {
+      return;
+    }
+    setSize(size);
+    fireNonCancelableEvent(activeAiDrawer?.onResize, { id: activeAiDrawerId, size });
+  }
+
+  function onActiveAiDrawerChange(
+    newDrawerId: string | null,
+    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
+  ) {
+    setActiveAiDrawerId(newDrawerId);
+
+    if (newDrawerId) {
+      fireNonCancelableEvent(runtimeDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
+    }
+
+    if (activeAiDrawerId) {
+      fireNonCancelableEvent(runtimeDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
+
+      if (activeAiDrawerId === expandedDrawerId) {
+        setExpandedDrawerId?.(null);
+      }
+    }
+
+    onAiDrawerFocus?.();
+  }
+
+  function checkId(newId: string) {
+    if (runtimeDrawer && runtimeDrawer.id !== newId) {
+      metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: runtimeDrawer.id, newId });
+    }
+  }
+
+  function aiDrawerMessageHandler(event: WidgetMessage) {
+    if (event.type === 'registerLeftDrawer') {
+      setRuntimeDrawer(event.payload);
+      if (!aiDrawerWasOpenRef.current && event.payload.defaultActive) {
+        onActiveAiDrawerChange(event.payload.id, { initiatedByUserAction: false });
+      }
+      return;
+    }
+
+    switch (event.type) {
+      case 'updateDrawerConfig':
+        checkId(event.payload.id);
+        setRuntimeDrawer(current => (current ? { ...current, ...event.payload } : current));
+        break;
+      case 'openDrawer':
+        checkId(event.payload.id);
+        onActiveAiDrawerChange(event.payload.id, { initiatedByUserAction: false });
+        break;
+      case 'closeDrawer':
+        checkId(event.payload.id);
+        onActiveAiDrawerChange(null, { initiatedByUserAction: false });
+        break;
+      case 'resizeDrawer':
+        checkId(event.payload.id);
+        onActiveAiDrawerResize(event.payload.size);
+        break;
+      case 'expandDrawer':
+        checkId(event.payload.id);
+        setExpandedDrawerId(event.payload.id);
+        break;
+      case 'exitExpandedMode':
+        setExpandedDrawerId(null);
+        break;
+    }
+  }
+
+  const aiDrawer = runtimeDrawer && mapRuntimeConfigToAiDrawer(runtimeDrawer);
+  const activeAiDrawer = activeAiDrawerId && activeAiDrawerId === aiDrawer?.id ? aiDrawer : null;
+  const activeAiDrawerSize = activeAiDrawerId ? (size ?? activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE) : 0;
+  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+
+  return {
+    aiDrawer,
+    aiDrawerMessageHandler,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    onActiveAiDrawerResize,
+  };
+}