fix: Runtime drawers default active

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

@@ -1042,5 +1042,111 @@ describe('toolbar mode only features', () => {
 
       expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
     });
+
+    describe('dynamically registered drawers with defaultActive: true', () => {
+      test('should open if there are already open local drawer on the page', async () => {
+        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+
+        wrapper.findDrawerTriggerById('security')!.click();
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global1',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global2',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+        expect(globalDrawersWrapper.findDrawerById('global2')!.isActive()).toBe(true);
+      });
+
+      test('should not open if there are already global drawers opened by user action on the page', async () => {
+        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+
+        wrapper.findDrawerTriggerById('security')!.click();
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global1',
+          type: 'global',
+        });
+
+        await delay();
+
+        wrapper.findDrawerTriggerById('global1')!.click();
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global2',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+        expect(globalDrawersWrapper.findDrawerById('global2')).toBeFalsy();
+      });
+
+      test('should not open if the maximum number (2) of global drawers is already open on the page', async () => {
+        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+
+        wrapper.findDrawerTriggerById('security')!.click();
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global1',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global2',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        // this drawer should not open because there are already two global drawers open on the page, which is the maximum limit
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global3',
+          type: 'global',
+          defaultActive: true,
+        });
+
+        await delay();
+
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security');
+        expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true);
+        expect(globalDrawersWrapper.findDrawerById('global2')!.isActive()).toBe(true);
+        expect(globalDrawersWrapper.findDrawerById('global3')).toBeFalsy();
+      });
+    });
   });
 });

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

@@ -63,8 +63,10 @@ function useRuntimeDrawers(
   const onLocalDrawerChangeStable = useStableCallback(onActiveDrawerChange);
   const onGlobalDrawersChangeStable = useStableCallback(onActiveGlobalDrawersChange);
 
-  const drawersWereOpenRef = useRef(false);
-  drawersWereOpenRef.current = drawersWereOpenRef.current || !!activeDrawerId || !!activeGlobalDrawersIds.length;
+  const localDrawerWasOpenRef = useRef(false);
+  localDrawerWasOpenRef.current = localDrawerWasOpenRef.current || !!activeDrawerId;
+  const activeGlobalDrawersIdsRef = useRef<Array<string>>([]);
+  activeGlobalDrawersIdsRef.current = activeGlobalDrawersIds;
 
   useEffect(() => {
     if (disableRuntimeDrawers) {
@@ -74,17 +76,27 @@ function useRuntimeDrawers(
       const localDrawers = drawers.filter(drawer => drawer.type !== 'global');
       const globalDrawers = drawers.filter(drawer => drawer.type === 'global');
       setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));
-      if (!drawersWereOpenRef.current) {
+      if (!localDrawerWasOpenRef.current) {
         const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);
         if (defaultActiveLocalDrawer) {
           onLocalDrawerChangeStable(defaultActiveLocalDrawer.id);
         }
+      }
 
-        const defaultActiveGlobalDrawers = sortByPriority(globalDrawers).filter(drawer => drawer.defaultActive);
-        defaultActiveGlobalDrawers.forEach(drawer => {
-          onGlobalDrawersChangeStable(drawer.id);
-        });
+      const drawersNotActiveByDefault = globalDrawers.filter(drawer => !drawer.defaultActive);
+      const hasDrawersOpenByUserAction = drawersNotActiveByDefault.find(drawer =>
+        activeGlobalDrawersIdsRef.current.includes(drawer.id)
+      );
+      if (hasDrawersOpenByUserAction || activeGlobalDrawersIdsRef.current.length === DRAWERS_LIMIT) {
+        return;
       }
+
+      const defaultActiveGlobalDrawers = sortByPriority(globalDrawers).filter(
+        drawer => !activeGlobalDrawersIdsRef.current.includes(drawer.id) && drawer.defaultActive
+      );
+      defaultActiveGlobalDrawers.forEach(drawer => {
+        onGlobalDrawersChangeStable(drawer.id);
+      });
     });
     return () => {
       unsubscribe();