diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx index 27edb900cb..eec26505b9 100644 --- a/src/app-layout/__tests__/runtime-drawers.test.tsx +++ b/src/app-layout/__tests__/runtime-drawers.test.tsx @@ -639,6 +639,20 @@ describeEachAppLayout(({ theme, size }) => { wrapper.findToolsClose().click(); expect(onToolsChange).toHaveBeenCalledWith({ open: false }); }); + + test('opens a drawer when openDrawer is called', async () => { + awsuiPlugins.appLayout.registerDrawer(drawerDefaults); + + const { wrapper } = await renderComponent(); + + expect(wrapper.findActiveDrawer()).toBeFalsy(); + + awsuiPlugins.appLayout.openDrawer('test'); + + await delay(); + + expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content'); + }); }); describe('toolbar mode only features', () => { diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts index 4be85a69c1..ec7ca80310 100644 --- a/src/app-layout/utils/use-drawers.ts +++ b/src/app-layout/utils/use-drawers.ts @@ -52,7 +52,8 @@ function useRuntimeDrawers( activeDrawerId: string | null, onActiveDrawerChange: (newDrawerId: string | null) => void, activeGlobalDrawersIds: Array, - setActiveGlobalDrawersIds: (newDrawerId: string) => void + setActiveGlobalDrawersIds: (newDrawerId: string) => void, + drawers: AppLayoutProps.Drawer[] ) { const [runtimeLocalDrawers, setRuntimeLocalDrawers] = useState({ before: [], after: [] }); const [runtimeGlobalDrawers, setRuntimeGlobalDrawers] = useState({ before: [], after: [] }); @@ -96,6 +97,37 @@ function useRuntimeDrawers( }; }, [activeGlobalDrawersIds, disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]); + useEffect(() => { + const unsubscribe = awsuiPluginsInternal.appLayout.onDrawerOpened(drawerId => { + const localDrawer = [...runtimeLocalDrawers.before, ...drawers, ...runtimeLocalDrawers.after]?.find( + drawer => drawer.id === drawerId + ); + const globalDrawer = [...runtimeGlobalDrawers.before, ...runtimeGlobalDrawers.after]?.find( + drawer => drawer.id === drawerId + ); + if (localDrawer && activeDrawerId !== drawerId) { + onActiveDrawerChange(drawerId); + } + if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) { + setActiveGlobalDrawersIds(drawerId); + } + }); + + return () => { + unsubscribe(); + }; + }, [ + activeDrawerId, + activeGlobalDrawersIds, + drawers, + onActiveDrawerChange, + runtimeGlobalDrawers.after, + runtimeGlobalDrawers.before, + runtimeLocalDrawers.after, + runtimeLocalDrawers.before, + setActiveGlobalDrawersIds, + ]); + return { local: runtimeLocalDrawers, global: runtimeGlobalDrawers, @@ -187,7 +219,8 @@ export function useDrawers( activeDrawerId, onActiveDrawerChange, activeGlobalDrawersIds, - onActiveGlobalDrawersChange + onActiveGlobalDrawersChange, + drawers ?? [] ); const combinedLocalDrawers = drawers ? [...runtimeLocalDrawers.before, ...drawers, ...runtimeLocalDrawers.after]