feat: App layout global drawers

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useEffect, useState } from 'react';
 
-import { AppLayout, ContentLayout, Header, HelpPanel, Link, SpaceBetween, Toggle } from '~components';
+import { AppLayout, Button, ContentLayout, Header, HelpPanel, Link, SpaceBetween, Toggle } from '~components';
 import { AppLayoutProps } from '~components/app-layout';
 import awsuiPlugins from '~components/internal/plugins';
 
@@ -69,6 +69,14 @@ export default function WithDrawers() {
                   Use Tools
                 </Toggle>
 
+                <Button
+                  onClick={() => {
+                    awsuiPlugins.appLayout.openDrawer('circle-global');
+                  }}
+                >
+                  Open runtime drawer
+                </Button>
+
                 <Header variant="h2">Security Drawer Updates</Header>
                 <Toggle
                   data-testid="show-badge-toggle"

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

@@ -4,6 +4,7 @@ import React, { useContext, useRef, useState } from 'react';
 
 import {
   AppLayout,
+  Button,
   ContentLayout,
   Drawer,
   Header,
@@ -14,6 +15,7 @@ import {
   Toggle,
 } from '~components';
 import { AppLayoutProps } from '~components/app-layout';
+import awsuiPlugins from '~components/internal/plugins';
 
 import './utils/external-widget';
 import AppContext, { AppContextType } from '../app/app-context';
@@ -99,6 +101,13 @@ export default function WithDrawers() {
                 <Toggle checked={hasDrawers} onChange={({ detail }) => setUrlParams({ hasDrawers: detail.checked })}>
                   Use Drawers
                 </Toggle>
+
+                <Button onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}>
+                  Open a drawer without a trigger
+                </Button>
+                <Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
+                  Close a drawer without a trigger
+                </Button>
               </SpaceBetween>
             </SpaceBetween>
           }

pages/app-layout/utils/external-widget.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import Drawer from '~components/drawer';
@@ -81,3 +81,159 @@ awsuiPlugins.appLayout.registerDrawer({
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
+
+const Counter: React.FC = ({ children }) => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <span data-testid="count">{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+      {children}
+    </div>
+  );
+};
+
+const AutoIncrementCounter: React.FC<{
+  onVisibilityChange?: (callback: (isVisible: boolean) => void) => void;
+}> = ({ children, onVisibilityChange }) => {
+  const [count, setCount] = useState(0);
+  const isPaused = useRef(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!isPaused.current) {
+        setCount(prevCount => prevCount + 1);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (onVisibilityChange) {
+      onVisibilityChange((isVisible: boolean) => {
+        isPaused.current = !isVisible;
+      });
+    }
+  }, [onVisibilityChange]);
+
+  return (
+    <div>
+      <h3>Auto Increment Counter</h3>
+      <div>Count: {count}</div>
+      {children}
+    </div>
+  );
+};
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'circle-global',
+  type: 'global',
+  defaultActive: false,
+  resizable: true,
+  defaultSize: 350,
+  preserveInactiveContent: true,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
+    </svg>`,
+  },
+
+  onResize: event => {
+    console.log('resize', event.detail);
+  },
+
+  mountContent: (container, mountContext) => {
+    ReactDOM.render(
+      <AutoIncrementCounter onVisibilityChange={mountContext?.onVisibilityChange}>
+        global widget content circle 1
+      </AutoIncrementCounter>,
+      container
+    );
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'circle2-global',
+  type: 'global',
+  defaultActive: false,
+  resizable: true,
+  defaultSize: 320,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
+    </svg>`,
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<Counter>global widget content circle 2</Counter>, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'circle3-global',
+  type: 'global',
+  defaultActive: false,
+  resizable: true,
+  defaultSize: 320,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
+    </svg>`,
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<Counter>global widget content circle 3</Counter>, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'circle4-global',
+  type: 'global',
+  defaultActive: false,
+  resizable: true,
+  defaultSize: 320,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<div>global widget content circle 3 (without trigger button)</div>, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});

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

@@ -133,13 +133,13 @@ describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)(
       await page.dragResizerTo({ x: width, y: 0 });
       // there are different layouts between these two designs
       await expect(page.getActiveDrawerWidth()).resolves.toEqual(
-        theme === 'visual-refresh-toolbar' ? 290 : 290 + vrBorderOffset
+        theme === 'visual-refresh-toolbar' ? 291 : 290 + vrBorderOffset
       );
       await page.dragResizerTo({ x: 0, y: 0 });
       const expectedWidths = {
         ['classic']: 520,
         ['visual-refresh']: 447,
-        ['visual-refresh-toolbar']: 592,
+        ['visual-refresh-toolbar']: 593,
       };
       await expect(page.getActiveDrawerWidth()).resolves.toEqual(expectedWidths[theme]);
     })

src/app-layout/__integ__/app-layout-refresh-content-width.test.ts

@@ -47,7 +47,8 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
     });
   }
 
-  const vrBorderOffset = theme === 'refresh' ? 1 : 0;
+  const drawerBorderOffset = 1;
+  const navigationBorderOffset = theme === 'refresh' ? 1 : 0;
 
   describe('Default width per contentType', () => {
     const testCases = [
@@ -66,8 +67,8 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
 
             // Open the drawers and check their width
             await page.setDrawersOpen();
-            await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth + vrBorderOffset);
-            await expect(page.getToolsWidth()).resolves.toBe(toolsWidth + vrBorderOffset);
+            await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth + navigationBorderOffset);
+            await expect(page.getToolsWidth()).resolves.toBe(toolsWidth + drawerBorderOffset);
           })
         );
       }

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

@@ -3,10 +3,13 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import createWrapper from '../../../lib/components/test-utils/selectors';
+import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/selectors';
 import { viewports } from './constants';
 
 const wrapper = createWrapper().findAppLayout();
+const findDrawerById = (wrapper: AppLayoutWrapper, id: string) => {
+  return wrapper.find(`[data-testid="awsui-app-layout-drawer-${id}"]`);
+};
 
 describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)('%s', theme => {
   function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
@@ -72,3 +75,111 @@ describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)(
     );
   });
 });
+
+describe('Visual refresh toolbar only', () => {
+  function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
+    return useBrowser(async browser => {
+      const page = new BasePageObject(browser);
+
+      await browser.url(
+        `#/light/app-layout/runtime-drawers?${new URLSearchParams({
+          hasDrawers: 'false',
+          hasTools: 'true',
+          splitPanelPosition: 'side',
+          visualRefresh: 'true',
+          appLayoutToolbar: 'true',
+        }).toString()}`
+      );
+      await page.waitForVisible(wrapper.findDrawerTriggerById('security').toSelector(), true);
+      await testFn(page);
+    });
+  }
+
+  test(
+    'displays only the most recently opened drawer in a full-width popup on mobile view (global drawer on top of the local one)',
+    setupTest(async page => {
+      await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+      await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+
+      await page.setWindowSize(viewports.mobile);
+      // technically, both drawers are present in the DOM tree, but only one is visible.
+      // the isClickable check ensures that the drawer is actually visible
+      await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(true);
+    })
+  );
+
+  test(
+    'displays only the most recently opened drawer in a full-width popup on mobile view (local drawer on top of the global one)',
+    setupTest(async page => {
+      await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+      await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+
+      await page.setWindowSize(viewports.mobile);
+      // technically, both drawers are present in the DOM tree, but only one is visible.
+      // the isClickable check ensures that the drawer is actually visible
+      await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(true);
+    })
+  );
+
+  test(
+    'should open 3 drawers (1 local and 2 global) if the screen size permits',
+    setupTest(async page => {
+      await page.setWindowSize({ ...viewports.desktop, width: 1700 });
+      await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+      await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+      await page.click(wrapper.findDrawerTriggerById('circle2-global').toSelector());
+
+      await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(true);
+      await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(true);
+      await expect(page.isClickable(findDrawerById(wrapper, 'circle2-global')!.toSelector())).resolves.toBe(true);
+    })
+  );
+
+  describe('active drawers take up all available space on the page and a third drawer is opened', () => {
+    test(
+      'active drawers can be shrunk to accommodate a third drawer',
+      setupTest(async page => {
+        await page.setWindowSize({ ...viewports.desktop, width: 1600 });
+        await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('circle2-global').toSelector());
+
+        // resize an active drawer to take up all available space
+        await page.dragAndDrop(wrapper.findActiveDrawerResizeHandle().toSelector(), -600);
+
+        await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+
+        await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(true);
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(true);
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle2-global')!.toSelector())).resolves.toBe(true);
+      })
+    );
+
+    test('first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1400px)', () => {
+      setupTest(async page => {
+        await page.setWindowSize({ ...viewports.desktop, width: 1400 });
+        await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('circle2-global').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(false);
+        await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(true);
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle2-global')!.toSelector())).resolves.toBe(true);
+      });
+    });
+
+    test('first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1200px)', () => {
+      setupTest(async page => {
+        await page.setWindowSize({ ...viewports.desktop, width: 1200 });
+        await page.click(wrapper.findDrawerTriggerById('circle').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('security').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
+        await page.click(wrapper.findDrawerTriggerById('circle2-global').toSelector());
+
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle')!.toSelector())).resolves.toBe(false);
+        await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(false);
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(true);
+        await expect(page.isClickable(findDrawerById(wrapper, 'circle2-global')!.toSelector())).resolves.toBe(true);
+      });
+    });
+  });
+});