feat: resizeDrawer method for plugin api (#3680)

Author: georgylobko

pages/app-layout/runtime-drawers.page.tsx

@@ -112,6 +112,19 @@ export default function WithDrawers() {
                 <Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
                   Close a drawer without a trigger
                 </Button>
+
+                <Button
+                  onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle-global', 400)}
+                  data-testid="button-circle-global-resize"
+                >
+                  Resize circle-global drawer to 400px
+                </Button>
+                <Button
+                  onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle3-global', 500)}
+                  data-testid="button-circle3-global-resize"
+                >
+                  Resize circle3-global drawer to 500px
+                </Button>
               </SpaceBetween>
             </SpaceBetween>
           }

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

@@ -148,6 +148,12 @@ describe('Visual refresh toolbar only', () => {
     hasHorizontalScroll() {
       return this.browser.execute(() => document.body.scrollWidth - document.body.clientWidth > 0);
     }
+
+    async getDrawerWidth(drawerId: string) {
+      const { width } = await this.getBoundingBox(findDrawerById(wrapper, drawerId)!.toSelector());
+
+      return width;
+    }
   }
   function setupTest(testFn: (page: PageObject) => Promise<void>) {
     return useBrowser(async browser => {
@@ -362,4 +368,32 @@ describe('Visual refresh toolbar only', () => {
       await expect(page.isClickable(wrapper.findOpenNavigationPanel().toSelector())).resolves.toBe(false);
     })
   );
+
+  test(
+    'should programmatically resize drawers',
+    setupTest(async page => {
+      await page.setWindowSize(viewports.desktopWide);
+      const drawerId1 = 'circle-global';
+      const drawerId2 = 'circle3-global';
+      await page.click(wrapper.findDrawerTriggerById(drawerId1).toSelector());
+      await page.click(wrapper.findDrawerTriggerById(drawerId2).toSelector());
+
+      await page.waitForAssertion(async () => {
+        await expect(page.getDrawerWidth(drawerId1)).resolves.toBe(351);
+        await expect(page.getDrawerWidth(drawerId2)).resolves.toBe(321);
+      });
+
+      await page.click(wrapper.find('[data-testid="button-circle-global-resize"]').toSelector());
+
+      await page.waitForAssertion(async () => {
+        await expect(page.getDrawerWidth(drawerId1)).resolves.toBe(401);
+      });
+
+      await page.click(wrapper.find('[data-testid="button-circle3-global-resize"]').toSelector());
+
+      await page.waitForAssertion(async () => {
+        await expect(page.getDrawerWidth(drawerId2)).resolves.toBe(501);
+      });
+    })
+  );
 });

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

@@ -18,6 +18,7 @@ import {
   findActiveDrawerLandmark,
   getActiveDrawerWidth,
   getGlobalDrawersTestUtils,
+  getGlobalDrawerWidth,
   manyDrawers,
   testDrawer,
 } from './utils';
@@ -793,6 +794,30 @@ describeEachAppLayout(({ size }) => {
 
     expect(wrapper.findActiveDrawer()).toBeFalsy();
   });
+
+  // skip these tests on mobile mode, because it only works for desktop view
+  (size === 'desktop' ? describe : describe.skip)('resizing', () => {
+    test('resizes a drawer when resizeDrawer is called', async () => {
+      awsuiPlugins.appLayout.registerDrawer(drawerDefaults);
+
+      const { wrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+
+      awsuiPlugins.appLayout.openDrawer('test');
+
+      await delay();
+
+      expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
+      expect(getActiveDrawerWidth(wrapper)).toEqual('290px');
+
+      awsuiPlugins.appLayout.resizeDrawer('test', 800);
+
+      expect(getActiveDrawerWidth(wrapper)).toEqual('800px');
+
+      awsuiPlugins.appLayout.resizeDrawer('test', 300);
+
+      expect(getActiveDrawerWidth(wrapper)).toEqual('300px');
+    });
+  });
 });
 
 describe('toolbar mode only features', () => {
@@ -1646,6 +1671,33 @@ describe('toolbar mode only features', () => {
         });
       });
     });
+
+    test('resizes multiple global drawers when resizeDrawer is called', async () => {
+      awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, type: 'global' });
+      awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, type: 'global', id: 'test1' });
+
+      const { globalDrawersWrapper } = await renderComponent(<AppLayout />);
+
+      awsuiPlugins.appLayout.openDrawer('test');
+      awsuiPlugins.appLayout.openDrawer('test1');
+
+      await delay();
+
+      expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent('runtime drawer content');
+      expect(globalDrawersWrapper.findDrawerById('test1')!.getElement()).toHaveTextContent('runtime drawer content');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('290px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('290px');
+
+      awsuiPlugins.appLayout.resizeDrawer('test', 800);
+
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('800px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('290px');
+
+      awsuiPlugins.appLayout.resizeDrawer('test1', 801);
+
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('800px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('801px');
+    });
   });
 
   describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['mobile'] }, () => {

src/app-layout/__tests__/utils.tsx

@@ -107,6 +107,15 @@ export function getActiveDrawerWidth(wrapper: AppLayoutWrapper): string {
   return drawerElement.style.width;
 }
 
+export function getGlobalDrawerWidth(
+  wrapper: ReturnType<typeof getGlobalDrawersTestUtils>,
+  drawerId: string
+): string | null {
+  const drawerElement = wrapper.findDrawerById(drawerId)!.getElement();
+  const value = drawerElement.style.getPropertyValue(customCssProps.drawerSize);
+  return value ?? null;
+}
+
 export const splitPanelI18nStrings: SplitPanelProps.I18nStrings = {
   closeButtonAriaLabel: 'Close panel',
   openButtonAriaLabel: 'Open panel',

src/app-layout/utils/use-drawers.ts

@@ -159,6 +159,23 @@ function useDrawerRuntimeOpenClose(
   }, [disableRuntimeDrawers, onDrawerClosed]);
 }
 
