feat: Add enter and exit focus mode methods to the plugin API (#3916)

Author: georgylobko

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

@@ -3,8 +3,8 @@
 import React from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
-import { Box } from '~components';
-import { registerLeftDrawer } from '~components/internal/plugins/widget';
+import { Box, Button } from '~components';
+import { registerLeftDrawer, updateDrawer } from '~components/internal/plugins/widget';
 
 import styles from '../styles.scss';
 
@@ -14,6 +14,20 @@ const AIDrawer = () => {
       <Box variant="h2" padding={{ bottom: 'm' }}>
         Chat demo
       </Box>
+      <Button
+        onClick={() => {
+          updateDrawer({ type: 'expandDrawer', payload: { id: 'amazon-q' } });
+        }}
+      >
+        expand programmatically
+      </Button>
+      <Button
+        onClick={() => {
+          updateDrawer({ type: 'exitExpandedMode' });
+        }}
+      >
+        exit expanded mode
+      </Button>
       {new Array(100).fill(null).map((_, index) => (
         <div key={index}>Tela content</div>
       ))}

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

@@ -151,6 +151,23 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isActive()).toBe(true);
   });
 
+  test('should enter and exit focus mode in global ai drawer via API', () => {
+    awsuiWidgetPlugins.registerLeftDrawer({ ...drawerDefaults, isExpandable: true, defaultActive: true });
+
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)).toBeTruthy();
+
+    act(() => awsuiWidgetPlugins.updateDrawer({ type: 'expandDrawer', payload: { id: drawerDefaults.id } }));
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isDrawerInExpandedMode()).toBe(true);
+    expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
+
+    act(() => awsuiWidgetPlugins.updateDrawer({ type: 'exitExpandedMode' }));
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isDrawerInExpandedMode()).toBe(false);
+    expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+  });
+
   test('onResize functionality', () => {
     const onResize = jest.fn();
     awsuiWidgetPlugins.registerLeftDrawer({

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

@@ -21,7 +21,8 @@ function useRuntimeAiDrawer(
   isEnabled: boolean,
   activeAiDrawerId: string | null,
   onActiveAiDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,
-  onActiveAiDrawerResize: (size: number) => void
+  onActiveAiDrawerResize: (size: number) => void,
+  setExpandedDrawerId: (value: string | null) => void
 ) {
   const [aiDrawer, setAiDrawer] = useState<RuntimeAiDrawerConfig | null>(null);
   const appLayoutMessageHandler = useStableCallback((event: AppLayoutMessage) => {
@@ -32,7 +33,7 @@ function useRuntimeAiDrawer(
       }
       return;
     }
-    if (aiDrawer && aiDrawer.id !== event.payload.id) {
+    if (aiDrawer && 'payload' in event && aiDrawer.id !== event.payload.id) {
       metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: aiDrawer?.id, newId: event.payload.id });
       return;
     }
@@ -49,6 +50,12 @@ function useRuntimeAiDrawer(
       case 'resizeDrawer':
         onActiveAiDrawerResizeStable(event.payload.size);
         break;
+      case 'expandDrawer':
+        setExpandedDrawerIdStable(event.payload.id);
+        break;
+      case 'exitExpandedMode':
+        setExpandedDrawerIdStable(null);
+        break;
       /* istanbul ignore next: this code is not intended to be visited */
       default:
         assertNever(event);
@@ -57,6 +64,7 @@ function useRuntimeAiDrawer(
   const onAiDrawersChangeStable = useStableCallback(onActiveAiDrawerChange);
   const onActiveAiDrawerResizeStable = useStableCallback(onActiveAiDrawerResize);
   const onActiveAiDrawerChangeStable = useStableCallback(onActiveAiDrawerChange);
+  const setExpandedDrawerIdStable = useStableCallback(setExpandedDrawerId);
   const aiDrawerWasOpenRef = useRef(false);
   aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
 
@@ -122,7 +130,13 @@ export function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setE
     onAiDrawerFocus?.();
   }
 
-  const aiDrawer = useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize);
+  const aiDrawer = useRuntimeAiDrawer(
+    isEnabled,
+    activeAiDrawerId,
+    onActiveAiDrawerChange,
+    onActiveAiDrawerResize,
+    setExpandedDrawerId
+  );
   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);

src/internal/plugins/widget/interfaces.ts

@@ -57,11 +57,17 @@ export type UpdateDrawerConfigMessage = Message<
 export type OpenDrawerMessage = Message<'openDrawer', { id: string }>;
 export type CloseDrawerMessage = Message<'closeDrawer', { id: string }>;
 export type ResizeDrawerMessage = Message<'resizeDrawer', { id: string; size: number }>;
+export type ExpandDrawerMessage = Message<'expandDrawer', { id: string }>;
+export interface ExitExpandedModeMessage {
+  type: 'exitExpandedMode';
+}
 
 export type AppLayoutUpdateMessage =
   | UpdateDrawerConfigMessage
   | OpenDrawerMessage
   | CloseDrawerMessage
-  | ResizeDrawerMessage;
+  | ResizeDrawerMessage
+  | ExpandDrawerMessage
+  | ExitExpandedModeMessage;
 
 export type AppLayoutMessage = RegisterDrawerMessage | AppLayoutUpdateMessage;