feat: AI drawer header actions

package.json

@@ -167,7 +167,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "869 kB",
+      "limit": "890 kB",
       "ignore": "react-dom"
     }
   ],

pages/app-layout/utils/external-global-left-panel-widget.tsx

@@ -4,8 +4,6 @@ import React from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import { Box } from '~components';
-import Button from '~components/button';
-import ButtonDropdown from '~components/button-dropdown';
 import { registerLeftDrawer } from '~components/internal/plugins/widget';
 
 import styles from '../styles.scss';
@@ -69,20 +67,37 @@ registerLeftDrawer({
   unmountContent: container => unmountComponentAtNode(container),
 
   mountHeader: container => {
-    ReactDOM.render(
-      <div style={{ inlineSize: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div className={styles['ai-panel-logo']}>AI Panel</div>
-        <div>
-          <ButtonDropdown
-            items={[{ id: 'settings', text: 'Settings' }]}
-            ariaLabel="AI Panel additional options"
-            variant="icon"
-          />
-          <Button iconName="add-plus" variant="icon" ariaLabel="Add a new chat" />
-        </div>
-      </div>,
-      container
-    );
+    ReactDOM.render(<div className={styles['ai-panel-logo']}>AI Panel</div>, container);
   },
   unmountHeader: container => unmountComponentAtNode(container),
+
+  headerActions: [
+    {
+      type: 'menu-dropdown',
+      id: 'more-actions',
+      text: 'More actions',
+      items: [
+        {
+          id: 'add',
+          iconName: 'add-plus',
+          text: 'Add',
+        },
+        {
+          id: 'remove',
+          iconName: 'remove',
+          text: 'Remove',
+        },
+      ],
+    },
+    {
+      type: 'icon-button',
+      id: 'add',
+      iconName: 'add-plus',
+      text: 'Add',
+    },
+  ],
+
+  onHeaderActionClick: ({ detail }) => {
+    console.log('onHeaderActionClick: ', detail);
+  },
 });

pages/app-layout/utils/external-widget.tsx

@@ -4,7 +4,6 @@ import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import Box from '~components/box';
-import ButtonDropdown from '~components/button-dropdown';
 import Drawer from '~components/drawer';
 import awsuiPlugins from '~components/internal/plugins';
 
@@ -67,6 +66,17 @@ awsuiPlugins.appLayout.registerDrawer({
     ReactDOM.render(<Content ref={setSizeRef} />, container);
   },
   unmountContent: container => unmountComponentAtNode(container),
+  headerActions: [
+    {
+      type: 'icon-button',
+      id: 'add',
+      iconName: 'add-plus',
+      text: 'Add',
+    },
+  ],
+  onHeaderActionClick: ({ detail }) => {
+    console.log('onHeaderActionClick: ', detail);
+  },
 });
 
 awsuiPlugins.appLayout.registerDrawer({
@@ -140,6 +150,7 @@ awsuiPlugins.appLayout.registerDrawer({
     content: 'Content',
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
+    expandedModeButton: 'Expanded mode button',
   },
   onToggle: event => {
     console.log('circle-global drawer on toggle', event.detail);
@@ -158,12 +169,7 @@ awsuiPlugins.appLayout.registerDrawer({
 
   mountContent: (container, mountContext) => {
     ReactDOM.render(
-      <Drawer
-        header={<Box variant="h2">Global drawer</Box>}
-        headerActions={
-          <ButtonDropdown items={[{ id: 'settings', text: 'Settings' }]} ariaLabel="Control drawer" variant="icon" />
-        }
-      >
+      <Drawer header={<Box variant="h2">Global drawer</Box>}>
         <AutoIncrementCounter onVisibilityChange={mountContext?.onVisibilityChange}>
           global widget content circle 1
           {new Array(100).fill(null).map((_, index) => (
@@ -176,6 +182,17 @@ awsuiPlugins.appLayout.registerDrawer({
     );
   },
   unmountContent: container => unmountComponentAtNode(container),
+  headerActions: [
+    {
+      type: 'icon-button',
+      id: 'add',
+      iconName: 'add-plus',
+      text: 'Add',
+    },
+  ],
+  onHeaderActionClick: ({ detail }) => {
+    console.log('onHeaderActionClick: ', detail);
+  },
 });
 
 awsuiPlugins.appLayout.registerDrawer({

src/app-layout/__integ__/runtime-drawers.test.ts

@@ -3,12 +3,11 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/selectors';
+import createWrapper, { AppLayoutWrapper, ButtonGroupWrapper } from '../../../lib/components/test-utils/selectors';
 import { Theme } from '../../__integ__/utils.js';
 import { viewports } from './constants';
 import { getUrlParams } from './utils';
 
-import testUtilsStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
 import vrDrawerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import vrToolbarDrawerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js';
 
@@ -21,9 +20,9 @@
 };
 
 const findExpandedModeButtonByActiveDrawerId = (wrapper: AppLayoutWrapper, id: string) => {
-  return wrapper.find(
-    `[data-testid="awsui-app-layout-drawer-${id}"] .${testUtilsStyles['active-drawer-expanded-mode-button']}`
-  );
+  return wrapper
+    .findComponent(`[data-testid="awsui-app-layout-drawer-${id}"]`, ButtonGroupWrapper)!
+    .findButtonById('expand');
 };
 
 describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
@@ -110,7 +109,7 @@
           await page.runInsideIframe('#page2', true, async () => {
             await page.waitForVisible(wrapper.findActiveDrawer().toSelector());
             await page.waitForAssertion(async () => {
               expect((await page.getBoundingBox(wrapper.findActiveDrawer().toSelector())).width).toEqual(newWidth!);
             });
             await expect(page.getText(wrapper.findActiveDrawer().toSelector())).resolves.toContain('Security');
           });

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

@@ -168,7 +168,7 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     if (size === 'mobile') {
       expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerDefaults.id)).toBeFalsy();
     } else {
-      globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerDefaults.id)!.click();
+      createWrapper().findButtonGroup()!.findButtonById('expand')!.click();
       expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isDrawerInExpandedMode()).toBe(true);
       expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
       globalDrawersWrapper.findLeaveExpandedModeButtonInAIDrawer()!.click();

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

@@ -50,6 +50,7 @@ async function renderComponent(jsx: React.ReactElement) {
     globalDrawersWrapper,
     rerender,
     getByTestId,
+    container,
     ...rest,
   };
 }
@@ -946,6 +947,9 @@ describe('toolbar mode only features', () => {
           awsuiWidgetPlugins.registerLeftDrawer(payload as WidgetDrawerPayload);
         }
       };
+      const findDrawerHeaderActionById = (id: string, renderProps: Awaited<ReturnType<typeof renderComponent>>) => {
+        return createWrapper(renderProps.container).findButtonGroup()!.findButtonById(id);
+      };
 
       test('renders resize handle for a global drawer when config is enabled', async () => {
         registerDrawer({
@@ -990,7 +994,7 @@ describe('toolbar mode only features', () => {
 
         findDrawerTriggerById('global-drawer', renderProps)!.click();
         expect(globalDrawersWrapper.findDrawerById('global-drawer')!.getElement()).toBeInTheDocument();
-        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
+        renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
         expect(globalDrawersWrapper.findDrawerById('global-drawer')).toBeNull();
       });
 
@@ -1074,7 +1078,7 @@ describe('toolbar mode only features', () => {
         findDrawerTriggerById('global-drawer-1', renderProps)!.focus();
         findDrawerTriggerById('global-drawer-1', renderProps)!.click();
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
-        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
+        renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
         await waitFor(() => {
           expect(findDrawerTriggerById('global-drawer-1', renderProps)!.getElement()).toHaveFocus();
@@ -1099,7 +1103,7 @@ describe('toolbar mode only features', () => {
         await delay();
 
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
-        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
+        renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
 
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(false);
@@ -1129,7 +1133,7 @@ describe('toolbar mode only features', () => {
         expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
         expect(onVisibilityChangeMock).toHaveBeenCalledWith(true);
 
-        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
+        renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
         expect(onVisibilityChangeMock).toHaveBeenCalledWith(false);
       });
 
@@ -1186,6 +1190,28 @@ describe('toolbar mode only features', () => {
         renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
         expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
       });
+
+      test(`calls onHeaderActionClick handler by clicking on drawers header action button in left runtime drawer)`, async () => {
+        const onHeaderActionClick = jest.fn();
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer',
+          headerActions: [
+            {
+              type: 'icon-button',
+              id: 'add',
+              iconName: 'add-plus',
+              text: 'Add',
+            },
+          ],
+          onHeaderActionClick: event => onHeaderActionClick(event.detail),
+        });
+        const renderProps = await renderComponent(<AppLayout />);
+        findDrawerTriggerById('global-drawer', renderProps)!.click();
+
+        findDrawerHeaderActionById('add', renderProps)!.click();
+        expect(onHeaderActionClick).toHaveBeenCalledWith({ id: 'add' });
+      });
     });
 
     test('the order of the opened global drawers should match the positions of their corresponding toggle buttons on the toolbar', async () => {
@@ -1442,36 +1468,37 @@ describe('toolbar mode only features', () => {
 
           findDrawerTriggerById(drawerId, renderProps)!.click();
           expect(
-            globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
+            renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
           ).toBeInTheDocument();
           expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
-          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
           expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+
           expect(
             getGeneratedAnalyticsMetadata(
-              globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
+              renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
             )
           ).toEqual(
             expect.objectContaining({
               action: 'expand',
-              detail: {
+              detail: expect.objectContaining({
                 label: 'Expanded mode button',
-              },
+              }),
             })
           );
 
-          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
           expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
           expect(
             getGeneratedAnalyticsMetadata(
-              globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
+              renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
             )
           ).toEqual(
             expect.objectContaining({
               action: 'collapse',
-              detail: {
+              detail: expect.objectContaining({
                 label: 'Expanded mode button',
-              },
+              }),
             })
           );
         });
@@ -1545,10 +1572,10 @@ describe('toolbar mode only features', () => {
           await delay();
 
           findDrawerTriggerById(drawerId, renderProps)!.click();
-          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          renderProps.globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
           expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
           expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
-          globalDrawersWrapper.findCloseButtonByActiveDrawerId(drawerId)!.click();
+          renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId(drawerId)!.click();
           expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
         });
       });

src/app-layout/__tests__/utils.tsx

@@ -12,7 +12,12 @@ import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import { forceMobileModeSymbol } from '../../../lib/components/internal/hooks/use-mobile';
 import { SplitPanelProps } from '../../../lib/components/split-panel';
-import createWrapper, { AppLayoutWrapper, ElementWrapper } from '../../../lib/components/test-utils/dom';
+import createWrapper, {
+  AppLayoutWrapper,
+  ButtonGroupWrapper,
+  ButtonWrapper,
+  ElementWrapper,
+} from '../../../lib/components/test-utils/dom';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
@@ -206,16 +211,22 @@ export const getGlobalDrawersTestUtils = (wrapper: AppLayoutWrapper) => {
       );
     },
 
-    findCloseButtonByActiveDrawerId(id: string): ElementWrapper | null {
-      return wrapper.find(
-        `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"] .${testutilStyles['active-drawer-close-button']}`
-      );
+    findCloseButtonByActiveDrawerId(id: string): ButtonWrapper | null {
+      return wrapper
+        .findComponent(
+          `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`,
+          ButtonGroupWrapper
+        )!
+        .findButtonById('close');
     },
 
-    findExpandedModeButtonByActiveDrawerId(id: string): ElementWrapper | null {
-      return wrapper.find(
-        `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"] .${testutilStyles['active-drawer-expanded-mode-button']}`
-      );
+    findExpandedModeButtonByActiveDrawerId(id: string): ButtonWrapper | null {
+      return wrapper
+        .findComponent(
+          `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`,
+          ButtonGroupWrapper
+        )!
+        .findButtonById('expand');
     },
 
     findLeaveExpandedModeButtonInAIDrawer(): ElementWrapper | null {