+function useDrawerRuntimeResize(
+  disableRuntimeDrawers: boolean | undefined,
+  onActiveDrawerResize: ({ id, size }: { id: string; size: number }) => void
+) {
+  const onRuntimeDrawerResize = useStableCallback((drawerId: string, size: number) => {
+    onActiveDrawerResize({ id: drawerId, size });
+  });
+
+  useEffect(() => {
+    if (disableRuntimeDrawers) {
+      return;
+    }
+
+    return awsuiPluginsInternal.appLayout.onDrawerResize(onRuntimeDrawerResize);
+  }, [disableRuntimeDrawers, onRuntimeDrawerResize]);
+}
+
 function applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {
   const drawers = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter];
   if (drawers.length === 0 && toolsProps.disableDrawersMerge) {
@@ -297,6 +314,8 @@ export function useDrawers(
     onActiveGlobalDrawersChange
   );
 
+  useDrawerRuntimeResize(disableRuntimeDrawers, onActiveDrawerResize);
+
   const activeDrawerSize = activeDrawerIdResolved
     ? (drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth)
     : toolsProps.toolsWidth;

src/internal/plugins/controllers/drawers.ts

@@ -59,6 +59,7 @@ type DrawersRegistrationListener = (drawers: Array<DrawerConfig>) => void;
 type DrawersUpdateListener = (drawers: Array<DrawerConfig>) => void;
 
 export type DrawersToggledListener = (drawerId: string, params?: OpenCloseDrawerParams) => void;
+type DrawersResizeListener = (drawerId: string, size: number) => void;
 
 interface OpenCloseDrawerParams {
   initiatedByUserAction: boolean;
@@ -69,13 +70,15 @@ export interface DrawersApiPublic {
   updateDrawer(config: UpdateDrawerConfig): void;
   openDrawer(drawerId: string, params?: OpenCloseDrawerParams): void;
   closeDrawer(drawerId: string, params?: OpenCloseDrawerParams): void;
+  resizeDrawer(drawerId: string, size: number): void;
 }
 
 export interface DrawersApiInternal {
   clearRegisteredDrawers(): void;
   onDrawersRegistered(listener: DrawersRegistrationListener): () => void;
   onDrawerOpened(listener: DrawersToggledListener): () => void;
   onDrawerClosed(listener: DrawersToggledListener): () => void;
+  onDrawerResize(listener: DrawersResizeListener): () => void;
   onDrawersUpdated(listener: DrawersUpdateListener): void;
   getDrawersState(): Array<DrawerConfig>;
 }
@@ -86,6 +89,7 @@ export class DrawersController {
   private drawerOpenedListener: DrawersToggledListener | null = null;
   private drawerClosedListener: DrawersToggledListener | null = null;
   private drawersUpdateListeners: Array<DrawersUpdateListener> = [];
+  private drawerResizeListener: DrawersResizeListener | null = null;
 
   scheduleUpdate = debounce(() => {
     this.drawersRegistrationListener?.(this.drawers);
@@ -185,6 +189,25 @@ export class DrawersController {
     };
   };
 
+  onDrawerResize = (listener: DrawersResizeListener) => {
+    if (this.drawerResizeListener !== null) {
+      reportRuntimeApiWarning(
+        'app-layout-drawers',
+        'multiple app layout instances detected when calling onDrawerResize'
+      );
+    }
+
+    this.drawerResizeListener = listener;
+
+    return () => {
+      this.drawerResizeListener = null;
+    };
+  };
+
+  resizeDrawer = (drawerId: string, size: number) => {
+    this.drawerResizeListener?.(drawerId, size);
+  };
+
   getDrawersState = () => {
     return this.drawers;
   };
@@ -194,6 +217,7 @@ export class DrawersController {
     api.updateDrawer ??= this.updateDrawer;
     api.openDrawer ??= this.openDrawer;
     api.closeDrawer ??= this.closeDrawer;
+    api.resizeDrawer ??= this.resizeDrawer;
     return api as DrawersApiPublic;
   }
 
@@ -202,6 +226,7 @@ export class DrawersController {
     internalApi.onDrawersRegistered ??= this.onDrawersRegistered;
     internalApi.onDrawerOpened ??= this.onDrawerOpened;
     internalApi.onDrawerClosed ??= this.onDrawerClosed;
+    internalApi.onDrawerResize ??= this.onDrawerResize;
     internalApi.onDrawersUpdated ??= this.onDrawersUpdated;
     internalApi.getDrawersState ??= this.getDrawersState;
     return internalApi as DrawersApiInternal;