feat: Left global panel

package.json

@@ -162,12 +162,12 @@
     {
       "path": "lib/components/internal/plugins/index.js",
       "brotli": false,
-      "limit": "15 kB"
+      "limit": "18 kB"
     },
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "840 kB",
+      "limit": "868 kB",
       "ignore": "react-dom"
     }
   ],

pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx

@@ -11,17 +11,19 @@ import SideNavigation, { SideNavigationProps } from '~components/side-navigation
 import SpaceBetween from '~components/space-between';
 
 import './utils/external-widget';
+import './utils/external-global-left-panel-widget';
 import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea from '../utils/screenshot-area';
 import { Tools } from './utils/content-blocks';
-import labels from './utils/labels';
+import { drawerLabels } from './utils/drawers';
+import appLayoutLabels from './utils/labels';
 
 function createView(name: string) {
   return function View() {
     return (
       <AppLayout
         data-testid="secondary-layout"
-        ariaLabels={labels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         breadcrumbs={
           name !== 'page2' && (
             <BreadcrumbGroup
@@ -68,7 +70,7 @@ export default function () {
       <AppLayout
         {...{ __disableRuntimeDrawers: true }}
         data-testid="main-layout"
-        ariaLabels={labels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         navigation={
           <SideNavigation
             activeHref={activeHref}

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

@@ -7,6 +7,7 @@ import { AppLayoutProps } from '~components/app-layout';
 
 import './utils/external-widget';
 import { Breadcrumbs, Containers } from './utils/content-blocks';
+import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 
 export default function WithDrawers() {
@@ -15,7 +16,7 @@ export default function WithDrawers() {
   return (
     <AppLayout
       ref={appLayoutRef}
-      ariaLabels={appLayoutLabels}
+      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
       breadcrumbs={<Breadcrumbs />}
       content={
         <ContentLayout

pages/app-layout/sidecar-demo.page.tsx

@@ -21,6 +21,7 @@ import {
 import { AppLayoutProps } from '~components/app-layout';
 
 import './utils/external-sidecar-widget-demo';
+import './utils/external-global-left-panel-widget';
 import AppContext, { AppContextType } from '../app/app-context';
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';

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

@@ -0,0 +1,88 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+
+import { Box } from '~components';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import { registerLeftDrawer } from '~components/internal/plugins/widget';
+
+const AIDrawer = () => {
+  return (
+    <Box padding="m">
+      <Box variant="h2" padding={{ bottom: 'm' }}>
+        Chat demo
+      </Box>
+      {new Array(100).fill(null).map((_, index) => (
+        <div key={index}>Tela content</div>
+      ))}
+    </Box>
+  );
+};
+
+registerLeftDrawer({
+  id: 'amazon-q',
+  resizable: true,
+  isExpandable: true,
+  defaultSize: 420,
+  preserveInactiveContent: true,
+
+  ariaLabels: {
+    closeButton: 'Close Amazon Q drawer',
+    content: 'Amazon Q',
+    triggerButton: 'Amazon Q',
+    resizeHandle: 'Resize handle',
+    expandedModeButton: 'Expanded mode button',
+    exitExpandedModeButton: 'Console',
+  },
+
+  trigger: {
+    customIcon: `
+      <svg width="94" height="24" viewBox="0 0 94 24" fill="none" focusable="false" aria-hidden="true">
+        <rect width="94" height="24" rx="4" fill="url(#paint0_linear_145_32649)"/>
+        <path d="M21.0848 7.31327L15.9128 4.25035C15.3485 3.91655 14.649 3.91655 14.0848 4.25035L8.914 7.31327C8.34976 7.64706 8 8.26965 8 8.93724V15.0631C8 15.7307 8.34976 16.3533 8.914 16.687L14.086 19.75C14.3675 19.9162 14.6844 20 15 20C15.3156 20 15.6325 19.9162 15.914 19.75L21.086 16.687C21.6502 16.3533 22 15.7307 22 15.0631V8.93724C22 8.26965 21.6502 7.64706 21.086 7.31327H21.0848ZM15.3034 18.6673C15.1158 18.7786 14.8818 18.7786 14.6941 18.6673L9.52333 15.6044C9.33565 15.4931 9.21866 15.2856 9.21866 15.0631V8.93724C9.21866 8.71471 9.33565 8.50718 9.52333 8.39591L14.6941 5.33299C14.788 5.27674 14.894 5.24923 14.9988 5.24923C15.1036 5.24923 15.2096 5.27674 15.3034 5.33299L20.4755 8.39591C20.6631 8.50718 20.7801 8.71471 20.7801 8.93724V14.7018L16.3174 12.0589V11.4363C16.3174 11.3026 16.2479 11.1788 16.1346 11.1113L15.1828 10.5475C15.0695 10.4799 14.9305 10.4799 14.8172 10.5475L13.8654 11.1113C13.7521 11.1788 13.6826 11.3026 13.6826 11.4363V12.564C13.6826 12.6978 13.7521 12.8215 13.8654 12.889L14.8172 13.4529C14.9305 13.5204 15.0695 13.5204 15.1828 13.4529L15.7068 13.1428L20.1659 15.7882L15.3047 18.6673H15.3034Z" fill="white"/>
+        <path d="M34.036 16L33.4 14.02H30.4L29.788 16H28.084L31.06 7.684H32.86L35.824 16H34.036ZM30.772 12.82H33.04L31.9 9.184L30.772 12.82ZM44.3382 16V11.848C44.3382 11.536 44.2702 11.308 44.1342 11.164C44.0062 11.012 43.8022 10.936 43.5222 10.936C43.0502 10.936 42.5782 11.064 42.1062 11.32V16H40.5102V11.848C40.5102 11.536 40.4422 11.308 40.3062 11.164C40.1782 11.012 39.9742 10.936 39.6942 10.936C39.2222 10.936 38.7502 11.064 38.2782 11.32V16H36.6822V9.88H38.0022L38.1462 10.48C38.5622 10.208 38.9422 10.012 39.2862 9.892C39.6302 9.764 39.9862 9.7 40.3542 9.7C41.0822 9.7 41.5902 9.964 41.8782 10.492C42.6622 9.964 43.4222 9.7 44.1582 9.7C44.7262 9.7 45.1622 9.856 45.4662 10.168C45.7782 10.48 45.9342 10.92 45.9342 11.488V16H44.3382ZM51.0638 16L50.9438 15.436C50.6798 15.668 50.3798 15.852 50.0438 15.988C49.7158 16.124 49.3918 16.192 49.0718 16.192C48.4958 16.192 48.0318 16.024 47.6798 15.688C47.3278 15.352 47.1518 14.908 47.1518 14.356C47.1518 13.764 47.3678 13.292 47.7998 12.94C48.2398 12.58 48.8158 12.4 49.5278 12.4C49.9438 12.4 50.3878 12.456 50.8598 12.568V11.92C50.8598 11.536 50.7758 11.272 50.6078 11.128C50.4478 10.976 50.1558 10.9 49.7318 10.9C49.0758 10.9 48.3558 11.028 47.5718 11.284V10.192C47.8678 10.04 48.2358 9.92 48.6758 9.832C49.1158 9.744 49.5598 9.7 50.0078 9.7C50.8158 9.7 51.4078 9.864 51.7838 10.192C52.1598 10.512 52.3478 11.024 52.3478 11.728V16H51.0638ZM49.5278 15.088C49.7358 15.088 49.9558 15.044 50.1878 14.956C50.4278 14.86 50.6518 14.728 50.8598 14.56V13.48C50.4438 13.408 50.0998 13.372 49.8278 13.372C49.0678 13.372 48.6878 13.668 48.6878 14.26C48.6878 14.524 48.7598 14.728 48.9038 14.872C49.0558 15.016 49.2638 15.088 49.5278 15.088ZM53.4919 16V14.848L56.7559 11.08H53.6119V9.88H58.5079V11.032L55.2199 14.8H58.5559V16H53.4919ZM62.2981 16.18C61.3541 16.18 60.6181 15.896 60.0901 15.328C59.5621 14.752 59.2981 13.952 59.2981 12.928C59.2981 11.912 59.5621 11.12 60.0901 10.552C60.6181 9.984 61.3501 9.7 62.2861 9.7C63.2301 9.7 63.9661 9.988 64.4941 10.564C65.0221 11.132 65.2861 11.928 65.2861 12.952C65.2861 13.968 65.0221 14.76 64.4941 15.328C63.9661 15.896 63.2341 16.18 62.2981 16.18ZM62.2981 14.944C63.2101 14.944 63.6661 14.28 63.6661 12.952C63.6661 11.608 63.2061 10.936 62.2861 10.936C61.3741 10.936 60.9181 11.6 60.9181 12.928C60.9181 14.272 61.3781 14.944 62.2981 14.944ZM70.5805 16V11.968C70.5805 11.608 70.5045 11.348 70.3525 11.188C70.2005 11.02 69.9645 10.936 69.6445 10.936C69.1885 10.936 68.7045 11.092 68.1925 11.404V16H66.5965V9.88H67.9165L68.0725 10.54C68.7845 9.98 69.5605 9.7 70.4005 9.7C70.9765 9.7 71.4165 9.856 71.7205 10.168C72.0245 10.472 72.1765 10.912 72.1765 11.488V16H70.5805ZM76.6628 11.836C76.6628 10.932 76.8268 10.152 77.1548 9.496C77.4908 8.84 77.9588 8.34 78.5588 7.996C79.1668 7.652 79.8748 7.48 80.6828 7.48C81.5228 7.48 82.2428 7.66 82.8428 8.02C83.4508 8.38 83.9108 8.888 84.2228 9.544C84.5428 10.192 84.7028 10.956 84.7028 11.836C84.7028 12.556 84.5988 13.2 84.3908 13.768C84.1828 14.336 83.8788 14.812 83.4788 15.196C83.0788 15.572 82.5988 15.844 82.0388 16.012C82.4228 16.204 82.8028 16.348 83.1788 16.444C83.5628 16.548 84.0188 16.62 84.5468 16.66V18.064C83.8508 17.984 83.1548 17.784 82.4588 17.464C81.7708 17.144 81.1188 16.72 80.5028 16.192C79.7028 16.168 79.0148 15.976 78.4388 15.616C77.8628 15.248 77.4228 14.744 77.1188 14.104C76.8148 13.456 76.6628 12.7 76.6628 11.836ZM78.3428 11.836C78.3428 12.812 78.5428 13.56 78.9428 14.08C79.3428 14.592 79.9228 14.848 80.6828 14.848C81.4428 14.848 82.0228 14.592 82.4228 14.08C82.8228 13.568 83.0228 12.82 83.0228 11.836C83.0228 10.86 82.8228 10.116 82.4228 9.604C82.0228 9.092 81.4428 8.836 80.6828 8.836C79.9228 8.836 79.3428 9.092 78.9428 9.604C78.5428 10.116 78.3428 10.86 78.3428 11.836Z" fill="white"/>
+        <defs>
+          <linearGradient id="paint0_linear_145_32649" x1="135.919" y1="21" x2="108.351" y2="74.1863" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#B8E7FF"/>
+            <stop offset="0.255" stop-color="#0099FF"/>
+            <stop offset="0.514134" stop-color="#5C7FFF"/>
+            <stop offset="0.732534" stop-color="#8575FF"/>
+            <stop offset="1" stop-color="#962EFF"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    `,
+  },
+
+  onResize: event => {
+    console.log('resize', event.detail);
+  },
+  onToggle: event => {
+    console.log('toggle', event.detail);
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<AIDrawer />, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+
+  mountHeader: container => {
+    ReactDOM.render(
+      <div style={{ inlineSize: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>Amazon Q</div>
+        <div>
+          <ButtonDropdown
+            items={[{ id: 'settings', text: 'Settings' }]}
+            ariaLabel="Amazon Q additional options"
+            variant="icon"
+          />
+          <Button iconName="add-plus" variant="icon" ariaLabel="Add a new chat" />
+        </div>
+      </div>,
+      container
+    );
+  },
+  unmountHeader: container => unmountComponentAtNode(container),
+});

pages/app-layout/with-drawers-scrollable.page.tsx

@@ -27,6 +27,7 @@ import {
   CustomDrawerContent,
   ScrollableDrawerContent,
 } from './utils/content-blocks';
+import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 import { splitPaneli18nStrings } from './utils/strings';
 
@@ -185,7 +186,7 @@ export default function WithDrawersScrollable() {
   return (
     <ScreenshotArea gutters={false}>
       <AppLayout
-        ariaLabels={appLayoutLabels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         breadcrumbs={<Breadcrumbs />}
         navigation={sideNavContents}
         ref={appLayoutRef}

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

@@ -237,26 +237,10 @@ describe('Visual refresh toolbar only', () => {
     );
 
     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('global-with-stored-state').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, 'global-with-stored-state')!.toSelector())).resolves.toBe(
-          true
-        );
-      })
-    );
-
-    test(
-      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1345px)',
+      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it',
       setupTest(async page => {
         // Give the toolbar enough horizontal space to make sure the triggers are not collapsed into a dropdown
-        await page.setWindowSize({ ...viewports.desktop, width: 1345 });
+        await page.setWindowSize({ ...viewports.desktop, width: 1400 });
         await page.click(wrapper.findDrawerTriggerById('circle').toSelector());
         await page.click(wrapper.findDrawerTriggerById('security').toSelector());
         await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());

src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts

@@ -17,7 +17,9 @@
     const expectedTooltipText = 'Open panel';
 
     const assertSplitPanelTriggerFocusedWithTooltip = async (page: AppLayoutDrawersPage) => {
-      await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBe(true);
+      await page.waitForAssertion(async () => {
+        await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBe(true);
+      });
       await expect(page.getText(tooltipSelector)).resolves.toBe(expectedTooltipText);
       await expect(page.getElementsCount(tooltipSelector)).resolves.toBe(1);
     };