feat: Method onToggleFocusMode for the left drawer (#3996)

Author: georgylobko

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

@@ -139,4 +139,8 @@ registerLeftDrawer({
   onHeaderActionClick: ({ detail }) => {
     console.log('onHeaderActionClick: ', detail);
   },
+
+  onToggleFocusMode: ({ detail }) => {
+    console.log('onToggleFocusMode: ', detail);
+  },
 });

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

@@ -257,6 +257,31 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     }
   );
 
+  test(`calls onToggleFocusMode handler by entering / exiting focus mode in left runtime drawer)`, () => {
+    const drawerId = 'global-drawer';
+    const onToggleFocusMode = jest.fn();
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      id: drawerId,
+      isExpandable: true,
+      onToggleFocusMode: event => onToggleFocusMode(event.detail),
+    });
+    const renderProps = renderComponent(<AppLayout />);
+    const { globalDrawersWrapper } = renderProps;
+
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+    if (size === 'mobile') {
+      expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)).toBeFalsy();
+    } else {
+      createWrapper().findButtonGroup()!.findButtonById('expand')!.click();
+      expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+      expect(onToggleFocusMode).toHaveBeenCalledWith({ isExpanded: true });
+      createWrapper().findButtonGroup()!.findButtonById('expand')!.click();
+      expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+      expect(onToggleFocusMode).toHaveBeenCalledWith({ isExpanded: false });
+    }
+  });
+
   describe('metrics', () => {
     let sendPanoramaMetricSpy: jest.SpyInstance;
     beforeEach(() => {

src/app-layout/runtime-drawer/index.tsx

@@ -149,6 +149,7 @@ export const mapRuntimeConfigToAiDrawer = (
   onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   exitExpandedModeTrigger?: React.ReactNode;
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
 } => {
   const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;
 

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

@@ -27,6 +27,7 @@ export type InternalDrawer = AppLayoutProps.Drawer & {
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
   position?: 'side' | 'bottom';
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
 };
 
 // Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -71,7 +71,7 @@ export const useAppLayout = (
   const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);
   const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);
   const [isNested, setIsNested] = useState(false);
-  const [expandedDrawerId, setExpandedDrawerId] = useState<string | null>(null);
+  const [expandedDrawerId, setInternalExpandedDrawerId] = useState<string | null>(null);
   const rootRefInternal = useRef<HTMLDivElement>(null);
   // This workaround ensures the ref is defined before checking if the app layout is nested.
   // On initial render, the ref might be undefined because this component loads asynchronously via the widget API.
@@ -90,6 +90,16 @@ export const useAppLayout = (
     fireNonCancelableEvent(onToolsChange, { open });
   };
 
+  const setExpandedDrawerId = (value: string | null) => {
+    setInternalExpandedDrawerId(value);
+
+    if (aiDrawer?.onToggleFocusMode && (value === aiDrawer?.id || value === null)) {
+      fireNonCancelableEvent(aiDrawer.onToggleFocusMode, {
+        isExpanded: !!value,
+      });
+    }
+  };
+
   const onGlobalDrawerFocus = (drawerId: string, open: boolean) => {
     globalDrawersFocusControl.setFocus({ force: true, drawerId, open });
   };

src/internal/plugins/widget/interfaces.ts

@@ -50,6 +50,7 @@ export interface DrawerPayload {
   unmountHeader?: (container: HTMLElement) => void;
   headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
   position?: 'side' | 'bottom';
 }